Colour palette
Build a colour palette from one colour
Runs in your browser. Nothing is sent unless you share it.
Base colour
#4348E5
RGB 67, 72, 229 · HSL 238°, 76%, 58% · CMYK 71, 69, 0, 10
- -30°
- #4399E5 (RGB 67, 153, 229)
- -15°
- #4371E5 (RGB 67, 113, 229)
- Base
- #4348E5 (RGB 67, 72, 229)
- +15°
- #6743E5 (RGB 103, 67, 229)
- +30°
- #8F43E5 (RGB 143, 67, 229)
How this is calculated
The palette turns the base colour round the colour wheel in HSL (for example +180° for the complement) or changes its lightness for shades and tints. CMYK uses the simple screen formula with no printer profile, so ask your printer for exact values. Contrast follows WCAG 2.2: (lighter luminance + 0.05) ÷ (darker luminance + 0.05).
Analogous palette
- -30°#4399E5RGB 67, 153, 229
- -15°#4371E5RGB 67, 113, 229
- Base#4348E5RGB 67, 72, 229
- +15°#6743E5RGB 103, 67, 229
- +30°#8F43E5RGB 143, 67, 229
Colour codes and contrast with #FFFFFF text
| Swatch | HEX | RGB | HSL | CMYK | Contrast |
|---|---|---|---|---|---|
| -30° | #4399E5 | 67, 153, 229 | 208°, 76%, 58% | 71, 33, 0, 10 | 3.0:1 AA large text only |
| -15° | #4371E5 | 67, 113, 229 | 223°, 76%, 58% | 71, 51, 0, 10 | 4.4:1 AA large text only |
| Base | #4348E5 | 67, 72, 229 | 238°, 76%, 58% | 71, 69, 0, 10 | 6.4:1 AA |
| +15° | #6743E5 | 103, 67, 229 | 253°, 76%, 58% | 55, 71, 0, 10 | 6.0:1 AA |
| +30° | #8F43E5 | 143, 67, 229 | 268°, 76%, 58% | 38, 71, 0, 10 | 5.1:1 AA |
AA needs 4.5:1 for body text and 3:1 for large text; AAA needs 7:1 (WCAG 2.2).
CSS variables
:root {
--color-1: #4399E5;
--color-2: #4371E5;
--color-3: #4348E5;
--color-4: #6743E5;
--color-5: #8F43E5;
}How it works
- Pick your base colour or type its hex code, for example #4348E5.
- Choose a harmony: complementary, analogous, triadic, tetradic, monochromatic, shades or tints.
- Click any swatch to copy its hex code.
- Download the palette as CSS variables or as JSON.
Related tools
Questions
How is the palette worked out?
We turn your colour into hue, saturation and lightness, then turn the hue around the colour wheel or change the lightness. Complementary adds 180°, triadic adds 120° and 240°, and analogous steps 15° and 30° either side.
Which harmony should I use for a brand?
Monochromatic and analogous palettes look calm and safe. Complementary and triadic palettes give strong contrast, which suits buttons and highlights in small doses.
What is the difference between tints and shades?
Tints mix your colour towards white and look lighter. Shades mix it towards black and look darker.
How do I use the CSS file?
It lists each colour as a CSS variable, such as --color-1. Paste it into your stylesheet and use var(--color-1) wherever you need the colour.
Is my colour sent anywhere?
Runs in your browser. Nothing is sent unless you share it.