A surface, a border, and a clear next step.
Create project →Find a shade. Make it yours. See it in your next design.
Set your primary, surfaces, text, and borders. The UI examples use these exact roles.
A surface, a border, and a clear next step.
Create project →Text / background 16.93:1 · AA pass
Primary foreground uses the more readable of black and white. Check your custom text and surface pairing in Accessibility.
Keep the official OKLCH values, or export your own color scale.
:root {
--color-violet-50: oklch(96.9% 0.016 293.756);
--color-violet-100: oklch(94.3% 0.029 294.588);
--color-violet-200: oklch(89.4% 0.057 293.283);
--color-violet-300: oklch(81.1% 0.111 293.571);
--color-violet-400: oklch(70.2% 0.183 293.541);
--color-violet-500: oklch(60.6% 0.25 292.717);
--color-violet-600: oklch(54.1% 0.281 293.009);
--color-violet-700: oklch(49.1% 0.27 292.581);
--color-violet-800: oklch(43.2% 0.232 292.759);
--color-violet-900: oklch(38% 0.189 293.745);
--color-violet-950: oklch(28.3% 0.141 291.089);
}Official palette: Tailwind CSS 4.2.1. HEX values are nearest sRGB approximations. Custom scales are generated by Eggradients.