HTML Color Codes — Hex, RGB, HSL & Named Colors
A Complete Reference for Web Color Values Used in CSS, HTML and Design Tools
HTML and CSS support four main ways to specify colors: hexadecimal (hex), RGB, HSL, and named colors. Each has its use case — hex is compact, RGB maps to screen hardware, HSL makes lightness and saturation intuitive, and named colors are readable. This reference covers all four formats with examples.
A hex color code uses the format #RRGGBB, where each pair of characters represents the red, green, and blue channels. Each pair is a two-digit hexadecimal number ranging from 00 (0 in decimal) to FF (255 in decimal). For example, #FF0000 is pure red — full red channel (FF), no green (00), no blue (00).
| Color Name | Hex Code | RGB Equivalent | Notes |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | Darkest possible color |
| White | #FFFFFF | rgb(255, 255, 255) | Lightest possible color |
| Red | #FF0000 | rgb(255, 0, 0) | Pure red channel |
| Green | #008000 | rgb(0, 128, 0) | HTML standard green (not lime) |
| Blue | #0000FF | rgb(0, 0, 255) | Pure blue channel |
| Yellow | #FFFF00 | rgb(255, 255, 0) | Red + green, no blue |
| Cyan | #00FFFF | rgb(0, 255, 255) | Same as Aqua |
| Magenta | #FF00FF | rgb(255, 0, 255) | Same as Fuchsia |
| Orange | #FFA500 | rgb(255, 165, 0) | Added in CSS2.1 |
| Pink | #FFC0CB | rgb(255, 192, 203) | Light pinkish hue |
| Purple | #800080 | rgb(128, 0, 128) | Equal red and blue at half intensity |
| Gray | #808080 | rgb(128, 128, 128) | Mid-range neutral |
| Silver | #C0C0C0 | rgb(192, 192, 192) | Light neutral gray |
| Maroon | #800000 | rgb(128, 0, 0) | Dark red |
| Navy | #000080 | rgb(0, 0, 128) | Dark blue |
| Teal | #008080 | rgb(0, 128, 128) | Dark cyan |
| Olive | #808000 | rgb(128, 128, 0) | Dark yellow-green |
| Lime | #00FF00 | rgb(0, 255, 0) | Pure green channel (brighter than "green") |
| Aqua | #00FFFF | rgb(0, 255, 255) | Same as Cyan |
| Fuchsia | #FF00FF | rgb(255, 0, 255) | Same as Magenta |
| Coral | #FF7F50 | rgb(255, 127, 80) | Warm orange-red |
| Crimson | #DC143C | rgb(220, 20, 60) | Deep vivid red |
| Gold | #FFD700 | rgb(255, 215, 0) | Rich yellow-gold |
| Indigo | #4B0082 | rgb(75, 0, 130) | Deep violet-blue |
| Lavender | #E6E6FA | rgb(230, 230, 250) | Pale blue-purple |
| Salmon | #FA8072 | rgb(250, 128, 114) | Soft pinkish-orange |
| Tan | #D2B48C | rgb(210, 180, 140) | Light warm brown |
| Turquoise | #40E0D0 | rgb(64, 224, 208) | Bright blue-green |
| Violet | #EE82EE | rgb(238, 130, 238) | Light purple-pink |
Shorthand Hex: #RGB
When both digits of each channel are identical, you can use a 3-character shorthand. The browser expands each digit by doubling it: #FFF becomes #FFFFFF, #09F becomes #0099FF, and #A3C becomes #AA33CC. This shorthand only works when both digits in each pair are the same.
8-Digit Hex with Alpha: #RRGGBBAA
CSS Color Level 4 introduced an 8-digit hex format that adds an alpha (transparency) channel as the final two hex digits. The alpha ranges from 00 (fully transparent) to FF (fully opaque). For example, #FF000080 is red at approximately 50% opacity. Note that this format is not supported in Internet Explorer — use rgba() instead for broader compatibility.
The rgb(R, G, B) function specifies a color using three integer values, each between 0 and 255, representing the red, green, and blue channels. This maps directly to how monitors display color, making it easy to reason about channel intensities.
The rgba(R, G, B, A) function adds a fourth alpha channel. The alpha value is a decimal between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(255, 0, 0, 0.5) is red at 50% opacity.
| Color | rgb() | rgba() at 50% opacity |
|---|---|---|
| Black | rgb(0, 0, 0) | rgba(0, 0, 0, 0.5) |
| White | rgb(255, 255, 255) | rgba(255, 255, 255, 0.5) |
| Red | rgb(255, 0, 0) | rgba(255, 0, 0, 0.5) |
| Blue | rgb(0, 0, 255) | rgba(0, 0, 255, 0.5) |
| Green | rgb(0, 128, 0) | rgba(0, 128, 0, 0.5) |
| Orange | rgb(255, 165, 0) | rgba(255, 165, 0, 0.5) |
| Purple | rgb(128, 0, 128) | rgba(128, 0, 128, 0.5) |
| Teal | rgb(0, 128, 128) | rgba(0, 128, 128, 0.5) |
| Crimson | rgb(220, 20, 60) | rgba(220, 20, 60, 0.5) |
| Gold | rgb(255, 215, 0) | rgba(255, 215, 0, 0.5) |
| Turquoise | rgb(64, 224, 208) | rgba(64, 224, 208, 0.5) |
The hsl(hue, saturation%, lightness%) function describes color in perceptual terms rather than channel values. Hue is a position on the color wheel expressed in degrees (0–360): 0° is red, 120° is green, 240° is blue, and 360° wraps back to red. Saturation controls how vivid the color is — 0% is gray, 100% is fully saturated. Lightness controls brightness — 0% is black, 50% is a pure hue, 100% is white.
HSL is particularly useful when you want to create tints and shades of a color. To lighten a brand color, increase the lightness percentage; to darken it, decrease it — without having to recalculate RGB values.
hsla() works identically but adds an alpha channel (0.0 to 1.0) as a fourth argument, the same as rgba().
| Color | hsl() | Notes |
|---|---|---|
| Red | hsl(0, 100%, 50%) | 0° on the hue wheel |
| Orange | hsl(30, 100%, 50%) | Between red and yellow |
| Yellow | hsl(60, 100%, 50%) | 60° on the hue wheel |
| Yellow-Green | hsl(90, 100%, 50%) | Between yellow and green |
| Green | hsl(120, 100%, 50%) | 120° on the hue wheel |
| Cyan | hsl(180, 100%, 50%) | 180° — opposite red |
| Blue | hsl(240, 100%, 50%) | 240° on the hue wheel |
| Indigo | hsl(275, 100%, 25%) | Low lightness gives deep violet |
| Magenta | hsl(300, 100%, 50%) | 300° on the hue wheel |
| Pink (light red) | hsl(0, 100%, 80%) | Same hue as red, high lightness |
| Steel Blue | hsl(207, 44%, 49%) | Desaturated, medium lightness |
| Mid Gray | hsl(0, 0%, 50%) | 0% saturation = gray regardless of hue |
CSS defines a set of named colors that browsers recognize as keywords. There are 140 named colors in CSS Colors Level 3, and CSS Color Level 4 extends this to 148 (adding rebeccapurple and a handful of others). Named colors are case-insensitive — Red, RED, and red all produce the same result.
The 17 foundational colors from HTML 4 and CSS2.1 are listed below. All modern browsers support these without exception:
| Name | Hex | Notes |
|---|---|---|
aqua | #00FFFF | Same as cyan |
black | #000000 | HTML 4 basic color |
blue | #0000FF | HTML 4 basic color |
fuchsia | #FF00FF | Same as magenta |
gray | #808080 | HTML 4 basic color |
green | #008000 | Note: not the same as lime |
lime | #00FF00 | Pure green channel |
maroon | #800000 | Dark red |
navy | #000080 | Dark blue |
olive | #808000 | Dark yellow-green |
orange | #FFA500 | Added in CSS2.1 |
purple | #800080 | HTML 4 basic color |
red | #FF0000 | HTML 4 basic color |
silver | #C0C0C0 | Light gray |
teal | #008080 | Dark cyan |
white | #FFFFFF | HTML 4 basic color |
yellow | #FFFF00 | HTML 4 basic color |
The extended set includes many descriptive names such as tomato, steelblue, cornflowerblue, hotpink, darkorange, mediumseagreen, and rebeccapurple — all fully valid in modern CSS. A complete list is available in the CSS Color Level 4 specification.
Use Hex when
- You need compact, copy-paste notation
- Copying values from design tools (Figma, Photoshop, Sketch)
- Matching brand or palette colors specified as hex
- Writing static CSS where transparency is not needed
Use HSL when
- Creating color variations — lighter, darker, or more saturated
- Building a design system with consistent tonal steps
- You want the color logic to be human-readable in CSS
- Generating dynamic colors with CSS custom properties
Use RGB / RGBA when
- Working with CSS animations or transitions that blend colors
- Manipulating color values dynamically in JavaScript
- You need cross-browser alpha transparency (IE9+)
- Integrating with canvas or WebGL which use RGB internally
All four color formats — hex, RGB, HSL, and named colors — are supported in all modern browsers without any caveats. Here is a summary of notable compatibility boundaries:
- RGB and HSL — supported since CSS2/CSS3, available in every browser including IE6+.
- RGBA and HSLA — alpha transparency support was added in Internet Explorer 9. Any browser newer than IE9 supports both.
- 8-digit hex (#RRGGBBAA) — supported in Chrome 62+, Firefox 49+, and Safari 9.1+. Not supported in any version of Internet Explorer. If you need to target IE, use
rgba()instead. - CSS Color Level 4 keywords (e.g.
rebeccapurple) — supported in all modern browsers; not available in IE.
For the widest compatibility, rgba() is the safest choice when transparency is required. For non-transparent colors, hex and named colors work universally.
Reference tables and specification pages can tell you the hex code for standard colors, but they cannot help you match a color already on screen — a brand logo, a UI screenshot, or a photograph. For that you need a pixel-accurate color picker that can sample any pixel on your display and immediately give you the hex, RGB, HSL, or other values.
ColorMania is a free Windows color picker that samples any pixel on your screen and instantly shows you its hex code, RGB values, HSL, CMYK, and more. Copy any value to the clipboard in one click — perfect for web development, graphic design, and building accurate color palettes.
Get ColorMania Free →- Web Color Accessibility: WCAG Contrast Ratios — Understand AA/AAA contrast requirements and testing tools
- ColorMania – Free Color Picker for Windows — Pick colours from anywhere on screen, manage palettes, convert between 15+ formats