단색 팔레트이란?
기본 색상을 선택하고 그 색에서 어두운 음영과 밝은 틴트를 생성하세요. 단계 수를 설정한 뒤 CSS 변수, Tailwind 구성으로 내보내거나 개별 hex/RGB 값을 복사하세요.
HEX 값을 직접 입력하거나 색상 선택기로 고른 뒤, 틴트(밝게), 톤(회색 혼합), 셰이드(어둡게)의 단계 수를 정하면 LAB 색공간에서 균일하게 보간됩니다. 각 스와치에는 HEX·RGB·HSL이 함께 표시되며 한 번 클릭으로 복사할 수 있고, 전체 복사로 스케일 전체를 한 번에 가져옵니다. 틴트만, 톤만, 셰이드만 보도록 필터링하거나 CSS 커스텀 속성, Tailwind 설정 스니펫, SCSS 변수, JSON 디자인 토큰, PNG 스와치 시트로 전체 스케일을 한꺼번에 내보낼 수 있습니다.
사용 방법
- 색상 선택기로 기준 색을 고르거나 HEX 코드를 입력하거나, ‘이미지에서’로 로고나 사진의 주요 색을 바로 가져오세요.
- 원하는 만큼 틴트(밝게), 톤(회색 혼합), 셰이드(어둡게) 단계 수를 조정하고, 한 줄만 보고 싶다면 「표시」 필터로 좁히세요.
- 개별 색상 값을 복사하거나, 전체 복사를 눌러 모든 HEX를 한 번에 가져오거나, 전체 팔레트를 CSS 사용자 정의 속성, Tailwind 구성 객체, SCSS 변수, JSON 디자인 토큰, 또는 이미지 스와치로 내보내세요.
사용 시기
- UI 디자인 시스템을 만들 때, 브랜드 색을 컴포넌트 전반에 일관된 9단계로 펼쳐야 할 때.
- 히트맵·단색 막대 그래프처럼 모든 시리즈가 같은 색상에서 파생돼야 하는 데이터 시각화 작업.
- 본문/배경 조합을 정할 때, -100 배경에 -900 글자를 두면 명도 대비가 안전권에 들어옵니다.
결과
대시보드를 만들면서 데이터 시각화를 위한 파란색 팔레트가 필요합니다. #3B82F6을 기본 색상으로 선택하고, 거의 흰색부터 거의 검정까지 9단계를 생성합니다. CSS 변수로 내보내어 차트 전반에 --color-blue-100부터 --color-blue-900까지 사용합니다.
자주 묻는 질문
- 모노크로매틱 팔레트가 정확히 뭔가요?
- 색상(Hue)은 같고 채도와 명도만 다른 색들의 묶음입니다. 동일한 파랑이나 초록의 진하기 차이로 읽혀서, 서로 다른 색상을 섞었을 때 생기는 시각적 소음이 사라집니다.
- 단계 수는 몇 개가 적당한가요?
- UI에서는 9단계가 표준입니다(Tailwind, Material, IBM Carbon 모두 50~900의 10단계 체계). 데이터 시각화에서는 5~7단계로 충분한 경우가 많고, 11단계가 넘으면 그라데이션처럼 보여 인접 단계를 구분하기 어렵습니다.
- 어떤 포맷으로 내보내야 하나요?
- CSS 변수는 어떤 스타일시트에도 그대로 붙입니다. Tailwind 스니펫은 theme.extend.colors에 넣으면 bg-brand-500 같은 유틸리티가 바로 생깁니다. SCSS는 $brand-500 변수와 Sass 맵을 함께 제공합니다. JSON은 스케일을 구조화된 디자인 토큰으로 내보내 style dictionary에 바로 넣을 수 있습니다. PNG 스와치는 Figma나 브랜드 문서에 공유할 때 좋습니다.
- 가장 밝은 단계가 거의 흰색처럼 보여요. 왜 그런가요?
- 명도가 매우 높아지면 어떤 채도의 색이라도 눈에는 흰색에 가깝게 보입니다. -100이 흰색과 구분되지 않으면 밝은 단계의 수를 줄이거나 명도 상한을 베이스 색에 가깝게 당겨 보세요. 인접 단계의 차이가 다시 보입니다.
- 생성된 색이 접근성 기준을 만족하나요?
- 이제 여기서 바로 확인할 수 있습니다. WCAG 대비 배지를 켜면 각 스와치 위에서 검은색 또는 흰색 텍스트가 AA나 AAA를 통과하는지 표시되고, 색각 미리보기는 녹색맹·적색맹·청색맹인 사람이 보는 방식으로 스케일을 다시 칠합니다. 간단한 규칙으로 -100/-200 단계와 -700/-800 단계를 짝지으면 대개 WCAG AA를 통과합니다.