Radix UI Color Palette — Accessibility & Quality Audit
Radix UI ships 16 color ramps with 13 shades each. Chromametry scores it 67.80 / 100, ranking #10 of 11 design systems in the palette benchmark.
Open Radix UI in the Palette Generator →
Free, no account, runs in your browser. Edit any ramp and watch the WCAG contrast and scores update live.
Is the Radix UI palette WCAG accessible?
Any two Radix UI shades that are at least 10 steps apart reach 4.5:1 contrast in every ramp — that is the palette's contrast span (K). Pick text and background 10 or more steps apart and you never need to check a pair by hand.
| Contrast target | Used for | Steps apart needed (K) |
|---|---|---|
| 3:1 | large text, icons, UI borders (WCAG AA) | 8 of 12 |
| 4.5:1 | body text (WCAG AA) | 10 of 12 |
| 7:1 | body text (WCAG AAA) | 11 of 12 |
Quality metrics
Each metric is 0–1 (higher is better); the composite score is their geometric mean × 100.
| Metric | Radix UI | What it measures |
|---|---|---|
| Contrast efficiency | 0.474 | how much of the ramp the WCAG contrast span consumes |
| Lightness linearity | 0.798 | whether perceived lightness steps evenly |
| Chroma smoothness | 0.768 | whether saturation changes without kinks |
| Hue stability | 0.947 | whether each ramp keeps its hue from light to dark |
| Spacing uniformity | 0.521 | whether adjacent shades are equally distinct (CIEDE2000) |
All 16 ramps
gray
#ffffff · #f9f9f9 · #f0f0f0 · #e8e8e8 · #e0e0e0 · #d9d9d9 · #cecece · #bbbbbb · #8d8d8d · #838383 · #646464 · #202020 · #000000
mauve
#ffffff · #faf8fb · #f5f2f7 · #ede9ef · #e6e1e8 · #dfdae0 · #d3cdd7 · #c1bac7 · #8e8896 · #837d8b · #65636d · #211f26 · #000000
slate
#ffffff · #f8f9fa · #f1f3f5 · #eceef0 · #e6e8eb · #dfe3e6 · #d7dbdf · #c1c8cd · #889096 · #7e868c · #687076 · #11181c · #000000
sage
#ffffff · #f7f9f8 · #eef1f0 · #e6e9e8 · #dfe2e0 · #d7dad9 · #cbcfcd · #b8bcba · #868e8b · #7c8481 · #5f6563 · #1a211e · #000000
olive
#ffffff · #f8faf8 · #f2f4f2 · #ecefec · #e6e9e6 · #dfe3df · #d2d7d2 · #bdc3bd · #8b918b · #808780 · #60655f · #1d211c · #000000
sand
#ffffff · #f9f9f8 · #f3f3f2 · #eeeeec · #e9e9e6 · #e3e3df · #d6d6d0 · #c0c0b8 · #90908c · #868682 · #696965 · #21201c · #000000
tomato
#ffffff · #fff8f7 · #feebe7 · #ffdcd3 · #ffcdc2 · #fdbdaf · #f5a898 · #ec8e7b · #e54d2e · #dd4425 · #d13415 · #5c271f · #000000
red
#ffffff · #fff7f7 · #feebec · #ffdbdc · #ffcdce · #fdbdbe · #f4a9aa · #eb8e90 · #e5484d · #dc3d43 · #cd2b31 · #381316 · #000000
ruby
#ffffff · #fff7f8 · #feeaed · #ffdce1 · #ffced6 · #f8bfc8 · #efacb8 · #e592a3 · #e54666 · #dc3b5d · #ca244d · #3a141e · #000000
crimson
#ffffff · #fff7fb · #feecf4 · #ffdcec · #ffcee4 · #f9bdd9 · #f0a9cd · #e58fbf · #e93d82 · #df3478 · #cb1d63 · #381525 · #000000
pink
#ffffff · #fff7fc · #fee9f5 · #fbdcef · #f6cee7 · #efbfdd · #e7acd0 · #dd90c3 · #d6409f · #cf3897 · #c2298a · #3b0a2a · #000000
plum
#ffffff · #fdf7fd · #fbebfb · #f7def8 · #f2d1f3 · #e9c2ec · #deade3 · #cf91d8 · #ab4aba · #a144af · #953ea3 · #3d0f3f · #000000
purple
#ffffff · #fbf7fe · #f7edfe · #f2e2fc · #ead5f9 · #e0c4f4 · #d1afec · #be93e4 · #8e4ec6 · #8445bc · #793aaf · #2b0e44 · #000000
violet
#ffffff · #faf8ff · #f4f0fe · #ebe4ff · #e1d9ff · #d4cafe · #c2b5f5 · #aa99ec · #6e56cf · #644fc1 · #5746af · #20134b · #000000
iris
#ffffff · #f8f8ff · #f0f1fe · #e6e7ff · #dadcff · #cbcdff · #b8baf8 · #9b9ef0 · #5b5bd6 · #5151cd · #4646b7 · #171764 · #000000
indigo
#ffffff · #f8faff · #f0f4ff · #e6edfe · #d9e2fc · #c6d4f9 · #aec0f5 · #8da4ef · #3e63dd · #3358d4 · #2a4cb2 · #1f2d5c · #000000
How Radix UI compares
Design systems that score higher: Adobe Spectrum (88.59), IBM Carbon (88.46), U.S. Web Design System (87.67), Salesforce Lightning 2 (86.31), GitHub Primer (85.45), Atlassian (84.23), Tailwind CSS (81.04), Ant Design (78.76), Material UI v4 (69.43).
Other audits: Adobe Spectrum · IBM Carbon · U.S. Web Design System · Salesforce Lightning 2 · GitHub Primer · Atlassian · Tailwind CSS · Ant Design · Material UI v4 · Shopify Polaris — or see the full ranking.
Want a palette that scores higher? The Palette Generator builds ramps from any base color with even perceptual steps and a short contrast span.