CSS & SCSS color variables generator

#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

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 HEX RGB HWB OKLAB OKLCH P3 Actions
#fffrgb(100% 100% 100%)hwb(none 100% 0%)oklab(100% 0 0)oklch(100% 0 none)color(display-p3 1 1 1)
#eefrgb(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)
#dcddffrgb(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)
#caccfergb(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)
#b7bbfdrgb(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)
#a4abfcrgb(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)
#909bfbrgb(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)
#798cfargb(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)
#607df9rgb(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)
#3e6ef7rgb(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)
#3a61d8rgb(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)
#3655bargb(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)
#31499drgb(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)
#2c3d81rgb(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)
#263266rgb(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)
#20274drgb(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)
#191c34rgb(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)
#11111drgb(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)
#000rgb(0% 0% 0%)hwb(none 0% 100%)oklab(0% 0 0)oklch(0% 0 none)color(display-p3 0 0 0)

Export Color Converter Table

Customize your export options below

Colors

#fff

#eef

#dcddff

#caccfe

#b7bbfd

#a4abfc

#909bfb

#798cfa

#607df9

#3e6ef7

#3a61d8

#3655ba

#31499d

#2c3d81

#263266

#20274d

#191c34

#11111d

#000

Spaces

Standard Color Spaces

HDR Color Spaces

HDR

Export Formats

CSS Variables

.css

SCSS Variables

.scss

Tailwind v3

.js

Tailwind v4

.css

Style Dictionary

.json

Figma Variables

.json

JSON

.json

CSV

.csv

YAML

.yaml

Contrast Checker

Check accessibility compliance of your palette colors.

Body Pass

Lc ≥ 60 · ≥ 4.5:1

Large Pass

Lc ≥ 45 · ≥ 3.0:1

Fail

Below thresholds

#ffffff

Fail - 1

Lc 0

#eeeeff

Fail - 1.14

Lc -8

#dcddff

Fail - 1.32

Lc -18

#caccfe

Fail - 1.54

Lc -28

#b7bbfd

Fail - 1.81

Lc -38

#a4abfc

Fail - 2.14

Lc -47

#909bfb

Fail - 2.54

Lc -55

#798cfa

Fail - 3.02

Lc -62

#607df9

Fail - 3.62

Lc -69

#3e6ef7

Fail - 4.39

Lc -75

#3a61d8

AA - 5.41

Lc -82

#3655ba

AA - 6.63

Lc -87

#31499d

AAA - 8.16

Lc -93

#2c3d81

AAA - 10.04

Lc -97

#263266

AAA - 12.13

Lc -101

#20274d

AAA - 14.39

Lc -104

#191c34

AAA - 16.7

Lc -106

#11111d

AAA - 18.72

Lc -107

#000000

AAA - 21

Lc -108

Export palette

Choose an export category, then select the format that matches your workflow.

Customize the prefix/base name for variables in CSS, SCSS, Android, Flutter, Swift, and MAUI files.

CSS (.css)

PRO

Export web-ready CSS variables.

SCSS (.scss)

PRO

Export Sass tokens and variables.

Tailwind Config v3 (.js)

PRO

Generate a Tailwind v3 config file.

Tailwind Theme v4 (.css)

PRO
NEW

Export theme variables for Tailwind v4.

Web Code

Quick access to CSS, SCSS, & Tailwind code for web development.

Loading syntax highlighting...

Tips & Keyboard shortcuts

Learn how to use the tools effectively with these tips and shortcuts.

Generate & Customize

  • Generate random color

    Space

  • Show this help

    F1

  • Adjust color count

    Use range slider

  • Customize variable name

    Edit name input field

  • Copy color values

    Click color blocks

History & Navigation

  • Undo last change

    Ctrl + Z

  • Redo undone change

    Ctrl + Shift + Z

Code & Export

  • Switch language tabs

    Click CSS/SCSS/Tailwind tabs

  • Change color space

    Select a color space

  • Copy generated code

    Click copy button in code block

  • Copy individual colors

    Click palette color blocks

Pro Tips

  • Use modern color spaces like Oklab for better perceptual color mixing

  • Generated variables follow a consistent naming pattern for easy integration

  • Your color history is automatically saved for easy backtracking

  • Customize variable names to match your design system conventions

  • Advanced color spaces include automatic sRGB fallbacks for compatibility

  • Export to Tailwind CSS config for seamless framework integration

Submit feedback

We'd love to hear from you, tell us what you think about Colorffy, and what we can improve.

What's your suggestion?

0/250 characters

Optional

Some basic browser environment data is included to help us reproduce issues.

Colorffy Logo

Create your Colorffy account

Create. Explore. Build. Check.

Continue with

or

Already have an account? Log in

By signing up, you agree to our Terms of Service and Privacy Policy

Upgrade to Pro and build faster.

Trusted by designers and developers around the world.

.css.csv.scss.json.pdf.jpg.png.svgtailwindstyle dictionarywallpapers4kultrawidewidescreenapp tokensflutterandroidswiftmaui.nethdr colors

Create faster. Export anywhere.

Unlock advanced exports, exportable app token files, unlimited collections, wallpapers, and an ad-free experience.

  • Generate color palettes with AI

  • Find assets using AI Search

  • Export polished Branding Kits (PDF)

  • Export Light/Dark themes

  • Export platform-native app tokens

  • Generate native gradient codes

  • Download 4K & mobile wallpapers

  • Save unlimited collections

  • Export to Web code

  • Enjoy an ad-free experience

PWA Prompt