Midnight blue, cadet blue and peach puff color palette (#00252d, #4f98a4, #f3daca, #7e451b, #9fb5fe)

Hex	Nearest CSS name	OKLCH	Black text, AA	White text, AA
`#00252d`	Midnight Blue (`midnightblue`)	`oklch(24.4% 0.043 215.6)`	1.30:1 fails	16.12:1 passes
`#4f98a4`	Cadet Blue (`cadetblue`)	`oklch(63.7% 0.075 209.4)`	6.36:1 passes	3.30:1 fails
`#f3daca`	Peach Puff (`peachpuff`)	`oklch(90.5% 0.035 54.8)`	15.69:1 passes	1.34:1 fails
`#7e451b`	Saddle Brown (`saddlebrown`)	`oklch(45.2% 0.095 53.6)`	2.75:1 fails	7.62:1 passes
`#9fb5fe`	Light Sky Blue (`lightskyblue`)	`oklch(78.4% 0.107 270.9)`	10.51:1 passes	2.00:1 fails

Hex

Nearest CSS name

OKLCH

Black text, AA

White text, AA

#00252d

Midnight Blue (midnightblue)

oklch(24.4% 0.043 215.6)

1.30:1 fails

16.12:1 passes

#4f98a4

Cadet Blue (cadetblue)

oklch(63.7% 0.075 209.4)

6.36:1 passes

3.30:1 fails

#f3daca

Peach Puff (peachpuff)

oklch(90.5% 0.035 54.8)

15.69:1 passes

1.34:1 fails

#7e451b

Saddle Brown (saddlebrown)

oklch(45.2% 0.095 53.6)

2.75:1 fails

7.62:1 passes

#9fb5fe

Light Sky Blue (lightskyblue)

oklch(78.4% 0.107 270.9)

10.51:1 passes

2.00:1 fails

Using the palette

In Recolor the order of the colors is meaning: swatch 1 takes the page's heaviest brand color, swatch 2 the next, and the page's greys take a tint of swatch 1 (how that works is in mapping). Reorder the swatches and the page reorders with them. To keep text readable, the table above says whether black or white text reaches the WCAG AA ratio of 4.5:1 on each color; #00252d is the darkest of the five.

The code below is what Recolor's own Export panel writes for this palette. The Tailwind block is a Tailwind v4 @theme block, and the Coolors link opens the same colors there. To see the palette on your own site first, follow previewing a palette on a real website.

The palette as code

CSS variables

CSS

:root {
  --color-1: #00252d;
  --color-2: #4f98a4;
  --color-3: #f3daca;
  --color-4: #7e451b;
  --color-5: #9fb5fe;
  --color-primary: var(--color-1);
  --color-secondary: var(--color-2);
  --color-accent: var(--color-3);
}

Tailwind v4 @theme

CSS

@theme {
  --color-1: #00252d;
  --color-2: #4f98a4;
  --color-3: #f3daca;
  --color-4: #7e451b;
  --color-5: #9fb5fe;
  --color-primary: #00252d;
  --color-secondary: #4f98a4;
  --color-accent: #f3daca;
}

SCSS variables

SCSS

$color-1: #00252d;
$color-2: #4f98a4;
$color-3: #f3daca;
$color-4: #7e451b;
$color-5: #9fb5fe;
$color-primary: $color-1;
$color-secondary: $color-2;
$color-accent: $color-3;

JSON

{
  "colors": [
    "#00252d",
    "#4f98a4",
    "#f3daca",
    "#7e451b",
    "#9fb5fe"
  ]
}

Hex list

Text

#00252d
#4f98a4
#f3daca
#7e451b
#9fb5fe

Coolors link

URL

https://coolors.co/00252d-4f98a4-f3daca-7e451b-9fb5fe