radix_colors library

A gorgeous, accessible color system

An open-source color system for designing beautiful, accessible websites and apps.

Accessibility made easy

Each step is designed for a specific use case, with multiple combinations guaranteed to pass WCAG contrast ratio.

Automatic dark mode

Get the theme specific color by just by passing the BuildContext to RadixColorsDynamic.

---

Radix Colors provides 15 color scales, designed for white foreground text at step 9

There are 12 steps in each scale. Each step was designed for at least one specific use case.

1 = App background

2 = Subtle background

3 = UI element background

4 = Hovered UI element background

5 = Active / Selected UI element background

6 = Subtle borders and separators

7 = UI element border and focus rings

8 = Hovered UI element border

9 = Solid backgrounds

10 = Hovered solid backgrounds

11 = Low-contrast text

12 = High-contrast text

Classes

RadixColor

RadixColors

RadixColorsDynamic