Cobalt Blue

CSS-standard cobalt blue, a deep and intense classic blue tone

HEX#0047AB

RGBrgb(0, 71, 171)

HSLhsl(215, 100%, 34%)

HSVhsv(215, 100%, 67%)

CMYKcmyk(100%, 58%, 0%, 33%)

HEXA#0047ABFF

RGBArgba(0, 71, 171, 1)

HSLAhsla(215, 100%, 34%, 1)

OKLCHoklch(62.4%, 0.145, 241)

LCHlch(56.8%, 50.9, 257)

🎨 Color Palettes

Analogous2-3 adjacent hues (≤60°)

Triadic3 hues spaced 120° apart

Split ComplementaryMain color + colors adjacent to its complement

Complementary2 hues spaced 180° apart

Tetradic (Rectangle)4 hues forming a rectangle

MonochromaticSingle hue with varying saturation and lightness

♿ WCAG Contrast Colors

Learn More →

Aa14px Body

High Contrast Text

#DBEAFFRatio 6.9:1AA

Suitable for body text, headings, and primary content, ensuring readability for all users

Aa14px Body

Standard Text

#B9B3FFRatio 4.4:1AA Large

Suitable for regular body content, meeting WCAG AA standards

Aa14px Body

Large Text / UI Components

#C675FFRatio 3:1AA Large

Suitable for large text (≥18px bold or ≥24px), icons, UI component boundaries

Aa14px Body

Decorative / Dividers

#F00064Ratio 2:1Fail

Suitable for decorative elements, dividers, non-essential text

📊 Color Scales

Online Color Picker → Gradient Generator →

Lightness VariationFixed hue and saturation, proportional lightness scaling 30%→100%

#001533

#001E47

#00265C

#002F70

#003785

#004099

#0048AD

Saturation VariationFixed hue and lightness, proportional saturation scaling 40%→100%

#345179

#2B4F82

#234E8B

#1A4D93

#114B9C

#094AA5

#0048AD

Lightness + Saturation Mixed VariationSimultaneous lightness and saturation proportional scaling

#121821

#152133

#162A46

#14325D

#0F3A75

#094190

#0048AD

Hue Fine-TuningFixed saturation and lightness, stepwise hue fine-tuning ±15°

#0074AD

#0065AD

#0057AD

#0048AD

#003AAD

#002BAD

#001DAD

💡 Use Cases

🚗

Automotive Displays

Instrument panel lighting or body paint on sports vehicles, showcasing mechanical refinement and precise handling.

🖊️

Business Documents

Accent color for formal contracts or reports, more lively than black but more serious than light blue, embodying professionalism.

🥣

Blue-and-White Porcelain

Traditional patterns on high-end bone china tableware, reviving classical blue-and-white beauty with modern color depth.

📊

Data Charts

Primary chart color in financial or statistical software, clearly presenting data in dark mode and enhancing trust.

📜 Origin & History

The discovery of cobalt blue emerged from chemical experiments in the late 18th to early 19th centuries. French chemist Louis Jacques Thénard successfully prepared stable cobalt aluminate spinel in 1802. This pigment was much cheaper than ultramarine, with strong tinting strength and excellent coverage.

By the mid-19th century, cobalt blue rapidly swept through European art circles. Impressionist masters such as Renoir, Monet, and Van Gogh greatly favored cobalt blue for depicting outdoor light and shadow. Van Gogh's Starry Night uses cobalt blue paired with bright yellow to create powerful visual vortexes, marking him as a forerunner of Expressionism.

In ceramic arts, China had used cobalt-containing glazes to fire blue-and-white porcelain since the Tang Dynasty, though the cobalt ore at that time mainly came from Persia, with varying color results. Western synthetic cobalt blue glazes were introduced in the late Qing, bringing more stable color development.

In the industrial era, due to its excellent heat resistance and chemical stability, cobalt blue was widely used in engineering plastics and architectural glass coatings. In digital standards, it became a professional-grade blue synonymous with trust and depth.

🧠 Color Psychology

FocusedA potent calming effect that blocks external noise, helping achieve deep concentration and single-mindedness.

ProfessionalRich but not dull, conveying high professional competence and down-to-earth technical capability.

ReservedAll emotions are contained within its composed hue, displaying a mature, unassuming demeanor.

EfficientImplying clear goals and calm execution, eliminating procrastination and emotional decision-making.

PreciseVisual sharpness aligns with mechanical precision, evoking cool readings on an instrument panel.

RestrainedEmotional expression is measured, representing rationality above all, avoiding all exaggeration.

← Back to Explore Colors