Radix Colors

UI のためにアクセシブルに設計された 12 段階のカラーシステム。プリセットでもカスタムでも使える。

accessibilityColor Palette
Platforms
Web
Pricing Free

Radix Colors は、アクセシブルなインターフェースを構築するためのオープンソースなカラーシステムです。各カラースケールは UI の用途に合わせた 12 段階で設計されており、背景(1–2)、インタラクティブコンポーネント(3–5)、ボーダー・セパレーター(6–8)、ソリッドカラー(9–10)、アクセシブルテキスト(11–12)として使えます。標準で gray/mauve/slate/sage などのニュートラルと、tomato、red、ruby、crimson、pink、plum、purple、violet、iris、indigo といったアクセントを多数収録、いずれもライト・ダーク・アルファ版が用意されています。

/colors/custom ページはブラウザ上で動くパレット生成器で、ブランドカラーを指定するだけでアクセシビリティ検証済みの 12 段階スケールが完成します。生成したスケールは Radix Themes はもちろん、独自のデザインシステムにもそのまま組み込めます。Radix の残りのスタックを使わなくても、配色ツールとして単独で便利です。WorkOS が Radix プロジェクト(Themes、Primitives、Icons)の一部として提供しており、MIT ライセンスで無料です。