Black HEX Code
The HEX code for pure black is #000000. Black represents the complete absence of light in the RGB color model, with all three color channels at zero. In print (CMYK), black is typically achieved using the Key (K) channel for deeper, richer blacks.
Black Color Values
| Format | Value |
|---|---|
| HEX | #000000 |
| RGB | rgb(0, 0, 0) |
| HSL | hsl(0, 0%, 0%) |
| CMYK | C:0 M:0 Y:0 K:100 |
Black Shades and Near-Blacks
Pure black (#000000) can feel harsh. Designers often use softer near-black shades:
| Shade | HEX | Description |
|---|---|---|
| Black | #000000 | Pure black |
| Rich Black | #0A0A0A | Slightly softer |
| Soft Black | #111111 | Common for text |
| Charcoal | #1A1A1A | Dark gray-black |
| Off-Black | #1C1C1C | Warmer feel |
| Dark Gray | #222222 | Popular for dark mode |
| Jet | #343434 | Named dark shade |
| Onyx | #353839 | Blue-tinted black |
Black in Design
Black conveys:
- Elegance: Luxury brands, fashion
- Power: Authority, sophistication
- Mystery: Dramatic, edgy designs
- Formality: Professional, corporate
Using Black for Text
``css
/* Pure black - high contrast but harsh */
.text-harsh {
color: #000000;
}
/* Softer black - easier on eyes */
.text-soft {
color: #1A1A1A;
}
/* Dark gray for body text */
.text-body {
color: #333333;
}
`
Rich Black in Print
For printing, pure K:100 black may look washed out. Use "rich black" for deeper, more saturated blacks:
| Type | CMYK | Use Case |
|---|---|---|
| Pure Black | C:0 M:0 Y:0 K:100 | Text, fine details |
| Rich Black | C:60 M:40 Y:40 K:100 | Large solid areas |
| Cool Black | C:60 M:0 Y:0 K:100 | Blue-tinted black |
| Warm Black | C:0 M:60 Y:60 K:100 | Red-tinted black |
Dark Mode Best Practices
For dark mode interfaces, avoid pure black backgrounds:
| Element | Recommended Color |
|---|---|
| Background | #121212 or #1A1A1A |
| Surface | #1E1E1E or #252525 |
| Card | #2C2C2C |
| Text | #E0E0E0 (not white) |
This reduces eye strain and creates better visual hierarchy.Brand Blacks
| Brand | HEX |
|---|---|
| Apple | #000000 |
| Nike | #111111 |
| Prada | #000000 |
| Chanel | #000000 |
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.