FEATURED

Color Mixer Generator

Color Mixing Result

50%

50%

red

#E80C0C

limegreen

#36DE23

Mixed Color Result

darkgoldenrod

#ba9600

Mix ratio preview

Quickly preview and apply it to your mix

10%

25%

50%

75%

90%

The ultimate color mixer & blender

Create the perfect color blend by mixing unique and vibrant color combinations with our Color Mixer Generator. It's the ideal way to experiment with new shades and instantly get the precise color code for any design or development project.

How does it work?

Simply select your starting colors, and our tool will generate a seamless blend between them. Experiment with different color values and tints to create completely custom palettes for your web designs, apps, or creative projects. When you've found the perfect shade, you can instantly copy its precise Hex, RGB, or HSL, or more code formats.

Colors overview

Detailed breakdown of all colors including the source colors and the mixed result

Color Details Table

Color HEX RGB HWB OKLAB OKLCH P3 Actions
#e80c0crgb(91% 4.71% 4.71%)hwb(0 4.7% 9%)oklab(58.7% 0.208 0.114)oklch(58.7% 0.237 28.9)color(display-p3 0.835 0.191 0.14)
#36de23rgb(21.2% 87.1% 13.7%)hwb(110 14% 13%)oklab(78.6% -0.198 0.155)oklch(78.6% 0.251 142)color(display-p3 0.437 0.858 0.291)
#ba9600rgb(72.9% 58.8% 0%)hwb(48 0% 27%)oklab(68.7% -0.004 0.14)oklch(68.7% 0.14 91.6)color(display-p3 0.707 0.594 0.191)

Export Color Converter Table

Customize your export options below

Colors

#e80c0c

#36de23

#ba9600


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

#E80C0C

AA - 4.67

#36DE23

Fail - 1.8

#ba9600

Fail - 2.81

Contrast Level Explanations

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

Click the code to copy or press CTRL + C

Generated code

Loading syntax highlighting...

Tips & Keyboard shortcuts

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

Navigation

  • Generate random colors

    Space
  • Copy CSS code

    Ctrl + E
  • Show this help

    F1
  • Undo last change

    Ctrl + Z
  • Redo undone change

    Ctrl + Shift + Z

Color Adjustment

  • Increase mix amount

    Shift + ↑
  • Decrease mix amount

    Shift + ↓
  • Set equal mix (50%)

    Ctrl + =

Pro Tips

  • Click any color format value to copy it to your clipboard

  • Adjust the mix slider to find the perfect blend between your colors

  • Your color history is automatically saved for easy backtracking

  • Use the generated mixed color in other Colorffy tools for further exploration

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