Ivory vs White

What is the difference between Ivory and White?

Examining Ivory (#FFFFF0) relative to White (#FFFFFF) showcases key differences in design application. In terms of color intensity, Ivory is visibly more vibrant and saturated. Both shades have a nearly identical lightness profile on screens. They have a close hue coordinate distance of 60°, representing a harmonized adjacent relationship.

Design recommendations for Ivory vs White

When choosing between Ivory and White for interface designs, consider their visual weight. Since Ivory is darker, it serves as a solid base for structural layouts or heavy typography, while the lighter White is ideal for backgrounds or high-visibility accents. Testing their contrast ratio is essential to meet WCAG accessibility guidelines.

Readability & Contrast Testing

Visual test showing black and white text overlay readability on both colors.

Ivory Typography

Preview of dark and light text elements rendered over a solid Ivory background canvas.

White Text: 1.01:1 Black Text: 20.81:1

White Typography

Preview of dark and light text elements rendered over a solid White background canvas.

White Text: 1.00:1 Black Text: 21.00:1

Technical Specifications Comparison

Format / Value Ivory White Delta / Difference
HEX Code #FFFFF0 #FFFFFF -
RGB Channels rgb(255, 255, 240) rgb(255, 255, 255) R:0 | G:0 | B:+15
HSL Values hsl(60°, 100%, 97%) hsl(0°, 0%, 100%) H:-60° | S:-100% | L:+3%
CMYK (Print) cmyk(0%, 0%, 6%, 0%) cmyk(0%, 0%, 0%, 0%) -

Individual Color References

Ivory Reference Sheet HEX, RGB, HSL and print codes
White Reference Sheet HEX, RGB, HSL and print codes
Copied!