Color palette

#ffffff

Primary - a0

#eeede2

Primary - a10

#dedbc6

Primary - a20

#cdc9aa

Primary - a30

#bdb78f

Primary - a40

#aca674

Primary - a50

#87825c

Primary - a60

#646045

Primary - a70

#43402f

Primary - a80

#24231b

Primary - a90

#000000

Primary - a100

Tip: Press SPACE to generate a random color palette

Click a color block to copy to your clipboard.

Effortless variables for CSS & SCSS

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 for both CSS Custom Properties and SCSS instantly.

How does it work?

Simply choose your primary color using the color picker. Our engine instantly generates a complete, ready-to-use variable system. You'll get a list of shades(darker versions) and tints (lighter versions) neatly formatted in both CSS and SCSS syntax. Just copy the code block and paste it into your project files to have a robust color palette at ease.

Code

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? 💡

Optional

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 unlock more features.

Trusted and used by designers and developers from companies around the world.

.css.csv.json.pdf.jpg.png.svgwallpapers4kultrawidewidescreenapp tokensflutterandroidswiftmaui.nethdr colors

Create. Export. Build faster.

Get access to more export file formats, app tokens, remove ads, unlimited collections, and more.


  • AI features (use cases, analysis, and more soon.)

    New
  • Export the palette Branding Kit PDF.

    New
  • Export Dark/Light themes to .css, and .csv

    New
  • App color tokens (Android, Flutter, Swift, .NET MAUI)

    New
  • App gradient code (Android, Flutter, Swift)

    New
  • Gradients/Palettes wallpaper (4k, ultrawide, widescreen, iPhone, Pixel, etc.)

    New
  • Create unlimited collections

    New
  • Export colors to multiple formats (.json, .css, .csv)

  • Download colors as images (.jpeg, .png, .svg)

  • Remove ads and more

PWA prompt