{
  "slug": "radix-colors",
  "name": "Radix Colors",
  "url": "https://www.radix-ui.com/colors",
  "cat": "design",
  "group": "design",
  "tagline": "Accessible 12-step colour system",
  "price": "Free · MIT licensed",
  "tier": "free",
  "pick": false,
  "what": "Open-source colour system of 32 scales, each with 12 steps mapped to a specific job: steps 1-3 backgrounds, 4-6 interactive component states, 7-8 borders and separators, 9-11 solid fills, 12 accessible text. Ships matched light and dark scales plus alpha variants, as CSS or a JS object.",
  "why": "Removes all guesswork about which grey a hover state should be. Because every scale shares the same step semantics, you can swap blue for violet across an entire app by changing one import.",
  "warn": "The step numbers are the API — step 9 means 'solid brand fill', not 'ninth darkest'. Wiring it into Tailwind needs a community plugin or hand-written theme keys; the package itself just gives you CSS custom properties.",
  "install": "npm i @radix-ui/colors",
  "category": {
    "key": "design",
    "name": "Design tools, color & type",
    "desc": "Canvases, palettes, typefaces, icon sets, illustrations. Mostly free.",
    "group": "design",
    "groupName": "Make it look right"
  },
  "freshness": null,
  "health": {
    "ok": true,
    "status_code": 200,
    "final_url": null,
    "checked_at": "2026-08-18T21:45:05.257+00:00"
  },
  "corrected_at": null,
  "upstream_changed_at": null
}