Colors EncyclopediaUse this color
Create with Ivory
Open a professional color tool with #FFFFF0 already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Ivory and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-ivory: #FFFFF0;
.bg-ivory { background-color: #FFFFF0; }
.text-ivory { color: #FFFFF0; }Color history, meaning and use · Editorially reviewed
About Ivory Color
Ivory became a color word through the pale material historically used for carved and luxury objects. Museum research describes newly worked ivory as relatively light and translucent, while handling, age, oils, burial, and environmental conditions can shift its surface toward cream, yellow, or brown.
As a digital color, Ivory is warmer and softer than pure white. It is useful for editorial backgrounds, restrained interfaces, and interiors-inspired palettes where stark white would feel too clinical. The material history also matters: contemporary use of the color name should not romanticize or encourage the trade in animal ivory.
This is an abstract color reference only. It is not a material specification or an endorsement of ivory objects or trade.
WCAG Accessibility
Contrast checks for Ivory against black and white text.
Black text20.81:1AA Pass
White text1.01:1AA Fail
Downloadable color reference infographic
Ivory Color Reference Infographic
Save a high-resolution infographic of Ivory, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.9907
Black text20.81:1AA Pass
White text1.01:1AA Fail
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#FFFFF0",
"rgb": [
255,
255,
240
],
"hsl": [
60,
100,
97
],
"cmyk": [
0,
0,
6,
0
],
"luminance": 0.9907,
"contrast": {
"black": 20.81,
"white": 1.01
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A",
"#36454F"
]
}Harmonies
{
"complementary": "#F0F0FF",
"analogous": [
"#FFF7F0",
"#F7FFF0"
],
"triadic": [
"#F0FFFF",
"#FFF0FF"
],
"tetradic": [
"#F0FFF7",
"#F0F0FF",
"#FFF0F7"
],
"splitComplementary": [
"#F0F7FF",
"#F7F0FF"
],
"monochromatic": [
"#FFFFFF",
"#FFFFF0",
"#FFFF94"
]
}Variants
{
"light": "#FFFFFF",
"dark": "#FFFF94",
"saturated": "#FFFFF0",
"desaturated": "#FDFDF1",
"pastel": "#FFFFFF",
"neon": "#FFFFFF"
}Pairings
{
"best": [
"#000000",
"#F0F0FF",
"#FFF7F0",
"#F7FFF0"
],
"avoid": [
"#FDFDF1",
"#FFFFFF"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FFFFFF",
"#FDFDF1"
]
}Knowledge graph
{
"nearestColors": [
"floral-white",
"powder-coat-white",
"sea-shell",
"snow",
"paper-white"
],
"generatedPalettes": [
"ivory"
],
"generatedComparisons": [
"cream-vs-ivory",
"floral-white-vs-ivory",
"ivory-vs-powder-coat-white"
],
"relatedFamilies": [
"/colors/by-family/yellow",
"/colors/by-temperature/warm",
"/colors/by-tone/light",
"/colors/by-tone/neutral"
],
"relatedTools": [
"/harmonies/ivory",
"/wcag/ivory",
"/css/colors/ivory",
"/hex/fffff0",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/yellow",
"/colors/by-temperature/warm",
"/colors/by-tone/light",
"/colors/by-tone/neutral"
],
"narrower": [
"/palettes/ivory"
],
"related": [
"/colors/floral-white",
"/colors/powder-coat-white",
"/colors/sea-shell",
"/colors/snow",
"/colors/paper-white",
"/compare/cream-vs-ivory",
"/compare/floral-white-vs-ivory",
"/compare/ivory-vs-powder-coat-white",
"/harmonies/ivory",
"/wcag/ivory",
"/css/colors/ivory",
"/hex/fffff0",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "ivory",
"name": "Ivory",
"hex": "#FFFFF0",
"family": "yellow",
"temperature": "warm",
"tone": [
"light",
"neutral"
],
"uses": [
"backgrounds",
"wedding palettes",
"classic design"
],
"psychology": {
"associations": [
"elegance",
"softness",
"tradition"
],
"contexts": [
"wedding design",
"luxury print",
"classic interiors"
],
"avoidIn": [
"strict grayscale systems"
]
},
"aliases": [],
"sourceType": "standard",
"confidence": "high",
"sourceUrl": "https://www.w3.org/TR/css-color-4/#named-colors",
"reviewStatus": "auto",
"editorialNotes": "Generated from CSS named color data and computed color-system properties.",
"origin": {
"type": "css",
"notes": "Standard CSS named color."
},
"tags": [
"yellow",
"warm",
"light",
"neutral",
"backgrounds",
"wedding-palettes",
"classic-design",
"elegance",
"softness",
"tradition"
],
"popularity": 69,
"rgb": [
255,
255,
240
],
"hsl": [
60,
100,
97
],
"cmyk": [
0,
0,
6,
0
],
"luminance": 0.9907,
"contrast": {
"black": 20.81,
"white": 1.01
},
"harmonies": {
"complementary": "#F0F0FF",
"analogous": [
"#FFF7F0",
"#F7FFF0"
],
"triadic": [
"#F0FFFF",
"#FFF0FF"
],
"tetradic": [
"#F0FFF7",
"#F0F0FF",
"#FFF0F7"
],
"splitComplementary": [
"#F0F7FF",
"#F7F0FF"
],
"monochromatic": [
"#FFFFFF",
"#FFFFF0",
"#FFFF94"
]
},
"variants": {
"light": "#FFFFFF",
"dark": "#FFFF94",
"saturated": "#FFFFF0",
"desaturated": "#FDFDF1",
"pastel": "#FFFFFF",
"neon": "#FFFFFF"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A",
"#36454F"
]
},
"css": {
"variable": "--color-ivory: #FFFFF0;",
"utility": ".bg-ivory { background-color: #FFFFF0; }",
"textUtility": ".text-ivory { color: #FFFFF0; }"
},
"nearestColors": [
"floral-white",
"powder-coat-white",
"sea-shell",
"snow",
"paper-white"
],
"generatedPalettes": [
"ivory"
],
"generatedComparisons": [
"cream-vs-ivory",
"floral-white-vs-ivory",
"ivory-vs-powder-coat-white"
],
"relatedFamilies": [
"/colors/by-family/yellow",
"/colors/by-temperature/warm",
"/colors/by-tone/light",
"/colors/by-tone/neutral"
],
"relatedTools": [
"/harmonies/ivory",
"/wcag/ivory",
"/css/colors/ivory",
"/hex/fffff0",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/yellow",
"/colors/by-temperature/warm",
"/colors/by-tone/light",
"/colors/by-tone/neutral"
],
"narrower": [
"/palettes/ivory"
],
"related": [
"/colors/floral-white",
"/colors/powder-coat-white",
"/colors/sea-shell",
"/colors/snow",
"/colors/paper-white",
"/compare/cream-vs-ivory",
"/compare/floral-white-vs-ivory",
"/compare/ivory-vs-powder-coat-white",
"/harmonies/ivory",
"/wcag/ivory",
"/css/colors/ivory",
"/hex/fffff0",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#F0F0FF",
"#FFF7F0",
"#F7FFF0"
],
"avoid": [
"#FDFDF1",
"#FFFFFF"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FFFFFF",
"#FDFDF1"
]
}
}