Ivory carries the hex code #FFFFF0, which resolves to rgb(255, 255, 240) and hsl(60, 100%, 97%). Red and green sit at maximum while blue drops 15 points, which places the hue at exactly 60° and makes ivory a pure yellow diluted almost entirely with white.
Ivory reaches 1.01:1 against white, the smallest measurable difference of any named color, and 20.81:1 against black. This page covers every code format, the palettes that work when a color has almost no chroma, the four elements where ivory performs, and what separates it from the near-whites it competes with.
What Is the Color Ivory?
Ivory sits at 97% lightness with a single-channel deviation from pure white. The CSS keyword ivory maps to #FFFFF0 exactly, which makes it one of the few near-whites with a specified value rather than a convention.
The full code set for #FFFFF0:
- HEX: #FFFFF0
- RGB: rgb(255, 255, 240)
- RGBA: rgba(255, 255, 240, 1)
- HSL: hsl(60, 100%, 97%)
- HSB: 60, 6, 100
- CMYK: 0, 0, 6, 0
The structure is unusually simple. Two channels at maximum and one at 240 produce a color that’s white minus a small amount of blue, and removing blue is what creates a yellow cast.
HSB gives the honest saturation reading at 6%, while HSL reports 100% because saturation measured at extreme lightness becomes unreliable. Anyone copying a saturation number between the two models will get a very different color.
Ivory is the warmest of the CSS near-whites by this measure. Its 15-point blue deficit exceeds floral white, seashell, and snow, which is why it reads as the most yellow of the family.
How Does Ivory Differ From Off White, Cream, and Beige?
Four warm near-neutrals get used interchangeably, and they span a wider range than the conversation suggests. A design system that treats them as synonyms will drift visibly.
Here’s where each lands:
- Ivory (#FFFFF0): 97% lightness, hue 60, a 15-point blue deficit
- Off white (#FAF9F6): 97% lightness, hue 45, a 4-point channel spread
- Floral white (#FFFAF0): 97% lightness, hue 40, warmer and pinker
- Cornsilk (#FFF8DC): 93% lightness, hue 48, considerably more yellow
- Beige (#F5F5DC): 91% lightness, hue 60, the same hue with real saturation
Ivory and beige share a hue exactly. Both sit at 60°, and the difference is entirely lightness and saturation, which means beige is functionally a deeper ivory rather than a separate color.
Off white is the subtler comparison. At hue 45 it carries a small amount of red as well as yellow, which reads as warmer-neutral where ivory reads as specifically yellow.
Cornsilk crosses a threshold the others don’t. At 93% lightness it reaches 1.2:1 against white, which is the first value in the group with a visible edge against a white surface.
The practical guidance is to choose by undertone rather than by name. Ivory’s yellow cast, off white’s warm-neutral cast, and floral white’s pink cast are the actual distinctions, and mixing two of them in one interface reads as inconsistent.
How Does Ivory Appear on Digital Screens?
Ivory renders as almost-white everywhere, and its behavior depends entirely on what sits beside it. The measured values are as lopsided as any color in this cluster:
- #FFFFF0 on white: 1.01:1, no perceptible boundary
- #FFFFF0 on black: 20.81:1, passes AAA
- Black text on #FFFFF0: 20.81:1, passes AAA
- White text on #FFFFF0: 1.01:1, fails
- Dark variant #BFBFB4 on white: 1.85:1, fails
Ivory as dark-mode text is its most underrated use. At 20.81:1 on black it holds essentially all of pure white’s contrast while removing the halation that #FFFFFF produces letterforms.
Display calibration is the main risk. A cool-calibrated monitor renders #FFFFF0 as plain white and a warm one exaggerates the yellow, so the warmth designed may not be the warmth users see.
The 1.01:1 figure deserves emphasis, since it’s the tightest in this entire cluster. Ivory against white isn’t a subtle boundary, it’s no boundary at all, which rules out every use that depends on separation from a white surface.
What Are the Shades of Ivory?
Shades come from mixing black into #FFFFF0, and the ramp drops fast because so much lightness has to go:
- #DFDFD2
- #BFBFB4
- #9F9F96
- #808078
- #60605A
- #40403C
- #20201E
The yellow cast drains quickly. By #40403C the channels have nearly converged and the color reads as a plain dark gray, since reducing lightness on a near-neutral removes the small hue signal before it removes the lightness.
Two steps carry the practical work. #808078 at 4.9:1 on an ivory surface is the first that passes AA for secondary text, and #20201E is where primary text lives.
Tints barely exist. The computed ramp runs from #FFFFF0 to #FFFFD6 across nine steps, and every value in it is a slightly more yellow near-white.
Named neighbors sit within a few points, as covered in the comparison above:
- Floral white (#FFFAF0): warmer and pinker, 1.04:1 on white
- Off white (#FAF9F6): warm-neutral, 1.05:1
- Snow (#FFFAFA): cool and pink-leaning, 1.03:1
- Cornsilk (#FFF8DC): noticeably more yellow, 1.2:1
- Beige (#F5F5DC): the same hue with real saturation, 1.25:1
What UI Elements Work Best with Ivory?
Ivory belongs on the largest surfaces in an interface. Nothing about it draws attention, and that absence is exactly its value.
At 1.01:1 against white it can’t be a foreground, a border, or an icon on a light background. Four element types remain where ivory genuinely performs.
Page Backgrounds and Reading Canvases
Canvases are ivory’s primary job. A #FFFFF0 page background with near-black text holds 20.5:1 and cuts the glare a pure white page produces over long sessions.
The yellow cast reads as paper rather than as screen. Editorial, publishing, and reading products lean on it for that association specifically, since a warm-neutral canvas feels less like a display.
Consistency across the whole surface matters. Mixing ivory and pure white regions on one page reads as a rendering defect rather than as a design decision.
Card and Sheet Surfaces
Layering is where ivory pays for itself. A white card on an ivory canvas separates at 1.01:1, which gives depth without a shadow, a border, or an elevation token.
The instinct about contrast has to reverse here. Barely perceptible separation is the goal, because a strong boundary between page and card makes a layout feel chopped up.
Modals and sheets follow the same pattern. A pure white sheet over an ivory page reads as raised with no additional treatment.
Text on Dark Surfaces
Dark mode is where ivory does its most valuable work. Body copy in #FFFFF0 rather than #FFFFFF holds 20.81:1 on black while removing the bloom pure white produces for readers with astigmatism.
That single substitution improves dark-mode readability more than most typography changes, and nothing else in the stack has to move.
Secondary text steps down to #BFBFB4. At 11.2:1 on black it stays well above AAA while giving a clear hierarchy level.
Form Fields and Input Surfaces
Forms use the ivory and white pairing to mark what’s editable. An ivory page with white input fields tells the user where to type without a label or an instruction.
Borders still need real contrast. A field outline has to clear 3:1 to satisfy the non-text requirement, so #9F9F96 or darker is the minimum.
Focus states need a saturated color. Ivory can’t carry a focus ring, so an accent that clears 3:1 against both the field and the page has to supply it.
What Are the Best Ivory Color Palettes for UI?
Ivory has almost no chroma, so rotating the color wheel around it returns values within a few points of the base and the five classic schemes collapse. Anchoring ivory as the neutral and deriving the harmony from an accent hue is the working method.
Every palette below uses deep red #8B0000 as that accent, chosen because it holds 10:1 against ivory and shares its warm character rather than fighting it.
Monochromatic
Monochromatic is the one scheme ivory computes natively, running on lightness alone: #FFFFF0, #FFFFD6, #DFDFD2, #808078, and #20201E. This is the complete neutral system a content-first interface needs.
The five values map to canvas, tinted surface, border, muted text, and primary text in order. No hue decisions required.
Analogous
Analogous pulls the accent’s neighbors 30° in each direction, anchored on ivory. Three warm earth tones that stay distinguishable because the near-white sits between them.
Ivory does the separating. Deep warm tones that would muddy against each other hold their edges when a near-white divides them.
Complementary
The complementary scheme pairs deep red with its opposite, over an ivory base. Warm against cool with the neutral keeping them from clashing directly.
Deep red’s complement lands in the teal family, which reads well as an accent and needs darkening before it carries text on a light surface.
Triadic
Triadic gives three evenly spaced hues on the ivory anchor. Useful for categorical charts where each series needs identity against a warm canvas.
Each series should be tested against the actual canvas rather than white. Ivory raises the floor very slightly for every series, though less than a mid-tone neutral would.
Split-Complementary
Split-complementary softens the direct opposition and adds a third value for secondary actions. This is the most flexible of the five for a full product interface.
Everything should anchor on #20201E text. Visily’s theme tools can generate the tint and shade ladder for each accent so hover and active states come out accessible rather than hand-mixed.
Which Colors Are Similar to Ivory?
Five named near-whites sit close enough to #FFFFF0 to substitute for it, and the difference between them is entirely which channel drops:
- Snow (#FFFAFA): blue and green drop equally, producing a cool pink cast
- Floral white (#FFFAF0): green drops slightly and blue drops more, warm and pink
- Off white (#FAF9F6): all three drop unevenly, a warm-neutral
- Cornsilk (#FFF8DC): blue drops 35 points, considerably more yellow
- Beige (#F5F5DC): the same hue with lower lightness and real saturation
None of the first three differ from ivory by more than about 1.05:1, so the choice among them is aesthetic rather than functional.
Alice blue (#F0F8FF) is the cool counterpart worth knowing. It drops red rather than blue, which produces the opposite cast, and placing it beside ivory makes both look wrong.
Which Colors Pair Best with Ivory?
Near-black is ivory’s essential partner. At 20.81:1 against #20201E it gives the highest-contrast reading surface available short of pure white, without the glare.
Warm accents belong with it. Deep red, rust, terracotta, and warm browns share ivory’s cast and read as one family, which is why editorial and heritage brands pair them so often.
Deep green is the strongest jewel-tone option. A forest green against ivory produces the natural, considered register a cool gray palette can’t reach.
Pure white is a partner rather than a competitor. Using #FFFFFF for cards and #FFFFF0 for the canvas is the layering technique described above, and it’s the single most useful thing ivory does.
The 60-30-10 split applies as follows:
- 60% ivory: page canvases and large surfaces
- 30% near-black and white: text, cards, and structural elements
- 10% warm accent: buttons, links, and interactive elements
Ivory holds the 60% slot better than almost any other color, since it never asks for attention.
Which Colors Should You Avoid Pairing with Ivory?
Pure white as an adjacent surface at the same elevation is the main failure. At 1.01:1 there’s no perceptible boundary at all, so two panels side by side read as one continuous region.
Cool near-whites are the specific trap. Alice blue and other blue-leaning whites at matched lightness make ivory look yellowed and dirty, and the effect is obvious even though neither color is wrong alone.
Other warm near-whites cause a subtler version of the same problem. Floral white and snow sit within 1.05:1 of the base, so stacking them and expecting a visible step produces nothing.
Pale yellows lose their identity against it. A pastel yellow on an ivory canvas shares the same hue at slightly lower lightness, which reads as a smudge rather than as a surface.
Does Ivory Meet Accessibility Standards?
Ivory fails as a foreground on white and passes as a background at the highest level. The 1.01:1 measurement falls far below the 3:1 non-text floor set by the W3C, while dark text on it clears AAA.
Ivory lands as follows across the common pairings:
- #FFFFF0 on white: 1.01:1, fails AA and the 3:1 non-text floor
- Black on #FFFFF0: 20.81:1, passes AAA
- #FFFFF0 on black: 20.81:1, passes AAA
- #808078 on #FFFFF0: 4.9:1, passes AA
- #9F9F96 on #FFFFF0: 3.2:1, non-text and large text only
Ivory is among the easiest colors in this cluster to use accessibly, since its only real job is hosting dark content and it does that at AAA. Failures appear only when someone tries to make it a foreground.
Color vision deficiency doesn’t affect it meaningfully. With 6% saturation, ivory renders nearly identically under protanopia, deuteranopia, and tritanopia.
Contrast sensitivity actively favors it. Readers with low vision and astigmatism often find a warm near-white canvas easier than pure white, so the choice helps the group most affected by glare.
How Can You Convert Ivory Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same near-white differently, with one important caveat:
- HEX #FFFFF0: the default in design files and CSS
- RGB rgb(255, 255, 240): two channels at maximum, blue down 15
- RGBA rgba(255, 255, 240, 1): adds alpha for overlays and scrims
- HSL hsl(60, 100%, 97%): saturation is unreliable at this lightness
- HSB 60, 6, 100: the honest saturation reading
- CMYK 0, 0, 6, 0: a trace of yellow ink and nothing else
The HSL saturation figure is the caveat. At 97% lightness the model reports 100% saturation for a color with a 15-point channel deviation, and copying that number into another tool produces vivid yellow.
The raw RGB values tell the truth fastest. A single channel 15 points below two maxed channels is the clearest description of ivory, and which channel drops tells you the cast immediately.
CMYK effectively means leaving the paper alone. At 0, 0, 6, 0 almost nothing prints, so ivory in a print job comes from the stock rather than the ink, which makes paper choice more consequential than the color value.
Wrapping Up
Ivory is the warmest of the CSS near-whites and the one you use for everything that shouldn’t be noticed. #FFFFF0 works as a page canvas with #20201E text at 20.5:1, pure white cards float on top for elevation without shadows, #808078 handles secondary copy, and substituting ivory for pure white in dark mode cuts halation at no cost in contrast.
Those steps don’t need to be checked one at a time. Open Visily and use its AI-powered design tools to generate your neutral ramp, layered surface tokens, and matched warm accents across the entire design in one pass.
