CSS & SCSS color variables generator

#ffffff

AAA - 21

#fff3f3

AAA - 19.36

#ffe8e6

AAA - 17.93

#ffdcda

AAA - 16.5

#ffd0ce

AAA - 15.16

#ffc4c2

AAA - 13.92

#ffb8b6

AAA - 12.78

#ffacab

AAA - 11.74

#ffa09f

AAA - 10.78

#ff9494

AAA - 9.91

#df8382

AAA - 7.7

#c17171

Fail - 3.57

#a36160

AA - 4.73

#865150

AA - 6.35

#6a4140

AAA - 8.59

#4f3231

AAA - 11.45

#362323

AAA - 14.77

#1e1615

AAA - 17.78

#000000

AAA - 21

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)
#fff3f3rgb(100% 95.3% 95.3%)hwb(0 95% 0%)oklab(97.4% 0.012 0.004)oklch(97.4% 0.013 17.4)color(display-p3 0.992 0.955 0.954)
#ffe8e6rgb(100% 91% 90.2%)hwb(4.8 90% 0%)oklab(94.9% 0.023 0.01)oklch(94.9% 0.025 23.6)color(display-p3 0.985 0.913 0.904)
#ffdcdargb(100% 86.3% 85.5%)hwb(3.2 85% 0%)oklab(92.3% 0.036 0.015)oklch(92.3% 0.039 21.8)color(display-p3 0.977 0.868 0.858)
#ffd0cergb(100% 81.6% 80.8%)hwb(2.4 81% 0%)oklab(89.8% 0.05 0.019)oklch(89.8% 0.053 21)color(display-p3 0.971 0.823 0.812)
#ffc4c2rgb(100% 76.9% 76.1%)hwb(2 76% 0%)oklab(87.3% 0.063 0.024)oklch(87.3% 0.068 20.8)color(display-p3 0.964 0.778 0.766)
#ffb8b6rgb(100% 72.2% 71.4%)hwb(1.6 71% 0%)oklab(84.8% 0.078 0.029)oklch(84.8% 0.083 20.8)color(display-p3 0.958 0.733 0.72)
#ffacabrgb(100% 67.5% 67.1%)hwb(0.71 67% 0%)oklab(82.4% 0.092 0.034)oklch(82.4% 0.098 20.1)color(display-p3 0.953 0.689 0.678)
#ffa09frgb(100% 62.7% 62.4%)hwb(0.62 62% 0%)oklab(80.1% 0.106 0.04)oklch(80.1% 0.114 20.5)color(display-p3 0.948 0.645 0.633)
#ff9494rgb(100% 58% 58%)hwb(0 58% 0%)oklab(77.9% 0.121 0.045)oklch(77.9% 0.129 20.4)color(display-p3 0.943 0.601 0.591)
#df8382rgb(87.5% 51.4% 51%)hwb(0.65 51% 13%)oklab(70.8% 0.106 0.041)oklch(70.8% 0.114 21)color(display-p3 0.825 0.531 0.519)
#c17171rgb(75.7% 44.3% 44.3%)hwb(0 44% 24%)oklab(63.6% 0.095 0.035)oklch(63.6% 0.101 20.3)color(display-p3 0.714 0.458 0.451)
#a36160rgb(63.9% 38% 37.6%)hwb(0.9 38% 36%)oklab(56.6% 0.08 0.031)oklch(56.6% 0.086 21.1)color(display-p3 0.603 0.393 0.383)
#865150rgb(52.5% 31.8% 31.4%)hwb(1.1 31% 47%)oklab(49.5% 0.067 0.026)oklch(49.5% 0.072 21.1)color(display-p3 0.496 0.327 0.319)
#6a4140rgb(41.6% 25.5% 25.1%)hwb(1.4 25% 58%)oklab(42.3% 0.054 0.021)oklch(42.3% 0.058 21.3)color(display-p3 0.393 0.262 0.255)
#4f3231rgb(31% 19.6% 19.2%)hwb(2 19% 69%)oklab(35.2% 0.04 0.016)oklch(35.2% 0.042 21.6)color(display-p3 0.293 0.201 0.195)
#362323rgb(21.2% 13.7% 13.7%)hwb(0 14% 79%)oklab(28% 0.028 0.01)oklch(28% 0.029 19.1)color(display-p3 0.201 0.14 0.139)
#1e1615rgb(11.8% 8.63% 8.24%)hwb(6.7 8.2% 88%)oklab(21% 0.012 0.006)oklch(21% 0.013 26.5)color(display-p3 0.113 0.087 0.083)
#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

#fff3f3

#ffe8e6

#ffdcda

#ffd0ce

#ffc4c2

#ffb8b6

#ffacab

#ffa09f

#ff9494

#df8382

#c17171

#a36160

#865150

#6a4140

#4f3231

#362323

#1e1615

#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

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.

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

#fff3f3

Fail - 1.08

Lc 0

#ffe8e6

Fail - 1.17

Lc -10

#ffdcda

Fail - 1.27

Lc -16

#ffd0ce

Fail - 1.38

Lc -21

#ffc4c2

Fail - 1.5

Lc -27

#ffb8b6

Fail - 1.64

Lc -32

#ffacab

Fail - 1.78

Lc -37

#ffa09f

Fail - 1.94

Lc -42

#ff9494

Fail - 2.11

Lc -46

#df8382

Fail - 2.72

Lc -58

#c17171

Fail - 3.57

Lc -69

#a36160

AA - 4.73

Lc -78

#865150

AA - 6.35

Lc -87

#6a4140

AAA - 8.59

Lc -94

#4f3231

AAA - 11.45

Lc -100

#362323

AAA - 14.77

Lc -104

#1e1615

AAA - 17.78

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