Larb Gai to Noir Mystique color palette

DBC8AFLarb Gai CC8F99Rosetti 5C7DAFEndless River 7E504EVeil of Cinder 24484AMysterious Waters 201609Noir Mystique

Open in generator Export PNG, PDF, ASE…

About this palette

Larb Gai to Noir Mystique is a 6-color muted, vintage palette: #DBC8AF (Larb Gai), #CC8F99 (Rosetti), #5C7DAF (Endless River), #7E504E (Veil of Cinder), #24484A (Mysterious Waters), #201609 (Noir Mystique). It mixes orange, red, blue, turquoise, black tones and feels warm overall. The strongest text pairing is #DBC8AF on #201609 with a contrast ratio of 10.92:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Larb Gai	rgb(219, 200, 175)	hsl(34, 38%, 77%)
Rosetti	rgb(204, 143, 153)	hsl(350, 37%, 68%)
Endless River	rgb(92, 125, 175)	hsl(216, 34%, 52%)
Veil of Cinder	rgb(126, 80, 78)	hsl(2, 24%, 40%)
Mysterious Waters	rgb(36, 72, 74)	hsl(183, 35%, 22%)
Noir Mystique	rgb(32, 22, 9)	hsl(34, 56%, 8%)

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.

Aa10.92:1 Very good#DBC8AF on #201609
Aa10.92:1 Very good#201609 on #DBC8AF
Aa6.74:1 Good#CC8F99 on #201609
Aa6.74:1 Good#201609 on #CC8F99
Aa6.14:1 Good#DBC8AF on #24484A
Aa6.14:1 Good#24484A on #DBC8AF
Aa4.24:1 Poor#5C7DAF on #201609
Aa4.24:1 Poor#201609 on #5C7DAF

Color blindness preview

CSS variables

/* Larb Gai to Noir Mystique — https://swatchly.xyz/palette/dbc8af-cc8f99-5c7daf-7e504e-24484a-201609 */
:root {
  --larb-gai: #dbc8af;
  --rosetti: #cc8f99;
  --endless-river: #5c7daf;
  --veil-of-cinder: #7e504e;
  --mysterious-waters: #24484a;
  --noir-mystique: #201609;
}

Tailwind CSS v4

/* Larb Gai to Noir Mystique — https://swatchly.xyz/palette/dbc8af-cc8f99-5c7daf-7e504e-24484a-201609 */
@theme {
  --color-larb-gai: #dbc8af;
  --color-larb-gai-50: #fffaf2;
  --color-larb-gai-100: #fcf0e2;
  --color-larb-gai-200: #ebdecd;
  --color-larb-gai-300: #dbc8af;
  --color-larb-gai-400: #b8a790;
  --color-larb-gai-500: #9b8a72;
  --color-larb-gai-600: #7e6d57;
  --color-larb-gai-700: #655541;
  --color-larb-gai-800: #4f412f;
  --color-larb-gai-900: #3c3122;
  --color-larb-gai-950: #261e13;
  --color-rosetti: #cc8f99;
  --color-rosetti-50: #fff2f3;
  --color-rosetti-100: #ffe4e7;
  --color-rosetti-200: #facad1;
  --color-rosetti-300: #e7b1b9;
  --color-rosetti-400: #cc8f99;
  --color-rosetti-500: #ae747e;
  --color-rosetti-600: #915a64;
  --color-rosetti-700: #77454e;
  --color-rosetti-800: #5f343c;
  --color-rosetti-900: #4b262d;
  --color-rosetti-950: #30161b;
  --color-endless-river: #5c7daf;
  --color-endless-river-50: #ecf4ff;
  --color-endless-river-100: #dae9ff;
  --color-endless-river-200: #b8d4fe;
  --color-endless-river-300: #9cbbeb;
  --color-endless-river-400: #799acd;
  --color-endless-river-500: #5c7daf;
  --color-endless-river-600: #456493;
  --color-endless-river-700: #344f79;
  --color-endless-river-800: #263e62;
  --color-endless-river-900: #1c304f;
  --color-endless-river-950: #0f1e34;
  --color-veil-of-cinder: #7e504e;
  --color-veil-of-cinder-50: #fff2f1;
  --color-veil-of-cinder-100: #ffe4e2;
  --color-veil-of-cinder-200: #f6cecc;
  --color-veil-of-cinder-300: #e5b8b5;
  --color-veil-of-cinder-400: #c99896;
  --color-veil-of-cinder-500: #b07e7b;
  --color-veil-of-cinder-600: #956563;
  --color-veil-of-cinder-700: #7e504e;
  --color-veil-of-cinder-800: #643d3c;
  --color-veil-of-cinder-900: #4f2e2d;
  --color-veil-of-cinder-950: #331b1b;
  --color-mysterious-waters: #24484a;
  --color-mysterious-waters-50: #e4fafb;
  --color-mysterious-waters-100: #d8f1f2;
  --color-mysterious-waters-200: #c1dedf;
  --color-mysterious-waters-300: #a7c8ca;
  --color-mysterious-waters-400: #84a9ab;
  --color-mysterious-waters-500: #688d8f;
  --color-mysterious-waters-600: #4e7274;
  --color-mysterious-waters-700: #3a5b5d;
  --color-mysterious-waters-800: #24484a;
  --color-mysterious-waters-900: #1e3738;
  --color-mysterious-waters-950: #102223;
  --color-noir-mystique: #201609;
  --color-noir-mystique-50: #fcf4ea;
  --color-noir-mystique-100: #f3eadf;
  --color-noir-mystique-200: #e0d6c9;
  --color-noir-mystique-300: #cbbfb0;
  --color-noir-mystique-400: #ac9f90;
  --color-noir-mystique-500: #8f8273;
  --color-noir-mystique-600: #736758;
  --color-noir-mystique-700: #5a4f42;
  --color-noir-mystique-800: #443b30;
  --color-noir-mystique-900: #322b22;
  --color-noir-mystique-950: #201609;
}