색상 도구 & 팔레트 2026 — Coolors / Tailwind / Radix Colors / Open Color / OKLCH / APCA / Polychrom / Stark 심층 가이드

1장 · 2026년 색상 도구의 지도 — 생성기 / 시스템 / 접근성 / CSS 네 분류

색상 도구는 2026년 기준 네 갈래로 정리된다. 어느 한 도구도 모든 일을 다 하지 못한다. 좋은 디자이너·개발자는 이 네 카테고리를 모두 알고, 상황에 맞게 골라 쓴다.

분류	대표 도구	목적
팔레트 생성기 (Palette Generator)	Coolors, Khroma, Adobe Color, paletton, ColorHexa	영감 → 5색 팔레트 추출
디자인 시스템 색상 (Design System Colors)	Tailwind, Radix Colors, Open Color, Material Theme Builder, Eva Design	200–950 또는 1–12 단계 스케일
접근성 검사 (Accessibility)	Stark, Polychrom, Atmos, Color.review, APCA tester	명도 대비 / 색맹 시뮬레이션
CSS 색 함수 (CSS Color Functions)	color-mix(), oklch(), color-contrast(), light-dark()	코드에서의 색 연산

여기에 두 가지 보조 카테고리가 더 있다. 이미지에서 색을 뽑는 도구 (color-thief, ImagePalette, dthemr)와 데이터 시각화 전용 팔레트 (viridis/inferno/magma, ColorBrewer)다. 이 둘은 “예쁜 색”이 아니라 정확한 색이 필요한 영역이다.

2026년의 큰 흐름은 세 가지다.

OKLCH 네이티브 — Tailwind v4가 RGB 16진수를 버리고 OKLCH를 기본 색공간으로 채택했다. CSS도 oklch() 함수를 보편적으로 지원한다.
APCA가 WCAG 2를 대체 중 — WCAG 2의 명도 대비 공식은 1998년의 sRGB 가정 위에 만들어졌고, 어두운 배경에서 부정확하다는 비판이 누적됐다. APCA(Accessible Perceptual Contrast Algorithm)가 그 자리를 빠르게 대체하고 있다. WCAG 3 드래프트에 채택되었다.
AI 팔레트의 일상화 — Coolors의 AI 모드, Khroma, Adobe의 Firefly 통합 등으로 “기분에 맞는 5색”이 1초 만에 나온다. 단, AI는 “접근성과 디자인 시스템” 영역에서는 여전히 사람을 대체하지 못한다.

이 글의 모든 코드는 Chrome 130+, Safari 18+, Firefox 130+를 가정한다. 폴리필이 필요한 한 줄도 없다.

2장 · Coolors — Series A 이후의 AI 팔레트 표준

Coolors는 2015년 Fabrizio Bianchi가 만든 1인 프로젝트로 시작해, 2023년 Series A를 유치하며 색상 도구 카테고리의 사실상 표준이 되었다. 2026년 기준 등록 사용자는 1,000만 명을 넘었고, 매월 생성되는 팔레트는 수십 억 개 단위다.

핵심 기능 세 가지

Space bar generator — 스페이스 한 번에 새로운 5색 팔레트. 마음에 드는 색은 자물쇠로 잠그면 다른 색만 다시 추첨된다. 단순하지만 중독성 있다.
AI Palette (2023~) — “sunset over Tokyo”, “Tossbank login screen”, “재무제표 대시보드” 같은 자연어로 색을 만든다. 내부적으로 Coolors가 학습시킨 자체 모델 + 컬러 이론 보정이 결합되어 있다.
Contrast Checker / Color Blind 시뮬레이션 — 팔레트를 만든 직후 같은 화면에서 명도 대비, 색맹 시뮬레이션이 가능하다.

코드로 가져오기

Coolors가 만든 팔레트는 한 줄 URL로 표현된다.

https://coolors.co/0a0a0a-1f2937-3b82f6-fbbf24-ef4444

이 URL의 hex 코드 다섯 개를 CSS 변수로 바로 꽂으면 된다.

:root {
  --bg: #0a0a0a;
  --surface: #1f2937;
  --accent: #3b82f6;
  --warning: #fbbf24;
  --danger: #ef4444;
}

한계

Coolors의 약점은 디자인 시스템으로서의 깊이가 부족하다는 점이다. 5색 팔레트는 영감용이지, Tailwind처럼 50–950으로 펼친 11단계 스케일이 아니다. 실제 프로덕트에는 Coolors의 결과를 Radix Colors 또는 Tailwind 팔레트로 “확장”하는 작업이 추가로 필요하다.

3장 · ColorBox → Material Theme Builder — 색을 “수학으로” 만들기

ColorBox 시대 (IBM → Lyft, 2016~2020)

Lyft 디자인팀의 Adam Morse, Cole Bemis가 2017년 공개한 ColorBox는 색을 “감”이 아니라 “함수”로 만든다는 발상을 보편화시켰다. 각 단계의 색은 다음 세 곡선의 함수다.

명도(Lightness) 곡선 — 가장 밝은 색 → 가장 어두운 색까지 어떻게 떨어질지
채도(Saturation) 곡선 — 양 끝에서 채도가 낮아지고 중앙이 가장 진한 형태
색조(Hue) 곡선 — 단계마다 미세하게 색조가 이동 (밝은 단계는 노랑 쪽, 어두운 단계는 자주 쪽 같은)

이 “함수로서의 팔레트” 패러다임은 이후 Tailwind, Radix, Material 3 모두에 직간접적으로 영향을 미쳤다.

Google Material Theme Builder (Material 3 / 2022~)

ColorBox의 사상을 가장 본격적으로 계승한 도구가 Material Theme Builder다.

단 하나의 Seed Color(브랜드 컬러)를 입력
내부적으로 HCT(Hue, Chroma, Tone) 색공간으로 변환
Primary / Secondary / Tertiary / Error / Neutral / Neutral Variant 6개의 “톤 팔레트”를 자동 생성
각 톤 팔레트는 0(검정) ~ 100(흰색)까지 13단계
Light / Dark 테마를 동시에 출력

Figma 플러그인과 웹 빌더 두 형태로 제공되며, 결과는 Android XML / iOS / CSS / JSON으로 한 번에 내보낼 수 있다.

Material 3의 핵심은 “디자이너가 단 한 색만 정하면, 나머지는 수학이 한다”는 것. 디자인 시스템 초기 세팅 비용을 극단적으로 줄여 준다.

4장 · Tailwind CSS v4 — OKLCH 네이티브의 시대

무엇이 바뀌었나

Tailwind는 2024년 6월 v4 알파를 공개하고 2025년 정식 릴리스를 했다. 가장 큰 변화 두 가지.

CSS-first 설정 — tailwind.config.js가 사라지고, CSS 파일 안의 @theme 블록으로 토큰을 정의한다.
OKLCH 기본 색공간 — 모든 기본 팔레트(slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, plus newer brand-friendly families)가 oklch() 값으로 정의되어 있다.

OKLCH가 왜 더 나은가

OKLCH는 OKLab 색공간의 LCH 변형으로, 인지 균등(perceptually uniform) 하다. 무슨 뜻인가.

HSL에서 hsl(60, 100%, 50%)(노랑)과 hsl(240, 100%, 50%)(파랑)은 L 값이 똑같이 50%지만 사람 눈에는 노랑이 훨씬 밝아 보인다.
OKLCH에서 oklch(0.7 0.2 60)과 oklch(0.7 0.2 240)은 사람 눈에 거의 같은 밝기로 보인다.

이 차이는 “단계별 팔레트”를 만들 때 결정적이다. HSL로 1–9 단계를 만들면 노랑 영역이 너무 밝고 파랑 영역이 너무 어두워지는데, OKLCH로 만들면 단계 간 변화가 균일하다.

Tailwind v4 색상 사용법

@import "tailwindcss";

@theme {
  --color-brand-50: oklch(0.97 0.02 250);
  --color-brand-500: oklch(0.65 0.18 250);
  --color-brand-900: oklch(0.25 0.10 250);
}

이렇게 정의하면 bg-brand-500, text-brand-900 같은 유틸리티가 자동 생성된다.

color-mix와 결합

.button {
  background: var(--color-brand-500);
}
.button:hover {
  background: color-mix(in oklch, var(--color-brand-500), black 10%);
}

OKLCH 색공간에서의 mix는 RGB mix보다 부드럽다. 빨강과 파랑을 섞으면 RGB에서는 칙칙한 회색이 나오지만 OKLCH에서는 보라색이 자연스럽게 나온다.

5장 · Open Color (Yeun Min) — 접근성 우선의 한국발 팔레트

한국 디자이너가 만든 글로벌 오픈 팔레트

Open Color는 한국의 Yeun Min(민윤재)이 2017년 공개한 오픈소스 색상 팔레트다. GitHub 스타 5,000+를 받았고, 한국 스타트업 다수가 디자인 시스템 초기 베이스로 사용했다.

핵심은 13개 색조(gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow, orange) x 10단계(0–9) = 130색이다.

무엇이 다른가

0단계는 거의 흰색, 9단계는 거의 검정이라는 일관성. 어떤 색조든 0과 9를 같이 쓰면 깨지지 않는다.
명도 대비가 사전 검증되어 있다. blue-7 + gray-0은 WCAG AA를 통과한다.
MIT 라이선스. Sass / Less / CSS / JSON / PNG 등 모든 포맷 지원.

사용 예

:root {
  --gray-0: #f8f9fa;
  --gray-9: #212529;
  --blue-7: #1c7ed6;
  --red-7: #f03e3e;
}

.button-primary {
  background: var(--blue-7);
  color: var(--gray-0);
}

한계와 후계자

Open Color는 단계별 명도가 “기계적으로 균일하지 않다”는 약점이 있다. blue와 yellow가 같은 7단계라도 인지 명도가 다르다. 이 문제를 “과학적으로” 해결하려고 등장한 것이 다음 장의 Radix Colors다.

6장 · Radix Colors — 12단계 “과학적” 스케일

Workos 시대의 디자인 시스템 색상 표준

Radix Colors는 WorkOS의 디자인 팀(Pedro Duarte, Colm Tuite 등, 후에 Steven Tey가 v3 리드)이 만든 색상 시스템이다. 2022년 1.0 공개 이후, 2024년 v3에서 P3 와이드 색역 지원 + alpha 채널 + dark/light 자동 매핑까지 완성되었다.

12단계의 의미

각 색은 정확히 12단계로 구성되며, 단계마다 고정된 역할을 가진다.

단계	역할
1	App background
2	Subtle background
3	UI element background
4	Hovered UI element background
5	Active / Selected UI element background
6	Subtle borders / separators
7	UI element borders
8	Hovered UI element borders / focus rings
9	Solid backgrounds (브랜드 컬러)
10	Hovered solid backgrounds
11	Low-contrast text
12	High-contrast text

이 “단계 = 역할” 매핑이 Radix Colors의 본질이다. 다른 팔레트는 “이 색을 어디에 써야 하지?”를 디자이너가 매번 결정해야 하지만, Radix는 단계가 곧 답이다.

Auto Dark Mode

@import "@radix-ui/colors/blue.css";
@import "@radix-ui/colors/blue-dark.css";

.button {
  background: var(--blue-9);
  color: var(--blue-1);
}
.button:hover {
  background: var(--blue-10);
}

--blue-9는 light에서는 #3D63DD, dark에서는 #3E63DD로 자동 매핑된다. 다크모드를 의식하지 않고 코딩해도 알아서 적응한다.

Alpha 채널

--blueA-3처럼 A가 붙은 변수는 알파 채널 버전이다. 어떤 배경 위에 올라가도 자연스러운 “반투명 색”을 제공한다. 오버레이 / 호버 효과의 정석.

7장 · Adobe Color — 가장 오래된 클래식, 그러나 여전히

Kuler에서 Adobe Color로

Adobe Color는 2007년 “Adobe Kuler”라는 이름으로 시작한, 색상 팔레트 도구의 원조다. 2014년 Adobe Color로 리브랜딩되었고, 2026년 현재 Creative Cloud 통합으로 InDesign / Illustrator / Photoshop에서 직접 호출 가능하다.

5가지 색 조화 규칙

Adobe Color의 큰 가치는 “색 이론”을 시각화해 준다는 점이다.

Analogous (유사색) — 색상환에서 인접한 색
Monochromatic (단색) — 같은 색조의 명도 변형
Triad (삼각) — 색상환에서 120도 떨어진 세 색
Complementary (보색) — 마주보는 두 색
Compound (복합), Shades (음영), Custom

색상환 위에 점을 끌어다 놓으면 규칙에 맞는 다른 점들이 자동으로 움직인다. 색 이론을 가장 직관적으로 가르쳐 주는 도구.

사진에서 추출 (Extract)

JPG/PNG를 업로드하면 자동으로 5색 팔레트를 추출한다. 이 기능은 color-thief의 원조 격이며, 2026년에도 가장 정확한 추출 알고리즘 중 하나다.

한계

Adobe Color의 약점은 Creative Cloud에 종속되어 있다는 것. 무료 사용자는 저장 갯수에 제한이 있고, “브랜드 라이브러리” 같은 협업 기능은 유료 플랜 전용이다.

8장 · Khroma — AI가 학습한 “당신의 색”

50색 학습 → 무한 팔레트

Khroma는 2018년 토론토 디자이너 George Hastings가 공개한 AI 색상 도구다. 사용자가 “좋아하는 색 50개”를 고르면 그 데이터로 개인 모델을 학습하고, 이후로는 사용자의 취향에 맞는 색만 추천한다.

다른 AI 색상 도구와의 차이

Coolors의 AI는 “세상의 트렌드”를 학습
Khroma의 AI는 “나의 취향”을 학습

5분 안에 50색을 클릭하면, 두 번 다시 “세상 사람들이 좋아하는 색”을 보지 않아도 된다. 매우 개인화된 도구.

한계

Khroma는 “2색 조합”만 추천한다. 5색 팔레트나 디자인 시스템 단계 팔레트를 만들기에는 부족하다. 영감 발견용으로 쓰고, 결과를 Coolors나 Radix에서 확장하는 워크플로우가 일반적이다.

9장 · Realtime Colors — “디자인 전에 미리 보기”

코드 없이 실제 페이지에 색 입혀 보기

Realtime Colors는 2023년 등장한 무료 도구로, 가상의 랜딩 페이지에 텍스트 색 + 배경 색 + 주황색 + 보조색을 입력하면 즉시 실제 UI처럼 보여 준다.

왜 이게 중요한가

색상 팔레트의 오랜 함정은 “HSL 슬라이더에서는 예뻤는데 실제 페이지에서는 못생겨 보인다”는 것이다. 색은 단독으로 존재하지 않고 다른 색과의 비율 + 글자 + 그림자 위에서 평가되어야 한다.

Realtime Colors는 그 평가를 1초 만에 가능하게 한다. 디자인 시안을 만들기 전에, Figma를 열기 전에, 코드를 짜기 전에 색의 첫인상을 결정짓는다.

4색 만으로 충분한가

기본 모드는 Text / Background / Primary / Secondary 네 색만 받는다. “Pro” 모드에서 5색·6색까지 확장된다. 단순한 4색만으로 랜딩 페이지 전체가 그럴듯해 보이는 것은, 색의 첫인상을 결정짓는 것이 사실 4–5색이라는 디자인 진리를 보여 준다.

URL 공유

https://realtimecolors.com/?colors=171717-fafafa-1d4ed8-f59e0b

만든 팔레트는 URL 하나로 동료에게 공유된다. Slack에 붙여 넣으면 미리보기가 뜬다.

10장 · CSS color-mix() / oklch() / color-contrast() — 보편 지원

2026년의 CSS 색 함수 3종 세트

10년 전 CSS의 색은 #3b82f6 같은 16진수 한 줄이었다. 2026년의 CSS는 색을 수학적으로 다룬다.

color-mix()

.button {
  background: color-mix(in oklch, blue 60%, white);
}
.button:hover {
  background: color-mix(in oklch, blue 60%, white, black 10%);
}

두 색을 비율로 섞는다. in oklch로 색공간을 지정할 수 있어, 시각적으로 매끄러운 그라데이션이 보장된다.

oklch()

:root {
  --brand: oklch(0.65 0.18 250);
  --brand-light: oklch(0.85 0.10 250);
  --brand-dark: oklch(0.30 0.18 250);
}

OKLCH는 인지 균등하므로 “50% 밝기” 두 색은 실제로 같은 밝기로 보인다. 디자인 시스템의 팔레트를 생성할 때 가장 합리적인 색공간.

color-contrast() (실험적)

.text {
  color: color-contrast(white vs black, navy, gray);
}

배경색 white에 대해 black, navy, gray 중 가장 명도 대비가 높은 색을 자동 선택한다. 2026년 5월 현재 Safari TP / Chrome Canary에서 실험 구현 중이며, 곧 정식 출시 예정.

light-dark()

.surface {
  background: light-dark(white, black);
  color: light-dark(black, white);
}

color-scheme에 따라 자동으로 두 값 중 하나를 선택한다. 2024–2025년 사이 모든 브라우저에서 안정 지원.

11장 · APCA — WCAG 2 Contrast의 대체

WCAG 2 명도 대비의 한계

WCAG 2.0(1998)의 명도 대비 공식은 sRGB의 상대 휘도를 기반으로 한다. 결과는 1:1 ~ 21:1의 비율이며, 4.5:1 이상이면 AA, 7:1 이상이면 AAA로 통과시킨다.

문제는 두 가지다.

어두운 배경에서 부정확 — 검정 배경 위의 회색 글자는 실제로는 잘 읽혀도 비율이 낮게 나온다.
사람의 인지를 반영하지 않음 — 25년 전의 단순 휘도 공식이며, 폰트 두께 / 크기를 고려하지 않는다.

APCA란

APCA(Accessible Perceptual Contrast Algorithm)는 Andrew Somers가 2019년부터 개발한 새로운 명도 대비 알고리즘이다. 핵심 특징.

결과는 -108 ~ +106의 Lc 값 (Lightness Contrast). 음수는 어두운 글자 / 밝은 배경, 양수는 반대.
폰트 크기 / 두께와 결합해 최소 Lc 임계값이 달라진다 (예: 14pt 일반 글자는 |Lc| 75 이상 필요).
사람의 시지각 모델 + sRGB / P3 양쪽을 지원.

2026년 현황

WCAG 3 드래프트에 채택됨.
Stark / Polychrom / Atmos 같은 접근성 도구들이 APCA 기반 검사를 기본으로 제공.
단, 법적 컴플라이언스(ADA, EU EAA)는 아직 WCAG 2.x 기준이므로, “APCA 통과 + WCAG 2.1 AA 통과” 두 가지를 동시에 보는 것이 안전.

직접 계산

import { APCAcontrast, sRGBtoY } from 'apca-w3';

const Lc = APCAcontrast(
  sRGBtoY([0, 0, 0]),
  sRGBtoY([255, 255, 255])
);
console.log(Lc);

12장 · Polychrom / Stark / Atmos — Figma 접근성 플러그인 3대장

Polychrom

Roman Shamin이 만든 Figma / Figma Slides 플러그인. APCA 기반의 명도 대비 검사를 가장 빠르고 가볍게 제공한다. 텍스트 레이어를 선택하면 즉시 |Lc| 값이 떠오르고, 통과/실패가 색으로 표시된다.

특징은 무료 + 오픈소스라는 것. WCAG 2 AA / APCA / WCAG 3 베타 세 가지 기준을 동시에 표시한다.

Stark

Stark는 2017년 등장한 “접근성 풀스택” 플러그인이다. Figma / Sketch / Chrome 확장으로 제공되며, 다음을 모두 지원한다.

명도 대비 (WCAG 2 + APCA)
색맹 시뮬레이션 (8종)
포커스 순서 검사
캡션 검사
터치 영역 크기 검사

기업 플랜은 디자인 시스템 전체에 대한 접근성 보고서를 자동 생성한다. 엔터프라이즈 디자인 팀의 표준.

Atmos

Atmos는 “접근성 + 디자인 시스템 생성”의 하이브리드 도구다. Tailwind / Radix 스타일의 톤 팔레트를 자동 생성해 주면서, 각 단계가 어떤 APCA 임계값을 통과하는지 표시한다.

“우리만의 디자인 시스템을 만들어야 한다”는 팀이 0에서 1로 가는 시간을 한 주에서 하루로 줄여 준다.

13장 · color-thief / ImagePalette / dthemr — 이미지에서 추출

color-thief — 자바스크립트 라이브러리의 정석

Lokesh Dhakar가 만든 color-thief는 “이미지에서 색을 뽑는” 라이브러리의 사실상 표준이다. 알고리즘은 modified median cut quantization.

<img id="hero" src="/hero.jpg" crossorigin="anonymous" />
<script type="module">
  import ColorThief from 'colorthief';
  const ct = new ColorThief();
  const img = document.getElementById('hero');
  img.addEventListener('load', () => {
    const dominant = ct.getColor(img);
    const palette = ct.getPalette(img, 5);
    console.log(dominant, palette);
  });
</script>

브라우저 / Node.js 양쪽에서 동작하며, 5–10ms 안에 결과가 나온다.

ImagePalette / Vibrant.js

Vibrant.js는 Android의 Palette API를 자바스크립트로 포팅한 라이브러리다. 단순한 dominant 색이 아니라 “Vibrant”, “Muted”, “Dark Vibrant”, “Light Vibrant” 같은 의미 있는 색군을 추출한다.

음악 앨범 커버, 뉴스 썸네일, 영화 포스터처럼 “주제를 표현하는 색”이 필요한 곳에 적합.

dthemr — 이미지 → 전체 테마

dthemr는 한 장의 이미지에서 dark/light 두 테마 + Radix 스타일 11단계 팔레트를 자동 생성한다. 이미지 추출의 마지막 마일.

14장 · viridis / inferno / magma / ColorBrewer — 데이터 시각화 정석

왜 "예쁜 색"이 데이터 시각화에서는 틀린가

데이터 시각화에서 색의 목적은 “예쁘다”가 아니라 정확하게 다른 값을 다른 색으로 보이게 한다이다. 두 가지 제약을 동시에 만족해야 한다.

인지 균등(perceptual uniformity) — 두 색의 명도 차이가 데이터 차이와 비례해야 한다.
색맹 친화(colorblind-safe) — 빨강-초록 구분 같은 함정을 피해야 한다.

이 두 제약을 만족하는 팔레트가 viridis 계열이다.

viridis / inferno / magma / plasma / cividis

원래는 Python의 matplotlib을 위해 Stéfan van der Walt와 Nathaniel Smith가 2015년 만든 컬러맵이다. 이후 D3.js, Observable, Plotly, R의 ggplot2까지 모두 채택했다.

컬러맵	특징
viridis	파랑 → 노랑. 가장 인기. 거의 모든 시각화에 통한다.
inferno	검정 → 노랑. 어두운 배경에 좋다.
magma	inferno와 비슷하지만 핑크 톤
plasma	보라 → 노랑
cividis	청황색만 사용 — 색맹에 가장 안전

ColorBrewer — 지도학자가 만든 팔레트

Cynthia Brewer가 펜실베이니아 주립대에서 만든 ColorBrewer는 “지도”를 위한 색상 도구다. 1990년대부터 cartographer들이 사용해 왔고, 데이터 시각화의 정석으로 살아남았다.

Sequential — 순서 있는 값 (0 → 100)
Diverging — 중심값에서 양쪽으로 벗어남 (-50 → 0 → +50)
Qualitative — 카테고리 (성별, 지역 등)

세 가지 분류 안에서 각각 색맹 친화 / 프린트 친화 / 모니터 친화 옵션을 고를 수 있다.

코드 예 (D3.js)

import * as d3 from 'd3';
const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 100]);
const sample = d3.range(0, 100, 10).map(d => color(d));

15장 · 한국 / 일본 — 토스, 카카오, pixiv, 애니메이트의 색 문화

토스 디자인 시스템

토스는 2020년부터 자체 디자인 시스템을 공개했고, 색상은 “Toss Color Palette”로 별도 문서화되어 있다. 핵심 특징.

Grey 단계가 13단계로 매우 세밀. 흰 배경에서 거의 보이지 않는 #f9fafb부터 진짜 검정 #1b1c1f까지.
Blue 단계는 9단계 — 0/100/200/...../800. 토스의 상징인 #3182f6은 “Blue 500”.
Semantic color 이름 — --toss-color-text-default, --toss-color-bg-elevation처럼 “용도”로 명명. Radix의 “단계 = 역할” 사상과 가깝다.

카카오 디자인

카카오는 “KakaoUI”라는 내부 디자인 시스템을 운영하며, 색은 “KakaoColor”로 별도 가이드한다. 카카오의 상징 노랑 #FEE500은 단순한 브랜드 색이 아니라 법적으로 보호받는 트레이드 컬러다.

KakaoUI의 색 체계는 “Brand color(노랑) + 12단계 Gray + Semantic”의 3축이다.

pixiv 디자인 시스템 — 일러스트 SNS의 색

pixiv는 2024년 “Charcoal”이라는 디자인 시스템을 오픈소스로 공개했다. 일러스트가 메인 콘텐츠인 서비스답게, UI 색은 최대한 무채색으로 가는 것이 원칙이다. 화려한 일러스트가 주인공이고 UI는 액자 역할.

gray-1: #f6f6f6
gray-9: #1a1a1a
blue-5: #0096fa

애니메이트 (animate) — 일본 애니메이션 굿즈샵의 색

애니메이트, animate.co.jp 같은 일본 애니메이션·만화 e커머스 사이트는 의도적으로 “화려한 색”을 사용한다. 핵심은 봄•여름•가을•겨울 시즌 컬러와 작품별 한정 컬러를 사이트 UI에 통합한다는 것. 작품 페이지에 들어가면 헤더/포인트 컬러가 그 작품의 키컬러로 바뀐다.

한·일·서구 비교 한 줄

한국 (토스, 카카오) — 신뢰감의 절제된 색. 그레이 단계가 매우 세밀.
일본 (pixiv, 애니메이트) — 콘텐츠 중심. UI는 무채색, 콘텐츠 색이 주인공.
서구 (Radix, Tailwind) — 시스템화된 함수형 팔레트. 단계와 역할이 분리.

16장 · 누가 무엇을 골라야 하나 — 시나리오별 추천

시나리오 1 — 1인 스타트업, 디자인 시스템 0에서 1까지

Realtime Colors — 4색 후보를 즉시 페이지에 입혀 본다.
Material Theme Builder — Seed 컬러 하나로 톤 팔레트 자동 생성.
Tailwind v4 + @theme — 결과를 oklch() 값으로 코드화.

시나리오 2 — 시리즈 B 프로덕트 디자인 시스템

Radix Colors v3 — 12단계 / 다크모드 자동 / alpha 포함.
Stark / Polychrom — Figma에서 모든 컴포넌트의 명도 대비를 APCA + WCAG 2 두 기준으로 검증.
Open Color — “세컨더리 보조 컬러”용 백업 팔레트.

시나리오 3 — 데이터 시각화 / BI 대시보드

viridis — 연속 값 매핑.
ColorBrewer — 카테고리 색.
Coolors / Adobe Color — 대시보드 UI 자체의 분위기 색만 한정 사용.

시나리오 4 — 마케팅 랜딩 / 영감

Coolors AI 모드 — “sunset over Seoul” 같은 자연어로 빠른 시안.
Adobe Color Extract — 레퍼런스 사진에서 5색 추출.
Khroma — 내 취향을 학습시켜 무한 생성.

시나리오 5 — 정부 / 금융 / 의료 (접근성 최우선)

APCA + WCAG 2 AA 두 기준 동시 만족.
Polychrom / Stark — 모든 텍스트 / 버튼 검사 필수.
Color.review — 페이지 단위 자동 감사.
cividis (viridis 계열) — 차트 색은 색맹 친화 우선.

17장 · 참고 / References

Tailwind CSS v4 announcement: https://tailwindcss.com/blog/tailwindcss-v4
Radix Colors documentation: https://www.radix-ui.com/colors
Open Color (Yeun Min): https://yeun.github.io/open-color/
Coolors: https://coolors.co
Adobe Color: https://color.adobe.com
Khroma: https://www.khroma.co
Realtime Colors: https://www.realtimecolors.com
Material Theme Builder: https://material-foundation.github.io/material-theme-builder/
IBM ColorBox (archived): https://lyft-colorbox.herokuapp.com/
Polychrom Figma plugin: https://www.figma.com/community/plugin/1293440270987378411/polychrom
Stark accessibility: https://www.getstark.co
Atmos Figma plugin: https://www.atmos.style
color-thief library: https://lokeshdhakar.com/projects/color-thief/
ImagePalette / Vibrant.js: https://jariz.github.io/vibrant.js/
Color.review: https://color.review
paletton: https://paletton.com
ColorHexa: https://www.colorhexa.com
Eva Design System: https://colors.eva.design
viridis colormaps: https://bids.github.io/colormap/
ColorBrewer (Cynthia Brewer): https://colorbrewer2.org
APCA W3C draft: https://github.com/Myndex/SAPC-APCA
Refactoring UI (Wathan/Schoger): https://www.refactoringui.com
CSS color-mix() (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
OKLCH on web.dev: https://web.dev/articles/css-relative-color-syntax
Toss Design System (Korean): https://toss.im/design-system
Charcoal by pixiv: https://github.com/pixiv/charcoal

이 글은 2026년 5월 16일 기준이며, OKLCH·APCA·color-mix는 빠르게 변하는 영역이라 6개월 단위로 새로 확인할 가치가 있다.