Ivory HEX Code
The HEX code for ivory is #FFFFF0. Ivory is a soft off-white color with a subtle yellow tint, named after the material from elephant tusks. It's warmer than pure white and often used as an elegant background color.
Ivory Color Values
| Format | Value |
|---|---|
| HEX | #FFFFF0 |
| RGB | rgb(255, 255, 240) |
| HSL | hsl(60, 100%, 97%) |
| CMYK | C:0 M:0 Y:6 K:0 |
Ivory and Off-White Variations
| Shade | HEX | Description |
|---|---|---|
| White | #FFFFFF | Pure white |
| Ivory | #FFFFF0 | Yellow-tinted |
| Snow | #FFFAFA | Pink-tinted |
| Seashell | #FFF5EE | Peach-tinted |
| Linen | #FAF0E6 | Warmer |
| Floral White | #FFFAF0 | Soft cream |
Ivory in Design
Ivory conveys:
- Elegance: Sophisticated, premium
- Warmth: Softer than white
- Classic: Timeless, traditional
- Luxury: Wedding, formal
Using Ivory in Design
``css
/* Ivory background */
.elegant {
background-color: #FFFFF0;
color: #2C2C2C;
}
/* Wedding palette */
:root {
--ivory: #FFFFF0;
--champagne: #F7E7CE;
--gold: #D4AF37;
}
`
Ivory vs White
| Color | HEX | Feel |
|---|---|---|
| White | #FFFFFF | Stark, clinical |
| Ivory | #FFFFF0 | Warm, elegant |
| Cream | #FFFDD0 | Richer, yellow |
Use ivory instead of white for warmer, more inviting designs.Ivory in Every Format
| Format | Value |
|---|---|
| HEX | #FFFFF0 |
| RGB | rgb(255, 255, 240) |
| HSL | hsl(60, 100%, 97%) |
| CMYK | cmyk(0%, 0%, 6%, 0%) |
| Nearest Tailwind | amber-50 (#FFFBEB) |
About This Colour
Ivory is #FFFFF0, an off-white with a yellow cast. Alongside snow, seashell and floralwhite it is one of CSS's several near-whites, all within a few points of #FFFFFF.
Will It Pass Contrast?
| Combination | Ratio | WCAG |
|---|---|---|
| Ivory text on white | 1.01:1 | fails |
| Ivory text on black | 20.81:1 | AAA |
| White text on ivory | 1.01:1 | fails |
WCAG AA needs 4.5:1 for body text and 3:1 for text above 18pt or 14pt bold. Ivory passes on black, so reserve it for dark backgrounds.Building a Palette Around It
| Role | Colour |
|---|---|
| Lighter (+20%) | #ffffff |
| Base | #FFFFF0 |
| Darker (−20%) | #ffff8a |
| Complementary | #f0f0ff |
| Triadic | #f0ffff, #fff0ff |
Tints (toward white): #fffff4, #fffff8, #fffffbShades (toward black): #bfbfb4, #808078, #40403c
Using It
`css
:root {
--ivory: #fffff0;
--ivory-light: #ffffff;
--ivory-dark: #ffff8a;
}
.badge {
background: var(--ivory);
color: #fff;
}
`
Define the colour once as a custom property rather than repeating the hex. When the brand
changes — and it will — you edit one line instead of grepping a stylesheet.
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.