Noir Mystique to Bluerocratic color palette

151903Noir Mystique F8AE81Peach Velour 6E2C00Cold Press Coffee 798AFFOrchid 2B68FCBluerocratic

About this palette

Noir Mystique to Bluerocratic is a 5-color cool palette: #151903 (Noir Mystique), #F8AE81 (Peach Velour), #6E2C00 (Cold Press Coffee), #798AFF (Orchid), #2B68FC (Bluerocratic). It mixes green, orange, brown, blue tones and feels cool overall. The strongest text pairing is #151903 on #F8AE81 with a contrast ratio of 9.69:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noir Mystique	rgb(21, 25, 3)	hsl(71, 79%, 5%)
Peach Velour	rgb(248, 174, 129)	hsl(23, 89%, 74%)
Cold Press Coffee	rgb(110, 44, 0)	hsl(24, 100%, 22%)
Orchid	rgb(121, 138, 255)	hsl(232, 100%, 74%)
Bluerocratic	rgb(43, 104, 252)	hsl(222, 97%, 58%)

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.

Aa9.69:1 Very good#151903 on #F8AE81
Aa9.69:1 Very good#F8AE81 on #151903
Aa5.88:1 Good#151903 on #798AFF
Aa5.88:1 Good#798AFF on #151903
Aa5.62:1 Good#F8AE81 on #6E2C00
Aa5.62:1 Good#6E2C00 on #F8AE81
Aa3.83:1 Poor#151903 on #2B68FC
Aa3.83:1 Poor#2B68FC on #151903

Color blindness preview

CSS variables

/* Noir Mystique to Bluerocratic — https://swatchly.xyz/palette/151903-f8ae81-6e2c00-798aff-2b68fc */
:root {
  --noir-mystique: #151903;
  --peach-velour: #f8ae81;
  --cold-press-coffee: #6e2c00;
  --orchid: #798aff;
  --bluerocratic: #2b68fc;
}

Tailwind CSS v4

/* Noir Mystique to Bluerocratic — https://swatchly.xyz/palette/151903-f8ae81-6e2c00-798aff-2b68fc */
@theme {
  --color-noir-mystique: #151903;
  --color-noir-mystique-50: #f3f7e7;
  --color-noir-mystique-100: #e9eedb;
  --color-noir-mystique-200: #d5dbc5;
  --color-noir-mystique-300: #bec4ac;
  --color-noir-mystique-400: #9fa58a;
  --color-noir-mystique-500: #82886d;
  --color-noir-mystique-600: #666c52;
  --color-noir-mystique-700: #4e533c;
  --color-noir-mystique-800: #3a3e2b;
  --color-noir-mystique-900: #2a2d1d;
  --color-noir-mystique-950: #151903;
  --color-peach-velour: #f8ae81;
  --color-peach-velour-50: #fff3eb;
  --color-peach-velour-100: #ffe6d7;
  --color-peach-velour-200: #ffcbad;
  --color-peach-velour-300: #f8ae81;
  --color-peach-velour-400: #d49065;
  --color-peach-velour-500: #b87347;
  --color-peach-velour-600: #9a592e;
  --color-peach-velour-700: #7f431a;
  --color-peach-velour-800: #66320c;
  --color-peach-velour-900: #512504;
  --color-peach-velour-950: #351501;
  --color-cold-press-coffee: #6e2c00;
  --color-cold-press-coffee-50: #fff2ec;
  --color-cold-press-coffee-100: #ffe5d9;
  --color-cold-press-coffee-200: #ffcab1;
  --color-cold-press-coffee-300: #f2af8f;
  --color-cold-press-coffee-400: #d68d6a;
  --color-cold-press-coffee-500: #ba714d;
  --color-cold-press-coffee-600: #9c5733;
  --color-cold-press-coffee-700: #814220;
  --color-cold-press-coffee-800: #6e2c00;
  --color-cold-press-coffee-900: #522409;
  --color-cold-press-coffee-950: #361403;
  --color-orchid: #798aff;
  --color-orchid-50: #edf1ff;
  --color-orchid-100: #dee4ff;
  --color-orchid-200: #c2cdff;
  --color-orchid-300: #a2b2ff;
  --color-orchid-400: #798aff;
  --color-orchid-500: #6270e2;
  --color-orchid-600: #4c56c3;
  --color-orchid-700: #3b42a4;
  --color-orchid-800: #2d3188;
  --color-orchid-900: #22256f;
  --color-orchid-950: #14164d;
  --color-bluerocratic: #2b68fc;
  --color-bluerocratic-50: #f0f5ff;
  --color-bluerocratic-100: #e5eeff;
  --color-bluerocratic-200: #cbddff;
  --color-bluerocratic-300: #acc8ff;
  --color-bluerocratic-400: #7ea8ff;
  --color-bluerocratic-500: #548aff;
  --color-bluerocratic-600: #2b68fc;
  --color-bluerocratic-700: #164dd8;
  --color-bluerocratic-800: #0837b4;
  --color-bluerocratic-900: #022692;
  --color-bluerocratic-950: #001563;
}