Radix Colors vs Open Color – UI-Tuned vs Minimalist Scales

Radix Colors and Open Color both offer modern, thoughtfully designed palettes — but with different philosophies. Radix is highly UI-tuned with light/dark pairs; Open Color is minimalist and framework-agnostic.

Palette structure

Radix Colors12 steps, paired light/dark

For each hue: light (blue1–blue12), dark (blueDark1–blueDark12), and alpha variants (blueA1–blueA12). Rich neutral set: slate, mauve, sand, etc.

Each index is tuned for a specific UI role:

1–3: subtle background layers
4–6: surfaces, borders, hovers
7–10: solid accents and states
11–12: strong foreground text/icons

Open Color10 steps, single ramp

13 hues: gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow, orange.

Steps 0–9 from light to dark. No built-in dark variant — each hue has a single smooth ramp. Simple and not multi-dimensional.

Naming conventions

Radix

{hue}{index} for light: blue1, …, blue12. Dark: blueDark1–blueDark12. Alpha: blueA7, blueDarkA9. Fits token mapping well.

colors: {
  bg: { app: slate1, surface: slate3 },
  text: { primary: slate12, muted: slate11 },
  primary: {
    softBg: blue4, solidBg: blue9, border: blue7,
  },
}

Open Color

{hue}-{index}: blue-0–blue-9. Same for neutrals: gray-0–gray-9. Very simple, consistent naming — easy to memorise and type.

Design intent and philosophy

Radix ColorsUI-centric

Designed for apps, tuned using modern color science and visual QA on real components
Accessible defaults with good layering for overlays, popovers, dialogs
Predictable roles per index — light/dark pairing is the core feature
Battle-tested via Radix UI and shadcn/ui

Open ColorMinimalist, framework-agnostic

Clean, small, open-source palette with good readability
No heavy opinionation about UI roles — you decide what each index means
Fewer hues than Tailwind or Radix, neutral character easily re-themed around brands
Great starting point if you want simplicity without framework lock-in

Light / dark theming

Radix — paired scales by design

For each hue, you get paired light/dark scales. Indices align across themes: blue9 and blueDark9 both represent "solid accent". slate2 and slateDark2 both act as subtle backgrounds.

const theme = {
  light: { bg: slate1, surface: slate3, primary: blue9 },
  dark:  { bg: slateDark1, surface: slateDark3, primary: blueDark9 },
}

Open Color — one ramp, theming is up to you

Open Color ships one ramp per hue. For dark themes you choose which indices to use for dark backgrounds (gray-9, gray-8), light text (gray-1, gray-2), and accents. This is by design — Open Color gives you raw but well-behaved scales; theming strategy is your call.

Neutral colors and surfaces

Radix neutralsslate, mauve, sand…

Tuned specifically for app backgrounds, cards, panels and controls. Balanced to avoid unwanted color casts in dark themes. Alpha neutrals are great for translucent overlays and modals.

Open Color grayStraightforward ramp

A clean neutral ramp from very light to dark. Excellent for websites, content UIs and basic app surfaces. Doesn't come with pre-paired dark equivalents; you still decide which indices mean "background", "surface", or "border".

When to choose which

Choose Radix Colors if…

You're building product UIs with light + dark themes, overlays and dialogs
You use Radix UI, shadcn/ui or similar React libraries
You want explicit index-to-role mapping, curated alpha scales, minimal manual tuning
You're building a SaaS app where UI nuance matters

Choose Open Color if…

You want a small, clean palette for content sites, blogs and smaller apps
You're building your own design system without heavy framework opinions
You prefer simple naming, neutral aesthetics and full control over semantics
You want a base palette that adapts easily to any brand

Using both via ColorR

You can mix Radix and Open Color effectively:

Use Open Color for marketing and content surfaces, simple data visualisation hues
Use Radix Colors for in-app UI, especially with complex themes and overlays
Use ColorR to find closest matches in Lab/OKLCH — e.g. how open-color blue-6 compares to radix blue9 in lightness and chroma

Radix Colors vs Open Color – UI-tuned vs minimalist scales