FEATURED

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.

Color Analysis

#ffffff

Fail - 1

#eeeeff

Fail - 1.14

#dcddff

Fail - 1.32

#caccfe

Fail - 1.54

#b7bbfd

Fail - 1.81

#a4abfc

Fail - 2.14

#909bfb

Fail - 2.54

#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

Click on a color block to open the full contrast checker. Levels are based on WCAG 2.1 guidelines.

AAA

Perfect ≥ 7:1

Easy to read for everyone, including people with visual impairments.

AA

Good ≥ 4.5:1

Meets standard requirements for most users and situations.

Fail

Poor < 4.5:1

Text may be difficult to read, especially for people with visual challenges.

Copy CSS

Get CSS, SCSS, & Tailwind code for web development.

HDR colors

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.

Create your free account

Sign up to save and like your color palettes, gradients, and more.

Sign up 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, downloadable app token files, unlimited collections, wallpapers, and an ad-free experience.

  • AI tools for color insights and faster creation

  • Export a polished Branding Kit as PDF

  • Export Light/Dark themes to CSS and CSV

  • Download app color token files for Android, Flutter, Swift, and .NET MAUI

  • App gradient code (Android, Flutter, Swift)

  • One‑click wallpapers for desktop and mobile (4K, ultrawide, iPhone, Pixel, more)

  • Unlimited collections

  • Export color data to JSON, CSS, SCSS, Tailwind, Style Dictionary, and CSV

  • Download colors as PNG, JPG, or SVG

  • Ad‑free experience

PWA Prompt