White HEX Code
The HEX code for pure white is #FFFFFF. White represents maximum brightness in the RGB color model, with all three color channels (red, green, blue) at their highest values of 255. White is the absence of color in subtractive mixing (print) but the combination of all colors in additive mixing (screens).
White Color Values
| Format | Value |
|---|---|
| HEX | #FFFFFF |
| RGB | rgb(255, 255, 255) |
| HSL | hsl(0, 0%, 100%) |
| CMYK | C:0 M:0 Y:0 K:0 |
White and Off-White Shades
Pure white can be harsh on screens. Designers often use off-white shades for backgrounds and content areas:
| Shade | HEX | Description |
|---|---|---|
| White | #FFFFFF | Pure white |
| Snow | #FFFAFA | Warm, pinkish white |
| Ivory | #FFFFF0 | Warm, yellowish white |
| Seashell | #FFF5EE | Warm, peachy white |
| Ghost White | #F8F8FF | Cool, bluish white |
| Whitesmoke | #F5F5F5 | Light gray-white |
| Floral White | #FFFAF0 | Warm cream |
| Linen | #FAF0E6 | Warm beige-white |
| Antique White | #FAEBD7 | Yellow-tinted white |
White in Design
White conveys:
- Cleanliness: Medical, hygiene products
- Simplicity: Minimalist design, Apple aesthetic
- Space: Creates breathing room
- Purity: Weddings, formal occasions
Using White Effectively
``css
/* Pure white - can be harsh */
.container {
background-color: #FFFFFF;
}
/* Softer off-white for content */
.content {
background-color: #FAFAFA;
}
/* Warm white for comfort */
.cozy-section {
background-color: #FFF8F5;
}
`
White Space in Web Design
White space (or negative space) is crucial for:
Readability: Text needs breathing room- Focus: Highlighting important elements
- Elegance: Premium, sophisticated feel
- Usability: Reducing cognitive load
Pure White vs Off-White
Use Case Recommendation Text backgrounds Off-white (#F5F5F5) Modals/cards White or light off-white High contrast needs Pure white Eye comfort Warm off-whites
Use pure white strategically, and consider off-white shades for large background areas to reduce eye strain.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.