Color Palette Generator

shades
tints
analogous
complementary
double-split-complementary
rectangle
split-complementary
tetradic
triadic
color
harmony
#c11ceb
#6f19b5
#25007a

Build your perfect palette instantly

Quickly create perfectly harmonized color combinations and move seamlessly from creative vision to practical implementation. This tool helps you discover beautiful color schemes and instantly get the code in your preferred format, including CSS variables, SCSS, and Tailwind CSS.

How does it work?

Select an harmony method, and press the generate button to create new harmonized colors. Once you're satisfied, you can instantly view and copy the entire palette as developer-ready code. We provide export options for vanilla CSS, and SCSS variables, or a Tailwind theme configuration.

AI-generated content can make mistakes, so double-check it.

Copy CSS

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

HDR colors

Loading syntax highlighting...

Interpolation

Interpolate between two colors to create a smooth-looking color palette.

Interpolation settings

Hue interpolation is only available for HSL, HWB, LCH, and OKLCH.

Preview

Download palette image

Choose the perfect size and format for your image wallpaper or background.

4K

PRO
3840x2160

Best for landscape layouts.

Ultrawide Desktop

PRO
3440x1440

Best for landscape layouts.

Widescreen Monitor

PRO
2560x1440

Best for landscape layouts.

1080p

PRO
1920x1080

Best for landscape layouts.

iPhone 16 Plus

PRO
1290x2796

Best for portrait layouts.

iPhone 16 Pro

PRO
1179x2556

Best for portrait layouts.

Pixel 9 Pro

PRO
1344x2992

Best for portrait layouts.

Mobile Portrait

Free
1080x1920

Best for portrait layouts.

Instagram Square

Free
1080x1080

Best for square layouts.

Instagram Portrait

Free
1080x1350

Best for portrait layouts.

Instagram Landscape

Free
1080x566

Best for landscape layouts.

Instagram Story

Free
1080x1920

Best for portrait layouts.

Twitter Header

Free
1500x500

Best for landscape layouts.

Profile Picture

Free
1080x1080

Best for square layouts.

Google Slides (Standard)

Free
960x540

Best for landscape layouts.

A4 Paper (Print)

Free
2480x3508

Best for portrait layouts.

Letter Paper (Print)

Free
2550x3300

Best for portrait layouts.

Contrast Checker

Check accessibility compliance of your palette colors.

Color Analysis

#c11ceb

AA - 4.53

#6f19b5

AAA - 8.46

#25007a

AAA - 15.44

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.

Tips & Keyboard shortcuts

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

Color Generation

  • Generate new palette

    Space

  • Add color

    Shift + +

  • Remove color

    Shift + -

Navigation & Views

  • Show tips & shortcuts

    F1

  • Toggle fullscreen

    Shift + F

  • Undo changes

    Ctrl + Z

  • Redo changes

    Ctrl + Shift + Z

Pro Tips

  • Use color adjustments to fine-tune saturation, lightness, and contrast of your entire palette

  • Check contrast ratios to ensure your palette meets accessibility guidelines

  • Use fullscreen mode to better visualize how your palette looks at different sizes

#c11ceb
#6f19b5
#25007a

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