CSS color formats
All of these describe the same orange. Screens mix red, green and blue light, and HEX and RGB write those three amounts directly; HSL describes the same color in terms people find easier to adjust.
| Format | Example | How it works |
|---|---|---|
| HEX | #ff8800 | Red, green and blue as two hex digits each (00–ff). The short form #f80 doubles each digit. |
| RGB | rgb(255, 136, 0) | Red, green and blue as numbers from 0 to 255. |
| HSL | hsl(32, 100%, 50%) | Hue (0–360° around the color wheel), saturation and lightness. |
| With transparency | #ff880080 / rgba(255, 136, 0, 0.5) | A fourth value adds alpha (opacity). 80 in hex is 128/255 ≈ 0.502. |
To convert HEX to RGB by hand, split the code into pairs and read each pair as a base-16 number: ff = 255, 88 = 8×16 + 8 = 136, 00 = 0.
Why HSL is handy
With HEX or RGB it is hard to say “the same color, but a bit lighter”. In HSL you keep the hue (H) fixed and change only the lightness (L) to get lighter and darker shades of the same color. That makes it easy to build hover states, borders and the color scales of a design system.
Contrast ratio and WCAG
The contrast ratio compares the relative luminance of text and background, from 1:1 (identical colors) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG 2.x) set these minimums:
| Level | Normal text | Large text (24px+, or ~18.7px+ bold) |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
This tool shows the ratio when your color is used as text on a white and on a black background. For example, the gray #767676 reaches 4.54 : 1 on white and passes AA, while the slightly lighter #777777 reaches only 4.48 : 1 and fails.
Frequently asked questions
Is there a difference between #FF8800 and #ff8800?
No. Hex color codes are case-insensitive, so both are the same color. Pick one style and use it consistently in your project.
Why does the color look slightly different in Photoshop or Figma?
The same numbers can look different depending on the color space (sRGB, Display P3) and color profile settings. This tool treats all values as standard web sRGB.
Why do values shift by 1 when converting from HSL?
HSL and RGB are rounded to whole numbers during conversion, so a round trip can be off by about 1. The difference is not visible.