Ivory color: hex codes, shades and palettes
Palettes built around ivory. Click any swatch to copy its hex code.
Ivory is the off-white of old piano keys and wedding stationery, white with a trace of yellow in it, warm enough to feel softer than paper but pale enough to still read as white. The CSS keyword ivory is #FFFFF0.
Ivory hex, RGB, HSL and OKLCH
- HEX
#FFFFF0- RGB
rgb(255, 255, 240)- HSL
hsl(60, 100%, 97%)- OKLCH
oklch(99.6% 0.020 106.8)- On white
- 1.01:1
- On black
- 20.81:1
Shades of ivory
9 steps from one base color, generated in OKLCH so each step is an equal perceived step rather than an equal numeric one. Click a swatch to copy it.
Ivory color values
| RGB | 255 | 255 | 240 | |
|---|---|---|---|---|
| HSL | 60° | 100% | 97% | |
| HSV | 60° | 6% | 100% | |
| CMYK | 0.00 | 0.00 | 0.06 | 0.00 |
| XYZ | 92.7260 | 99.0716 | 96.6590 | |
| Yxy | 99.0716 | 0.3215 | 0.3435 | |
| CIE-Lab | 99.6399 | -2.5514 | 7.1626 | |
| Hunter Lab | 99.5347 | -7.8962 | 12.0973 | |
| OKLCH | 99.6% | 0.020 | 106.8° |
#FFFFF0 is 255 red, 255 green and 240 blue. No single channel dominates it. The nearest of the 216 web safe colors is #FFFFFF.
CIE-Lab, XYZ and Yxy are measured against D65, the white point sRGB itself is defined against. Hunter Lab uses the original illuminant C constants, which is what paint and plastics specifications quote, so the two Lab rows are not directly comparable. CMYK is the plain arithmetic conversion: real ink values depend on the press, the paper and the profile.
| Base | Red | Green | Blue |
|---|---|---|---|
| Binary | 11111111 | 11111111 | 11110000 |
| Octal | 377 | 377 | 360 |
| Decimal | 255 | 255 | 240 |
| Hex | FF | FF | F0 |
#fffff0 mixed with black
Ten even steps of the classic shade ramp, worked out in RGB, which is how the term has always been defined and how other references list it. The OKLCH scale further down this page answers a different question: it steps by equal perceived amounts, so its values are not the same.
- #FFFFF0
- #E5E5D8
- #CCCCC0
- #B2B2A8
- #999990
- #7F7F78
- #666660
- #4C4C48
- #32322F
- #191917
- #000000
#fffff0 mixed with white
The tint ramp, by the same rule in the other direction.
- #FFFFF0
- #FFFFF1
- #FFFFF3
- #FFFFF4
- #FFFFF6
- #FFFFF7
- #FFFFF9
- #FFFFFA
- #FFFFFC
- #FFFFFD
- #FFFFFF
Channel shares
Color schemes
Turned in OKLCH rather than HSL, so every member keeps the lightness and chroma of the original instead of one of them arriving washed out.
Complementary
- #FFFFF0
- #FEFEFF
Triadic
- #FFFFF0
- #FCFEFF
- #FFFDFE
Analogous
- #FFFFF0
- #FBFFFA
- #FFFDFB
Monochromatic
- #8C8C7E
- #B1B1A3
- #D7D7C9
- #FFFFF0
- #FAFAEB
- #FAFAEB
- #FAFAEB
#fffff0 on black and on white
The quick brown fox jumps over the lazy dog. 20.81:1
The quick brown fox jumps over the lazy dog. 1.01:1
Body text needs 4.5:1 to meet AA and large text needs 3:1, so a ratio tells you which of the two backgrounds this color can be read on, and at what size.
CSS for #fffff0
color: #fffff0;
background-color: #fffff0;
border: 3px solid #fffff0;
box-shadow: 1px 1px 3px 2px #fffff0;
text-shadow: 4px 4px 2px rgba(255, 255, 240, 0.8);
/* Perceptually even, and what a modern stylesheet wants */
color: oklch(99.6% 0.020 106.8);The OKLCH form is the same color stated so that lightening or darkening it moves by an amount the eye agrees with. Every current browser understands it.
Named shades and close relatives
Ivory vs cream vs beige vs eggshell
These four get used as if they were the same color, and the difference is easy to state once the numbers are in front of you. Ivory sits at hue 60 with 97% lightness, the palest of the group and barely tinted. Cream keeps a similar hue but drops to 91% lightness, so it reads as noticeably more yellow. Beige carries more of that yellow still and starts to feel like a color rather than a white. Eggshell adds a little grey, which is what gives it the flatter, chalkier feel that paint charts trade on.
The practical rule: ivory when you want white that is not clinical, cream when you want warmth to be visible, beige when you want an actual neutral color, eggshell when you want either without the yellow reading as cheap.
Where ivory works
Wedding invitations and stationery, luxury and skincare packaging, book interiors, and any interface that wants to feel calm rather than sterile. Pure white backgrounds are unforgiving under bright light; a few percent of warmth takes the glare off without anyone consciously noticing the page is not white.
It pairs naturally with warm neutrals, taupe, sand, soft brown, and with deep colors that have some warmth of their own, such as forest green, burgundy or navy. Against a cool grey it can look accidental, as though the white point drifted.
Contrast and readability
Ivory on white measures 1.01:1 and on black 20.81:1. WCAG AA asks for 4.5:1 on normal text and 3:1 on large text and UI components, so the higher of those two decides which background it belongs on. In the scale above, 500 is the first to clear 4.5:1 on white, at 5.24:1.
The contrast checker reports every level for a given pair and suggests the nearest passing shade on the same hue. The color picker builds this same scale from any color you paste in.
Ivory color questions
- What is the hex code for ivory?
- Ivory is #FFFFF0, the CSS named color. In RGB that is rgb(255, 255, 240), and in HSL hsl(60, 100%, 97%): full white with the blue channel pulled down slightly.
- Is ivory a shade of white?
- Yes. It is an off-white: white with a small amount of yellow. At 97% lightness most people will call it white until it sits next to a pure white.
- What is the difference between ivory and cream?
- Both are warm off-whites at roughly the same hue, but cream is darker and more saturated. Ivory reads as white with a hint of warmth; cream reads as a pale yellow.
- Can I use ivory text on a white background?
- No. Ivory on white measures about 1.01:1, effectively invisible. Normal text needs 4.5:1. Ivory is a background color.
Related colors: cream, beige. See every shade on the colors index.
No ivory palettes yet
Run npm run generate to build the dataset.