How to use: Color Mixer

Description

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

• Color Tools
• Because everything is computed client-side, Color Mixer is safe to use with sensitive data such as API keys, tokens or private logs.

How to use

Using Color Mixer takes three steps:

1. Paste your data into the input box (or load the example).
2. Configure the options to match your target format or scenario.
3. Copy, download or inspect the output — it updates live as you type.

Run

Examples

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

Input

#0ea5b7

Output

#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);

This output was produced by actually running the tool, not written by hand.

Use cases

Common situations where Color Mixer helps:

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

Parameters

This tool has no options — it works on the input alone.

FAQ

Good to know

• Everything runs client-side, so extremely large inputs are limited by your browser tab’s memory rather than by a server upload limit.

Related tools

Color Mixer → · Color Tools →