Start generating

Black Velvet to Fake Blonde color palette

1F2336Black Velvet683E5DRoyal Plum606685HeronAC6FA8Drama QueenA2C2A7Meadow MornEEE6C0Fake Blonde
Open in generator Export PNG, PDF, ASE…

About this palette

Black Velvet to Fake Blonde is a 6-color cool palette: #1F2336 (Black Velvet), #683E5D (Royal Plum), #606685 (Heron), #AC6FA8 (Drama Queen), #A2C2A7 (Meadow Morn), #EEE6C0 (Fake Blonde). It mixes blue, purple, pink, green, yellow tones and feels cool overall. The strongest text pairing is #1F2336 on #EEE6C0 with a contrast ratio of 12.36:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Black Velvetrgb(31, 35, 54)hsl(230, 27%, 17%)
Royal Plumrgb(104, 62, 93)hsl(316, 25%, 33%)
Heronrgb(96, 102, 133)hsl(230, 16%, 45%)
Drama Queenrgb(172, 111, 168)hsl(304, 27%, 55%)
Meadow Mornrgb(162, 194, 167)hsl(129, 21%, 70%)
Fake Blondergb(238, 230, 192)hsl(50, 58%, 84%)

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.

  • Aa12.36:1 Super#1F2336 on #EEE6C0
  • Aa12.36:1 Super#EEE6C0 on #1F2336
  • Aa8.00:1 Very good#1F2336 on #A2C2A7
  • Aa8.00:1 Very good#A2C2A7 on #1F2336
  • Aa6.86:1 Good#683E5D on #EEE6C0
  • Aa6.86:1 Good#EEE6C0 on #683E5D
  • Aa4.47:1 Poor#606685 on #EEE6C0
  • Aa4.47:1 Poor#EEE6C0 on #606685

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Black Velvet to Fake Blonde — https://swatchly.xyz/palette/1f2336-683e5d-606685-ac6fa8-a2c2a7-eee6c0 */
:root {
  --black-velvet: #1f2336;
  --royal-plum: #683e5d;
  --heron: #606685;
  --drama-queen: #ac6fa8;
  --meadow-morn: #a2c2a7;
  --fake-blonde: #eee6c0;
}

Tailwind CSS v4

/* Black Velvet to Fake Blonde — https://swatchly.xyz/palette/1f2336-683e5d-606685-ac6fa8-a2c2a7-eee6c0 */
@theme {
  --color-black-velvet: #1f2336;
  --color-black-velvet-50: #f2f5ff;
  --color-black-velvet-100: #e6eafb;
  --color-black-velvet-200: #d2d7ea;
  --color-black-velvet-300: #bac0d5;
  --color-black-velvet-400: #9ba0b8;
  --color-black-velvet-500: #80869e;
  --color-black-velvet-600: #676d83;
  --color-black-velvet-700: #52576c;
  --color-black-velvet-800: #414557;
  --color-black-velvet-900: #333746;
  --color-black-velvet-950: #1f2336;
  --color-royal-plum: #683e5d;
  --color-royal-plum-50: #fff0fa;
  --color-royal-plum-100: #ffe1f6;
  --color-royal-plum-200: #efc9e3;
  --color-royal-plum-300: #daafcd;
  --color-royal-plum-400: #bb8dae;
  --color-royal-plum-500: #9e7091;
  --color-royal-plum-600: #805675;
  --color-royal-plum-700: #683e5d;
  --color-royal-plum-800: #513048;
  --color-royal-plum-900: #3f2438;
  --color-royal-plum-950: #281523;
  --color-heron: #606685;
  --color-heron-50: #f2f5ff;
  --color-heron-100: #e5e9ff;
  --color-heron-200: #cfd5ef;
  --color-heron-300: #b7bddb;
  --color-heron-400: #969dbd;
  --color-heron-500: #7a81a1;
  --color-heron-600: #606685;
  --color-heron-700: #4b506c;
  --color-heron-800: #3a3e56;
  --color-heron-900: #2c3044;
  --color-heron-950: #1b1d2b;
  --color-drama-queen: #ac6fa8;
  --color-drama-queen-50: #fff0fd;
  --color-drama-queen-100: #ffe1fc;
  --color-drama-queen-200: #f7c6f3;
  --color-drama-queen-300: #e4ade0;
  --color-drama-queen-400: #c78bc3;
  --color-drama-queen-500: #ac6fa8;
  --color-drama-queen-600: #8f558b;
  --color-drama-queen-700: #754072;
  --color-drama-queen-800: #5d2f5b;
  --color-drama-queen-900: #492247;
  --color-drama-queen-950: #2f132e;
  --color-meadow-morn: #a2c2a7;
  --color-meadow-morn-50: #e3f7e6;
  --color-meadow-morn-100: #d6ecd9;
  --color-meadow-morn-200: #bfd8c2;
  --color-meadow-morn-300: #a2c2a7;
  --color-meadow-morn-400: #85a48a;
  --color-meadow-morn-500: #6b8a70;
  --color-meadow-morn-600: #547059;
  --color-meadow-morn-700: #405a45;
  --color-meadow-morn-800: #314835;
  --color-meadow-morn-900: #253828;
  --color-meadow-morn-950: #152318;
  --color-fake-blonde: #eee6c0;
  --color-fake-blonde-50: #f5f1db;
  --color-fake-blonde-100: #eee6c0;
  --color-fake-blonde-200: #d9d3b7;
  --color-fake-blonde-300: #c4be9e;
  --color-fake-blonde-400: #a79f7d;
  --color-fake-blonde-500: #8c8562;
  --color-fake-blonde-600: #736b4a;
  --color-fake-blonde-700: #5c5637;
  --color-fake-blonde-800: #484328;
  --color-fake-blonde-900: #38331c;
  --color-fake-blonde-950: #231f0f;
}

Similar palettes