CSS Generated Colors
#ffffff
Primary - a5
#f6f5ef
Primary - a10
#edebdf
Primary - a15
#e3e1cf
Primary - a20
#dad7bf
Primary - a25
#d1cdb0
Primary - a30
#c8c3a1
Primary - a35
#bfb992
Primary - a40
#b5b083
Primary - a45
#aca674
Primary - a50
#979267
Primary - a55
#837e59
Primary - a60
#6f6b4d
Primary - a65
#5c5940
Primary - a70
#4a4734
Primary - a75
#383629
Primary - a80
#27261d
Primary - a85
#171712
Primary - a90
#000000
Primary - a95
Advanced CSS, SCSS & Tailwind Variables
Streamline your styling workflow and build consistent design systems by programmatically generating a full spectrum of color variables from a single primary color. Get perfectly formatted code with custom variable names, modern color spaces, and automatic fallbacks for CSS, SCSS, and Tailwind CSS.
How does it work?
Simply choose your primary color using the color picker and customize your variable name. Select from modern color spaces like Oklab, P3, and HDR colors for better perceptual mixing. Our engine instantly generates a complete, ready-to-use variable system with tints and shades, formatted for CSS, SCSS, and Tailwind CSS with automatic sRGB fallbacks. Just copy the code block and paste it into your project files to have a robust, future-proof color palette.
Colors overview
Color Values Table
| Color | HEX | RGB | HSL | OKLAB HDR | OKLCH HDR | P3 HDR | Actions |
|---|---|---|---|---|---|---|---|
| | #ffffff | rgb(255, 255, 255) | hsl(none 0% 100%) | oklab(100% 0 0) | oklch(100% 0 none) | color(display-p3 1 1 1) | |
| | #f6f5ef | rgb(246, 245, 239) | hsl(51 28% 95%) | oklab(97% 0 0.01) | oklch(97% 0.01 99) | color(display-p3 0.96 0.96 0.94) | |
| | #edebdf | rgb(237, 235, 223) | hsl(51 28% 90%) | oklab(94% 0 0.02) | oklch(94% 0.02 99) | color(display-p3 0.93 0.92 0.88) | |
| | #e3e1cf | rgb(227, 225, 207) | hsl(54 26% 85%) | oklab(91% 0 0.02) | oklch(91% 0.02 100) | color(display-p3 0.89 0.88 0.82) | |
| | #dad7bf | rgb(218, 215, 191) | hsl(53 27% 80%) | oklab(88% -0.01 0.03) | oklch(88% 0.03 100) | color(display-p3 0.85 0.84 0.76) | |
| | #d1cdb0 | rgb(209, 205, 176) | hsl(53 26% 75%) | oklab(84% -0.01 0.04) | oklch(84% 0.04 100) | color(display-p3 0.82 0.8 0.7) | |
| | #c8c3a1 | rgb(200, 195, 161) | hsl(52 26% 71%) | oklab(81% -0.01 0.05) | oklch(81% 0.05 100) | color(display-p3 0.78 0.77 0.65) | |
| | #bfb992 | rgb(191, 185, 146) | hsl(52 26% 66%) | oklab(78% -0.01 0.05) | oklch(78% 0.05 100) | color(display-p3 0.74 0.73 0.59) | |
| | #b5b083 | rgb(181, 176, 131) | hsl(54 25% 61%) | oklab(75% -0.01 0.06) | oklch(75% 0.06 100) | color(display-p3 0.71 0.69 0.53) | |
| | #aca674 | rgb(172, 166, 116) | hsl(54 25% 56%) | oklab(72% -0.01 0.07) | oklch(72% 0.07 100) | color(display-p3 0.67 0.65 0.48) | |
| | #979267 | rgb(151, 146, 103) | hsl(54 19% 50%) | oklab(65% -0.01 0.06) | oklch(65% 0.06 100) | color(display-p3 0.59 0.57 0.42) | |
| | #837e59 | rgb(131, 126, 89) | hsl(53 19% 43%) | oklab(59% -0.01 0.05) | oklch(59% 0.05 100) | color(display-p3 0.51 0.49 0.37) | |
| | #6f6b4d | rgb(111, 107, 77) | hsl(53 18% 37%) | oklab(52% -0.01 0.04) | oklch(52% 0.04 100) | color(display-p3 0.43 0.42 0.32) | |
| | #5c5940 | rgb(92, 89, 64) | hsl(54 18% 31%) | oklab(46% -0.01 0.04) | oklch(46% 0.04 100) | color(display-p3 0.36 0.35 0.26) | |
| | #4a4734 | rgb(74, 71, 52) | hsl(52 17% 25%) | oklab(40% -0.01 0.03) | oklch(40% 0.03 100) | color(display-p3 0.29 0.28 0.21) | |
| | #383629 | rgb(56, 54, 41) | hsl(52 15% 19%) | oklab(33% 0 0.02) | oklch(33% 0.02 100) | color(display-p3 0.22 0.21 0.17) | |
| | #27261d | rgb(39, 38, 29) | hsl(54 15% 13%) | oklab(27% 0 0.02) | oklch(27% 0.02 100) | color(display-p3 0.15 0.15 0.12) | |
| | #171712 | rgb(23, 23, 18) | hsl(60 12% 8%) | oklab(20% 0 0.01) | oklch(20% 0.01 110) | color(display-p3 0.09 0.09 0.07) | |
| | #000000 | rgb(0, 0, 0) | hsl(none 0% 0%) | oklab(0% 0 0) | oklch(0% 0 none) | color(display-p3 0 0 0) |
Click on a color value to copy it to your clipboard.