ألوان الأبيض المائل: العاجي والكريمي وقشر البيض والكتان

Pure white (#FFFFFF) is a design default — it is neutral, versatile, and endlessly practical. But in many contexts, it is too stark. It can read as clinical, harsh, or unrefined. Off-white colors — ivory, cream, eggshell, linen, and their relatives — solve this problem by introducing warmth, texture, and a quality of natural material that pure white lacks.

The challenge with off-whites is that they all look similar at a glance, and the differences between them are subtle enough that choosing wrongly can create unintended effects. A cream background where ivory was intended can feel sweeter and less refined than planned. A linen background where cream was specified can feel heavier and more rustic than desired.

This guide breaks down the four major off-white categories precisely — hex codes, color space values, physical origin stories, and appropriate design applications — so you can choose with confidence.

Why Not Pure White (#FFFFFF)?

Before examining the off-whites, it is worth understanding why pure white is sometimes the wrong choice.

Pure white (#FFFFFF) in RGB is rgb(255, 255, 255) — maximum values across all three channels with no warmth, no complexity, and no material reference. On screen, it is the color of an unlit pixel's maximum output — it has no physical analog. Real white materials — paper, cotton, bone, plaster — all have slight color casts. A pristine sheet of high-quality paper is not #FFFFFF. It is #FFFEF8 or #FAFAF5 — almost imperceptibly warm or slightly off.

This matters in design for several reasons:

Eye fatigue: Pure white backgrounds at full screen brightness can cause eye strain, particularly in long reading sessions. A very slight warm cast reduces the high-contrast eye fatigue of extended reading.

Material suggestion: Off-whites carry implied material associations — paper, cotton, linen, bone, parchment — that add a quality of natural substance to a design. Pure white has no material reference.

Typography harmony: Most well-designed typefaces were originally drawn for printing on cream or off-white paper. Their letterforms were calibrated to interact with a slightly warm substrate. On pure white screens, the same typefaces can look slightly harsher than intended.

Contrast modulation: Pure white creates maximum contrast with dark text. Sometimes the goal is slightly reduced contrast — comfortable and readable without being as demanding as a high-contrast pure white field.

Ivory: Quiet Elegance (#FFFFF0)

Ivory (#FFFFF0) is named after the material — the dense, hard, cream-white substance found in animal tusks and teeth, most commonly elephant ivory. As a material, ivory was historically one of the most prized luxury materials, used for piano keys, billiard balls, decorative objects, and inlay work before the global trade ban. The color named after it carries these associations of natural luxury, refinement, and age.

The hex #FFFFF0 is almost imperceptibly off-white — only the blue channel drops, from 255 to 240, while red and green remain at maximum. In HSL terms, ivory sits at exactly 60° (yellow hue) with 100% saturation but 97% lightness — making it a nearly-white color at the yellow hue position. The yellow saturation at 97% lightness reads as a pure, clean whisper of warmth rather than any perceptible color.

In CMYK, ivory is simply 6% yellow — the smallest possible addition to paper white before disappearing into the substrate entirely.

What Ivory Communicates

Ivory's near-whiteness gives it a quality of quiet elegance. It is warm enough to avoid the clinical quality of pure white, but so subtle that it barely registers as colored. This subtlety is its defining virtue — ivory looks like the natural state of a high-quality material, as if no color has been added rather than as if white has been warmed.

This makes ivory particularly appropriate for: - Formal stationery and wedding design: Ivory is the traditional wedding invitation color — it suggests natural material and heritage quality without the formality-excess of gold or the starkness of pure white - Typography-forward layouts: When a design is primarily text on background, ivory provides a comfortable reading surface without visually competing with the type - Luxury fashion and beauty: Ivory clothing and product packaging reads as naturally refined — the absence of color as a statement of quality - Portfolio and editorial design: For designers and photographers, ivory backgrounds let work breathe without the clinical neutrality of pure white

Ivory vs Pure White

Cream: Warmth and Richness (#FFFDD0)

Cream (#FFFDD0) is named after dairy cream — the fat-rich layer that rises to the top of non-homogenized milk. Real cream has a distinctly warm, yellow-tinged color that is perceptibly different from white — richer and softer, with a quality of fat and warmth that pure milk lacks. The color named after it carries this richness.

Cream is noticeably warmer than ivory. Where ivory's blue channel drops only 15 points (from 255 to 240), cream's blue channel drops 47 points (from 255 to 208) — a much more perceptible shift. In HSL, cream sits at 57° (near yellow) with 91% lightness — lower than ivory's 97%, placing it visibly deeper in the warm white zone.

In CMYK, cream requires both a small magenta addition (1%) and 18% yellow — confirming that it is distinctly warm rather than the near-neutral of ivory. The 18% yellow in CMYK is clearly visible as warmth on any surface.

What Cream Communicates

Cream is the most universally warm of the off-whites. It has a cozy, comfortable quality that is distinctly different from the refinement of ivory or the earthiness of eggshell. It feels soft and approachable.

Cream works particularly well for: - Food and baking brands: The dairy association makes cream a natural choice for bakeries, confectionery, and dairy product branding — it suggests natural ingredients and homemade warmth - Wellness and natural living brands: Cream's warmth pairs naturally with natural materials, earthy tones, and the aesthetic language of organic, slow-living lifestyles - Children's design: Warm cream backgrounds are less harsh than pure white for children's book illustration, educational content, and children's product design - Warm interior design references: For color matching to physical interiors — painted walls, upholstered furniture, natural wood — cream often provides a more accurate digital equivalent than pure white

Cream vs Ivory

Eggshell (#F0EAD6) and Linen (#FAF0E6)

Eggshell and linen are both earthy, textured off-whites that carry stronger material associations than ivory or cream.

Eggshell (#F0EAD6)

Eggshell (#F0EAD6) is named after the color of bird eggs — specifically the matte, slightly pitted surface of eggshell that has a quality of warmth without being creamy.

Eggshell is notably darker and warmer than ivory or cream — at 89% lightness compared to ivory's 97% and cream's 91%. The HSL hue of 43° shifts it toward amber-yellow rather than pure yellow, and the 47% saturation adds a perceptible warm-tan quality absent in the purer off-whites.

The CMYK breakdown reveals eggshell's complexity: 3% magenta, 11% yellow, and 6% black — the black addition is what produces the slightly grayish-warm quality that distinguishes eggshell from cream. It is not just warm — it has a slight depth that cream lacks.

Eggshell works well for: - High-end print materials: Eggshell is a common paper finish descriptor — eggshell paper is a semi-matte surface between matte and satin, and the color approximates the natural creamy-matte surface - Paint color references: "Eggshell" is a common interior paint sheen descriptor, and the color #F0EAD6 reflects what many interior eggshell paints look like dried on walls - Vintage and heritage aesthetics: Eggshell's slight depth gives it a time-worn quality appropriate for antique, vintage, and heritage-positioned design

Linen (#FAF0E6)

Linen (#FAF0E6) is a CSS named color — one of the 148 standard CSS colors — named after linen fabric, made from the flax plant. Natural linen has a distinctive warm-cream color with irregular texture, and it has become one of the most aspirational materials in contemporary interior and fashion design.

Linen's HSL hue of 30° places it noticeably toward the orange-amber direction — further from pure yellow than any of the other off-whites discussed here. This is what gives linen its distinctive peachy-warm quality compared to the yellow-warm of ivory and cream, or the beige quality of eggshell. At 94% lightness, it is lighter than eggshell but perceptibly warmer in hue direction.

Linen's 67% saturation at 94% lightness produces a soft but perceptible warmth — a gentle peach-white that feels organic and tactile rather than clinical.

Linen works well for: - Contemporary interior and lifestyle design: Linen's association with natural textiles makes it extremely popular in the "organic modern" and "Scandinavian" interior design aesthetics that have dominated the 2010s–2020s - Sustainable and natural brand positioning: Like the material, linen-colored backgrounds suggest natural materials, environmental consciousness, and artisan quality - Fashion editorial and lookbook design: Linen backgrounds for clothing photography create a neutral but warm context that flatters most garment colors without competing - Farmhouse and artisan aesthetics: The warm peach-white of linen is central to the visual language of farmhouse, cottagecore, and artisan design movements

Comprehensive Comparison Table

Reading the Hue Progression

The hue angle tells the most important story about each off-white's character: - Ivory at 60°: Yellow-white — the cleanest, purest off-white; warmth without any amber or peach - Cream at 57°: Near-yellow — very close to ivory but meaningfully warmer, with more visible yellow character - Eggshell at 43°: Amber-yellow — distinctly warmer and earthier; starts to read as beige - Linen at 30°: Orange-adjacent — the warmest hue direction; distinctly peachy rather than purely yellow

As the hue angle decreases from 60° toward 30°, the off-whites shift progressively from clean yellow-warmth toward peach-warmth, gaining organic earthiness at the cost of pure refinement.

Choosing Off-Whites for Web Design Backgrounds

The practical question for web designers is which off-white to choose for a given page background. Each creates a different reading environment and different associations with the content it frames.

For Typography-First Content (blogs, essays, documentation)

Ivory (#FFFFF0) is the best choice. Its near-neutral quality minimizes visual interference with the reading experience. The subtle yellow warmth reduces eye strain without introducing a perceptible color cast that might conflict with content. Many serious editorial and documentation sites use ivory or a close variant as their reading background.

Cream (#FFFDD0) works well for long-form content on sites with a warmer brand personality — food writing, lifestyle content, personal essays. The additional warmth creates a cozier reading environment but may clash with cool-toned images or UI elements.

For Product and E-Commerce

Linen (#FAF0E6) works particularly well for organic, natural, artisan, and sustainable brands. Its peachy warmth flatters natural product photography — clothing, ceramics, wooden objects, botanical products.

Eggshell (#F0EAD6) is appropriate for heritage brands, antique markets, and vintage-positioned retailers. Its slight depth and beige quality create the impression of aged paper or natural materials in a way that the other off-whites do not.

For UI Components (cards, modals, input backgrounds)

Off-whites are frequently used as the background for cards, modals, and elevated surfaces in design systems that want to avoid the harshness of pure white on white-background pages.

For this use, ivory and linen are the most versatile — ivory for minimal, sophisticated design systems; linen for warmer, organic-feeling systems. Eggshell is the most distinctive and may be too warm for neutral design systems. Cream sits between the two in usefulness.

CSS Variables for Off-White Systems

Using CSS custom properties allows systematic off-white management:

:root {
  --white: #FFFFFF;
  --ivory: #FFFFF0;
  --cream: #FFFDD0;
  --eggshell: #F0EAD6;
  --linen: #FAF0E6;
}

A common pattern is using one off-white as the page background and pure white for elevated components (cards, modals, inputs), creating surface hierarchy without additional colors:

body { background-color: var(--ivory); }
.card { background-color: var(--white); }

Converting Off-Whites Between Color Models

Use the shade generator to explore the full tint and shade spectrum of any off-white, and the color converter to translate between color models.

Key Takeaways

• Pure white (#FFFFFF) is valuable but can read as clinical, harsh, and without material quality — off-whites address this with subtle warmth
• Ivory (#FFFFF0) is the most subtle off-white: near-white with a barely perceptible yellow cast (HSL: 60°, 97% lightness) — the classic choice for refined typography and formal design
• Cream (#FFFDD0) is clearly warm (HSL: 57°, 91% lightness) with a distinctly soft dairy-warm quality — best for cozy, food, and lifestyle content
• Eggshell (#F0EAD6) is earthier and slightly deeper (HSL: 43°, 89% lightness) with an amber-beige quality — appropriate for heritage, vintage, and print-referencing design
• Linen (#FAF0E6) has the most orange-shifted hue (HSL: 30°, 94% lightness) — a peachy, organic quality that suits natural, sustainable, and artisan branding
• For web backgrounds: ivory for editorial/typography; cream for warm lifestyle content; linen for organic/natural brands; eggshell for heritage and vintage contexts
• Explore tint and shade variants with the shade generator and convert between color models with the converter