Cornflower

HEX: #9ACEEB | Modern Palette

On White
1.69:1
FAIL
On Black
12.40:1
PASS

Color Specifications

HEX
#9ACEEB
RGB
154, 206, 235
HSL
201°, 34% ,92%
CMYK
34.47, 12.34, 0, 7.84

About Cornflower

Cornflower (#9ACEEB) is a color with RGB(154, 206, 235) and HSL(201.48°, 34.47%, 92.16%). In design, it fits Pastel, Cool styles and is suitable for Text, Background, Print. Its complementary color is #EBB79A, which creates strong contrast. Its triadic palette includes #EB9ACE and #CEEB9A. The name comes from Cornflower (English).

  • HEX: #9ACEEB
  • RGB: 154, 206, 235
  • HSL: 201.48°, 34.47%, 92.16%
  • Style: Pastel, Cool
  • Use case: Text, Background, Print
  • Complementary color: #EBB79A
  • Triadic colors: #EB9ACE, #CEEB9A
  • The name comes from Cornflower (English).

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 #9ACEEB from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Pastel Cool
Use case
Text Background Print

Accessibility Simulation

Deuteranopia #C1C1EC
Protanopia #C9C9EB
Tritanopia #94D2D2
Achromatopsia #C7C7C7

Frequently Asked Questions

Cornflower (#9ACEEB) is a color with RGB(154, 206, 235) and HSL(201.48°, 34.47%, 92.16%).

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

#9ACEEB is suitable for Text, Background, Print and works well with Pastel, Cool styles.

The name Cornflower is linked to Cornflower from English, meaning A blue-flowered plant that grows in cornfields.

Name, History & Etymology

Origin Word Cornflower
Meaning A blue-flowered plant that grows in cornfields
Language English
First Recorded Use Late 18th Century

History

The word 'cornflower' is a compound of 'corn' (referring to grain fields, not specifically maize in this context) and 'flower'. The plant, Centaurea cyanus, is native to Europe and was historically a common weed in grain fields. Its distinctive blue color led to its name. The color 'cornflower blue' as a specific shade is derived directly from the petals of this flower. The first recorded use of 'cornflower' in English dates back to the late 18th century. The hex code #9aceeb represents a light, somewhat desaturated blue, consistent with many depictions of cornflower blue.

First Recorded Use

1796

Cultural Associations

Cornflowers have significant cultural importance in several European countries. In Germany, it is the national flower and was associated with Queen Louise of Prussia. In France, it is a symbol of remembrance for veterans, similar to the poppy in other countries. It is also a symbol of delicacy and hope. Its vibrant blue color has made it popular in art and fashion. The flower is also edible and sometimes used as a garnish.

Similar Named Colors
Light Cornflower Blue #93CCEA ΔE 1.07
Baby Blue #89CFF0 ΔE 2.73
Sky Blue #87CEEB ΔE 3.39
Pale Cerulean #9BC4E2 ΔE 3.41

Code Snippets

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

/* Text */
.element {
    color: #9ACEEB;
}

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

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

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #9ACEEB,
        #F2E9E4
    );
}

// SCSS variable
$cornflower: #9ACEEB;

// With RGB channels (useful for rgba() usage)
$cornflower-r: 154;
$cornflower-g: 206;
$cornflower-b: 235;

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