Technical Values
Exact numeric values for cross-tool conversion, token mapping, and accessibility review.
CSS Named Color Reference
Cornflower Blue
Cornflower Blue·#6495ED
Cornflower Blue is a softer CSS named blue at #6495ED that sits between Royal Blue and lighter interface blues. Use it when you want trust and clarity without the intensity of pure Blue or the punch of Dodger Blue.
Recommended text colorDark text
Body text pairing5.77:1
Strongest RoleFriendly banners, cards, and supporting interface accents
Tonal Direction
Scan the ramp from light to dark to judge how Cornflower Blue behaves across action states, layered surfaces, and supporting accents.
100#E3ECFC
300#B8CEF7
500#80A8F0
600#6495ED
800#486BAB
Contrast & Interface Preview
Not every foreground and background pairing behaves the same. Use these checks to decide when white text, dark text, or the color itself should take the lead.
White text on this color
Best for reversed buttons, tabs, badges, and filled action surfaces.
2.97:1Needs more separation
Dark text on this color
Works for larger headings and selective UI blocks, but not for dense body copy.
5.77:1Body text ready
This color on light surface
Use this pairing when Cornflower Blue becomes the link, icon, border, or emphasis color on very light surfaces.
2.82:1Needs more separation
Recommended text colorDark text
Dark text reaches 5.77:1 against Cornflower Blue, which is strong enough for body text and standard action surfaces.
Where This Color Works
- Use Cornflower Blue when you need a calmer product blue for banners, cards, supporting actions, and friendly interface accents.
- It is less forceful than Dodger Blue and less formal than Royal Blue, which makes it useful for approachable UI systems and softer data highlights.
- Pair it with off-white surfaces, slate neutrals, and slightly darker blues if you want a layered system without harsh contrast jumps.
Reference Context
Color Notes
Cornflower Blue is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product, interface, and branding work.
Hue Family
Trust-building blues for enterprise and SaaS.
Source Library
CSS Named Colors
Related Blues
Palette Starting Points
Implementation Snippets
Reference-ready snippets for CSS variables, utility-first styling, and token exports.
:root {
--color-cornflower-blue: #6495ED;
--color-cornflower-blue-rgb: 100 149 237;
}Drop into a global token file or CSS variable layer.
class="bg-[#6495ED] text-white"
class="hover:bg-[#486BAB] ring-1 ring-[#6495ED]"Direct utility usage for a fast prototype or content block.
{
"cornflowerBlue": "#6495ED",
"cornflowerBlueRgb": [100, 149, 237],
"cornflowerBlueHsl": [219, 79, 66]
}Useful for design token exports and API-driven theme objects.
Move This Color Into the Workflow
Carry Cornflower Blue into conversion, brand palette generation, and palette exploration workflows to test how it behaves across interface scenarios.