How to use the color code converter
- 1Type or paste a color into Color (any format), for example
#ff5722,rgb(255 87 34),hsl(14 100% 57%),cmyk(0% 66% 87% 0%)ortomato. Or click the swatch button to use your system's color picker. - 2Fine-tune with the Red, Green, Blue and Alpha sliders or number fields.
- 3Copy the format you need from Codes: HEX, HEX with alpha, RGB, HSL, HWB, HSV or CMYK. CSS name shows the exact or nearest named color.
- 4Pick a lighter or darker version under Tints and shades, and check text legibility in the Contrast checker.
Example
#ff5722
rgb(255, 87, 34) hsl(14, 100%, 57%) hwb(14 13% 0%) hsv(14, 87%, 100%) cmyk(0%, 66%, 87%, 0%)
No CSS named color matches exactly; the nearest is shown.
Supported formats
| Format | Example | Notes |
|---|---|---|
| HEX | #ff5722, #f52, #ff572280 | 3, 4, 6 or 8 digits; the # is optional |
| RGB | rgb(255, 87, 34), rgb(255 87 34 / 50%) | 0–255 or percentages; rgba() too |
| HSL | hsl(14, 100%, 57%) | hue in degrees (or turn, rad, grad) |
| HWB | hwb(14 13% 0%) | hue, whiteness, blackness (CSS Color 4) |
| HSV / HSB | hsv(14, 87%, 100%) | used by Photoshop and most picker dialogs |
| CMYK | cmyk(0%, 66%, 87%, 0%) | percentages, or 0–1 fractions |
| Name | tomato, rebeccapurple | all 148 CSS named colors |
Both the comma syntax and the modern space syntax of CSS Color 4 are accepted, and three bare numbers such as 255, 87, 34 are read as RGB.
Alpha and transparency
Alpha (opacity) runs from 0 (transparent) to 1 (opaque). Set it with the Alpha slider or type it: rgba(255, 87, 34, 0.5), rgb(255 87 34 / 50%) or the 8-digit hex #ff572280. In 8-digit hex the last pair is alpha on a 0–255 scale, so 80 (128) is 50% and cc (204) is 80%.
The swatch shows transparency over a checkerboard. When alpha is below 1, every output includes it (rgba(), hsla(), hwb(… / 0.5)), except HSV and CMYK, which have no standard alpha notation.
Why CMYK conversions are approximate
Screens mix red, green and blue light; printers lay cyan, magenta, yellow and black ink on paper. The CMYK shown here uses the standard device formula (K = 1 − max(R, G, B), then C, M and Y from what remains), which is what most design tools display without a color profile. Real print output depends on the ink, the paper and the ICC profile the printer uses, and many bright screen colors (vivid greens, oranges, blues) can't be printed at all. For print work, convert in your layout software with the printer's profile and check a proof.
CSS color names
CSS defines 148 named colors, from aliceblue to yellowgreen, plus transparent. Type a name to get its codes; for any color, CSS name shows the exact name if there is one and otherwise the nearest by RGB distance (#ff5722 is close to orangered and tomato, but matches neither). Some names are surprising: gray (#808080) is darker than darkgray (#a9a9a9), and grey and gray are identical.
Choosing a format for CSS
All formats render identically; pick by what you need to do with them. HEX is compact and what design tools hand over. HSL is easiest to adjust by hand: change only the lightness to get hover or disabled states that stay in the same hue. RGB with alpha is common for overlays and shadows. Newer CSS spaces such as oklch() give more even lightness steps; this converter works in sRGB, which every browser supports. To read and tidy color values in a whole stylesheet, use the CSS formatter.
Is anything I enter stored?
This tool runs entirely in your browser. Your text is not uploaded to our servers.