#rgb, #rrggbb or #rrggbbaa
Red, green, blue (0–255), optional alpha
Hue (0–360), saturation %, lightness %
#0d9488rgb(13, 148, 136)hsl(175, 84%, 32%)Contrast ratio (WCAG 2)
Ratios use the solid color (alpha ignored). AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
How to use the Color Converter
- 1Pick a color with the color picker, or type a value into the HEX, RGB or HSL field.
- 2Watch the other fields and the preview swatch update as you type. Invalid input is flagged under the field.
- 3Copy the ready-to-use hex, rgb() or hsl() string from the list on the right.
- 4Check the contrast ratios against white and black to see whether the color passes WCAG AA or AAA for text.
HEX, RGB and HSL explained
Screens build every color from red, green and blue light. RGB writes those three channels as numbers from 0 to 255, so rgb(13, 148, 136) is a teal with little red, a lot of green and slightly less blue. HEX is the same three numbers written in base 16 and joined together: 13 is 0d, 148 is 94 and 136 is 88, giving #0d9488. A three-digit form such as #fff is shorthand for #ffffff, and an eight-digit form adds an alpha (opacity) channel.
HSL describes the same color in terms people find easier to adjust: hue is the position on the color wheel in degrees (0 is red, 120 green, 240 blue), saturation is how vivid the color is, and lightness runs from black at 0% to white at 100%. The teal above is hsl(175, 84%, 32%). Darkening a color is as simple as lowering the lightness.
How the conversion works
To convert RGB to HSL, each channel is divided by 255. Lightness is the average of the largest and smallest channel, saturation is their difference divided by 1 − |2L − 1|, and hue depends on which channel is largest. Going the other way, chroma C = (1 − |2L − 1|) × S, and the hue decides how C is shared between red, green and blue.
For example, hsl(210, 50%, 40%) gives C = 0.4, which works out to rgb(51, 102, 153), or #336699. HSL values are rounded to whole numbers, so converting a color to HSL and back can occasionally shift a channel by one or two units. The color picker, HEX and RGB fields are always exact.
Color contrast and accessibility
The Web Content Accessibility Guidelines measure contrast as (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors. Ratios range from 1:1 for identical colors to 21:1 for black on white. Level AA requires at least 4.5:1 for normal text and 3:1 for large text; level AAA requires 7:1 and 4.5:1.
The default teal, #0d9488, has a ratio of 3.74:1 on white, so it is fine for large headings but too light for body text, while on black it reaches 5.61:1 and passes AA. A well-known benchmark is #767676, the lightest gray that passes AA on white at 4.54:1.
Using the values in CSS
All three formats work in every modern browser, so choose the one that suits the job. HEX is compact and common in design files, rgb() is handy when you need to add transparency, and hsl() makes it easy to create lighter and darker shades of one hue for a theme. More utilities for front-end work are collected in our developer tools.
Frequently asked questions
Which color format is best for CSS?
There is no difference in how they render. HEX is the most common in design tools, while HSL is easiest to tweak by hand. If you pass a hex color in a URL, write # as %23, which the URL encoder does for you.
How do I add transparency?
Type an eight-digit hex such as #0d948880, or add a fourth number to the RGB or HSL field, for example 13, 148, 136, 0.5. The CSS output then switches to rgba() and hsla(), and the preview shows the color over a checkerboard.
Why did my HSL values change slightly after editing RGB?
HSL is shown with whole-number degrees and percentages, so some RGB colors fall between two HSL values and are rounded to the nearest one.
Does the contrast check include transparency?
No. The ratio is calculated for the solid color. A semi-transparent color's real contrast depends on what is behind it, so check the final blended color if you use opacity.
Can I convert color values stored in JSON or CSS files?
Copy the value into the matching field here and the other formats appear instantly. If the value is buried in a large configuration file, the JSON formatter makes it easier to find.