.png)
1 day ago
3
Go back
Get material colors, tailwindcss colors in oklch format. Just copy and paste to use easily in your projects.
CSS Code
:root {
--primary: light-dark(oklch(0.417 0.2566 264.18), oklch(0.831 0.0857 279.98));
--on-primary: light-dark(oklch(1.000 0.0000 0), oklch(0.331 0.2029 264.17));
--primary-container: light-dark(oklch(0.499 0.2523 267.99), oklch(0.499 0.2523 267.99));
--on-primary-container: light-dark(oklch(0.879 0.0607 282.00), oklch(0.879 0.0607 282.00));
--secondary: light-dark(oklch(0.489 0.1197 275.35), oklch(0.831 0.0857 279.98));
--on-secondary: light-dark(oklch(1.000 0.0000 0), oklch(0.320 0.1268 271.29));
--secondary-container: light-dark(oklch(0.772 0.1175 278.46), oklch(0.412 0.1221 273.99));
--on-secondary-container: light-dark(oklch(0.398 0.1229 273.67), oklch(0.788 0.1085 278.40));
--error: light-dark(oklch(0.506 0.1927 27.70), oklch(0.838 0.0891 26.76));
--on-error: light-dark(oklch(1.000 0.0000 0), oklch(0.328 0.1336 27.32));
--error-container: light-dark(oklch(0.918 0.0418 25.23), oklch(0.417 0.1702 27.38));
--on-error-container: light-dark(oklch(0.417 0.1702 27.38), oklch(0.918 0.0418 25.23));
--surface: light-dark(oklch(0.983 0.0097 305.41), oklch(0.190 0.0183 279.56));
--on-surface: light-dark(oklch(0.225 0.0175 279.92), oklch(0.915 0.0190 292.59));
--surface-variant: light-dark(oklch(0.916 0.0271 285.85), oklch(0.399 0.0270 279.49));
--on-surface-variant: light-dark(oklch(0.399 0.0270 279.49), oklch(0.830 0.0278 285.78));
--inverse-surface: light-dark(oklch(0.312 0.0179 280.80), oklch(0.915 0.0190 292.59));
--inverse-on-surface: light-dark(oklch(0.958 0.0188 292.61), oklch(0.312 0.0179 280.80));
--outline: light-dark(oklch(0.571 0.0275 282.97), oklch(0.656 0.0280 285.60));
--outline-variant: light-dark(oklch(0.830 0.0278 285.78), oklch(0.399 0.0270 279.49));
}
Palettes
What It Does
This tool generates Material You (Material 3) color tokens based on a base color you pick. It outputs colors in oklch format, fully compatible with Tailwind CSS v4. You can preview how your palette will look in light and dark modes, with support for:
- Primary, Secondary, Error, and Surface colors
- On-color variants (e.g., onPrimary, onError)
- Container and surface variants
- Adjustable contrast levels
How to Use
- Pick a base color or select one from the presets.
- Toggle between light/dark mode, contrast level, and color scheme options.
- Click on any color block to copy the oklch color value.
- Paste it directly into your Tailwind config or CSS.
Tailwind v4 Ready
All colors are in oklch format, optimized for Tailwind CSS v4. Just copy and paste into your theme config and you're good to go.
