Chaos and Order

💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.

원문 렌더가 준비되기 전까지 텍스트 가이드로 표시합니다.

1. The 2026 color tool landscape — Generators / Systems / Accessibility / CSS

In 2026, color tooling splits into four clean categories. No single tool does everything. Good designers and engineers know all four, and pick the right one for the moment.

| Category | Representative tools | Purpose |

| --- | --- | --- |

| **Palette generator** | Coolors, Khroma, Adobe Color, paletton, ColorHexa | Inspiration → 5-color palette |

| **Design system colors** | Tailwind, Radix Colors, Open Color, Material Theme Builder, Eva Design | 50–950 or 1–12 step scales |

| **Accessibility** | Stark, Polychrom, Atmos, Color.review, APCA testers | Contrast / colorblind simulation |

| **CSS color functions** | color-mix(), oklch(), color-contrast(), light-dark() | In-code color math |

Two more support categories sit alongside these. **Image-to-palette tools** (color-thief, ImagePalette, dthemr) and **dataviz palettes** (viridis/inferno/magma, ColorBrewer) live in a different world from "pretty color" — they need **correct** color.

Three macro trends define 2026:

1. **OKLCH is the new default** — Tailwind v4 ditched RGB hex in favor of OKLCH. CSS supports the oklch() function universally.

2. **APCA is replacing WCAG 2 contrast** — WCAG 2's contrast formula was built on 1998-era sRGB assumptions and is widely criticized for being inaccurate on dark backgrounds. APCA (Accessible Perceptual Contrast Algorithm) is rapidly taking its place and has been adopted into the WCAG 3 draft.

3. **AI palettes are mainstream** — Coolors AI mode, Khroma, Adobe Firefly integrations all return a "5-color palette matching the vibe" in a second. But AI still does not replace humans for accessibility or design systems.

> Every line of CSS in this article assumes Chrome 130+, Safari 18+ and Firefox 130+. No polyfills are necessary.

2. Coolors — the AI palette standard post-Series A

Coolors started as a 2015 solo project by Fabrizio Bianchi and, after a 2023 Series A, became the de facto standard in the color tooling category. By 2026 it has crossed 10 million registered users and processes billions of palettes per month.

Three core features

1. **Space-bar generator** — one space bar press produces a new 5-color palette. Colors you like can be padlocked while the rest re-rolls. Simple but addictive.

2. **AI Palette (2023~)** — natural-language prompts like "sunset over Tokyo", "Toss bank login screen" or "financial dashboard mood" generate palettes. Internally a Coolors-trained model is combined with color-theory corrections.

3. **Contrast checker / color blindness simulation** — once you have a palette, you check accessibility on the same screen.

Pulling palettes into code

A Coolors palette is encoded into a single URL:

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

The five hex codes drop straight into CSS variables:

:root {

--bg: #0a0a0a;

--surface: #1f2937;

--accent: #3b82f6;

--warning: #fbbf24;

--danger: #ef4444;

}

Limitations

Coolors's weakness is **insufficient design system depth**. Five colors are great for inspiration but they are not a Tailwind-style 11-step 50–950 scale. Real products end up "expanding" the Coolors result into Radix Colors or a Tailwind palette as a second step.

3. ColorBox → Material Theme Builder — making color "with math"

The ColorBox era (IBM → Lyft, 2016–2020)

ColorBox, released by Adam Morse and Cole Bemis at Lyft in 2017, popularized the idea of building color **not by intuition but by functions**. Each step of a scale is the output of three curves:

- **Lightness curve** — how lightness falls from the brightest step to the darkest.

- **Saturation curve** — a typical "low at the ends, peak in the middle" shape.

- **Hue curve** — a small drift across steps (light steps lean yellow, dark steps lean magenta, for instance).

This "palette as a function" paradigm influenced Tailwind, Radix and Material 3 either directly or indirectly.

Google Material Theme Builder (Material 3, 2022~)

The tool that most directly inherits ColorBox is Material Theme Builder.

1. Input a single **Seed Color** (the brand color).

2. Internally convert to HCT (Hue, Chroma, Tone).

3. Auto-generate six tonal palettes: Primary / Secondary / Tertiary / Error / Neutral / Neutral Variant.

4. Each tonal palette spans 13 steps from 0 (black) to 100 (white).

5. Output light and dark themes simultaneously.

It ships as a Figma plugin and a web builder. Output formats include Android XML, iOS, CSS and JSON.

> Material 3's pitch is "the designer picks one color; math handles the rest." This collapses the initial setup cost of a design system from weeks to hours.

4. Tailwind CSS v4 — the OKLCH-native era

What changed

Tailwind released its v4 alpha in June 2024 and went GA in 2025. Two big changes:

1. **CSS-first config** — `tailwind.config.js` is gone. Tokens are now declared inside a CSS @theme block.

2. **OKLCH as default color space** — every default palette family (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) is defined with oklch() values.

Why OKLCH is better

OKLCH is the LCH variant of the OKLab color space, and it is **perceptually uniform**. What that means in practice:

- In HSL, `hsl(60, 100%, 50%)` (yellow) and `hsl(240, 100%, 50%)` (blue) have the same L value, but **the yellow looks dramatically brighter to a human eye**.

- In OKLCH, `oklch(0.7 0.2 60)` and `oklch(0.7 0.2 240)` are perceptually the same brightness.

This matters most when you generate a stepped palette. HSL gives you yellow that is too bright and blue that is too dark in the same step. OKLCH gives you a uniform progression across hues.

Tailwind v4 color usage

@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);

}

Utilities like `bg-brand-500` and `text-brand-900` are auto-generated.

Combined with color-mix

.button {

background: var(--color-brand-500);

}

.button:hover {

background: color-mix(in oklch, var(--color-brand-500), black 10%);

}

Mixing in OKLCH is much smoother than in RGB. Red and blue mixed in RGB give you a muddy gray, but the same mix in OKLCH gives a clean purple.

5. Open Color (Yeun Min) — Korea-born, accessibility-first

A Korean designer's global open palette

Open Color is an open-source color palette released by Yeun Min in 2017. It has more than 5,000 GitHub stars and was the initial base layer for many Korean startups' design systems.

It is 13 hues (gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow, orange) x 10 steps (0–9) = 130 colors.

What makes it different

- **Step 0 is almost white, step 9 is almost black** across every hue. You can pair any 0 and 9 without breaking.

- **Contrast pre-verified** — blue-7 over gray-0 passes WCAG AA.

- **MIT license**, ships as Sass / Less / CSS / JSON / PNG.

Usage

:root {

--gray-0: #f8f9fa;

--gray-9: #212529;

--blue-7: #1c7ed6;

--red-7: #f03e3e;

}

.button-primary {

background: var(--blue-7);

color: var(--gray-0);

}

Limits and successors

Open Color's weakness is that lightness across hues is "not mechanically uniform". A step-7 blue and a step-7 yellow do not feel like the same lightness. To solve this scientifically, Radix Colors was born — see next section.

6. Radix Colors — the 12-step "scientific" scale

The de facto design system color standard of the WorkOS era

Radix Colors is a color system from the WorkOS design team (Pedro Duarte, Colm Tuite, and others, with Steven Tey leading v3). After its 1.0 release in 2022, v3 in 2024 added P3 wide gamut support, alpha channels and automatic dark/light mapping.

The meaning of 12 steps

Every Radix color has exactly 12 steps, and **each step has a fixed role**.

| Step | Role |

| --- | --- |

| 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 (brand color) |

| 10 | Hovered solid backgrounds |

| 11 | Low-contrast text |

| 12 | High-contrast text |

This "step equals role" mapping is the core of Radix Colors. Other palettes leave the designer asking "where should I use this?" Radix tells you: **the step is the answer**.

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` maps to #3D63DD in light mode and #3E63DD in dark mode automatically. You can write CSS without thinking about dark mode.

Alpha channel

Variables suffixed with A, like `--blueA-3`, are alpha-channel variants. They work over any background. Standard practice for overlays and hover effects.

7. Adobe Color — the oldest classic, still relevant

From Kuler to Adobe Color

Adobe Color started in 2007 as "Adobe Kuler" — the original color palette tool. It was rebranded as Adobe Color in 2014, and in 2026 it integrates directly into InDesign / Illustrator / Photoshop via Creative Cloud.

Five color harmony rules

Adobe Color's biggest contribution is **visualizing color theory**:

- **Analogous** — adjacent colors on the wheel.

- **Monochromatic** — lightness variations of one hue.

- **Triad** — three colors 120° apart.

- **Complementary** — opposites on the wheel.

- **Compound**, **Shades**, **Custom**.

Drag points on the color wheel and the rule automatically moves the others. The most intuitive teacher of color theory.

Extract from photo

Upload a JPG or PNG and it auto-extracts a 5-color palette. This feature predates color-thief, and in 2026 it is still one of the most accurate extraction algorithms.

Limits

Adobe Color is **locked to Creative Cloud**. Free users hit limits on saved palettes, and collaborative features like "brand libraries" require a paid plan.

8. Khroma — the AI that learns "your" color

Train on 50 colors → unlimited palettes

Khroma is a 2018 AI color tool by Toronto designer George Hastings. The user picks 50 colors they like, the tool trains a personal model on that data, and from then on it only suggests colors matching that taste.

Difference from other AI color tools

- Coolors AI learns from "the trends of the world".

- Khroma's AI learns from "your taste".

After five minutes of clicking through 50 colors, you never have to see colors "everyone else likes" again. Deeply personalized.

Limits

Khroma only recommends **two-color combinations**. Insufficient for full 5-color palettes or design system scales. People use Khroma for **inspiration discovery** and then expand the result in Coolors or Radix.

9. Realtime Colors — "preview before you design"

See palette candidates on a real page, no code required

Realtime Colors is a 2023 free tool. You input text color + background + primary + secondary on a mock landing page and it **renders as a real UI in real time**.

Why this matters

Color palette tools have always had one trap: "It looked great on the HSL slider, but it looks awful on a real page." Color does not exist in isolation. It is evaluated **next to other colors, type and shadow**, in the proportions of a real layout.

Realtime Colors collapses that evaluation to one second. Before you open Figma. Before you write code. **It decides the first impression.**

Is four colors enough?

The default mode accepts only four: Text / Background / Primary / Secondary. Pro mode adds 5–6. The fact that four colors can convincingly carry a landing page is itself a lesson — the first impression of color is decided by 4–5 colors, not 50.

URL share

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

The palette is encoded into a URL. Paste it into Slack and a preview pops up.

10. CSS color-mix() / oklch() / color-contrast() — universal support

The 2026 CSS color function trio

Ten years ago, a color in CSS was a hex like `#3b82f6`. In 2026, CSS treats color **mathematically**.

color-mix()

.button {

background: color-mix(in oklch, blue 60%, white);

}

.button:hover {

background: color-mix(in oklch, blue 60%, white, black 10%);

}

Mix two colors with a ratio. `in oklch` chooses the color space, guaranteeing a perceptually smooth gradient.

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

}

Because OKLCH is perceptually uniform, two colors at L=0.5 actually look equally bright. The most defensible color space for generating a design system palette.

color-contrast() (experimental)

.text {

color: color-contrast(white vs black, navy, gray);

}

Pick whichever of black/navy/gray has the highest contrast against white. As of May 2026 it is in experimental implementation in Safari TP and Chrome Canary, with release expected soon.

light-dark()

.surface {

background: light-dark(white, black);

color: light-dark(black, white);

}

Pick automatically based on color-scheme. Stable across all browsers since 2024–2025.

11. APCA — replacing WCAG 2 contrast

Limits of WCAG 2 contrast

The WCAG 2.0 (1998) contrast formula is based on sRGB relative luminance. It produces a ratio between 1:1 and 21:1, passing at 4.5:1 (AA) or 7:1 (AAA).

Two problems:

1. **Inaccurate on dark backgrounds** — gray text on a black background reads fine but the ratio comes out low.

2. **Doesn't model perception** — it's a luminance formula from 25 years ago. It ignores font weight and size.

What APCA is

APCA (Accessible Perceptual Contrast Algorithm), developed by Andrew Somers since 2019, is the new perceptual contrast algorithm. Key properties:

- The result is an **Lc (Lightness Contrast) value from −108 to +106**. Negative = dark text on light background, positive = the inverse.

- Minimum |Lc| thresholds vary with font size and weight (e.g., 14pt regular text needs |Lc| 75 or higher).

- Based on a human visual model, supporting both sRGB and P3.

2026 status

- Adopted into the WCAG 3 draft.

- Stark, Polychrom and Atmos all expose APCA-based checks as a default.

- However, **legal compliance** (ADA, EU EAA) still references WCAG 2.x — passing both APCA and WCAG 2.1 AA simultaneously is the safe play.

Compute directly

const Lc = APCAcontrast(

sRGBtoY([0, 0, 0]),

sRGBtoY([255, 255, 255])

);

console.log(Lc);

12. Polychrom / Stark / Atmos — the Figma accessibility trio

Polychrom

Roman Shamin's Figma / Figma Slides plugin. Delivers APCA-based contrast checks fastest and lightest of all. Select a text layer and the |Lc| value pops up instantly with pass/fail color coding.

It is **free and open source**. Displays WCAG 2 AA / APCA / WCAG 3 beta simultaneously.

Stark

Stark is a 2017 "full-stack accessibility" plugin. Available on Figma, Sketch and Chrome, it covers:

- Contrast (WCAG 2 + APCA)

- Color blindness simulation (8 types)

- Focus order audit

- Caption audit

- Touch target size

Enterprise plans auto-generate an accessibility report across an entire design system. **The standard for enterprise design teams.**

Atmos

Atmos is the hybrid "accessibility + design system generator". It auto-creates Tailwind / Radix-style tonal palettes and tells you which APCA threshold each step clears.

A team needing to build "our own design system" goes from week-1 to day-1.

13. color-thief / ImagePalette / dthemr — extract from image

color-thief — the canonical JavaScript library

color-thief by Lokesh Dhakar is the de facto standard library for "extract color from image". The algorithm is modified median cut quantization.

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

});

Works in browser and Node.js, returning results in 5–10 ms.

ImagePalette / Vibrant.js

Vibrant.js is a JavaScript port of Android's Palette API. Instead of just a dominant color, it extracts **semantically named swatches** like "Vibrant", "Muted", "Dark Vibrant", "Light Vibrant".

Perfect when you need "a color that represents the subject" — album art, news thumbnails, movie posters.

dthemr — image → complete theme

dthemr generates a full dark/light theme and a Radix-style 11-step palette from a single image. The **last mile** of image extraction.

14. viridis / inferno / magma / ColorBrewer — dataviz canon

Why "pretty colors" are wrong for data visualization

In data visualization, the goal of color is not "pretty" but **to map different values to different colors accurately**. Two constraints must hold simultaneously.

1. **Perceptual uniformity** — the perceived difference in color should be proportional to the difference in data.

2. **Colorblind safety** — avoid traps like red-green discrimination.

viridis-family palettes satisfy both.

viridis / inferno / magma / plasma / cividis

Originally created in 2015 for Python's matplotlib by Stéfan van der Walt and Nathaniel Smith. D3.js, Observable, Plotly and R's ggplot2 all adopted them.

| Colormap | Properties |

| --- | --- |

| viridis | Blue → yellow. Most popular. Works for almost everything. |

| inferno | Black → yellow. Good on dark backgrounds. |

| magma | Similar to inferno but pinker. |

| plasma | Purple → yellow. |

| cividis | Blue-yellow only — safest for colorblind viewers. |

ColorBrewer — palettes by cartographers

Cynthia Brewer at Penn State built ColorBrewer for **maps**. Cartographers have used it since the 1990s, and it has endured as the dataviz canon.

- **Sequential** — ordered values (0 → 100).

- **Diverging** — both directions from a midpoint (−50 → 0 → +50).

- **Qualitative** — categories (gender, region, etc.).

Within each category you can filter for colorblind-safe, print-safe and monitor-safe options.

Code example (D3.js)

const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 100]);

const sample = d3.range(0, 100, 10).map(d => color(d));

15. Korea & Japan — Toss, Kakao, pixiv, Animate color culture

Toss Design System

Toss has published a design system since 2020, with colors documented separately as the "Toss Color Palette". Key properties:

- **13-step grays**, extremely fine-grained. From #f9fafb (almost invisible on white) to #1b1c1f (true black).

- **9-step blues** — 0/100/200/.../800. Toss's signature #3182f6 is "Blue 500".

- **Semantic color names** — `--toss-color-text-default`, `--toss-color-bg-elevation`. Naming by purpose. Close to Radix's "step equals role" philosophy.

Kakao Design

Kakao runs an internal design system called "KakaoUI", with colors guided separately as "KakaoColor". The signature yellow #FEE500 is not just a brand color but a **legally protected trade dress**.

KakaoUI's color system has three axes: "Brand color (yellow) + 12-step grays + semantic".

pixiv Design System — colors for an illustration SNS

pixiv open-sourced its design system "Charcoal" in 2024. Because illustrations are the main content, the principle is to **keep UI colors as achromatic as possible**. The illustration is the star; the UI is the frame.

gray-1: #f6f6f6

gray-9: #1a1a1a

blue-5: #0096fa

Animate — the colors of a Japanese anime goods e-commerce

Animate (animate.co.jp) and similar Japanese anime/manga e-commerce sites deliberately use "loud" colors. The key is integrating **seasonal colors (spring/summer/fall/winter)** and **per-IP limited colors** into the site UI. Visit a series page and the header / accent shifts to the key color of that work.

Korea / Japan / West in one line

- **Korea (Toss, Kakao)** — restrained colors that signal trust. Very fine-grained grays.

- **Japan (pixiv, Animate)** — content-first. UI stays achromatic; content carries the color.

- **West (Radix, Tailwind)** — systematic, function-based palettes. Step and role are decoupled.

16. Who picks what — recommendations by scenario

Scenario 1 — Solo startup, design system 0 to 1

1. **Realtime Colors** — drop four candidates onto a real page instantly.

2. **Material Theme Builder** — let one seed generate the full tonal palette.

3. **Tailwind v4 + @theme** — codify the result in oklch().

Scenario 2 — Series B product design system

1. **Radix Colors v3** — 12 steps / auto dark mode / alpha channel included.

2. **Stark / Polychrom** — audit every component in Figma against APCA and WCAG 2.

3. **Open Color** — backup palette for "secondary accent" needs.

Scenario 3 — Data visualization / BI dashboards

1. **viridis** — continuous mappings.

2. **ColorBrewer** — categorical colors.

3. **Coolors / Adobe Color** — only for the surrounding dashboard UI mood, not the chart colors themselves.

Scenario 4 — Marketing landing / inspiration

1. **Coolors AI** — natural language prompts like "sunset over Seoul" for fast drafts.

2. **Adobe Color Extract** — pull a 5-color palette from a reference photo.

3. **Khroma** — train on your taste, generate forever.

Scenario 5 — Government / finance / medical (accessibility first)

1. **APCA + WCAG 2 AA** — both must pass.

2. **Polychrom / Stark** — audit every text and button.

3. **Color.review** — automatic page-level audit.

4. **cividis (viridis family)** — colorblind-safe first for charts.

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: https://toss.im/design-system

- Charcoal by pixiv: https://github.com/pixiv/charcoal

This article is current as of May 16, 2026. OKLCH, APCA and color-mix are moving fast — worth re-checking every six months.