Color Converter

HEX ↔ RGB ↔ HSL with picker

Loading…

Was this tool helpful?

About this tool

This tool converts a HEX color code into RGB and HSL values and calculates whether white or black text reads better on it. It also shows a six-step palette that keeps the same hue and saturation while varying only lightness, handy for picking design shades.

How to use

  1. Click the color picker or type a HEX value directly (3-digit or 6-digit both work).
  2. RGB, HSL, and a CSS-variable-friendly notation (space-separated R G B) appear right below.
  3. Click any of the six lightness variants of the same hue to switch to that color.
  4. Below the preview box, check whether white or black text has more contrast, and see the exact contrast ratio.

Frequently asked questions

What color formats does this tool support?
It takes HEX (3-digit or 6-digit) as input and converts it to RGB, HSL, and a space-separated 'R G B' notation for CSS variables (as in rgb(var(--x) / 0.5)). Print formats like CMYK are not supported.
How is the contrast ratio calculated?
It computes each color's relative luminance using the WCAG formula, then pairs it against white and black backgrounds to get the contrast ratio. A higher number means more contrast and more readable text.
How are the six lightness variants generated?
They keep the input color's hue (H) and saturation (S) unchanged and only vary lightness (L) across 90/75/60/45/30/15% to build the six-step palette.
Is the color value I enter sent to a server?
No. All conversion and contrast calculation happens in your browser and is never sent to a server.

Similar tools