CSS Generated Colors
#ffffff
AAA - 21
#eeeeff
AAA - 18.3
#dcddff
AAA - 15.82
#caccfe
AAA - 13.57
#b7bbfd
AAA - 11.53
#a4abfc
AAA - 9.8
#909bfb
AAA - 8.26
#798cfa
Fail - 3.02
#607df9
Fail - 3.62
#3e6ef7
Fail - 4.39
#3a61d8
AA - 5.41
#3655ba
AA - 6.63
#31499d
AAA - 8.16
#2c3d81
AAA - 10.04
#263266
AAA - 12.13
#20274d
AAA - 14.39
#191c34
AAA - 16.7
#11111d
AAA - 18.72
#000000
AAA - 21
Colors conversions
| Color | HEX | RGB | HWB | OKLAB | OKLCH | P3 | Actions |
|---|---|---|---|---|---|---|---|
| | #fff | rgb(100% 100% 100%) | hwb(none 100% 0%) | oklab(100% 0 0) | oklch(100% 0 none) | color(display-p3 1 1 1) | |
| | #eef | rgb(93.3% 93.3% 100%) | hwb(240 93% 0%) | oklab(95.4% 0.006 -0.022) | oklch(95.4% 0.023 286) | color(display-p3 0.933 0.933 0.994) | |
| | #dcddff | rgb(86.3% 86.7% 100%) | hwb(240 86% 0%) | oklab(90.7% 0.011 -0.045) | oklch(90.7% 0.046 284) | color(display-p3 0.863 0.867 0.989) | |
| | #caccfe | rgb(79.2% 80% 99.6%) | hwb(240 79% 0.39%) | oklab(86% 0.016 -0.067) | oklch(86% 0.069 283) | color(display-p3 0.794 0.8 0.981) | |
| | #b7bbfd | rgb(71.8% 73.3% 99.2%) | hwb(240 72% 0.78%) | oklab(81.3% 0.018 -0.091) | oklch(81.3% 0.093 281) | color(display-p3 0.72 0.733 0.972) | |
| | #a4abfc | rgb(64.3% 67.1% 98.8%) | hwb(240 64% 1.2%) | oklab(76.7% 0.019 -0.114) | oklch(76.7% 0.116 279) | color(display-p3 0.648 0.67 0.965) | |
| | #909bfb | rgb(56.5% 60.8% 98.4%) | hwb(230 56% 1.6%) | oklab(72.1% 0.018 -0.138) | oklch(72.1% 0.14 277) | color(display-p3 0.573 0.606 0.958) | |
| | #798cfa | rgb(47.5% 54.9% 98%) | hwb(230 47% 2%) | oklab(67.6% 0.011 -0.163) | oklch(67.6% 0.163 274) | color(display-p3 0.489 0.547 0.951) | |
| | #607df9 | rgb(37.6% 49% 97.6%) | hwb(230 38% 2.4%) | oklab(63.1% 0.001 -0.187) | oklch(63.1% 0.187 270) | color(display-p3 0.4 0.487 0.945) | |
| | #3e6ef7 | rgb(24.3% 43.1% 96.9%) | hwb(220 24% 3.1%) | oklab(58.5% -0.016 -0.211) | oklch(58.5% 0.212 266) | color(display-p3 0.288 0.427 0.935) | |
| | #3a61d8 | rgb(22.7% 38% 84.7%) | hwb(230 23% 15%) | oklab(53.4% -0.012 -0.188) | oklch(53.4% 0.188 266) | color(display-p3 0.262 0.376 0.818) | |
| | #3655ba | rgb(21.2% 33.3% 72.9%) | hwb(230 21% 27%) | oklab(48.5% -0.008 -0.163) | oklch(48.5% 0.163 267) | color(display-p3 0.239 0.33 0.704) | |
| | #31499d | rgb(19.2% 28.6% 61.6%) | hwb(230 19% 38%) | oklab(43.6% -0.005 -0.14) | oklch(43.6% 0.14 268) | color(display-p3 0.212 0.284 0.595) | |
| | #2c3d81 | rgb(17.3% 23.9% 50.6%) | hwb(230 17% 49%) | oklab(38.5% -0.001 -0.116) | oklch(38.5% 0.116 270) | color(display-p3 0.186 0.237 0.489) | |
| | #263266 | rgb(14.9% 19.6% 40%) | hwb(230 15% 60%) | oklab(33.7% 0.002 -0.092) | oklch(33.7% 0.092 271) | color(display-p3 0.158 0.195 0.387) | |
| | #20274d | rgb(12.5% 15.3% 30.2%) | hwb(230 13% 70%) | oklab(28.8% 0.004 -0.07) | oklch(28.8% 0.07 273) | color(display-p3 0.131 0.152 0.292) | |
| | #191c34 | rgb(9.8% 11% 20.4%) | hwb(230 9.8% 80%) | oklab(23.7% 0.006 -0.046) | oklch(23.7% 0.046 277) | color(display-p3 0.1 0.109 0.197) | |
| | #11111d | rgb(6.67% 6.67% 11.4%) | hwb(240 6.7% 89%) | oklab(18.4% 0.006 -0.024) | oklch(18.4% 0.024 284) | color(display-p3 0.067 0.067 0.11) | |
| | #000 | rgb(0% 0% 0%) | hwb(none 0% 100%) | 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.
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.
Frequently asked questions
What is a CSS variables generator?
It turns a primary color into a full set of design-system color variables (with tints and shades) and outputs them as ready-to-use CSS custom properties and SCSS variables.
What is the difference between CSS custom properties and SCSS variables?
CSS custom properties (--name) are read by the browser at runtime and can change dynamically (e.g. for theming); SCSS variables ($name) are resolved once at build time. The tool gives you both.
Which export formats are supported?
CSS, SCSS, Tailwind (v3 and v4), Android, Flutter, SwiftUI, .NET MAUI, JSON, YAML, CSV, Style Dictionary and Figma variables.
Can I customize the variable names?
Yes. Set a custom prefix and color format so the generated variables match your existing naming conventions and codebase.
What are tints and shades?
Tints are lighter steps of your color (mixed toward white) and shades are darker steps (mixed toward black), giving you a consistent scale for backgrounds, borders and text.