🏠 우아하우스 패밀리 사이트 · 도구모음
🎨

Tints & Shades 생성기 — 색상 밝기 변형 20단계

색상 하나로 밝은 계열(Tints) 10단계 + 어두운 계열(Shades) 10단계를 즉시 생성합니다

기준 색상 선택
☀️ Tints — 밝은 계열 원색 + 흰색 혼합
⬛ 원색 (Base Color)
🌙 Shades — 어두운 계열 원색 + 검정 혼합

자주 묻는 질문

Q. Tints와 Shades의 차이는 무엇인가요?

Tints는 원래 색상에 흰색을 혼합하여 밝게 만든 변형이고, Shades는 검정을 혼합하여 어둡게 만든 변형입니다. 두 방향 모두 10단계로 표시됩니다.

Q. Tailwind CSS 변수로 복사한다는 게 무슨 뜻인가요?

--color-50, --color-100 ~ --color-950 형태의 CSS 변수로 정리해서 클립보드에 복사합니다. CSS :root 블록에 그대로 붙여넣어 사용할 수 있습니다.

Q. 스와치를 클릭하면 어떻게 되나요?

해당 색상의 HEX 코드가 클립보드에 복사됩니다. 마우스를 올리면 HEX, RGB, HSL 정보가 툴팁으로 표시됩니다.

Q. 생성된 색상을 디자인 도구에서 바로 사용할 수 있나요?

각 스와치의 HEX 코드를 클릭해 복사하거나, CSS 변수 복사 버튼으로 전체를 한꺼번에 가져갈 수 있어 Figma, VS Code 등 어디서든 바로 활용 가능합니다.