Colors Encyclopedia

Named color

Cobalt Blue

Cobalt Blue color #0047AB: RGB 0, 71, 171 and HSL 215°, 100%, 34%. Explore its cool blue profile, contrast, CSS, palettes and harmonies.

#0047AB blue cool jewel-tone
HEX #0047AB
RGB rgb(0, 71, 171)
HSL hsl(215 100% 34%)
CMYK cmyk(100, 58, 0, 33)
Luminance 0.0745
Contrast Black 2.49:1White 8.43:1

Use this color

Create with Cobalt Blue

Open a professional color tool with #0047AB already applied. Each configuration stays canonical to the tool and can be adjusted or shared.

All color tools
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Cobalt Blue and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →

CSS Utilities

--color-cobalt-blue: #0047AB;
.bg-cobalt-blue { background-color: #0047AB; }
.text-cobalt-blue { color: #0047AB; }
Open CSS utility pageReusable variables, classes, examples, and implementation notes

Color history, meaning and use · Editorially reviewed

About Cobalt Blue Color

Cobalt Blue belongs to both ceramic and painting histories. Cobalt compounds produced celebrated blue decoration in Chinese ceramics centuries before the modern artists’ pigment became widely available in the early nineteenth century. Museum conservation sources describe the later pigment as a stable, bright cobalt aluminate blue.

That history helps distinguish Cobalt Blue from a generic saturated blue: it can evoke glazed porcelain, artists’ materials, and a clean mineral intensity. In interfaces it is strong enough for calls to action and data accents, but large areas require contrast testing because vividness alone does not guarantee readable text.

Historical cobalt materials and modern digital Cobalt Blue are related by color naming, not by identical chemistry or a universal measured hue.

WCAG Accessibility

Contrast checks for Cobalt Blue against black and white text.

Black text2.49:1AA Fail
White text8.43:1AA Pass
AA text options#FFFFFF, #F5F5F5
AAA text options#FFFFFF, #F5F5F5
Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Downloadable color reference infographic

Cobalt Blue Color Reference Infographic

Save a high-resolution infographic of Cobalt Blue, including its color values, coordinated palette, and black and white text contrast.

1200 × 800
Cobalt Blue color reference infographic showing #0047AB, RGB and HSL values, a coordinated palette, and black and white text contrast.
Cobalt Blue color reference infographic generated from the verified Colors Encyclopedia dataset.
Download WebPDownload SVGOpen full size

Color Harmonies

#AD6500#AD6500#009FAD#009FAD#0E00AD#0E00AD#AD0048#AD0048#48AD00#48AD00
Open full Cobalt Blue harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

#0A70FF#0A70FF#002252#002252#0048AD#0048AD#134B9A#134B9A#3E88EF#3E88EF#0059D6#0059D6

Pairings

White#FFFFFF#AD6500#AD6500#009FAD#009FAD#0E00AD#0E00ADMatte Black#1A1A1AWhite Smoke#F5F5F5

Machine-readable data

Machine-Readable Color Data (JSON)

Perfect for CSS, design systems, automation, and AI ingestion.

AI-Ready Dataset v1.0.0
Luminance0.0745
Black text2.49:1AA Fail
White text8.43:1AA Pass
hexCanonical HEX value
rgbRed, green, blue channels
hslHue, saturation, lightness
cmykApproximate print conversion
wcagAA and AAA contrast options
harmoniesMathematical harmony sets
variantsGenerated tone variants
nearestColorsKnowledge graph neighbors
Download JSON Open API
Structured sections
Color systems
{
  "hex": "#0047AB",
  "rgb": [
    0,
    71,
    171
  ],
  "hsl": [
    215,
    100,
    34
  ],
  "cmyk": [
    100,
    58,
    0,
    33
  ],
  "luminance": 0.0745,
  "contrast": {
    "black": 2.49,
    "white": 8.43
  }
}
WCAG
{
  "AA": [
    "#FFFFFF",
    "#F5F5F5"
  ],
  "AAA": [
    "#FFFFFF",
    "#F5F5F5"
  ]
}
Harmonies
{
  "complementary": "#AD6500",
  "analogous": [
    "#009FAD",
    "#0E00AD"
  ],
  "triadic": [
    "#AD0048",
    "#48AD00"
  ],
  "tetradic": [
    "#AD009F",
    "#AD6500",
    "#00AD0E"
  ],
  "splitComplementary": [
    "#AD0E00",
    "#9FAD00"
  ],
  "monochromatic": [
    "#0A70FF",
    "#0047AB",
    "#002252"
  ]
}
Variants
{
  "light": "#0A70FF",
  "dark": "#002252",
  "saturated": "#0048AD",
  "desaturated": "#134B9A",
  "pastel": "#3E88EF",
  "neon": "#0059D6"
}
Pairings
{
  "best": [
    "#FFFFFF",
    "#AD6500",
    "#009FAD",
    "#0E00AD"
  ],
  "avoid": [
    "#134B9A",
    "#0A70FF"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#FFFFFF"
  ],
  "lowContrast": [
    "#0A70FF",
    "#134B9A"
  ]
}
Knowledge graph
{
  "nearestColors": [
    "signal-blue",
    "sapphire",
    "egyptian-blue",
    "smalt",
    "safety-blue"
  ],
  "generatedPalettes": [
    "cobalt-blue"
  ],
  "generatedComparisons": [
    "cobalt-blue-vs-sapphire",
    "cobalt-blue-vs-signal-blue",
    "smalt-vs-cobalt-blue"
  ],
  "relatedFamilies": [
    "/colors/by-family/blue",
    "/colors/by-temperature/cool",
    "/colors/by-tone/jewel-tone"
  ],
  "relatedTools": [
    "/harmonies/cobalt-blue",
    "/wcag/cobalt-blue",
    "/css/colors/cobalt-blue",
    "/hex/0047ab",
    "/tools/css-gradient-generator",
    "/tools/color-palette-generator",
    "/tools/css-color-mixer",
    "/tools/contrast-checker"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/blue",
      "/colors/by-temperature/cool",
      "/colors/by-tone/jewel-tone"
    ],
    "narrower": [
      "/palettes/cobalt-blue"
    ],
    "related": [
      "/colors/signal-blue",
      "/colors/sapphire",
      "/colors/egyptian-blue",
      "/colors/smalt",
      "/colors/safety-blue",
      "/compare/cobalt-blue-vs-sapphire",
      "/compare/cobalt-blue-vs-signal-blue",
      "/compare/smalt-vs-cobalt-blue",
      "/harmonies/cobalt-blue",
      "/wcag/cobalt-blue",
      "/css/colors/cobalt-blue",
      "/hex/0047ab",
      "/tools/css-gradient-generator",
      "/tools/color-palette-generator",
      "/tools/css-color-mixer",
      "/tools/contrast-checker"
    ]
  }
}
Full JSON dataset 
{
  "slug": "cobalt-blue",
  "name": "Cobalt Blue",
  "hex": "#0047AB",
  "uses": [
    "interfaces",
    "brand systems",
    "technical design"
  ],
  "psychology": {
    "associations": [
      "trust",
      "clarity",
      "calm"
    ],
    "contexts": [
      "technology",
      "finance",
      "healthcare",
      "navigation"
    ],
    "avoidIn": [
      "high-warmth food palettes"
    ]
  },
  "aliases": [
    "cobalt"
  ],
  "sourceType": "curated",
  "confidence": "medium",
  "reviewStatus": "manual",
  "sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
  "origin": {
    "type": "common",
    "notes": "Curated common color reference used in design and editorial color systems."
  },
  "family": "blue",
  "temperature": "cool",
  "tone": [
    "jewel-tone"
  ],
  "editorialNotes": "Curated internal color record with computed technical properties.",
  "tags": [
    "blue",
    "cool",
    "jewel-tone",
    "interfaces",
    "brand-systems",
    "technical-design",
    "trust",
    "clarity",
    "calm"
  ],
  "popularity": 88,
  "rgb": [
    0,
    71,
    171
  ],
  "hsl": [
    215,
    100,
    34
  ],
  "cmyk": [
    100,
    58,
    0,
    33
  ],
  "luminance": 0.0745,
  "contrast": {
    "black": 2.49,
    "white": 8.43
  },
  "harmonies": {
    "complementary": "#AD6500",
    "analogous": [
      "#009FAD",
      "#0E00AD"
    ],
    "triadic": [
      "#AD0048",
      "#48AD00"
    ],
    "tetradic": [
      "#AD009F",
      "#AD6500",
      "#00AD0E"
    ],
    "splitComplementary": [
      "#AD0E00",
      "#9FAD00"
    ],
    "monochromatic": [
      "#0A70FF",
      "#0047AB",
      "#002252"
    ]
  },
  "variants": {
    "light": "#0A70FF",
    "dark": "#002252",
    "saturated": "#0048AD",
    "desaturated": "#134B9A",
    "pastel": "#3E88EF",
    "neon": "#0059D6"
  },
  "wcag": {
    "AA": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "AAA": [
      "#FFFFFF",
      "#F5F5F5"
    ]
  },
  "css": {
    "variable": "--color-cobalt-blue: #0047AB;",
    "utility": ".bg-cobalt-blue { background-color: #0047AB; }",
    "textUtility": ".text-cobalt-blue { color: #0047AB; }"
  },
  "nearestColors": [
    "signal-blue",
    "sapphire",
    "egyptian-blue",
    "smalt",
    "safety-blue"
  ],
  "generatedPalettes": [
    "cobalt-blue"
  ],
  "generatedComparisons": [
    "cobalt-blue-vs-sapphire",
    "cobalt-blue-vs-signal-blue",
    "smalt-vs-cobalt-blue"
  ],
  "relatedFamilies": [
    "/colors/by-family/blue",
    "/colors/by-temperature/cool",
    "/colors/by-tone/jewel-tone"
  ],
  "relatedTools": [
    "/harmonies/cobalt-blue",
    "/wcag/cobalt-blue",
    "/css/colors/cobalt-blue",
    "/hex/0047ab",
    "/tools/css-gradient-generator",
    "/tools/color-palette-generator",
    "/tools/css-color-mixer",
    "/tools/contrast-checker"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/blue",
      "/colors/by-temperature/cool",
      "/colors/by-tone/jewel-tone"
    ],
    "narrower": [
      "/palettes/cobalt-blue"
    ],
    "related": [
      "/colors/signal-blue",
      "/colors/sapphire",
      "/colors/egyptian-blue",
      "/colors/smalt",
      "/colors/safety-blue",
      "/compare/cobalt-blue-vs-sapphire",
      "/compare/cobalt-blue-vs-signal-blue",
      "/compare/smalt-vs-cobalt-blue",
      "/harmonies/cobalt-blue",
      "/wcag/cobalt-blue",
      "/css/colors/cobalt-blue",
      "/hex/0047ab",
      "/tools/css-gradient-generator",
      "/tools/color-palette-generator",
      "/tools/css-color-mixer",
      "/tools/contrast-checker"
    ]
  },
  "pairings": {
    "best": [
      "#FFFFFF",
      "#AD6500",
      "#009FAD",
      "#0E00AD"
    ],
    "avoid": [
      "#134B9A",
      "#0A70FF"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#FFFFFF"
    ],
    "lowContrast": [
      "#0A70FF",
      "#134B9A"
    ]
  }
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Similar Colors

Signal Blue#0057B8
Sapphire#0F52BA
Egyptian Blue#1034A6
Smalt#003399
Safety Blue#0067A5

Related Color Guides

Blue color familyBrowse named blue colors and compare nearby swatches.Cool colorsExplore colors with cool temperature behavior.Jewel Tone colorsFind colors with jewel tone visual character.Cobalt Blue accessibilityCheck contrast and WCAG text options for #0047AB.Cobalt Blue CSS utilitiesUse Cobalt Blue in CSS variables and utility classes.#0047AB HEX atlasOpen the permanent HEX atlas record for conversions and variants.Cobalt Blue paletteOpen the generated palette based on Cobalt Blue.Cobalt Blue harmoniesExplore complementary, analogous, triadic, and tetradic harmonies.