# radix-ui/colors

A gorgeous, accessible color system.

Repository: https://github.com/radix-ui/colors
Canonical: https://ross.abutalabs.com/products/radix-ui-colors
Homepage: https://www.radix-ui.com/colors
Language: TypeScript
License: MIT
License Family: permissive
Topics: design, color, colors, color-palette, ui, design-system
Last push: 2025-12-17T20:46:00+00:00

## Health v2 (maintenance only)
Score: 58/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 57, release rhythm 35, longevity 100
- inputs: {"age_days": 2067, "days_push": 259, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1652, forks 88 (observed 2026-08-28T04:05:16.916477+00:00)

## What it is
Radix Colors is an accessible, carefully designed color system for user interfaces, distributed as CSS files and JS packages. It provides 12-step scales for dozens of hues with light and dark mode variants, alpha scales, and semantic usage guidance.

## Use cases
- pick accessible color palettes for a web app
- get light and dark mode color scales that just work
- find colors for backgrounds, borders, and text with correct contrast
- set up a design system color foundation
- use tinted gray scales that pair with a brand accent color
- prototype UI colors quickly via CDN stylesheets

## When to choose
- you want pre-tuned, WCAG-conscious color scales instead of hand-picking hex values
- your app needs consistent light and dark themes
- you're building on Radix UI or want a neutral, framework-agnostic color foundation

## When to avoid
- you need heavily customized brand colors, since the scales are designed not to be tweaked
- you need dynamic runtime color generation rather than fixed palettes
- you want a full theming engine with runtime theme switching rather than static CSS variables

## Facets
- artifact type: library
- maturity: stable
- function: ui-components, css-framework, theme
- domain: web-development, frontend, web-design, accessibility
- platform: browser, cross-platform
- tags: color-palette, design-system, css-variables, dark-mode, radix-ui, web-server, nodejs

## Member repositories
- radix-ui/colors (main) score 58

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:05:16.916477+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T03:45:00.920887+00:00, confidence not recorded.
  - readme: https://github.com/radix-ui/colors (fetched 2026-08-28T04:05:16.916477+00:00, sha 22066005e877)
  - homepage: https://www.radix-ui.com/colors (fetched 2026-08-29T11:18:13.760558+00:00, sha d0870c6297ef)
  - site_page: https://www.radix-ui.com/colors/docs/overview/installation (fetched 2026-08-29T11:18:13.763155+00:00, sha e68af81eae93)
  - site_page: https://www.radix-ui.com/colors/docs/palette-composition/scales (fetched 2026-08-29T11:18:13.764825+00:00, sha 63dede284e53)
  - site_page: https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette (fetched 2026-08-29T11:18:13.766283+00:00, sha 7163411e763f)
  - site_page: https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale (fetched 2026-08-29T11:18:13.767983+00:00, sha bf6d0ef6567e)
- Data as of 2026-08-30T08:39:29.467469+00:00.