About this tool
Why it exists.
Color values travel in several dialects: HEX in CSS, RGB in design tools, HSL when you want to reason about lightness. This converter reads any of them and gives you the others, with a live swatch and one-click copying.
The tint and shade scales are generated in sRGB and rounded to HEX. The contrast checker reports the WCAG contrast ratio against white and black, with AA and AAA labels for normal text. Contrast is a starting point, not a complete accessibility review.
How to use it.
- Enter a HEX, rgb() or hsl() value, or pick a color.
- Copy any equivalent format from the values panel.
- Use the tint and shade row for hover states, borders or backgrounds.
Good questions.
What is the difference between HSL and HSV?
Both describe hue with a saturation and a brightness-like component. HSL's lightness treats a fully saturated color at mid-lightness as its most vivid; HSV's value is brightest at full brightness. Design tools often use HSV internally, while CSS uses HSL.
How is contrast ratio calculated?
The tool uses the WCAG relative-luminance formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. A ratio of at least 4.5:1 passes AA for normal text; 3:1 applies to large text and some UI components.
Does it support transparency?
This converter works with opaque colors. Alpha is preserved by neither HEX shorthand nor the displayed HSL value. For translucent overlays, compose the final color in CSS with rgb(from ... / alpha) or an eight-digit HEX value.