mvpwrappers
Go back

Material 3 colors

Get material colors, tailwindcss colors in oklch format. Just copy and paste to use easily in your projects.

Theme Config

Color Scheme
Light Scheme
primary
onPrimary
secondary
onSecondary
error
onError
primaryContainer
onPrimaryContainer
secondaryContainer
onSecondaryContainer
errorContainer
onErrorContainer
surface
onSurface
surfaceVariant
onSurfaceVariant
Dark Scheme
primary
onPrimary
secondary
onSecondary
error
onError
primaryContainer
onPrimaryContainer
secondaryContainer
onSecondaryContainer
errorContainer
onErrorContainer
surface
onSurface
surfaceVariant
onSurfaceVariant
CSS Code
Loading syntax highlighting...
Palettes
primary
0
1
2
4
5
10
20
30
40
50
60
70
80
90
95
98
99
100
secondary
0
1
2
4
5
10
20
30
40
50
60
70
80
90
95
98
99
100
error
0
1
2
4
5
10
20
30
40
50
60
70
80
90
95
98
99
100
neutral
0
1
2
4
5
10
20
30
40
50
60
70
80
90
95
98
99
100

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

  1. Pick a base color or select one from the presets.
  2. Toggle between light/dark mode, contrast level, and color scheme options.
  3. Click on any color block to copy the oklch color value.
  4. 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.