Fatty Sashimi to Nordic Noir Color Palette

About this palette

Fatty Sashimi to Nordic Noir is a 4-color vintage palette: #F9BEAF (Fatty Sashimi), #2A9DAF (Rainy Mood), #825C50 (Acorn), #00343F (Nordic Noir). It mixes pink, turquoise, red, blue tones and feels balanced overall. The strongest text pairing is #F9BEAF on #00343F with a contrast ratio of 8.33:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fatty Sashimi	rgb(249, 190, 175)	hsl(12, 86%, 83%)
Rainy Mood	rgb(42, 157, 175)	hsl(188, 61%, 43%)
Acorn	rgb(130, 92, 80)	hsl(14, 24%, 41%)
Nordic Noir	rgb(0, 52, 63)	hsl(190, 100%, 12%)

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.33:1 Very good#F9BEAF on #00343F
Aa8.33:1 Very good#00343F on #F9BEAF
Aa4.18:1 Poor#2A9DAF on #00343F
Aa4.18:1 Poor#00343F on #2A9DAF
Aa3.62:1 Poor#F9BEAF on #825C50
Aa3.62:1 Poor#825C50 on #F9BEAF

Color blindness preview

CSS variables

/* Fatty Sashimi to Nordic Noir — https://swatchly.xyz/palette/f9beaf-2a9daf-825c50-00343f */
:root {
  --fatty-sashimi: #f9beaf;
  --rainy-mood: #2a9daf;
  --acorn: #825c50;
  --nordic-noir: #00343f;
}

Tailwind CSS v4

/* Fatty Sashimi to Nordic Noir — https://swatchly.xyz/palette/f9beaf-2a9daf-825c50-00343f */
@theme {
  --color-fatty-sashimi: #f9beaf;
  --color-fatty-sashimi-50: #ffe9e4;
  --color-fatty-sashimi-100: #ffdad0;
  --color-fatty-sashimi-200: #f9beaf;
  --color-fatty-sashimi-300: #dfab9e;
  --color-fatty-sashimi-400: #c38c7f;
  --color-fatty-sashimi-500: #a87265;
  --color-fatty-sashimi-600: #8d5a4e;
  --color-fatty-sashimi-700: #74463b;
  --color-fatty-sashimi-800: #5e362c;
  --color-fatty-sashimi-900: #4a2820;
  --color-fatty-sashimi-950: #301812;
  --color-rainy-mood: #2a9daf;
  --color-rainy-mood-50: #e6fbff;
  --color-rainy-mood-100: #cbf7ff;
  --color-rainy-mood-200: #a2e9f6;
  --color-rainy-mood-300: #81d5e4;
  --color-rainy-mood-400: #54b7c9;
  --color-rainy-mood-500: #2a9daf;
  --color-rainy-mood-600: #008090;
  --color-rainy-mood-700: #006573;
  --color-rainy-mood-800: #004f5a;
  --color-rainy-mood-900: #003c45;
  --color-rainy-mood-950: #00252b;
  --color-acorn: #825c50;
  --color-acorn-50: #fff2ee;
  --color-acorn-100: #ffe3db;
  --color-acorn-200: #eecdc3;
  --color-acorn-300: #dab4a9;
  --color-acorn-400: #bb9386;
  --color-acorn-500: #9f776a;
  --color-acorn-600: #825c50;
  --color-acorn-700: #69483d;
  --color-acorn-800: #54372e;
  --color-acorn-900: #422a22;
  --color-acorn-950: #2a1913;
  --color-nordic-noir: #00343f;
  --color-nordic-noir-50: #e5f9ff;
  --color-nordic-noir-100: #d4f1fa;
  --color-nordic-noir-200: #bbdfe9;
  --color-nordic-noir-300: #a0c9d4;
  --color-nordic-noir-400: #7ca9b5;
  --color-nordic-noir-500: #5e8c99;
  --color-nordic-noir-600: #44717d;
  --color-nordic-noir-700: #305863;
  --color-nordic-noir-800: #20444d;
  --color-nordic-noir-900: #00343f;
  --color-nordic-noir-950: #0a1f24;
}