다크 모드 팔레트 변환

Dark Mode Palette

색 하나에서 50~950 램프를 만들고 뒤집어 다크 램프로 만들어, 토큰 짝마다 대비를 그대로 유지합니다.

라이트 램프를 뒤집어 다크 램프를 만듭니다. 50단계가 950이 되고, 100이 900이 되는 식입니다. 토큰 이름이 뜻하는 바를 유지하는 유일한 방식이라, 라이트 모드에서 WCAG를 통과하던 짝이 다크 모드에서도 같은 비율로 통과하고, 이 스케일을 쓰는 컴포넌트는 고칠 것이 없습니다. 색상 단계 생성과 같은 페이지이고 다크 탭으로 열린 것입니다.

🔒 브라우저 안에서만 처리dark-modepalettethemea11y

기준 색

색

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

램프

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

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

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

다크 모드

다크 스케일 만들기

방식

채도 감쇠: 85%어두운 바탕 위의 채도 높은 색은 번지고 떨려 보입니다. 넓게 칠할 색이라면 채도를 낮추는 쪽이 안전합니다.

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

라이트

100

200

300

400

500

600

700

800

900

950

다크

100

200

300

400

500

600

700

800

900

950

뒤집는 이유: 토큰 짝의 대비가 유지됩니다

900 위의 50: 라이트 8.93 · 다크 12.73
800 위의 100: 라이트 6.68 · 다크 7.19
950 위의 200: 라이트 11.16 · 다크 7.19

토큰 이름의 뜻이 그대로여서, 이 스케일을 쓰고 있는 컴포넌트는 고칠 것이 전혀 없습니다.

내보내기

접두사

: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);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-50: oklch(27.79% 0.0639 259.81);
    --brand-100: oklch(39.46% 0.0959 259.81);
    --brand-200: oklch(44.61% 0.1183 259.81);
    --brand-300: oklch(51.49% 0.1406 259.81);
    --brand-400: oklch(59.78% 0.1582 259.81);
    --brand-500: oklch(68.27% 0.1425 259.81);
    --brand-600: oklch(75.35% 0.1077 259.81);
    --brand-700: oklch(84.05% 0.0674 259.81);
    --brand-800: oklch(90.55% 0.0389 259.81);
    --brand-900: oklch(95.04% 0.0201 259.81);
    --brand-950: oklch(97.72% 0.0091 259.81);
  }
}

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

사용 방법

기준 색을 넣습니다
색 하나면 됩니다. 라이트 램프를 먼저 만들고 거기서 다크 램프를 끌어내므로, 둘을 따로 관리하는 대신 같은 씨앗에서 나옵니다.
방식을 고릅니다
기본값은 뒤집기이고, 대비에 관한 근거가 붙는 방식입니다. 어둡게 밀기는 뒤집는 대신 모든 단계를 세 칸씩 내리는데, 순서가 유지되어 밝음에서 어두움으로 가는 그라디언트가 뒤집히지 않는 대신 가장 어두운 단계들을 잃습니다. 뒤집고 채도 낮추기는 뒤집으면서 채도를 더 내린 것입니다.
넓게 칠할 색은 채도를 낮춥니다
어두운 바탕 위의 채도 높은 색은 번지고 떨려 보이고, 면적이 클수록 심해집니다. 채도를 낮추는 쪽이 안전한 선택입니다. 작은 강조나 글자에만 쓸 스케일이라면 100% 가까이 두어도 됩니다.
근거 패널을 봅니다
뒤집기를 켜면 토큰 짝 세 개의 WCAG 비율을 라이트와 다크 양쪽에서 나란히 보여 줍니다. 주장을 그냥 하는 대신 눈앞에서 검증해 보이는 부분입니다.
두 스케일을 함께 내보냅니다
CSS 형태는 라이트 스케일을 `:root`에, 다크 스케일을 `prefers-color-scheme: dark` 블록 안에 내보냅니다. 테마 전체를 한 번에 붙여넣을 수 있습니다.

자주 묻는 질문

이미 쓰는 라이트 팔레트를 붙여넣을 수 있나요?

묶음으로는 안 됩니다. 이 페이지는 색 하나에서 두 램프를 만들기 때문에, 손으로 다듬은 단계가 있는 기존 팔레트를 색 하나씩 넣어도 그대로 나오지 않습니다. 규칙적인 열한 단계가 나올 뿐 원래의 열한 단계가 아닙니다. 규칙성보다 기존 팔레트가 중요하다면 토큰 하나씩 옮기면서 각 짝을 대비 검사기로 확인하세요.

뒤집으면 대비가 정확히 보존되나요?

가깝게 보존되지만 정확히는 아닙니다. 램프는 OKLCH 밝기에서 대칭이고 WCAG 대비는 상대 휘도로 계산하는데, 둘은 선형 관계가 아닙니다. 그래서 비율이 서로 가깝게 나올 뿐 같지는 않습니다. 근거 패널이 두 값을 모두 찍어 주므로, 주장을 믿는 대신 자기 색에서의 차이를 직접 볼 수 있습니다.

다크 모드 배경을 순수한 검정으로 해야 하나요?

보통은 아닙니다. 순수한 검정에 밝은 글자를 올리면 대비가 최대가 되는데, LCD에서는 그때 생기는 번짐 때문에 작은 글자가 오히려 읽기 어려워집니다. 여기 다크 줄을 아주 어두운 회색 위에서 미리 보여 주는 이유입니다. 진짜 검정이 실제로 이득인 경우는 OLED 화면의 전력 정도입니다.