How to use the color converter
- 1Type any CSS color, such as #ff6600, rgb(255 102 0), hsl(24 100% 50%) or a name like tomato.
- 2Or click the swatch to pick a color.
- 3Copy the format you need.
- 4Check the contrast samples to see if the color works as text on white or black.
Color formats explained
- HEX (#0f766e) is the most common format on the web: red, green and blue as two hexadecimal digits each.
- RGB gives the same three channels as numbers from 0 to 255.
- HSL describes hue (0–360°), saturation and lightness, which is easier for people to adjust.
- HSV / HSB is used by many design apps' color pickers.
- OKLCH is a modern CSS format based on how people perceive color. Changing lightness keeps the color looking consistent, which makes it ideal for building color palettes and themes.
Any CSS color works
The converter uses your browser's own color parser, so it accepts every format CSS does, including the 148 named colors and colors with transparency.
Contrast
The samples show the color as text on white and on black, with the WCAG contrast ratio. Body text needs at least 4.5:1 (AA), large text 3:1, and the stricter AAA level asks for 7:1.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each pair from hexadecimal to a number. #0f766e becomes 15, 118, 110. The tool does this instantly.
What is OKLCH and should I use it?
OKLCH is a perceptual color format supported by all modern browsers. It is great for design systems because equal changes in lightness look equal to the eye.
Why do some conversions round slightly?
HSL and OKLCH values are rounded for readability, so converting back may differ by a unit or so in RGB.
What contrast ratio do I need?
WCAG asks for at least 4.5:1 for normal text and 3:1 for large text to reach level AA.
Last updated