FEATURED

CSS & SCSS color variables generator

#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 HEX RGB HSL OKLAB
HDR
OKLCH
HDR
P3
HDR
Actions
#ffffffrgb(255, 255, 255)hsl(none 0% 100%)oklab(100% 0 0)oklch(100% 0 none)color(display-p3 1 1 1)
#f6f5efrgb(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)
#edebdfrgb(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)
#e3e1cfrgb(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)
#dad7bfrgb(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)
#d1cdb0rgb(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)
#c8c3a1rgb(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)
#bfb992rgb(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)
#b5b083rgb(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)
#aca674rgb(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)
#979267rgb(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)
#837e59rgb(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)
#6f6b4drgb(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)
#5c5940rgb(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)
#4a4734rgb(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)
#383629rgb(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)
#27261drgb(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)
#171712rgb(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)
#000000rgb(0, 0, 0)hsl(none 0% 0%)oklab(0% 0 0)oklch(0% 0 none)color(display-p3 0 0 0)

Contrast Checker

Check accessibility compliance of your palette colors.

#ffffff

Fail - 1

#f6f5ef

Fail - 1.09

#edebdf

Fail - 1.19

#e3e1cf

Fail - 1.31

#dad7bf

Fail - 1.45

#d1cdb0

Fail - 1.6

#c8c3a1

Fail - 1.78

#bfb992

Fail - 1.98

#b5b083

Fail - 2.2

#aca674

Fail - 2.48

#979267

Fail - 3.17

#837e59

Fail - 4.12

#6f6b4d

AA - 5.4

#5c5940

AAA - 7.09

#4a4734

AAA - 9.36

#383629

AAA - 12.15

#27261d

AAA - 15.2

#171712

AAA - 17.98

#000000

AAA - 21

Click on a color block to check detailed contrast information and see if it meets accessibility standards.

AAA

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

AA

Good accessibility. Meets standard requirements for most users and situations.

Fail

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

Copy CSS

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

HDR color Space

HDR colors

Loading syntax highlighting...

Fallback 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 space chips

  • 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/200 characters

Optional

Automatically detected to help us understand context

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, app tokens, unlimited collections, wallpapers, and an ad‑free experience.

  • AI tools for color insights and faster creation

    New

  • Export a polished Branding Kit as PDF

    New

  • Export Light/Dark themes to CSS and CSV

    New

  • Generate app color tokens for Android, Flutter, Swift, and .NET MAUI

    New

  • App gradient code (Android, Flutter, Swift)

    New

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

    New

  • Unlimited collections

    New

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

  • Download colors as PNG, JPG, or SVG

  • Ad‑free experience

PWA Prompt