# How do other color systems choose their colors? Compare how Material, Radix, Tailwind and others pick colors, and what each choice costs you. - Tailwind red-500, 3.81:1: #fb2c36 - yellow-500, 1.91:1: #f0b100 - green-500, 2.22:1: #00c950 - blue-500, 3.76:1: #2b7fff * proRed.\_500, 3.37:1: #cf6d6e * proYellow.\_500, 3.37:1: #9e8d0d * proGreen.\_500, 3.37:1: #539d5b * proBlue.\_500, 3.37:1: #508edc Every color system makes three choices: the color model it works in, whether a step has the same lightness in every hue, and how much [chroma](https://colortokenskit.com/reference/glossary/index.md#chroma) each hue gets. Tailwind gives each hue its own lightness, so as text on white its yellow-500 reaches 1.91:1 and its blue-500 3.76:1. ColorTokensKit holds one lightness per stop, so every `_500` has the same contrast, and yellow turns darker, toward olive, to match. Here's where other well-known systems land, and what each choice gets you. (Tailwind's colors are shown as an sRGB screen draws them, and ours in Display P3.) ## What each system gives you | System | Same contrast in every hue | Same vividness in every hue | Display P3 colors | sRGB fallback | Dark mode built in | A job for each color | Any hue or brand color | Ready for Swift | | ------------------- | -------------------------- | --------------------------- | ----------------- | ------------- | ------------------ | -------------------- | ---------------------- | --------------- | | Material 3 | ✓ | ✗ | ✗ | – | ✓ | ✓ | ✓ | ✓ | | Stripe | ✓ | ✗ | – | – | – | ✗ | ✗ | ✗ | | Radix Colors | ✗ | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | | Tailwind CSS 4 | ✗ | ✗ | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ | | Adobe Leonardo | ✓ | ✗ | – | – | ✓ | – | ✓ | ✗ | | Accessible Palette | ✓ | ✗ | – | – | – | – | ✓ | ✗ | | Huetone | – | – | – | – | – | – | ✓ | ✗ | | Matt Ström-Awn | – | ✗ | ✗ | – | ✓ | ✗ | ✓ | ✗ | | Linear | – | – | – | – | ✓ | ✓ | ✓ | ✗ | | Apple system colors | ✗ | ✗ | – | – | ✓ | ✓ | ✗ | ✓ | | ColorTokensKit | ✓ | ✓ | ✓ | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ Yes. ✗ No. – Partly, not stated, or doesn't apply. Most systems hold lightness steady across hues and let chroma vary. Tailwind and Radix let both vary, and tune each hue to look its best. ## What each one gets right and gives up | System | Works in | What you get | What it costs | | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Material 3](https://github.com/material-foundation/material-color-utilities) | HCT: CAM16 hue and chroma, CIELab L\* as tone | Contrast you can read from tone numbers, and light and dark schemes with named roles built from a single color, in Swift too. | Chroma belongs to a palette, not a tone, so two hues at one tone can differ in vividness. Tones 50 apart can land just under 4.5:1 (4.48:1 for tone 50 on white, by our math). No wide-gamut colors. | | [Stripe](https://stripe.com/blog/accessible-color-systems), 2019 | CIELAB | The same contrast at each level in every hue, and a rule for pairs: five levels apart for small text. | It's built for Stripe's own products, and each hue is adjusted in their tool, so a new hue takes the same work. | | [Radix Colors](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale) | Tuned by hand | Scales tuned by eye, 12 steps with a job each, light and dark scales, and text steps guaranteed to Lc 60 and Lc 90 in APCA. A tool makes a scale from your brand color. | Contrast differs between scales: Sky, Mint, Lime, Yellow and Amber need dark text on their solid steps. | | [Tailwind CSS 4](https://tailwindcss.com/blog/tailwindcss-v4) | OKLCH | Each hue at the lightness and chroma that suit it, and wide-gamut color on screens that show it. | The same step has a different contrast in every hue, and sRGB screens clip the wide-gamut colors instead of using a designed fallback. Dark mode and your own colors are yours to pick, shade by shade. | | [Adobe Leonardo](https://github.com/adobe/leonardo) | CAM02, LCH, OKLCH and more | Colors generated from the contrast ratio you need, in the color model you choose, for a light or dark background. | You pick key colors for every hue and chroma follows them, so hues can differ in vividness. | | [Accessible Palette](https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems), 2021 | CIELCh | The same lightness at each step, with more saturation where you want warnings to stand out. | Chroma differs by hue on purpose, and CIELCh blues drift toward purple as they get lighter. | | [Huetone](https://github.com/ardov/huetone) | CIELCh or OKLCH | An open-source tool for building your own palette with predictable contrast. | It's a tool, not a palette, so how even the result is depends on your choices. | | [Matt Ström-Awn](https://mattstromawn.com/writing/generating-color-palettes/), 2024 | Okhsl | One formula for any hue, with lightness on one curve, chroma that tapers toward the ends, and dark mode from the same formula. | A share of each hue's maximum is a different amount of chroma per hue, so light yellows get far more than light blues. Okhsl's lightness isn't luminance, so contrast shifts a little by hue. sRGB only for now. | | [Linear](https://linear.app/now/how-we-redesigned-the-linear-ui), 2024 | LCH | Whole light and dark themes from three inputs, a base color, an accent color and contrast, including high-contrast themes. | It's Linear's own theme system rather than a palette, and LCH's equal lightness only looks equal at similar chroma. | | [Apple system colors](https://developer.apple.com/design/human-interface-guidelines/color) | Chosen color by color | Colors named by their job that adapt to dark mode, vibrancy and accessibility settings on their own. | Each color has its own lightness, so as text on white, red, green and blue all miss 4.5:1. | | ColorTokensKit | CIELab L\* for lightness, OKLCH for hue and chroma | The same contrast and vividness at a stop in every hue, in Display P3. | Quieter colors than Tailwind's, and no sRGB fallback. | ## Where ColorTokensKit sits We use the split Material uses: CIELab L\* for lightness, so a stop has the same contrast in every hue, and a newer model for hue and chroma. Ours is [OKLCH](https://colortokenskit.com/under-the-hood/why-oklch/index.md), which keeps a blue looking blue from light to dark. Then we hold chroma too: at each stop every hue gets the same chroma, and only a hue that can't reach it in Display P3 gets less. [How the ramps are built](https://colortokenskit.com/under-the-hood/how-ramps-are-built/index.md) shows the recipe. You get the same contrast and the same vividness at a stop in every hue, across 36 hues in Display P3. The cost is brightness: our colors are quieter than Tailwind's, and dark yellows read as olive. Like Tailwind's, they have no sRGB fallback, so screens that only show sRGB clip the most vivid ones. [What does equal lightness cost?](https://colortokenskit.com/under-the-hood/trade-offs/index.md) covers each trade-off and what to do about it. ## Sources - Material Color Utilities, [hct.ts and tonal\_palette.ts](https://github.com/material-foundation/material-color-utilities), which define HCT, tones and tonal palettes, and its [Swift port](https://github.com/material-foundation/material-color-utilities/tree/main/swift), with dark schemes and roles like `primary` and `onPrimary` in `MaterialDynamicColors`. - Stripe, [Designing accessible color systems](https://stripe.com/blog/accessible-color-systems) (2019). - Radix Colors, [Understanding the scale](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale), [Installation](https://www.radix-ui.com/colors/docs/overview/installation), which lists the dark scales, and [Custom palettes](https://www.radix-ui.com/colors/docs/overview/custom-palettes). - Tailwind CSS, the [v4.0 announcement](https://tailwindcss.com/blog/tailwindcss-v4) (2025), [theme.css](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css) (version 4.3.3), the source of the swatches above, and the docs on [dark mode](https://tailwindcss.com/docs/dark-mode) and [colors](https://tailwindcss.com/docs/colors). - Adobe, [Leonardo](https://github.com/adobe/leonardo), whose [contrast-colors package](https://github.com/adobe/leonardo/blob/main/packages/contrast-colors/README.md) takes a background `lightness` for light and dark themes. - Eugene Fedorenko, [Accessible Palette: stop using HSL for color systems](https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems) (2021). - Alexey Ardov, [Huetone](https://github.com/ardov/huetone). - Matt Ström-Awn, [Generating color palettes](https://mattstromawn.com/writing/generating-color-palettes/) (2024). - Linear, [How we redesigned the Linear UI](https://linear.app/now/how-we-redesigned-the-linear-ui) (2024). - Apple, [Human Interface Guidelines: Color](https://developer.apple.com/design/human-interface-guidelines/color). - W3C, [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/), on blues in CIE LCH turning purple. - High, Green and Nussbaum, [on the Helmholtz–Kohlrausch effect](https://doi.org/10.1002/col.22839) (2023), which is strong in blues and negligible in yellows. ## See also - [Why use ColorTokensKit over native colors?](https://colortokenskit.com/basics/why-colortokenskit/index.md): What you gain over SwiftUI's system colors, asset catalogs and hex values, and what it costs. - [How did we choose and build these colors?](https://colortokenskit.com/basics/how-the-colors-were-built/index.md): Why every hue shares one lightness and one chroma at each stop, and how the 36 hues were named. - [Fitting colors into Display P3](https://colortokenskit.com/under-the-hood/gamut-mapping/index.md): Stay inside Display P3 without losing contrast: chroma drops, lightness holds. - [How accessible is it?](https://colortokenskit.com/basics/how-accessible/index.md): What the palette guarantees for contrast in every hue and mode, and what you still need to check. --- From ColorTokensKit, by Penguin Design Ventures: https://colortokenskit.com/under-the-hood/other-color-systems/ (updated September 26, 2026).