Otterly Brown to Fatty Sashimi Color Palette

About this palette

Otterly Brown to Fatty Sashimi is a 4-color vintage palette: #8D410E (Otterly Brown), #5EA1B6 (Lake Lucerne), #172E38 (Oceanic Noir), #EDC1AC (Fatty Sashimi). It mixes brown, blue, gray, orange tones and feels warm overall. The strongest text pairing is #172E38 on #EDC1AC with a contrast ratio of 8.64:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Otterly Brown	rgb(141, 65, 14)	hsl(24, 82%, 30%)
Lake Lucerne	rgb(94, 161, 182)	hsl(194, 38%, 54%)
Oceanic Noir	rgb(23, 46, 56)	hsl(198, 42%, 15%)
Fatty Sashimi	rgb(237, 193, 172)	hsl(19, 64%, 80%)

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.

Aa8.64:1 Very good#172E38 on #EDC1AC
Aa8.64:1 Very good#EDC1AC on #172E38
Aa4.88:1 Good#5EA1B6 on #172E38
Aa4.88:1 Good#172E38 on #5EA1B6
Aa4.43:1 Poor#8D410E on #EDC1AC
Aa4.43:1 Poor#EDC1AC on #8D410E

Color blindness preview

CSS variables

/* Otterly Brown to Fatty Sashimi — https://swatchly.xyz/palette/8d410e-5ea1b6-172e38-edc1ac */
:root {
  --otterly-brown: #8d410e;
  --lake-lucerne: #5ea1b6;
  --oceanic-noir: #172e38;
  --fatty-sashimi: #edc1ac;
}

Tailwind CSS v4

/* Otterly Brown to Fatty Sashimi — https://swatchly.xyz/palette/8d410e-5ea1b6-172e38-edc1ac */
@theme {
  --color-otterly-brown: #8d410e;
  --color-otterly-brown-50: #fff2ec;
  --color-otterly-brown-100: #ffe5d8;
  --color-otterly-brown-200: #ffccb2;
  --color-otterly-brown-300: #f9af89;
  --color-otterly-brown-400: #dd8e63;
  --color-otterly-brown-500: #c27245;
  --color-otterly-brown-600: #a5582b;
  --color-otterly-brown-700: #8d410e;
  --color-otterly-brown-800: #703106;
  --color-otterly-brown-900: #592400;
  --color-otterly-brown-950: #3a1500;
  --color-lake-lucerne: #5ea1b6;
  --color-lake-lucerne-50: #dcf6ff;
  --color-lake-lucerne-100: #c2edfc;
  --color-lake-lucerne-200: #a5d9ea;
  --color-lake-lucerne-300: #86c2d5;
  --color-lake-lucerne-400: #5ea1b6;
  --color-lake-lucerne-500: #44879c;
  --color-lake-lucerne-600: #2c6e81;
  --color-lake-lucerne-700: #1a596a;
  --color-lake-lucerne-800: #0c4655;
  --color-lake-lucerne-900: #043744;
  --color-lake-lucerne-950: #01242d;
  --color-oceanic-noir: #172e38;
  --color-oceanic-noir-50: #e9f8ff;
  --color-oceanic-noir-100: #ddeef7;
  --color-oceanic-noir-200: #c7dbe5;
  --color-oceanic-noir-300: #aec5d0;
  --color-oceanic-noir-400: #8ba4b0;
  --color-oceanic-noir-500: #6e8793;
  --color-oceanic-noir-600: #536b76;
  --color-oceanic-noir-700: #3e535d;
  --color-oceanic-noir-800: #2c3e47;
  --color-oceanic-noir-900: #172e38;
  --color-oceanic-noir-950: #101b1f;
  --color-fatty-sashimi: #edc1ac;
  --color-fatty-sashimi-50: #fff9f7;
  --color-fatty-sashimi-100: #ffefe7;
  --color-fatty-sashimi-200: #f8d9cb;
  --color-fatty-sashimi-300: #edc1ac;
  --color-fatty-sashimi-400: #c8a08d;
  --color-fatty-sashimi-500: #ab836f;
  --color-fatty-sashimi-600: #8d6754;
  --color-fatty-sashimi-700: #724f3e;
  --color-fatty-sashimi-800: #5a3c2d;
  --color-fatty-sashimi-900: #452c1f;
  --color-fatty-sashimi-950: #2c1a11;
}