Palette

Color Palette Generator

OKLCH 기반 브랜드 팔레트. 베이스를 고르면 모든 클래식 하모니와 50–950 톤 스케일을 한 번에. 잠그고, 다시 굴리고, CSS / Tailwind v4 / SCSS / JSON으로 내보내세요.

Color Palette Generator — TL;DR

OKLCH 기반 브랜드 팔레트. 베이스를 고르면 모든 클래식 하모니와 50–950 톤 스케일을 한 번에. 잠그고, 다시 굴리고, CSS / Tailwind v4 / SCSS / JSON으로 내보내세요.

Color Picker & Converter는 한 번에 한 가지 색을 다루는 도구입니다 — 고르고 / 변환하고 / 복사. 이 도구는 팔레트를 위한 도구입니다: 베이스 컬러를 입력하면 한 번에 브랜드에 바로 쓸 수 있는 시스템(하모니 + 톤 스케일)을 통째로 받습니다. 셔츠 한 장을 사는 것과 옷장 하나를 통째로 갖추는 것의 차이라고 보시면 됩니다.

HSL은 hue 간격이 균일하지 않습니다(같은 lightness 값이라도 60°의 노랑이 240°의 파랑보다 훨씬 밝게 느껴집니다). HSL로 만든 triadic 팔레트는 한 스와치가 다른 두 개보다 눈에 띄게 더 밝거나 칙칙합니다. OKLCH는 지각적으로 균일합니다 — 같은 OKLCH lightness의 세 스와치는 실제로 같은 밝기로 보입니다. 그래서 모든 현대적 디자인 시스템(Apple HI, Tailwind v4, IBM Carbon)이 하모니와 스케일에 OKLCH를 채택하고 있습니다.

브랜드 컬러는 절대 기기를 떠나지 않습니다. DevTools → Network를 열면 어떤 작업 중에도 외부 요청이 0개임을 확인할 수 있습니다.

팁: Space를 누르면 잠기지 않은 스와치가 다시 굴러갑니다.

톤 스케일 (50 → 950)
CSS
Tailwind v4
SCSS
JSON

예쁜 그림이 아니라, 디자인 시스템을 위해 만들어졌습니다

OKLCH 하모니, 톤 스케일, 잠금 후 다시 굴리기, 디자인 토큰 내보내기 — 그리고 사용을 즐겁게 만들어 주는 작은 디테일까지.

여섯 가지 OKLCH 하모니

Complementary, analogous, triadic, tetradic, split-complementary, monochromatic — 모두 OKLCH로 계산되어 채도 높은 세 컬러로 이루어진 triadic 팔레트도 균일한 밝기를 유지합니다. HSL 특유의 탁함이 없습니다.

50 → 950 톤 스케일

브랜드 컬러를 입력하면 OKLCH 곡선을 따라 lightness를 이동시켜 Tailwind 형태의 50, 100, 200, … 900, 950 톤 스케일을 생성합니다. 양 끝에서는 chroma가 압축되어 sRGB 색역을 벗어나지 않습니다.

잠금 + 다시 굴리기 (Coolors 스타일)

원하는 스와치를 고정(잠금 아이콘)하고 다시 굴리기를 누르거나(또는 Space) 선택한 하모니 안에서 나머지를 변형하세요. 빠르게 반복하고, 마음에 드는 것은 그대로 유지하세요.

프로덕션급 내보내기 4종

CSS custom properties (--brand-500), Tailwind v4 @theme 블록, SCSS map, 그리고 Style Dictionary / Figma Tokens에 바로 쓸 수 있는 JSON 디자인 토큰. 추가로 1200×200 PNG 스와치 스트립까지.

WCAG 명도 대비를 한눈에

모든 스와치는 검정 또는 흰색 중 더 나은 쪽을 기준으로 WCAG 대비비를 표시하고, AA / AAA / fail 배지를 함께 보여줍니다. 출시 전에 접근성 문제를 발견하세요.

설계 단계부터 프라이버시

모든 바이트가 기기에 머무릅니다. OKLCH 계산, 하모니 생성, 스케일 도출, PNG 내보내기까지 전부 로컬 JavaScript로 실행됩니다. DevTools → Network를 열고 외부 요청이 0개임을 직접 확인해 보세요.

브랜드 팔레트 만드는 방법

베이스 컬러 하나에서 디자인 토큰까지, 4단계로 완성합니다.

  1. 1

    브랜드 베이스 컬러 입력

    컬러 박스를 클릭하거나, HEX를 붙여넣거나, 영감이 필요하면 랜덤 베이스를 누르세요. 이 색을 기준으로 하모니 스와치와 11단계 톤 스케일까지 팔레트 전체가 구성됩니다.

  2. 2

    하모니 선택

    기본값은 Analogous — 베이스에서 30° 이내의 세 색상으로, 차분한 브랜드 팔레트에 적합합니다. 강조 대비에는 Complementary, 에디토리얼 / 활기찬 브랜드에는 Triadic / Tetradic, 단색조 시스템에는 Monochromatic. 모두 OKLCH로 계산되어 균일한 밝기를 유지합니다.

  3. 3

    마음에 들 때까지 잠그고 다시 굴리기

    유지하고 싶은 스와치의 잠금 아이콘을 클릭한 뒤, Space를 누르거나 다시 굴리기를 눌러 하모니 안에서 나머지를 변형하세요. 빠르게 반복하세요. 정확한 값이 필요하면 HEX 필드를 클릭해 직접 수정할 수 있습니다.

  4. 4

    디자인 토큰으로 내보내기

    CSS 출력(custom properties), Tailwind v4(@theme 블록), SCSS map, 또는 JSON 디자인 토큰을 복사하세요. 또는 PNG 다운로드로 디자인 브리프에 바로 넣을 수 있는 1200×200 스와치 스트립을 받으세요.

브랜드 디자이너와 디자인 시스템 팀을 위해

Figma에서 hex 코드를 손으로 다듬는 것보다 프라이버시 우선 OKLCH 팔레트 도구가 빛을 발하는 네 가지 시나리오.

새 브랜드 아이덴티티 스프린트

브랜드 컬러는 있고, 그 주변의 시스템이 필요합니다. HEX를 입력하고 Analogous를 선택한 뒤, 두 개의 보조 컬러가 마음에 들 때까지 다시 굴리고 셋 모두 잠그세요. 톤 스케일 뷰로 전환해 Tailwind @theme 블록을 복사하고 새 프로젝트의 app.css에 붙여넣으면 됩니다. 총 5분.

기존 Tailwind 프로젝트에 브랜드 추가

Tailwind의 기본 indigo는 당신의 브랜드가 아닙니다. 당신의 브랜드는 #5B3FCD입니다. 입력하면 Tailwind의 간격을 그대로 닮은 11단계 톤 스케일이 만들어집니다. @theme 블록을 복사하면 모든 bg-brand-500 / text-brand-700이 그대로 동작합니다.

출시 전 접근성 점검

모든 스와치에 WCAG 명도 대비비와 AA/AAA 배지가 표시됩니다. brand-500이 흰색 위에서 AA를 충족하는지, brand-100 배경 위에 brand-900 텍스트가 가독성을 유지하는지 빠르게 확인하세요. 문제가 있는 스와치만 따로 다시 굴려 해결할 수 있습니다.

멀티 브랜드 디자인 시스템

에이전시나 멀티 브랜드 회사는 같은 형태에 서로 다른 브랜드 hue를 갖는 N개의 디자인 시스템을 병렬로 운영합니다. 모든 브랜드에 동일한 하모니 + 톤 스케일 워크플로를 적용하고 각각 JSON 토큰으로 내보내 Style Dictionary에 투입하세요. 동일한 형태, 고유한 아이덴티티.

100% 프라이빗 — 브라우저에서 실행

브랜드 컬러는 절대 기기를 떠나지 않습니다. DevTools → Network를 열면 어떤 작업 중에도 외부 요청이 0개임을 확인할 수 있습니다.

  • OKLCH 계산, 하모니 생성, 톤 스케일 도출, WCAG 명도 대비 계산, PNG 내보내기까지 전부 기기 위의 JavaScript로 실행됩니다 — 서버 사이드 렌더링도, 서드파티 API도 없습니다.
  • PNG 내보내기는 로컬 canvas를 사용합니다. 스와치 이미지는 전적으로 브라우저 메모리에서 생성되어 Blob으로 다운로드됩니다 — 네트워크를 거치지 않습니다.
  • 로그인도, 색상 값에 대한 텔레메트리도 없습니다. 쿠키는 쿠키 동의 상태용 하나와 언어 설정용 하나만 사용합니다.

관련 가이드

OKLCH 팔레트, 브랜드 컬러 시스템, 디자인 토큰에 대해 엄선한 글들.

자주 묻는 질문

일반적인 컬러 피커와 무엇이 다른가요?

Color Picker & Converter는 한 번에 한 가지 색을 다루는 도구입니다 — 고르고 / 변환하고 / 복사. 이 도구는 팔레트를 위한 도구입니다: 베이스 컬러를 입력하면 한 번에 브랜드에 바로 쓸 수 있는 시스템(하모니 + 톤 스케일)을 통째로 받습니다. 셔츠 한 장을 사는 것과 옷장 하나를 통째로 갖추는 것의 차이라고 보시면 됩니다.

왜 HSL이 아니라 OKLCH인가요?

HSL은 hue 간격이 균일하지 않습니다(같은 lightness 값이라도 60°의 노랑이 240°의 파랑보다 훨씬 밝게 느껴집니다). HSL로 만든 triadic 팔레트는 한 스와치가 다른 두 개보다 눈에 띄게 더 밝거나 칙칙합니다. OKLCH는 지각적으로 균일합니다 — 같은 OKLCH lightness의 세 스와치는 실제로 같은 밝기로 보입니다. 그래서 모든 현대적 디자인 시스템(Apple HI, Tailwind v4, IBM Carbon)이 하모니와 스케일에 OKLCH를 채택하고 있습니다.

'톤 스케일 (50 → 950)'이란 무엇인가요?

Tailwind 스타일의 브랜드 컬러 스케일입니다: indigo-50(가장 밝음), indigo-100, indigo-200, … indigo-900, indigo-950(가장 어두움). 브랜드 컬러를 입력하면 OKLCH lightness를 고정된 곡선을 따라 이동시키며 11단계를 자동 생성합니다. 결과물은 어떤 Tailwind 팔레트 토큰이든 그대로 대체할 수 있는, 브랜드 hue로 만들어진 스케일입니다.

스와치를 잠그고 나머지만 다시 굴리려면?

스와치 좌상단의 잠금 아이콘을 클릭하면 그 색은 고정됩니다. 그런 다음 다시 굴리기를 누르거나 Space를 눌러 선택된 하모니 안에서 잠기지 않은 모든 스와치를 변형하세요. 좋은 팔레트를 찾는 방법이 바로 이것입니다: 이미 확정한 브랜드 컬러를 고정한 채 그 주변의 변형을 탐색하는 거죠.

서버로 전송되는 데이터가 있나요?

없습니다. OKLCH 계산, 하모니 생성, 톤 스케일 도출, 명도 대비 계산, PNG 내보내기, 클립보드 복사 — 모두 기기 위의 JavaScript로 실행됩니다. DevTools → Network를 열어보면 외부 요청이 0개입니다. 브랜드 컬러, 내부 디자인 토큰, NDA로 묶인 팔레트를 붙여넣어도 노트북 밖으로 나가는 것은 아무것도 없습니다.