Colour
Notations, palettes and gradients, starting from a colour you have.
- Build a colour paletteType a colour and a matching set appears, rotated in a perceptual space so the swatches actually look like they belong together.
- Build a CSS gradientSet the stops and the geometry; the ramp above the controls is the gradient your browser will draw from the declaration below it.
- Convert hex to RGB, and any CSS notation to all the othersOne field takes any CSS colour notation and hands back all the others, with the round trip checked so a lossy conversion says so.
About these tools
Colour work on the web is mostly translation. A brand guide gives you a hex triplet, a design tool wants HSL because that is what makes a tint ramp legible, CSS wants whichever of the two you find easier to read six months from now, and something in the pipeline still expects three integers.
The conversions here are exact rather than approximate, and the round trip is shown, because a value that comes back changed after a conversion that claimed to lose nothing is the sign that something rounded where it should not have. Nothing about colour needs a server, so nothing here uses one.
Gradients sit here for a related reason. A gradient is a list of colours plus a rule for the space between them, and the rule is where the surprises are: two vivid hues interpolated through sRGB pass through a washed-out middle that neither end predicts. The page draws the ramp it produced rather than handing you only the declaration that produces it.