Alice Blue
HEX: #F0F8FF | blue
Color Specifications
#F0F8FF
240, 248, 255
208°, 100% ,97%
6, 3, 0, 0
About Alice Blue
Alice Blue (#F0F8FF) is a color with RGB(240, 248, 255) and HSL(208°, 100%, 97.1%). It is commonly associated with Playful moods. In design, it fits Neon, Cool styles and is suitable for Text, Button, Background. Its complementary color is #FFF7F0, which creates strong contrast. Its triadic palette includes #FFF0F8 and #F8FFF0. The name comes from Alice Blue (English).
- HEX: #F0F8FF
- RGB: 240, 248, 255
- HSL: 208°, 100%, 97.1%
- Mood: Playful
- Style: Neon, Cool
- Use case: Text, Button, Background
- Complementary color: #FFF7F0
- Triadic colors: #FFF0F8, #F8FFF0
- The name comes from Alice Blue (English).
Live Components
Color Palettes
Alice Blue #F0F8FF is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.
Color Harmonies
Alice Blue #F0F8FF pairs with #FFF7F0 as its complementary color, and #FFF0F8 and #F8FFF0 in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.
Tetradic (Square)
Four colors at 90° intervals — rich variety, best when one color dominates.
Frequently Asked Questions
Name, History & Etymology
History
The color gained popularity in the early 20th century, particularly in fashion and interior design. It was officially recognized as a web color in the HTML 4.0 specification. Its association with Alice Roosevelt Longworth contributed to its widespread recognition.
First Recorded Use
The color name 'Alice Blue' is believed to have originated from the light blue dress worn by Alice Roosevelt Longworth, daughter of U.S. President Theodore Roosevelt. She was a fashion icon of her time.
Cultural Associations
Alice Blue is often associated with innocence, tranquility, and a touch of elegance. It is a popular choice for baby clothing, wedding themes, and serene home decor. The color evokes a sense of calm and purity.
Code Snippets
/* Background */
.element {
background-color: #F0F8FF;
}
/* Text */
.element {
color: #F0F8FF;
}
/* Border */
.element {
border: 1px solid #F0F8FF;
}
/* Linear gradient to complementary */
.element {
background: linear-gradient(
to right,
#F0F8FF,
#FFF7F0
);
}
/* Radial gradient */
.element {
background: radial-gradient(
circle,
#F0F8FF,
#FFF7F0
);
}
// SCSS variable
$alice-blue: #F0F8FF;
// With RGB channels (useful for rgba() usage)
$alice-blue-r: 240;
$alice-blue-g: 248;
$alice-blue-b: 255;
// Usage
.element {
background-color: $alice-blue;
color: rgba($alice-blue-r, $alice-blue-g, $alice-blue-b, 0.8);
}