HTML Color Codes Explained: HEX, RGB, HSL, and Named Colors

The Four Ways to Specify Color in HTML/CSS

CSS provides four primary formats for specifying colors, each with different use cases and levels of expressiveness.

1. HEX Color Codes

Format: #RRGGBB (or shorthand #RGB). Each pair represents red, green, and blue as two hexadecimal digits (00–FF = 0–255). Examples: #FF0000 = pure red, #00FF00 = pure green, #0000FF = pure blue, #FFFFFF = white, #000000 = black. HEX is the most widely used format in web design.

2. RGB / RGBA

Format: rgb(R, G, B) or rgba(R, G, B, A) where each channel is 0–255 and alpha (A) is 0–1. RGBA adds transparency: rgba(255, 0, 0, 0.5) is 50% transparent red. Great for overlays, shadows, and hover effects.

3. HSL / HSLA

Format: hsl(H, S%, L%) — Hue (0–360° on the color wheel), Saturation (0–100%), Lightness (0–100%). More intuitive for designers: to create a lighter or darker version of a color, just adjust the L value. hsl(0, 100%, 50%) is red; hsl(0, 100%, 75%) is pink.

4. Named Colors

CSS has 140+ predefined color names: red, blue, tomato, rebeccapurple, linen, cornsilk. They are easy to read in code but not precise enough for brand colors — use HEX or RGB for exact brand shades.

Common Web Design Colors

• Pure white: #FFFFFF / rgb(255,255,255)
• Pure black: #000000 / rgb(0,0,0)
• Light gray background: #F3F4F6
• Medium gray text: #6B7280
• Brand blue (similar to Tailwind blue-600): #2563EB
• Success green: #16A34A
• Error red: #DC2626

Color Accessibility

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Dark text on a light background (or vice versa) is essential for readability by users with visual impairments. Always check color contrast before deploying — our color converter includes a contrast ratio checker.