A small color studio
One orange, three ways to write it
A color code is a description, not a different paint. HEX and RGB below describe exactly the same sample; HSL expresses it through hue, saturation, and lightness, rounded by this tool.
| Format | Value | How to read it |
|---|---|---|
| HEX | #c2410c | Pairs represent red, green, blue. |
| RGB | rgb(194, 65, 12) | Each channel ranges from 0 to 255. |
| HSL | hsl(17, 88%, 40%) | Hue angle, saturation %, lightness %. |
Try the color in its intended role
A solid accent can work as a filled button, a narrow border, or a small decorative mark. A background covers much more of the page, so inspect it with real text rather than judging an isolated swatch. The same color can feel different beside white, charcoal, or another accent.
Use the picker or enter a three- or six-digit hex value, then copy the format your editor needs. Short HEX doubles each digit: #abc expands to #aabbcc, not #000abc. The leading # is optional. Eight-digit colors with transparency are not accepted here.
Keep the source value
HSL is rounded to whole numbers in the output, so converting that rounded value back elsewhere may produce a slightly different RGB color. Keep the HEX value when matching an exact brand specification. This tool represents screen colors; it does not provide CMYK print matching or a color-managed proof.
Colors are converted on your device. Copy the values you need before leaving the page; your palette is not saved here.