Isabelline

HEX: #F4F0EC | Modern Palette

On White
1.13:1
FAIL
On Black
18.52:1
PASS

Color Specifications

HEX
#F4F0EC
RGB
244, 240, 236
HSL
30°, 26% ,94%
CMYK
0, 2, 3, 4

About Isabelline

Isabelline (#F4F0EC) is a color with RGB(244, 240, 236) and HSL(30°, 26.7%, 94.1%). In design, it fits Pastel, Warm styles and is suitable for Text, Background, Print. Its complementary color is #ECF0F4, which creates strong contrast. Its triadic palette includes #ECF4F0 and #F0ECF4. The name comes from isabelline (French).

  • HEX: #F4F0EC
  • RGB: 244, 240, 236
  • HSL: 30°, 26.7%, 94.1%
  • Style: Pastel, Warm
  • Use case: Text, Background, Print
  • Complementary color: #ECF0F4
  • Triadic colors: #ECF4F0, #F0ECF4
  • The name comes from isabelline (French).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #F4F0EC from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Pastel Warm
Use case
Text Background Print

Accessibility Simulation

Deuteranopia #F1F1EC
Protanopia #F0F0EC
Tritanopia #F5EFEF
Achromatopsia #F1F1F1

Frequently Asked Questions

Isabelline (#F4F0EC) is a color with RGB(244, 240, 236) and HSL(30°, 26.7%, 94.1%).

#F4F0EC pairs strongly with #ECF0F4 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#F4F0EC is suitable for Text, Background, Print and works well with Pastel, Warm styles.

The name Isabelline is linked to isabelline from French, meaning of a pale yellowish-brown color.

Name, History & Etymology

Origin Word isabelline
Meaning of a pale yellowish-brown color
Language French
First Recorded Use Late 16th Century

History

The term 'isabelline' is said to derive from Isabella I of Castile (1451-1504) or Isabella Clara Eugenia (1567-1633), daughter of Philip II of Spain. The more popular, though likely apocryphal, story attributes the color to Isabella I of Castile, who allegedly vowed not to change her undergarments until the Moors were expelled from Granada (which took eight months). This would have resulted in a dingy, yellowish-brown color. Another theory links it to Isabella Clara Eugenia, who supposedly made a similar vow during the Siege of Ostend (1601-1604), which lasted over three years. While the exact origin is debated and likely a folk etymology, the color itself has been recognized and named 'isabelline' since at least the late 16th century, primarily in zoology to describe the plumage of birds or fur of animals.

First Recorded Use

1598

Cultural Associations

The color is often associated with natural tones, particularly in ornithology and mammology to describe the specific pale yellowish-brown or sandy coloration of various species (e.g., Isabelline Shrike, Isabelline Wheatear). It evokes a sense of natural earthiness or faded elegance. Due to its historical association, whether true or not, it carries a subtle hint of endurance or perhaps even a touch of the unkempt, depending on the interpretation of its origin story.

Similar Named Colors

White Smoke #F5F5F5 ΔE 2.61
Seashell #FFF5EE ΔE 2.96
Platinum #E5E4E2 ΔE 3.08
Munsell #F2F3F4 ΔE 3.12

Code Snippets

/* Background */
.element {
    background-color: #F4F0EC;
}

/* Text */
.element {
    color: #F4F0EC;
}

/* Border */
.element {
    border: 1px solid #F4F0EC;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #F4F0EC,
        #ECF0F4
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #F4F0EC,
        #ECF0F4
    );
}

// SCSS variable
$isabelline: #F4F0EC;

// With RGB channels (useful for rgba() usage)
$isabelline-r: 244;
$isabelline-g: 240;
$isabelline-b: 236;

// Usage
.element {
    background-color: $isabelline;
    color: rgba($isabelline-r, $isabelline-g, $isabelline-b, 0.8);
}