CSS Color: CornflowerBlue
Named CSS color CornflowerBlue — #6495ED in HEX, rgb(100, 149, 237) in RGB, hsl(219, 79%, 66%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | CornflowerBlue | color: CornflowerBlue; |
| HEX | #6495ED | color: #6495ED; |
| RGB | rgb(100, 149, 237) | color: rgb(100, 149, 237); |
| HSL | hsl(219, 79%, 66%) | color: hsl(219, 79%, 66%); |
About CornflowerBlue
CornflowerBlue is a soft, pleasant blue with a slight violet tint, named after the cornflower plant. At hex `#6495ED`, it sits at 219 degrees with 79% saturation and 66% lightness. Its position between blue and violet gives it a unique, gentle quality.
In web design, CornflowerBlue is a friendly, approachable color that works well for interactive elements, illustrations, and soft accent areas. It was historically significant as the default fill color in early versions of Microsoft Office and has become synonymous with approachable software design.
For accessibility, CornflowerBlue against white achieves approximately 2.8:1 contrast, which is insufficient for text. Against dark backgrounds, it provides good readability with a pleasant, soft appearance.
CornflowerBlue occupies a sweet spot between serious blues like RoyalBlue and playful purples like MediumPurple. It pairs well with white, navy, soft pink, and warm gray. In Tailwind CSS, `blue-400` provides a reasonable match.
FAQ
What is the hex code for CornflowerBlue?
The CSS named color CornflowerBlue has the hex code #6495ED. You can use it in CSS as color: #6495ED; or simply color: CornflowerBlue;.
What is CornflowerBlue in RGB?
In RGB notation, CornflowerBlue is rgb(100, 149, 237). Use it in CSS as color: rgb(100, 149, 237);.
What is CornflowerBlue in HSL?
In HSL notation, CornflowerBlue is hsl(219, 79%, 66%). Use it in CSS as color: hsl(219, 79%, 66%);.
What color category is CornflowerBlue?
CornflowerBlue belongs to the Blue color family in the CSS named colors specification.
Can I use the name "CornflowerBlue" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: CornflowerBlue; or background-color: CornflowerBlue; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert CornflowerBlue to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →