Noir Mystique to Cold Blue color palette

141801Noir Mystique 512B6FPurple Seduction 007790Celestial D3714DBrown Sugar Glaze 72DCEDCold Blue

About this palette

Noir Mystique to Cold Blue is a 5-color cool palette: #141801 (Noir Mystique), #512B6F (Purple Seduction), #007790 (Celestial), #D3714D (Brown Sugar Glaze), #72DCED (Cold Blue). It mixes black, purple, blue, orange, turquoise tones and feels cool overall. The strongest text pairing is #141801 on #72DCED with a contrast ratio of 11.35:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noir Mystique	rgb(20, 24, 1)	hsl(70, 92%, 5%)
Purple Seduction	rgb(81, 43, 111)	hsl(274, 44%, 30%)
Celestial	rgb(0, 119, 144)	hsl(190, 100%, 28%)
Brown Sugar Glaze	rgb(211, 113, 77)	hsl(16, 60%, 56%)
Cold Blue	rgb(114, 220, 237)	hsl(188, 77%, 69%)

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.35:1 Very good#141801 on #72DCED
Aa11.35:1 Very good#72DCED on #141801
Aa6.84:1 Good#512B6F on #72DCED
Aa6.84:1 Good#72DCED on #512B6F
Aa5.37:1 Good#141801 on #D3714D
Aa5.37:1 Good#D3714D on #141801
Aa3.48:1 Poor#141801 on #007790
Aa3.48:1 Poor#007790 on #141801

Color blindness preview

CSS variables

/* Noir Mystique to Cold Blue — https://swatchly.xyz/palette/141801-512b6f-007790-d3714d-72dced */
:root {
  --noir-mystique: #141801;
  --purple-seduction: #512b6f;
  --celestial: #007790;
  --brown-sugar-glaze: #d3714d;
  --cold-blue: #72dced;
}

Tailwind CSS v4

/* Noir Mystique to Cold Blue — https://swatchly.xyz/palette/141801-512b6f-007790-d3714d-72dced */
@theme {
  --color-noir-mystique: #141801;
  --color-noir-mystique-50: #f3f8e6;
  --color-noir-mystique-100: #e9eeda;
  --color-noir-mystique-200: #d5dbc3;
  --color-noir-mystique-300: #bec5aa;
  --color-noir-mystique-400: #9fa588;
  --color-noir-mystique-500: #81886a;
  --color-noir-mystique-600: #656b50;
  --color-noir-mystique-700: #4d533a;
  --color-noir-mystique-800: #393e29;
  --color-noir-mystique-900: #292c1b;
  --color-noir-mystique-950: #141801;
  --color-purple-seduction: #512b6f;
  --color-purple-seduction-50: #f8f2ff;
  --color-purple-seduction-100: #f2e5ff;
  --color-purple-seduction-200: #e5cbff;
  --color-purple-seduction-300: #d2b0f3;
  --color-purple-seduction-400: #b38ed7;
  --color-purple-seduction-500: #9871bb;
  --color-purple-seduction-600: #7c579d;
  --color-purple-seduction-700: #634181;
  --color-purple-seduction-800: #512b6f;
  --color-purple-seduction-900: #3d2352;
  --color-purple-seduction-950: #261435;
  --color-celestial: #007790;
  --color-celestial-50: #e6f9ff;
  --color-celestial-100: #ccf3ff;
  --color-celestial-200: #a2e3f7;
  --color-celestial-300: #82cde4;
  --color-celestial-400: #57aec8;
  --color-celestial-500: #3292ac;
  --color-celestial-600: #007790;
  --color-celestial-700: #005e73;
  --color-celestial-800: #004a5a;
  --color-celestial-900: #003946;
  --color-celestial-950: #00242d;
  --color-brown-sugar-glaze: #d3714d;
  --color-brown-sugar-glaze-50: #fff4f1;
  --color-brown-sugar-glaze-100: #ffeae2;
  --color-brown-sugar-glaze-200: #ffd1c1;
  --color-brown-sugar-glaze-300: #ffb398;
  --color-brown-sugar-glaze-400: #ec8e6b;
  --color-brown-sugar-glaze-500: #d3714d;
  --color-brown-sugar-glaze-600: #b25431;
  --color-brown-sugar-glaze-700: #943d1a;
  --color-brown-sugar-glaze-800: #772b09;
  --color-brown-sugar-glaze-900: #5e1d01;
  --color-brown-sugar-glaze-950: #3d0f00;
  --color-cold-blue: #72dced;
  --color-cold-blue-50: #effdff;
  --color-cold-blue-100: #d5f9ff;
  --color-cold-blue-200: #a8ecf8;
  --color-cold-blue-300: #72dced;
  --color-cold-blue-400: #56b9c9;
  --color-cold-blue-500: #299cac;
  --color-cold-blue-600: #007e8d;
  --color-cold-blue-700: #006470;
  --color-cold-blue-800: #004d57;
  --color-cold-blue-900: #003a42;
  --color-cold-blue-950: #00242a;
}