Nocturne Red to Larb Gai Color Palette

About this palette

Nocturne Red to Larb Gai is a 5-color cool, vintage palette: #79475A (Nocturne Red), #003F3B (Rich Black), #9DAAC8 (Old World), #409786 (Sea), #DCC8AC (Larb Gai). It mixes red, turquoise, blue, yellow tones and feels cool overall. The strongest text pairing is #003F3B on #DCC8AC with a contrast ratio of 7.27:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturne Red	rgb(121, 71, 90)	hsl(337, 26%, 38%)
Rich Black	rgb(0, 63, 59)	hsl(176, 100%, 12%)
Old World	rgb(157, 170, 200)	hsl(222, 28%, 70%)
Sea	rgb(64, 151, 134)	hsl(168, 40%, 42%)
Larb Gai	rgb(220, 200, 172)	hsl(35, 41%, 77%)

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.

Aa7.27:1 Very good#003F3B on #DCC8AC
Aa7.27:1 Very good#DCC8AC on #003F3B
Aa5.08:1 Good#003F3B on #9DAAC8
Aa5.08:1 Good#9DAAC8 on #003F3B
Aa4.51:1 Good#79475A on #DCC8AC
Aa4.51:1 Good#DCC8AC on #79475A
Aa3.38:1 Poor#003F3B on #409786
Aa3.38:1 Poor#409786 on #003F3B

Color blindness preview

CSS variables

/* Nocturne Red to Larb Gai — https://swatchly.xyz/palette/79475a-003f3b-9daac8-409786-dcc8ac */
:root {
  --nocturne-red: #79475a;
  --rich-black: #003f3b;
  --old-world: #9daac8;
  --sea: #409786;
  --larb-gai: #dcc8ac;
}

Tailwind CSS v4

/* Nocturne Red to Larb Gai — https://swatchly.xyz/palette/79475a-003f3b-9daac8-409786-dcc8ac */
@theme {
  --color-nocturne-red: #79475a;
  --color-nocturne-red-50: #fff1f5;
  --color-nocturne-red-100: #ffe2ec;
  --color-nocturne-red-200: #f7cad9;
  --color-nocturne-red-300: #e4b2c3;
  --color-nocturne-red-400: #c892a5;
  --color-nocturne-red-500: #ad768a;
  --color-nocturne-red-600: #915d70;
  --color-nocturne-red-700: #79475a;
  --color-nocturne-red-800: #603746;
  --color-nocturne-red-900: #4b2836;
  --color-nocturne-red-950: #311821;
  --color-rich-black: #003f3b;
  --color-rich-black-50: #defdf9;
  --color-rich-black-100: #d2f3ef;
  --color-rich-black-200: #b9e1dc;
  --color-rich-black-300: #9dccc7;
  --color-rich-black-400: #7aaea8;
  --color-rich-black-500: #5d938d;
  --color-rich-black-600: #447873;
  --color-rich-black-700: #30615d;
  --color-rich-black-800: #214d4a;
  --color-rich-black-900: #003f3b;
  --color-rich-black-950: #0a2724;
  --color-old-world: #9daac8;
  --color-old-world-50: #f5f8ff;
  --color-old-world-100: #e9f0ff;
  --color-old-world-200: #d4def4;
  --color-old-world-300: #bdc8e2;
  --color-old-world-400: #9daac8;
  --color-old-world-500: #808daa;
  --color-old-world-600: #65718c;
  --color-old-world-700: #4e5972;
  --color-old-world-800: #3b445a;
  --color-old-world-900: #2c3446;
  --color-old-world-950: #1a1f2c;
  --color-sea: #409786;
  --color-sea-50: #d8fff5;
  --color-sea-100: #c5f8eb;
  --color-sea-200: #a9e6d7;
  --color-sea-300: #8ad1c1;
  --color-sea-400: #61b3a1;
  --color-sea-500: #409786;
  --color-sea-600: #217c6c;
  --color-sea-700: #046355;
  --color-sea-800: #004e42;
  --color-sea-900: #003c33;
  --color-sea-950: #00261f;
  --color-larb-gai: #dcc8ac;
  --color-larb-gai-50: #fffaf2;
  --color-larb-gai-100: #fcf0e0;
  --color-larb-gai-200: #ecdecb;
  --color-larb-gai-300: #dcc8ac;
  --color-larb-gai-400: #b9a78d;
  --color-larb-gai-500: #9c896f;
  --color-larb-gai-600: #7f6d54;
  --color-larb-gai-700: #66553e;
  --color-larb-gai-800: #4f412d;
  --color-larb-gai-900: #3c3120;
  --color-larb-gai-950: #261e12;
}