The Colour Converter translates a colour between the web formats —HEX, RGB, HSL and the modern OKLCH and OKLab— at once. It accepts the colour however you copy it: with commas or spaces, with transparency, as a name (tomato) or as DevTools gives it to you. It also gives a tint scale of the same colour. Everything happens in your browser.

1. Type or paste a colour: #1a2b3c, #1a2b3c80, rgb(26 43 60 / 50%), hsl(210deg 40% 17%), oklch(62.8% 0.258 29.2) or a CSS name.
2. Or pick it with the colour box on the left.
3. The preview and the colour in the five formats appear; the copy icon puts each one on the clipboard.
4. Below, the tint scale: click one to make it the current colour.

HEX (hexadecimal) is the standard format for CSS and web design. It starts with # and carries three pairs of hexadecimal digits (0-9, a-f) for red, green and blue, each pair from 00 to ff (0 to 255 in decimal). Example: #1a2b3c. It also accepts the 3-digit shorthand #abc, which expands by doubling each digit (#abc equals #aabbcc). The # is optional when typing.

RGB describes the color by its three components of light: Red, Green and Blue, each from 0 to 255. It is written rgb(r,g,b). Example: rgb(26, 43, 60). It is the additive model of screens: rgb(0,0,0) is black and rgb(255,255,255) is white.

HSL describes the color in a way that is more intuitive for the eye: Hue (0-360° on the color wheel: 0 red, 120 green, 240 blue), Saturation (0-100%, from gray to pure color) and Lightness (0-100%, from black to white). It is written hsl(h,s%,l%). Example: hsl(210, 40%, 17%). It is ideal for lightening, darkening or desaturating a color without changing its hue. The % symbol is optional when typing.

OKLCH describes colour with L (lightness, 0–100 %), C (chroma, how much colour) and H (hue, 0–360°), like HSL, but with a difference that matters: its L is the lightness the eye perceives. In HSL, hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) have the same L and the yellow looks far lighter; in OKLCH, same L = same perceived lightness. That is why it is good for consistent palettes and scales. Almost every browser understands it already (oklch() in CSS). Some OKLCH colours do not fit in sRGB (the gamut of a normal screen): you are warned and the closest one is shown.

Eleven tints of the same colour, from very light to very dark, spread by OKLCH lightness and with the same hue. If at some lightness the colour does not fit in sRGB, its chroma is lowered just enough instead of clipping channels (which would change the hue). The marked one is the closest to your colour. Use them for backgrounds, borders and states of a single brand colour.

To the left of the field there is a native color picker from your system: click it to pick a color with your browser's wheel or palette and the field fills in on its own in HEX format. The preview box above the results shows the final color as-is, so you can check at a glance that it is the one you want.

Each value —HEX, RGB and HSL— has a copy icon on its right. When you click it, the full, already-formatted value (e.g. rgb(26, 43, 60)) goes to the clipboard and the icon shows a ✓ for a moment as confirmation.

In the toolbar you have Reset (clears the field), Export (downloads a .json with the color and its equivalents) and Import (restores a saved color). Also, the last color you typed is remembered automatically and reappears the next time you open the tool.