Color Palette
Convert between HEX, RGB and HSL, build a palette, and check contrast properly. Nothing is uploaded.
Tints
The same hue mixed toward white. Select one to load it.
Shades
The same hue mixed toward black.
Harmonies
Complementary, analogous, triadic and split complementary.
Contrast is about luminance, not hue
This is the part most colour tools get wrong, and it is why a palette that looks striking can be unreadable. Contrast is calculated from relative luminance, a measure of how much light a colour emits, weighted for the fact that the eye is far more sensitive to green than to blue. It has nothing to do with how different two colours look.
A bright yellow against white is the clearest example. The two are obviously different colours, and yellow is a very light one, so their luminance is close and the contrast ratio is poor. Meanwhile a mid grey and a mid blue can look similar and pass comfortably. Judging by eye does not work, which is exactly why the ratio is worth checking.
| Requirement | Normal text | Large text |
|---|---|---|
| Minimum (AA) | 4.5 to 1 | 3 to 1 |
| Enhanced (AAA) | 7 to 1 | 4.5 to 1 |
Large text means 24 pixels, or 19 pixels when bold. The scale runs from 1 to 1, meaning two identical colours, up to 21 to 1, which is black on white and the highest ratio possible.
The correct calculation, and the shortcut that fails
The naive approach averages the red, green and blue channels and compares the two averages. It is quick and it is wrong, because it ignores both the gamma encoding of sRGB values and the differing sensitivity of the eye to each channel. The proper method converts each channel out of gamma space first, weights green far more heavily than red and blue, and compares the results with an offset that keeps very dark colours from producing absurd ratios. That is what is used here.
Tints, shades and why they are useful
A tint is your colour mixed toward white; a shade is the same colour mixed toward black. Both keep the hue, which is what makes them the right raw material for interface states. A hover, a pressed state, a disabled control and a subtle background can all be drawn from one hue, and the result reads as a considered system rather than as several unrelated colours.
Working in HSL makes this obvious: a tint is the same hue and saturation with the lightness raised. That is also why HSL is worth having in a stylesheet even though HEX is more common. Wanting a slightly lighter version of a colour means changing one number rather than guessing at three.
The harmonies
| Harmony | Rotation | Reads as |
|---|---|---|
| Complementary | 180 degrees | Maximum contrast; strong for an accent, tiring across large areas |
| Analogous | Plus and minus 30 degrees | Calm and cohesive, with little tension |
| Triadic | 120 and 240 degrees | Balanced and vivid; usually wants one dominant colour |
| Split complementary | 150 and 210 degrees | Most of the contrast of a complement with less clash |
These are starting points rather than rules. A rotation on the colour wheel says nothing about whether the pair is readable, so run any combination you intend to put text on through the contrast figures above.
How to use it
Use the picker, or type into any field. The Pick row accepts anything the browser understands, including a named colour such as rebeccapurple, so it is the quickest way in from a value you have copied from elsewhere. Editing HEX, RGB or HSL directly updates the others as you type. Select any swatch to load it as the current colour, which is how you drill into a tint and build a scale around it.
Questions
What contrast ratio do I need?
The accessibility guidelines ask for 4.5 to 1 for ordinary body text and 3 to 1 for large text, which means 24 pixels or 19 pixels when bold. The stricter level asks for 7 to 1 and 4.5 to 1. A ratio runs from 1 to 1, meaning identical colours, up to 21 to 1 for black on white.
Why does a bright yellow fail against white?
Because contrast is about luminance rather than hue. Yellow is a very light colour, so its luminance is close to white even though the two look completely different. Two colours can be vividly different and still be almost unreadable together.
What is the difference between a shade and a tint?
A shade is the colour mixed toward black and a tint is the colour mixed toward white. Both keep the hue and give you a scale to build interface states from, such as a hover or a disabled variant, without introducing a new colour.
Which format should I use in CSS?
HEX is the most common and the most compact. HSL is easier to reason about when you want a lighter or more muted version of the same colour, because you adjust one number rather than three. Browsers treat all of them identically, so it is a question of what is easier to maintain.
Is anything sent to a server?
No. Conversion and palette generation run inside your browser and this tool has no backend, so nothing is transmitted, logged or stored.
Related tools
Browse all Sigma Wire tools - every free tool on the site, grouped by category.