CSS Gradient Generator
Builds linear, radial, and conic CSS gradients visually and copies the CSS.
Color Converter
Convert a color between HEX, RGB, HSL, HSV, and CMYK in one step, and check its contrast against white and black text.
Runs in your browser. Your data is not uploaded.
- HEX
- –
- HEX with alpha
- –
- RGB
- –
- HSL
- –
- HSV / HSB
- –
- CMYK
- –
Converts as you type. CSS color names work too.
How to use the Color Converter
- Type a color into Color value in any format, such as
#1f5fbf,rgb(31 95 191),hsl(216, 72%, 44%), orteal. You can also use the Pick swatch. - Every other format appears below as you type. Press the copy button next to the one you need.
- Check Contrast to see whether white or black text on this color passes WCAG AA or AAA.
How it works
Every input is first turned into red, green, and blue values from 0 to 255, and every output is calculated from those.
- HEX writes R, G, and B as two hex digits each.
#abcis short for#aabbcc, and an optional fourth pair is the alpha. - HSL: with max and min the largest and smallest of R, G, B scaled to 0-1, lightness L = (max + min) / 2 and saturation S = (max − min) / (1 − |2L − 1|). Hue is the angle on the color wheel, 0-360°.
- HSV (also called HSB) uses the same hue, value V = max, and saturation S = (max − min) / max.
- CMYK: K = 1 − max, then C = (1 − R − K) / (1 − K), and the same for M with G and Y with B.
- Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color from the WCAG 2 formula.
Examples
#1f5fbf converts to:
- RGB:
rgb(31, 95, 191) - HSL:
hsl(216, 72.1%, 43.5%) - HSV:
hsv(216, 83.8%, 74.9%) - CMYK:
cmyk(83.8%, 50.3%, 0%, 25.1%) - Contrast with white text 6.09:1 (passes AA), with black text 3.45:1 (passes AA only for large text).
rgba(255, 0, 0, 0.5) becomes #ff000080.
WCAG contrast requirements
| Level | Normal text | Large text (24px, or 18.66px bold) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Limitations
- CMYK here is a simple formula without a color profile. Printers use ICC profiles, so the printed color will differ. Ask your print shop for their values.
- Results are rounded to one decimal place, so converting back and forth can move a value by one step.
- Wide-gamut formats such as
oklch(),lab(), andcolor(display-p3 ...)are not converted. - The contrast check assumes an opaque color. With transparency, the real contrast depends on what is behind it.
Frequently asked questions
What is the difference between HSL and HSV?
Both describe hue and saturation. In HSL, 100% lightness is always white. In HSV, 100% value is the purest, brightest version of the hue. Design apps such as Photoshop use HSV (HSB); CSS uses HSL.
How do I convert HEX to RGB by hand?
Split the six digits into three pairs and convert each from base 16. For #1f5fbf: 1f = 31, 5f = 95, bf = 191.
What does the 8-digit HEX code mean?
The last two digits are the alpha (opacity). ff is fully opaque, 80 is about 50%, and 00 is fully transparent.
Which CSS color names are supported?
All 148 named colors from the CSS specification, such as teal, rebeccapurple, and transparent.
Related tools
Often used together with Color Converter.
Image Color ExtractorImage Tools
Pulls the dominant color and a 5 to 12 color palette out of any image.
CSS Formatter
Beautifies CSS with one declaration per line and consistent indentation.