Film Noir to Misty Morning Color Palette

About this palette

Film Noir to Misty Morning is a 5-color muted palette: #4F372D (Film Noir), #546A5D (Dark Forest), #95766B (Equestrienne), #A5A9CC (Old World), #B2CABB (Misty Morning). It mixes brown, gray, orange, purple tones and feels warm overall. The strongest text pairing is #4F372D on #B2CABB with a contrast ratio of 6.29:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Film Noir	rgb(79, 55, 45)	hsl(18, 27%, 24%)
Dark Forest	rgb(84, 106, 93)	hsl(145, 12%, 37%)
Equestrienne	rgb(149, 118, 107)	hsl(16, 17%, 50%)
Old World	rgb(165, 169, 204)	hsl(234, 28%, 72%)
Misty Morning	rgb(178, 202, 187)	hsl(142, 18%, 75%)

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.

Aa6.29:1 Good#4F372D on #B2CABB
Aa6.29:1 Good#B2CABB on #4F372D
Aa4.77:1 Good#4F372D on #A5A9CC
Aa4.77:1 Good#A5A9CC on #4F372D
Aa3.35:1 Poor#546A5D on #B2CABB
Aa3.35:1 Poor#B2CABB on #546A5D

Color blindness preview

CSS variables

/* Film Noir to Misty Morning — https://swatchly.xyz/palette/4f372d-546a5d-95766b-a5a9cc-b2cabb */
:root {
  --film-noir: #4f372d;
  --dark-forest: #546a5d;
  --equestrienne: #95766b;
  --old-world: #a5a9cc;
  --misty-morning: #b2cabb;
}

Tailwind CSS v4

/* Film Noir to Misty Morning — https://swatchly.xyz/palette/4f372d-546a5d-95766b-a5a9cc-b2cabb */
@theme {
  --color-film-noir: #4f372d;
  --color-film-noir-50: #fff2ed;
  --color-film-noir-100: #fae7df;
  --color-film-noir-200: #e9d2c9;
  --color-film-noir-300: #d3baaf;
  --color-film-noir-400: #b4998d;
  --color-film-noir-500: #987c71;
  --color-film-noir-600: #7c6257;
  --color-film-noir-700: #624b42;
  --color-film-noir-800: #4f372d;
  --color-film-noir-900: #3b2b24;
  --color-film-noir-950: #251914;
  --color-dark-forest: #546a5d;
  --color-dark-forest-50: #ebf9f1;
  --color-dark-forest-100: #dfeee5;
  --color-dark-forest-200: #c7dace;
  --color-dark-forest-300: #adc3b6;
  --color-dark-forest-400: #8ba295;
  --color-dark-forest-500: #6f8678;
  --color-dark-forest-600: #546a5d;
  --color-dark-forest-700: #415449;
  --color-dark-forest-800: #314238;
  --color-dark-forest-900: #25332b;
  --color-dark-forest-950: #16201a;
  --color-equestrienne: #95766b;
  --color-equestrienne-50: #fff0eb;
  --color-equestrienne-100: #f9e3db;
  --color-equestrienne-200: #e7cdc3;
  --color-equestrienne-300: #d1b4a9;
  --color-equestrienne-400: #b29287;
  --color-equestrienne-500: #95766b;
  --color-equestrienne-600: #7b5e53;
  --color-equestrienne-700: #634940;
  --color-equestrienne-800: #4f3931;
  --color-equestrienne-900: #3e2b25;
  --color-equestrienne-950: #281a16;
  --color-old-world: #a5a9cc;
  --color-old-world-50: #f7f8ff;
  --color-old-world-100: #edf0ff;
  --color-old-world-200: #daddf7;
  --color-old-world-300: #c4c8e5;
  --color-old-world-400: #a5a9cc;
  --color-old-world-500: #888cad;
  --color-old-world-600: #6c6f90;
  --color-old-world-700: #545775;
  --color-old-world-800: #40435c;
  --color-old-world-900: #303248;
  --color-old-world-950: #1c1e2d;
  --color-misty-morning: #b2cabb;
  --color-misty-morning-50: #edfaf2;
  --color-misty-morning-100: #e2f1e8;
  --color-misty-morning-200: #cdded3;
  --color-misty-morning-300: #b2cabb;
  --color-misty-morning-400: #93aa9c;
  --color-misty-morning-500: #778e80;
  --color-misty-morning-600: #5d7366;
  --color-misty-morning-700: #485b4f;
  --color-misty-morning-800: #36473d;
  --color-misty-morning-900: #28372e;
  --color-misty-morning-950: #18221c;
}