Color Mixer: quick start guide

Everything you need for a first successful run: what to paste in, which option actually matters, and how to read the result.

Input Color Mixer Output Runs 100% in your browser — your data never leaves your device.
Color Mixer — Input → Output. Runs 100% in your browser — your data never leaves your device.

How to use

  1. Open the tool and paste your input into the left pane.
  2. Set only the options your task actually needs — the defaults are correct for most inputs.
  3. Read the result in the right pane; it updates as you type.
  4. Use Copy to take the result, or Download to save it as a file.
How to use · Color Mixer 1 Paste your data intothe input box (or loadthe example). 2 Configure the optionsto match your targetformat or scenario. 3 Copy, download orinspect the output —it updates live as youtype.
How to use — 3

Examples

Mix against #ffffff at 50% and switch the space to CIE Lab for a perceptually even ramp.

Input

#0ea5b7

Output — Results

#0ea5b7 + #ffffff at 50% (mixed in RGB)

Result
  HEX   #87d2db
  RGB   rgb(135, 210, 219)
  HSL   hsl(186.4, 54.0%, 69.3%)

Contrast against white : 1.71:1
Contrast against black : 12.26:1

Ramp (9 steps)
    0%  #0ea5b7
   13%  #2cb0c0
   25%  #4abcc9
   38%  #68c7d2
   50%  #87d2db
   63%  #a5dde4
   75%  #c3e9ed
   88%  #e1f4f6
  100%  #ffffff

CSS
  --mix: #87d2db;
  background: linear-gradient(90deg, #0ea5b7, #ffffff);

Run

Description

Blend two colours in sRGB, HSL or perceptual CIE Lab and generate a ramp with contrast ratios.

Color Mixer → · How to use → · Color Tools →

Related tools

Hex Color PickerInteractive picker with HEX, RGB and HSL output.Color Code ConverterConvert between HEX, RGB, HSL and named colors.Color Contrast Checker (WCAG)Verify text contrast ratios against WCAG AA/AAA.Color Palette GeneratorShades, tints and complementary schemes from one color.Random Color GeneratorBatch random colors with copyable codes.CSS Named Colors ReferenceAll 148 CSS color names with codes and previews.