HomeDevIvory color codes
Color tools

Ivory color codes

Ivory color codes for #FFFFF0 — HEX, RGB, HSL, HSV, shades, named ivorys, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for ivory, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named ivory shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS ivory#FFFFF0 = rgb(255, 255, 240) = hsl(60°, 100%, 97%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (soft navy)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base ivory

CSS keyword

color: ivory;
#FFFFF0 · rgb(255, 255, 240)
ϟ

Related shade

Family neighbor

floralwhite
#FFFAF0
ϟ

UI accent

Background use

background-color: #FFFFF0;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward soft navy

Ivory color family specification

Version 1.0.0

Definition
Ivory in CSS centers on the keyword ivory (#FFFFF0 / rgb(255, 255, 240) / hsl(60°, 100%, 97%)). Designers use ivory families for clean, warm-white elegance on screens.
What it calculates
Ivory family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Ivory is a warm paper-like white—subtler than beige for large page backgrounds.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --ivory: #fffff0;
  --ivory-deep: #f5f5dc;
  --ivory-ink: #2a2a22;
}

.banner {
  background-color: var(--ivory);
  color: #ffffff;
}
Popular CSS ivorys
NameHEXRGBFeel
ivory#FFFFF0255, 255, 240Base keyword
floralwhite#FFFAF0255, 250, 240Named shade
oldlace#FDF5E6253, 245, 230Named shade
cornsilk#FFF8DC255, 248, 220Named shade
beige#F5F5DC245, 245, 220Named shade
lemonchiffon#FFFACD255, 250, 205Light tint
seashell#FFF5EE255, 245, 238Named shade
white#FFFFFF255, 255, 255Named shade
aliceblue#F0F8FF240, 248, 255Named shade
antiquewhite#FAEBD7250, 235, 215Named shade
azure#F0FFFF240, 255, 255Named shade
ghostwhite#F8F8FF248, 248, 255Named shade
i Related hues may appear in Named shades when useful for ivory-adjacent palettes.
Assumptions
  • Base keyword ivory = #FFFFF0 in sRGB.
  • Named list uses CSS Color Module keywords in/near the ivory family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
ivory → #FFFFF0; complementary toward soft navy
Validation cases
  • ivory → #FFFFF0
  • beige → #F5F5DC
  • shade of ivory → same hue, lower lightness
  • tint of ivory → same hue, higher lightness
Sources
  • CSS Color Module named colors (ivory family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ White color codes › ◉ Beige color codes › ◉ Yellow color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for ivory?

The CSS named color ivory is #FFFFF0, equal to rgb(255, 255, 240) and hsl(60°, 100%, 97%).

What is the difference between ivory and beige?

Ivory is nearer to pure white. Beige is more visibly tinted.

What colors go with ivory?

Gold, navy, and charcoal feel classic on ivory pages. Always check text contrast.

Is ivory good for body text?

Ivory backgrounds need dark text. Do not use ivory for text on white.

How do I use ivory in CSS?

Use color: ivory;, color: #FFFFF0;, or color: rgb(255, 255, 240); on any property that accepts a <color> value, including background-color and border-color.