Glossy Black to Pinot Noir Color Palette

About this palette

Glossy Black to Pinot Noir is a 4-color dark, cool, gradient palette: #130216 (Glossy Black), #042B54 (Midnight Ocean), #004072 (Mermaid Blues), #675159 (Pinot Noir). It mixes black, blue, gray tones and feels cool overall. The strongest text pairing is #130216 on #675159 with a contrast ratio of 2.77:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glossy Black	rgb(19, 2, 22)	hsl(291, 83%, 5%)
Midnight Ocean	rgb(4, 43, 84)	hsl(211, 91%, 17%)
Mermaid Blues	rgb(0, 64, 114)	hsl(206, 100%, 22%)
Pinot Noir	rgb(103, 81, 89)	hsl(338, 12%, 36%)

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.

Color blindness preview

CSS variables

/* Glossy Black to Pinot Noir — https://swatchly.xyz/palette/130216-042b54-004072-675159 */
:root {
  --glossy-black: #130216;
  --midnight-ocean: #042b54;
  --mermaid-blues: #004072;
  --pinot-noir: #675159;
}

Tailwind CSS v4

/* Glossy Black to Pinot Noir — https://swatchly.xyz/palette/130216-042b54-004072-675159 */
@theme {
  --color-glossy-black: #130216;
  --color-glossy-black-50: #fdf0ff;
  --color-glossy-black-100: #f6e4f9;
  --color-glossy-black-200: #e5cfe7;
  --color-glossy-black-300: #d0b8d3;
  --color-glossy-black-400: #b197b5;
  --color-glossy-black-500: #917795;
  --color-glossy-black-600: #715974;
  --color-glossy-black-700: #543f57;
  --color-glossy-black-800: #3b2b3d;
  --color-glossy-black-900: #261a27;
  --color-glossy-black-950: #130216;
  --color-midnight-ocean: #042b54;
  --color-midnight-ocean-50: #eff6ff;
  --color-midnight-ocean-100: #deedff;
  --color-midnight-ocean-200: #bddaff;
  --color-midnight-ocean-300: #a0c4f0;
  --color-midnight-ocean-400: #7ca3d3;
  --color-midnight-ocean-500: #5e86b6;
  --color-midnight-ocean-600: #446a96;
  --color-midnight-ocean-700: #305179;
  --color-midnight-ocean-800: #203d5f;
  --color-midnight-ocean-900: #042b54;
  --color-midnight-ocean-950: #0a1a2d;
  --color-mermaid-blues: #004072;
  --color-mermaid-blues-50: #eef6ff;
  --color-mermaid-blues-100: #ddedff;
  --color-mermaid-blues-200: #badbff;
  --color-mermaid-blues-300: #94c5f8;
  --color-mermaid-blues-400: #6fa5dc;
  --color-mermaid-blues-500: #5188bf;
  --color-mermaid-blues-600: #376ca1;
  --color-mermaid-blues-700: #235584;
  --color-mermaid-blues-800: #004072;
  --color-mermaid-blues-900: #0c3153;
  --color-mermaid-blues-950: #041e36;
  --color-pinot-noir: #675159;
  --color-pinot-noir-50: #fff1f6;
  --color-pinot-noir-100: #f7e6ec;
  --color-pinot-noir-200: #e6d2d9;
  --color-pinot-noir-300: #d1bbc3;
  --color-pinot-noir-400: #b39ca4;
  --color-pinot-noir-500: #998189;
  --color-pinot-noir-600: #7e676f;
  --color-pinot-noir-700: #675159;
  --color-pinot-noir-800: #513f45;
  --color-pinot-noir-900: #3f3035;
  --color-pinot-noir-950: #281d21;
}