Fake Blonde to Devilish Diva Color Palette

About this palette

Fake Blonde to Devilish Diva is a 4-color vintage palette: #ECE7C1 (Fake Blonde), #072E41 (Nordic Noir), #2A6E86 (Astral), #CB7C9A (Devilish Diva). It mixes yellow, blue, pink tones and feels balanced overall. The strongest text pairing is #ECE7C1 on #072E41 with a contrast ratio of 11.36:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fake Blonde	rgb(236, 231, 193)	hsl(53, 53%, 84%)
Nordic Noir	rgb(7, 46, 65)	hsl(200, 81%, 14%)
Astral	rgb(42, 110, 134)	hsl(196, 52%, 35%)
Devilish Diva	rgb(203, 124, 154)	hsl(337, 43%, 64%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa11.36:1 Very good#ECE7C1 on #072E41
Aa11.36:1 Very good#072E41 on #ECE7C1
Aa4.67:1 Good#072E41 on #CB7C9A
Aa4.67:1 Good#CB7C9A on #072E41
Aa4.56:1 Good#ECE7C1 on #2A6E86
Aa4.56:1 Good#2A6E86 on #ECE7C1

Color blindness preview

CSS variables

/* Fake Blonde to Devilish Diva — https://swatchly.xyz/palette/ece7c1-072e41-2a6e86-cb7c9a */
:root {
  --fake-blonde: #ece7c1;
  --nordic-noir: #072e41;
  --astral: #2a6e86;
  --devilish-diva: #cb7c9a;
}

Tailwind CSS v4

/* Fake Blonde to Devilish Diva — https://swatchly.xyz/palette/ece7c1-072e41-2a6e86-cb7c9a */
@theme {
  --color-fake-blonde: #ece7c1;
  --color-fake-blonde-50: #f4f1db;
  --color-fake-blonde-100: #ece7c1;
  --color-fake-blonde-200: #d8d4b7;
  --color-fake-blonde-300: #c3bf9f;
  --color-fake-blonde-400: #a5a07e;
  --color-fake-blonde-500: #8b8663;
  --color-fake-blonde-600: #716c4b;
  --color-fake-blonde-700: #5b5638;
  --color-fake-blonde-800: #474328;
  --color-fake-blonde-900: #37341d;
  --color-fake-blonde-950: #22200f;
  --color-nordic-noir: #072e41;
  --color-nordic-noir-50: #ebf7ff;
  --color-nordic-noir-100: #d7efff;
  --color-nordic-noir-200: #bfdcef;
  --color-nordic-noir-300: #a5c6db;
  --color-nordic-noir-400: #80a6bc;
  --color-nordic-noir-500: #63889f;
  --color-nordic-noir-600: #486c81;
  --color-nordic-noir-700: #335366;
  --color-nordic-noir-800: #233e4e;
  --color-nordic-noir-900: #072e41;
  --color-nordic-noir-950: #0b1b23;
  --color-astral: #2a6e86;
  --color-astral-50: #e8f8ff;
  --color-astral-100: #cdf0ff;
  --color-astral-200: #acdef2;
  --color-astral-300: #8ec7de;
  --color-astral-400: #67a7c0;
  --color-astral-500: #488aa3;
  --color-astral-600: #2a6e86;
  --color-astral-700: #1a586c;
  --color-astral-800: #0c4557;
  --color-astral-900: #043545;
  --color-astral-950: #01212c;
  --color-devilish-diva: #cb7c9a;
  --color-devilish-diva-50: #ffecf2;
  --color-devilish-diva-100: #ffdbe7;
  --color-devilish-diva-200: #fdbbd2;
  --color-devilish-diva-300: #e9a0bb;
  --color-devilish-diva-400: #cb7c9a;
  --color-devilish-diva-500: #af6380;
  --color-devilish-diva-600: #934b68;
  --color-devilish-diva-700: #793853;
  --color-devilish-diva-800: #622a41;
  --color-devilish-diva-900: #4e1f33;
  --color-devilish-diva-950: #341120;
}