색상 → CSS 변수

어떤 색상에서든 CSS 변수·음영·토큰 생성.

기본 색상

음영 스케일 (50 → 900)

eff0fe

100

e0e0fc

200

c1c2f9

300

a1a3f7

400

8285f4

500

6366f1

600

4f52c1

700

3b3d91

800

282960

900

141430

HEX

#6366F1

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

생성된 CSS

:root {
  --color-50: #eff0fe;
  --color-100: #e0e0fc;
  --color-200: #c1c2f9;
  --color-300: #a1a3f7;
  --color-400: #8285f4;
  --color-500: #6366f1;
  --color-600: #4f52c1;
  --color-700: #3b3d91;
  --color-800: #282960;
  --color-900: #141430;
  --color: #6366f1;
}

작동 방식

기준 색을 선택합니다.
도구가 그로부터 CSS 커스텀 속성, 틴트, 셰이드, 토큰을 생성합니다.
셰이드 스케일을 미리 봅니다.
CSS 변수를 스타일시트에 복사합니다.

주요 용도

디자인 시스템용 색상 스케일을 만듭니다.
브랜드 색에서 틴트와 셰이드를 생성합니다.
바로 붙여넣을 수 있는 CSS 커스텀 속성을 만듭니다.

참고 사항

셰이드는 알고리즘으로 생성됩니다. 지각적 균일함을 위해 디자이너가 개별 단계를 조정할 수 있습니다.
색상 토큰을 만듭니다. 레이아웃과 간격 토큰은 범위 밖입니다.

자주 묻는 질문

색 하나에서 무엇을 생성하나요?

CSS 커스텀 속성 세트와 틴트·셰이드(색상 스케일)로, 디자인 토큰으로서 스타일시트에 바로 넣을 수 있습니다.

셰이드가 지각적으로 균일한가요?

일관된 명도 알고리즘을 따르므로 강력한 시작점입니다. 브랜드가 정확한 값을 요구하면 개별 단계를 미세 조정하세요.

업로드되는 것이 있나요?

아니요. 모든 것이 브라우저에서 로컬로 생성됩니다.

색상 → CSS 변수

음영 스케일 (50 → 900)

작동 방식

주요 용도

참고 사항

자주 묻는 질문

색 하나에서 무엇을 생성하나요?

셰이드가 지각적으로 균일한가요?

업로드되는 것이 있나요?

관련 도구

작동 방식

주요 용도

참고 사항

자주 묻는 질문

색 하나에서 무엇을 생성하나요?

셰이드가 지각적으로 균일한가요?

업로드되는 것이 있나요?