Suggest an edit

Improve this article

Refine the answer for “What ways of specifying color does CSS support?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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` |

---

Markdown · drag & drop images · ⌘B / ⌘I shortcuts337 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.