How to use this Color Converter
This calculator converts a color between HEX, RGB, and HSL. You can edit any format and the other
formats update automatically as soon as the input becomes valid.
1) Enter a color (any format)
-
HEX: type
#RGB, #RRGGBB, and optionally alpha as #RGBA / #RRGGBBAA.
You can type with or without the leading #.
-
RGB: enter
R, G, B as integers from 0 to 255.
-
HSL: enter
H (0–360), S (0–100%), and L (0–100%).
2) Use the live swatch and HSL sliders
- The large swatch shows the current color and updates smoothly as you edit values.
-
The Hue, Saturation, and Lightness sliders are a quick way to explore color. Moving a slider updates the HSL fields,
and the HEX/RGB values update at the same time.
3) Copy the format you need
Each format row has a Copy button. It copies the normalized value (for example, a 6-digit HEX when alpha is off, or an 8-digit HEX when alpha is on).
4) Alpha (RGBA/HSLA)
- Turn on Alpha to enable transparency. The calculator will show RGBA/HSLA and include alpha in HEX as
#RRGGBBAA.
- Use the alpha slider (0 to 1) to adjust transparency.
5) Contrast checker and palettes
-
The Contrast checker compares your current color (as the background) with a text color you provide.
It labels the result as PASS, CLOSE, or FAIL as a quick WCAG-style indicator.
-
Under Palettes, you get a complementary color and two analogous colors. Click any chip to apply that color instantly.
