What are the hex codes in the Bold Ocean & Charcoal palette?

The Bold Ocean & Charcoal color palette consists of Obsidian #000E18, Charcoal #004B75, Ocean #0080D6, Baby Blue #9AC6FF.

How should I use the Bold Ocean & Charcoal palette on a website?

Use Baby Blue #9AC6FF as the background, Obsidian #000E18 for text, Charcoal #004B75 for buttons and links, and Ocean #0080D6 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Baby Blue at 11.06:1.

Which colors in Bold Ocean & Charcoal have enough contrast for text?

The highest-contrast pair is #000E18 on #9AC6FF with a ratio of 11.06:1, which passes WCAG AA for normal text.

#000E18Obsidian

#004B75Charcoal

#0080D6Ocean

#9AC6FFBaby Blue

Bold Ocean & Charcoal color palette

Dark Cold Black Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Obsidian	`#000E18`	`rgb(0, 14, 24)`	`hsl(205, 100%, 5%)`	`oklch(15.5% 0.033 235)`
Charcoal	`#004B75`	`rgb(0, 75, 117)`	`hsl(202, 100%, 23%)`	`oklch(39.6% 0.095 243)`
Ocean	`#0080D6`	`rgb(0, 128, 214)`	`hsl(204, 100%, 42%)`	`oklch(58.7% 0.160 249)`
Baby Blue	`#9AC6FF`	`rgb(154, 198, 255)`	`hsl(214, 100%, 80%)`	`oklch(81.6% 0.094 255)`

Why it works and how to use it

Bold Ocean & Charcoal is a vivid dark, monochromatic color palette tagged dark, cold, black. All four colors sit within 12° of hue, so the scheme reads as one color explored across light and dark. These are bold, punchy colors that need generous white space around them. The overall temperature is cool.

With 3 chromatic colors, Charcoal takes the lead while the rest support. Lightness runs from 5% to 80%. Well suited to dark-mode interfaces and gaming.

Background: Baby Blue (#9AC6FF) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#000E18) on #9AC6FF gives 11.06:1, passing WCAG AAA.
Primary: Charcoal (#004B75) is the most saturated mid-tone; use it for buttons and links (5.26:1 against the background, fine for UI elements).
Accent: Ocean (#0080D6) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Baby Blue at 11.06:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Bold Ocean & Charcoal

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#000E18

#004B75

#0080D6

#9AC6FF

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#000E18` on `#9AC6FF`	Aa	11.06:1	AAA
`#004B75` on `#9AC6FF`	Aa	5.26:1	AA
`#000E18` on `#0080D6`	Aa	4.7:1	AA
`#0080D6` on `#9AC6FF`	Aa	2.35:1	Fail
`#004B75` on `#0080D6`	Aa	2.24:1	Fail
`#000E18` on `#004B75`	Aa	2.1:1	Fail

:root {
  --obsidian: #000E18;
  --charcoal: #004B75;
  --ocean: #0080D6;
  --baby-blue: #9AC6FF;
}

$obsidian: #000E18;
$charcoal: #004B75;
$ocean: #0080D6;
$baby-blue: #9AC6FF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'obsidian': '#000E18',
        'charcoal': '#004B75',
        'ocean': '#0080D6',
        'baby-blue': '#9AC6FF',
      },
    },
  },
};

{
  "name": "Bold Ocean & Charcoal",
  "colors": [
    "#000E18",
    "#004B75",
    "#0080D6",
    "#9AC6FF"
  ]
}

background: linear-gradient(135deg, #000E18, #004B75, #0080D6, #9AC6FF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-04-25 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood