컬러 팔레트 생성기 · 한 색에서 조화로운 팔레트

:root { --color-brand-50: #f9fafe; --color-brand-100: #f0f3fc; --color-brand-200: #dfe6f9; --color-brand-300: #c8d3f4; --color-brand-400: #a4b5eb; --color-brand-500: #788fde; --color-brand-600: #5269cf; --color-brand-700: #3647ab; --color-brand-800: #24317b; --color-brand-900: #151d50; --color-brand-950: #0a1034; }

언제 쓰나

좋아하는 색 하나가 있는데, 그보다 밝은 버전·어두운 버전이 필요할 때 씁니다. 브랜드 색을 정하고 웹사이트·앱의 배경·테두리·호버 상태에 같은 색 계열로 단계를 만들 때 유용합니다. 11 단계(아주 밝음 → 아주 어두움)가 자동으로 나옵니다.

왜 자연스럽게 보이나

일반 색 도구로 밝기를 10% 씩 올리면 실제로 눈에 보이는 변화 폭이 색마다 다릅니다 (노란색은 확 밝아지고 파란색은 덜 밝아짐). 이 도구는 사람 눈에 실제로 느껴지는 밝기 차이가 같도록 조정합니다.

색 영역 자동 보정

너무 선명한 색을 요청하면 일부 모니터에서 제대로 표시되지 않을 수 있습니다. 표시 가능한 범위로 자동 조정해 결과를 안정시킵니다.

네 가지 형식으로 내보내기

CSS 변수 (hex) — #3a4bd0 같은 가장 널리 쓰이는 색 표기. 어떤 프로젝트에도 그대로 붙여넣을 수 있습니다.
CSS 변수 (oklch) — 최신 브라우저용 새로운 색 표기. 오래된 브라우저는 hex 쪽을 쓰세요.
Tailwind 설정 — Tailwind 로 만든 사이트의 설정 파일에 바로 붙여넣는 형식.
JSON — 피그마나 다른 디자인 도구로 색을 넘길 때.

입력한 색은 페이지 밖으로 안 나갑니다

OKLCH 색공간 변환과 11-stop 스케일 생성 모두 culori 라이브러리 + 클라이언트 산술. 외부 통신 없이 페이지 안에서만 처리됩니다.

자주 묻는 질문

OKLCH 와 HEX 의 차이가 뭔가요?

OKLCH 는 사람이 인지하는 밝기·채도·색상이 분리된 색공간입니다. HEX (sRGB) 는 화면 픽셀 값 그대로라 같은 명도라도 인지 차이가 큽니다. 디자인 토큰을 균일한 단계로 만들 때 OKLCH 가 유리합니다.

11-stop 스케일은 어떤 용도로 쓰나요?

Tailwind v4 처럼 50 · 100 ~ 950 의 11 단계 색 스케일을 자동으로 만들어 줍니다. 브랜드 색 1개로 라이트/다크 변형을 구할 때, 또는 디자인 시스템 토큰 일괄 생성 시 사용.

출력된 CSS·Tailwind·JSON 은 바로 프로젝트에 붙여 쓸 수 있나요?

네. CSS 변수 (`--brand-50`...), Tailwind v4 `@theme` 블록, JSON 형식 모두 즉시 복사 가능합니다. 접두사도 prefix 입력으로 변경 가능.