OKLCH Studio
Accessible OKLCH scale
One color in. Eleven lightness steps keep the same hue. The light and dark text roles are the stops that pass WCAG AA on the lightest and darkest steps.
Source #214ac8 · Light text #0c006f on #b3f0ff · Dark text #b3f0ff on #0c006f
- 50#b3f0ffoklch(0.970 0.201 265.2)
- 100#a6e2ffoklch(0.930 0.201 265.2)
- 200#93ceffoklch(0.870 0.201 265.2)
- 300#78b0ffoklch(0.780 0.201 265.2)
- 400#6095ffoklch(0.700 0.201 265.2)
- 500#4a7bfdoklch(0.620 0.201 265.2)
- 600#3462e1oklch(0.540 0.201 265.2)
- 700#1d44c2oklch(0.450 0.201 265.2)
- 800#0924a4oklch(0.360 0.201 265.2)
- 900#050089oklch(0.280 0.201 265.2)
- 950#0c006foklch(0.200 0.201 265.2)
Tailwind v4 theme
@theme {
--color-brand-50: oklch(0.970 0.201 265.2);
--color-brand-100: oklch(0.930 0.201 265.2);
--color-brand-200: oklch(0.870 0.201 265.2);
--color-brand-300: oklch(0.780 0.201 265.2);
--color-brand-400: oklch(0.700 0.201 265.2);
--color-brand-500: oklch(0.620 0.201 265.2);
--color-brand-600: oklch(0.540 0.201 265.2);
--color-brand-700: oklch(0.450 0.201 265.2);
--color-brand-800: oklch(0.360 0.201 265.2);
--color-brand-900: oklch(0.280 0.201 265.2);
--color-brand-950: oklch(0.200 0.201 265.2);
}