Color guide · Light & dark neutrals
Ivory Color
CSS ivory is almost white, with a little less blue than pure white. It is useful when you want a warm, quiet page surface. The small difference may be subtle on a bright display, so do not depend on it to mark a boundary.
Ivory color codes
#FFFFF0rgb(255, 255, 240)hsl(60, 100%, 97.1%)ivoryRGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗
The name & the reference
What makes ivory interesting?
Here, ivory is only a CSS color label. It does not describe or recommend an animal-derived material. The fixed digital value is convenient for comparing a warm near-white with a pure white background; paper, fabric and ceramic products have their own physical color and texture.
Read the reference: CSS Color: named colors ↗
Things with ivory tones
These illustrated references explore a color family. Objects vary; none is a claim of an exact #FFFFF0 match.
Warm paper
Paper adds grain and shadow to a near-white palette, unlike a flat screen color.
Light woven fabric
Warm off-white fabric helps imagine this family without using animal-derived materials.
Cream ceramics
An off-white ceramic surface makes a warm neutral base for colored objects.
A practical color study
Use a warm base without losing boundaries
Ivory makes a light base, but its near-white value can hide the edges of a card on white. Try a clearly darker border and generous spacing. Dark charcoal, navy or indigo text can provide a useful starting point for measured contrast.
When comparing physical materials, put samples beside one another under the intended lighting. Warm paper, woven cloth and ceramic glaze can each shift the appearance of a near-white palette.
Ideas for using ivory
Web interfaces
Use ivory behind dark text in a reading area. Add a visible border if an ivory card sits on white.
Game art
Try it for cloth highlights or a light UI panel, with a warmer shadow to keep the material distinct from snow.
Print and interiors
Compare samples under the light where they will be used. Near-whites can change noticeably next to other pale materials.
Watch out: Ivory and white have little contrast. They are not an accessible pair for text, control outlines or status indicators.
Tints, shades & companion hues
These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.
Hue companions
Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.
Palettes featuring ivory
Coastal Coral
A warm subject in cool surroundings
Explore palette →Woodland Paper
Leaf green, warm earth and a light base
Explore palette →Bold Pink & Blue
A lively accent with a stable dark anchor
Explore palette →Sunset Signals
Warm accents above a dark anchor
Explore palette →Garden Notes
Muted foliage with a bright mint detail
Explore palette →Blueprint Paper
A navy structure with a pale sky-blue surface
Explore palette →Earthwork
Warm browns with an explicit dark outline
Explore palette →Petal Study
A strong rose accent with softer violet neighbors
Explore palette →See the palette at work
Palette preview studio
Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.
Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.
Make something worth exploring.
A clear reading surface, one useful accent and room for the details.
Explore the collection →COLOR
IN MOTION
Make room for a new perspective.
Explore. Experiment. Create.Try it in context
Live design & contrast preview
Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.
20.81:1 · AAA normal text
AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗
Your next good idea
Try a readable heading, a short paragraph and a clear action on this surface.
Example action →Static design sample · use the controls to change itCompare ivory with another color →
Questions about ivory
Can ivory replace white everywhere?
It can be a warm surface choice, but check adjacent pale surfaces and preserve clear borders and dark text.
Will this look the same in print?
No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.
Can I use these codes in a website or game?
Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.
Keep exploring
A color name is a starting point
Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.
Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide