색상 단계 생성

Tint & Shade Scale

한 색에서 체감상 고른 간격의 50~950 명도 단계를 만들어 디자인 토큰으로 바로 씁니다.

색 하나에서 50부터 950까지의 램프를 만듭니다. 디자인 시스템이 원하는 형태입니다. 각 단계의 밝기 목표값은 손으로 고른 것이 아니라 설치된 Tailwind 패키지에서 측정한 유채색 계열들의 평균이라, 각 단계가 눈이 이미 기대하는 자리에 놓입니다. 슬라이더로 그 익숙한 곡선과 균등 간격 사이를 오갈 수 있습니다.

🔒 브라우저 안에서만 처리colorscaletokenstailwind

기준 색

색

색상과 채도가 램프의 씨앗이 되고, 밝기는 어느 단계에 고른 색 표시가 붙을지를 정합니다.

램프

측정된 곡선 반영: 100%0이면 0.97에서 0.25까지의 직선이라 간격은 더 고르지만 덜 익숙합니다. 100%면 사람들이 이미 머릿속에 가진 곡선과 같아집니다.색상 이동: 0°Tailwind의 색 계열도 색상이 이동합니다. 빨강은 50단계 17도에서 950단계 26도까지 가는데, 어두운 빨강은 조금 따뜻해야 더 낫게 읽히기 때문입니다.최대 채도: 기준 색에서 가져옴

모든 단계를 sRGB 안에 두기끄면 색역을 넘는 단계를 그대로 둡니다. P3 화면은 그 색을 보여 주지만 16진수로는 표현할 수 없습니다.

각 단계의 밝기 목표값은 여기서 정한 것이 아니라 설치된 Tailwind 패키지에서 측정한 유채색 계열들의 평균입니다.

다크 모드

다크 스케일 만들기

50단계가 950이 되고 100이 900이 되는 식입니다. 토큰 이름의 뜻이 그대로 유지되어 500은 여전히 중간 톤이고, 이 스케일을 쓰는 컴포넌트는 고칠 것이 전혀 없습니다.

라이트

100

200

300

400

500

600

700

800

900

950

내보내기

접두사

:root {
  --brand-50: oklch(97.72% 0.0107 259.81);
  --brand-100: oklch(95.04% 0.0236 259.81);
  --brand-200: oklch(90.55% 0.0458 259.81);
  --brand-300: oklch(84.05% 0.0793 259.81);
  --brand-400: oklch(75.35% 0.1267 259.81);
  --brand-500: oklch(68.27% 0.1677 259.81);
  --brand-600: oklch(59.78% 0.1861 259.81);
  --brand-700: oklch(51.49% 0.1655 259.81);
  --brand-800: oklch(44.61% 0.1391 259.81);
  --brand-900: oklch(39.46% 0.1128 259.81);
  --brand-950: oklch(27.79% 0.0752 259.81);
}

한 색상의 램프가 아니라 여러 색상이 필요하다면 팔레트 생성이 배색을 만들어 줍니다. 이 색들과 가장 가까운 Tailwind 토큰을 찾으려면 근접 색 찾기가 ΔE로 재 줍니다.

사용 방법

기준 색을 넣습니다
색상과 채도가 램프의 씨앗이 됩니다. 밝기는 어느 단계에 테두리가 그려질지, 즉 가져온 색에 가장 가까운 단계가 어디인지를 정합니다.
곡선을 얼마나 익숙하게 할지 정합니다
100%면 Tailwind가 놓는 자리에 단계가 놓이고, 그건 팀 전원이 이미 머릿속에 가진 배치입니다. 0이면 0.97에서 0.25까지의 직선이 되어 간격은 더 고르지만 덜 익숙합니다. 정답은 없고, 기존 제품과 맞춰야 한다면 보통 100%에 둡니다.
어두운 쪽이 어색하면 색상 이동을 씁니다
실제 색 계열은 색상이 조금씩 이동합니다. Tailwind의 빨강은 50단계 17도에서 950단계 26도까지 가는데, 어두운 빨강은 조금 따뜻한 쪽이 더 낫게 읽히기 때문입니다. 보통 몇 도면 충분하고 슬라이더는 양쪽으로 40도까지 갑니다.
sRGB 안에 머물지 정합니다
켜면 모든 단계가 어느 화면에서나 나오는 색이고 16진수가 정확합니다. 끄면 채도가 높은 색상의 중간 단계가 채도를 유지해서 P3 화면에서 그대로 보이고, 16진수는 근사치가 됩니다. 넘친 단계에는 표시가 붙습니다.
변수·Tailwind 테마·JSON으로 내보냅니다
접두사는 직접 정하면 됩니다. JSON 형태에는 밝기 기준값도 함께 들어 있어서, 뒤쪽 어딘가에서 같은 램프를 다시 만들어야 할 때 쓸 수 있습니다.

자주 묻는 질문

브랜드 색 16진수가 램프 어디에도 없는데 문제인가요?

아닙니다. 오히려 정직한 동작입니다. 램프는 밝기 목표값에서 만들어지지 가져온 색을 관통하도록 만들어지지 않습니다. 그래서 그 색이 열한 개 목표값 중 하나에 정확히 걸리지 않으면 그대로는 나오지 않습니다. 테두리가 쳐진 단계가 가장 가까운 것입니다. 그 16진수가 반드시 들어가야 한다면 그 토큰만 직접 쓰고 나머지를 램프에서 가져오세요.

이게 Tailwind 색인가요?

아닙니다. Tailwind에서 가져온 것은 곡선의 *모양*, 즉 유채색 계열들을 평균 낸 열한 개 밝기 값뿐입니다. 색상과 채도는 직접 넣은 것입니다. 가진 색과 가장 가까운 Tailwind 토큰을 찾으려면 근접 색 찾기가 ΔE로 재 줍니다.

"체감상 고르다"는 게 모든 단계 간격이 같다는 뜻인가요?

기준 곡선 반영이 0%일 때만 그렇습니다. 100%에서는 일부러 Tailwind 곡선을 따르는데, 그 곡선은 균등하지 않고 밝은 쪽에 단계가 몰려 있습니다. 배경으로 쓸 만한 옅은 색을 충분히 확보하기 위해서입니다. 어느 쪽이든 OKLCH를 쓰는 이득은 숫자가 지각과 대응한다는 것이고, 그래서 이렇게 만든 두 계열이 서로 발을 맞춥니다.

단계끼리 WCAG를 통과하나요?

이 페이지는 다크 모드 탭의 근거 패널을 빼면 그것을 검사하지 않습니다. 밝기 간격이 고르다고 대비 간격이 고른 것은 아닙니다. WCAG 대비는 상대 휘도로 계산하는데 OKLCH 밝기는 그것의 선형 함수가 아니기 때문입니다. 실제로 쓸 두 색을 대비 검사기로 가져가세요.