Wasabi Nori to Sky High Color Palette

About this palette

Wasabi Nori to Sky High is a 5-color warm, vintage palette: #413200 (Wasabi Nori), #794A48 (Veil of Cinder), #028591 (Cruising), #EE898B (Vinaceous Cinnamon), #AEC5ED (Sky High). It mixes brown, red, turquoise, blue tones and feels warm overall. The strongest text pairing is #413200 on #AEC5ED with a contrast ratio of 7.14:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wasabi Nori	rgb(65, 50, 0)	hsl(46, 100%, 13%)
Veil of Cinder	rgb(121, 74, 72)	hsl(2, 25%, 38%)
Cruising	rgb(2, 133, 145)	hsl(185, 97%, 29%)
Vinaceous Cinnamon	rgb(238, 137, 139)	hsl(359, 75%, 74%)
Sky High	rgb(174, 197, 237)	hsl(218, 64%, 81%)

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.14:1 Very good#413200 on #AEC5ED
Aa7.14:1 Very good#AEC5ED on #413200
Aa5.11:1 Good#413200 on #EE898B
Aa5.11:1 Good#EE898B on #413200
Aa4.16:1 Poor#794A48 on #AEC5ED
Aa4.16:1 Poor#AEC5ED on #794A48

Color blindness preview

CSS variables

/* Wasabi Nori to Sky High — https://swatchly.xyz/palette/413200-794a48-028591-ee898b-aec5ed */
:root {
  --wasabi-nori: #413200;
  --veil-of-cinder: #794a48;
  --cruising: #028591;
  --vinaceous-cinnamon: #ee898b;
  --sky-high: #aec5ed;
}

Tailwind CSS v4

/* Wasabi Nori to Sky High — https://swatchly.xyz/palette/413200-794a48-028591-ee898b-aec5ed */
@theme {
  --color-wasabi-nori: #413200;
  --color-wasabi-nori-50: #fef5da;
  --color-wasabi-nori-100: #f6ebcd;
  --color-wasabi-nori-200: #e4d7b3;
  --color-wasabi-nori-300: #cfc098;
  --color-wasabi-nori-400: #b1a174;
  --color-wasabi-nori-500: #968557;
  --color-wasabi-nori-600: #7b6b3f;
  --color-wasabi-nori-700: #63552c;
  --color-wasabi-nori-800: #4f421d;
  --color-wasabi-nori-900: #413200;
  --color-wasabi-nori-950: #271f08;
  --color-veil-of-cinder: #794a48;
  --color-veil-of-cinder-50: #fff2f1;
  --color-veil-of-cinder-100: #ffe4e2;
  --color-veil-of-cinder-200: #f6cdca;
  --color-veil-of-cinder-300: #e4b5b2;
  --color-veil-of-cinder-400: #c79592;
  --color-veil-of-cinder-500: #ad7977;
  --color-veil-of-cinder-600: #91605e;
  --color-veil-of-cinder-700: #794a48;
  --color-veil-of-cinder-800: #603937;
  --color-veil-of-cinder-900: #4b2b29;
  --color-veil-of-cinder-950: #311918;
  --color-cruising: #028591;
  --color-cruising-50: #dffbff;
  --color-cruising-100: #c3f8ff;
  --color-cruising-200: #a4e9f2;
  --color-cruising-300: #85d6e0;
  --color-cruising-400: #5ab9c4;
  --color-cruising-500: #359fab;
  --color-cruising-600: #028591;
  --color-cruising-700: #006a74;
  --color-cruising-800: #00535a;
  --color-cruising-900: #003f46;
  --color-cruising-950: #00282c;
  --color-vinaceous-cinnamon: #ee898b;
  --color-vinaceous-cinnamon-50: #fff6f6;
  --color-vinaceous-cinnamon-100: #ffeaea;
  --color-vinaceous-cinnamon-200: #ffd1d0;
  --color-vinaceous-cinnamon-300: #ffb1b1;
  --color-vinaceous-cinnamon-400: #ee898b;
  --color-vinaceous-cinnamon-500: #cd6c6f;
  --color-vinaceous-cinnamon-600: #ad5054;
  --color-vinaceous-cinnamon-700: #8f393e;
  --color-vinaceous-cinnamon-800: #73282d;
  --color-vinaceous-cinnamon-900: #5a1b20;
  --color-vinaceous-cinnamon-950: #3a0d11;
  --color-sky-high: #aec5ed;
  --color-sky-high-50: #f2f7ff;
  --color-sky-high-100: #e4eeff;
  --color-sky-high-200: #cadbf9;
  --color-sky-high-300: #aec5ed;
  --color-sky-high-400: #90a5ca;
  --color-sky-high-500: #7389ae;
  --color-sky-high-600: #596e91;
  --color-sky-high-700: #445676;
  --color-sky-high-800: #33435f;
  --color-sky-high-900: #26334a;
  --color-sky-high-950: #161f30;
}