What ways of specifying color does CSS support?
CSS supports several ways of specifying color. The main groups are named colors, numeric models, functions, and transparency. Here is the full list:
1. By name (named colors)
CSS lets you use predefined color names:
css
color: red;
background: royalblue;About 140 standard names are supported (white, black, green, tomato, and others).
2. HEX format
Hexadecimal representation:
css
color: #FF0000; /* Red */
color: #F00; /* Short notation */
color: #FF000080; /* With alpha channel (transparency) */Formats:
#RRGGBB#RGB#RRGGBBAA#RGBA
3. RGB / RGBA
Functional color notation in the RGB model:
css
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* 0.5, transparency */Notation with percentages is also possible:
css
color: rgb(100%, 0%, 0%);4. HSL / HSLA
Hue, saturation, and lightness:
css
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.3);5. CSS Color 4 level functions
| Format | Example |
|---|---|
hwb() | color: hwb(0 0% 0% / 0.5); |
lab() | color: lab(54% 80 67); |
lch() | color: lch(54% 106 40); |
oklab() | color: oklab(40% 0.1 0.1); |
oklch() | color: oklch(40% 0.15 45); |
color() | color: color(display-p3 1 0 0 / 0.6); |
These models provide accurate color reproduction, especially on modern displays (for example, P3).
6. The currentColor system
Inherits the current text color:
css
border-color: currentColor;7. Transparent color
css
color: transparent;Summary
CSS supports the following ways of specifying color:
| Method | Example |
|---|---|
| Named colors | red |
| HEX | #ff0000, #f00, #ff000080 |
| RGB/RGBA | rgb(), rgba() |
| HSL/HSLA | hsl(), hsla() |
| HWB | hwb() |
| Lab / Lch | lab(), lch() |
| Oklab / Oklch | oklab(), oklch() |
| color() | color(display-p3 …) |
| currentColor | currentColor |
| transparent | transparent |
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.