Live two-color palette
Enter any two colors and see the full palette build live: an OKLab blend, Tailwind 50-900 scales for both, WCAG contrast, real mockups, and copy-ready CSS, Tailwind, and JSON tokens. Free, instant, no sign-up.
HEX accepts #RRGGBB, RRGGBB, or #RGB. The share link in your address bar updates automatically.
Not sure what goes with your colour? Tap a swatch to fill the other slot — each one has a meaningful relationship to your other colour.
Hover or focus a swatch to preview it · tap to use it.
See Dodgerblue and Tomato in use
better
Dodgerblue Tailwind scale (50-900)
Tomato Tailwind scale (50-900)
Dodgerblue to Tomato blend
A continuous interpolation from Dodgerblue to Tomato, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Dodgerblue and Tomato blend best in OKLab
The same two colors blended three ways. This site uses OKLab, which keeps the blend smooth and evenly lit. The other two are shown so you can see what to avoid: sRGB darkens and muddies the middle, and HSL detours through colors that are not in your palette.
Accessibility
Do not place Dodgerblue text on Tomato (or the reverse) for body copy. For readable text, pair a dark scale step such as dodgerblue-800 or tomato-900 with a light one like tomato-50.
Contrast pairing grid
Rows are Dodgerblue steps, columns are Tomato steps. Each mark is a Dodgerblue step shown on a Tomato step: a check means it clears WCAG AA for text (4.5:1). If you can read the mark, the pairing is legible.
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |
|---|---|---|---|---|---|---|---|---|---|---|
| 50 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ | ✓ |
| 100 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 200 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 300 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 400 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ |
| 500 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ |
| 600 | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ |
| 700 | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ |
| 800 | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ |
| 900 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ |
✓ passes AA ✗ fails AA
Copy for Tailwind
Tailwind v4 — @theme (paste into your CSS)
@theme {
--color-dodgerblue-50: #F3F8FF;
--color-dodgerblue-100: #E7F0FF;
--color-dodgerblue-200: #D2E4FE;
--color-dodgerblue-300: #B6D3FC;
--color-dodgerblue-400: #90BBF9;
--color-dodgerblue-500: #2F80ED;
--color-dodgerblue-600: #2568C2;
--color-dodgerblue-700: #194D93;
--color-dodgerblue-800: #0A2B56;
--color-dodgerblue-900: #020F25;
--color-tomato-50: #FFF5F5;
--color-tomato-100: #FFECEA;
--color-tomato-200: #FFDCD9;
--color-tomato-300: #FFC6C1;
--color-tomato-400: #FBA7A1;
--color-tomato-500: #EB5757;
--color-tomato-600: #C04646;
--color-tomato-700: #913333;
--color-tomato-800: #551A1A;
--color-tomato-900: #250707;
}
Tailwind v3 — tailwind.config.js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'dodgerblue': {
50: '#F3F8FF',
100: '#E7F0FF',
200: '#D2E4FE',
300: '#B6D3FC',
400: '#90BBF9',
500: '#2F80ED',
600: '#2568C2',
700: '#194D93',
800: '#0A2B56',
900: '#020F25',
},
'tomato': {
50: '#FFF5F5',
100: '#FFECEA',
200: '#FFDCD9',
300: '#FFC6C1',
400: '#FBA7A1',
500: '#EB5757',
600: '#C04646',
700: '#913333',
800: '#551A1A',
900: '#250707',
},
},
},
},
};
CSS variables
:root {
--dodgerblue-50: #F3F8FF;
--dodgerblue-100: #E7F0FF;
--dodgerblue-200: #D2E4FE;
--dodgerblue-300: #B6D3FC;
--dodgerblue-400: #90BBF9;
--dodgerblue-500: #2F80ED;
--dodgerblue-600: #2568C2;
--dodgerblue-700: #194D93;
--dodgerblue-800: #0A2B56;
--dodgerblue-900: #020F25;
--tomato-50: #FFF5F5;
--tomato-100: #FFECEA;
--tomato-200: #FFDCD9;
--tomato-300: #FFC6C1;
--tomato-400: #FBA7A1;
--tomato-500: #EB5757;
--tomato-600: #C04646;
--tomato-700: #913333;
--tomato-800: #551A1A;
--tomato-900: #250707;
}SCSS variables
$dodgerblue-50: #F3F8FF; $dodgerblue-100: #E7F0FF; $dodgerblue-200: #D2E4FE; $dodgerblue-300: #B6D3FC; $dodgerblue-400: #90BBF9; $dodgerblue-500: #2F80ED; $dodgerblue-600: #2568C2; $dodgerblue-700: #194D93; $dodgerblue-800: #0A2B56; $dodgerblue-900: #020F25; $tomato-50: #FFF5F5; $tomato-100: #FFECEA; $tomato-200: #FFDCD9; $tomato-300: #FFC6C1; $tomato-400: #FBA7A1; $tomato-500: #EB5757; $tomato-600: #C04646; $tomato-700: #913333; $tomato-800: #551A1A; $tomato-900: #250707;
JSON tokens
{
"dodgerblue": {
"50": "#F3F8FF",
"100": "#E7F0FF",
"200": "#D2E4FE",
"300": "#B6D3FC",
"400": "#90BBF9",
"500": "#2F80ED",
"600": "#2568C2",
"700": "#194D93",
"800": "#0A2B56",
"900": "#020F25"
},
"tomato": {
"50": "#FFF5F5",
"100": "#FFECEA",
"200": "#FFDCD9",
"300": "#FFC6C1",
"400": "#FBA7A1",
"500": "#EB5757",
"600": "#C04646",
"700": "#913333",
"800": "#551A1A",
"900": "#250707"
}
}Advanced ramp 32 interpolation modes (OKLCH, HSL, sampler curves…) and a custom step count, with their own CSS / JSON export.
CSS variables if steps = 10, also writes 50-900 keys
JSON
FAQ
How do you generate a palette from two colors?
We interpolate between two HEX colors in perceptual color spaces (OKLab/OKLCH) to create visually even steps. The main view uses OKLab, the same engine behind every palette page on this site.
Can I export to Tailwind?
Yes. The main view gives you ready-to-paste Tailwind v4 @theme and v3 tailwind.config.js blocks, plus CSS variables, SCSS, and JSON tokens. The advanced ramp adds raw CSS/JSON for any of the 32 modes.