urlkit[ TIDY / [#] ]
Color converter
Convert opaque HEX, RGB, and HSL colors with a visual swatch.
02 / Your result
Your result will appear here.
Start with your own input or try an example.
What it does
Move a color between a design note, a stylesheet, and a component library. Enter an opaque HEX, RGB, or HSL value to see all three representations beside a color swatch. Conversion happens locally with 8-bit sRGB channels, so you can copy a consistent value without uploading a design file.
Useful when
- Turn a brand HEX code into RGB for a design handoff.
- Inspect the hue, saturation, and lightness of an interface color.
- Normalize short HEX notation before adding it to a stylesheet.
How to use it
- Paste a three- or six-digit HEX value, comma-separated RGB, or HSL with percentages.
- Convert the color and compare its swatch with the three output formats.
- Copy the color values or download a text reference for your project.
A few useful details
Which color formats can I enter?
Use #369, #336699, rgb(51, 102, 153), or hsl(210, 50%, 40%). RGB channels must be integers from 0 to 255. HSL accepts degrees from −3600 to 3600 and saturation and lightness from 0% to 100%. Named colors, alpha channels, RGB percentages, and other CSS color spaces are not supported.
Why can an HSL conversion change slightly?
The converter rounds HSL input to the nearest 8-bit RGB channels. The displayed HSL result is then calculated from those channels and rounded to two decimal places. Small changes are expected when moving between continuous HSL values and 256 possible values per RGB channel.
Does the swatch tell me whether text is readable?
A single color cannot establish text contrast. Use the contrast checker with both your text and background colors to compare their luminance and text contrast thresholds.