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

The Bold Blueberry & Charcoal color palette consists of Ink #011323, Charcoal #284A69, Blueberry #008FE2, Lavender #D3E7FE.

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

Use Lavender #D3E7FE as the background, Ink #011323 for text, Blueberry #008FE2 for buttons and links, and Charcoal #284A69 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on Lavender at 14.87:1.

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

The highest-contrast pair is #011323 on #D3E7FE with a ratio of 14.87:1, which passes WCAG AA for normal text.

#011323Ink

#284A69Charcoal

#008FE2Blueberry

#D3E7FELavender

Bold Blueberry & Charcoal color palette

Dark Space Cold Black Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Ink	`#011323`	`rgb(1, 19, 35)`	`hsl(208, 94%, 7%)`	`oklch(18.0% 0.043 245)`
Charcoal	`#284A69`	`rgb(40, 74, 105)`	`hsl(209, 45%, 28%)`	`oklch(39.8% 0.066 248)`
Blueberry	`#008FE2`	`rgb(0, 143, 226)`	`hsl(202, 100%, 44%)`	`oklch(62.9% 0.160 245)`
Lavender	`#D3E7FE`	`rgb(211, 231, 254)`	`hsl(212, 96%, 91%)`	`oklch(92.0% 0.038 252)`

Why it works and how to use it

Bold Blueberry & Charcoal is a vivid monochromatic color palette tagged dark, space, cold. All four colors sit within 10° 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, Blueberry takes the lead while the rest support. Lightness runs from 7% to 91%. Well suited to websites, presentations and branding.

Background: Lavender (#D3E7FE) is the lightest color, so it belongs on large surfaces.
Text: Ink (#011323) on #D3E7FE gives 14.87:1, passing WCAG AAA.
Primary: Blueberry (#008FE2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Charcoal (#284A69) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on Lavender at 14.87:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Bold Blueberry & 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

#011323

#284A69

#008FE2

#D3E7FE

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
`#011323` on `#D3E7FE`	Aa	14.87:1	AAA
`#284A69` on `#D3E7FE`	Aa	7.31:1	AAA
`#011323` on `#008FE2`	Aa	5.39:1	AA
`#008FE2` on `#D3E7FE`	Aa	2.76:1	Fail
`#284A69` on `#008FE2`	Aa	2.65:1	Fail
`#011323` on `#284A69`	Aa	2.03:1	Fail

:root {
  --ink: #011323;
  --charcoal: #284A69;
  --blueberry: #008FE2;
  --lavender: #D3E7FE;
}

$ink: #011323;
$charcoal: #284A69;
$blueberry: #008FE2;
$lavender: #D3E7FE;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'ink': '#011323',
        'charcoal': '#284A69',
        'blueberry': '#008FE2',
        'lavender': '#D3E7FE',
      },
    },
  },
};

{
  "name": "Bold Blueberry & Charcoal",
  "colors": [
    "#011323",
    "#284A69",
    "#008FE2",
    "#D3E7FE"
  ]
}

background: linear-gradient(135deg, #011323, #284A69, #008FE2, #D3E7FE);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

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

Similar palettes 24 more in this mood