Bay View to Underworld Color Palette

About this palette

Bay View to Underworld is a 5-color muted, cool palette: #6A869E (Bay View), #465871 (Inkjet), #D3ACAF (Strawberry Latte), #D9E7CF (Peppermint), #20261F (Underworld). It mixes blue, pink, green, gray tones and feels cool overall. The strongest text pairing is #D9E7CF on #20261F with a contrast ratio of 11.99:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bay View	rgb(106, 134, 158)	hsl(208, 21%, 52%)
Inkjet	rgb(70, 88, 113)	hsl(215, 23%, 36%)
Strawberry Latte	rgb(211, 172, 175)	hsl(355, 31%, 75%)
Peppermint	rgb(217, 231, 207)	hsl(95, 33%, 86%)
Underworld	rgb(32, 38, 31)	hsl(111, 10%, 14%)

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.

Aa11.99:1 Very good#D9E7CF on #20261F
Aa11.99:1 Very good#20261F on #D9E7CF
Aa7.57:1 Very good#D3ACAF on #20261F
Aa7.57:1 Very good#20261F on #D3ACAF
Aa5.62:1 Good#465871 on #D9E7CF
Aa5.62:1 Good#D9E7CF on #465871
Aa4.06:1 Poor#6A869E on #20261F
Aa4.06:1 Poor#20261F on #6A869E

Color blindness preview

CSS variables

/* Bay View to Underworld — https://swatchly.xyz/palette/6a869e-465871-d3acaf-d9e7cf-20261f */
:root {
  --bay-view: #6a869e;
  --inkjet: #465871;
  --strawberry-latte: #d3acaf;
  --peppermint: #d9e7cf;
  --underworld: #20261f;
}

Tailwind CSS v4

/* Bay View to Underworld — https://swatchly.xyz/palette/6a869e-465871-d3acaf-d9e7cf-20261f */
@theme {
  --color-bay-view: #6a869e;
  --color-bay-view-50: #ecf6ff;
  --color-bay-view-100: #d9edfd;
  --color-bay-view-200: #c2d9ec;
  --color-bay-view-300: #a8c2d8;
  --color-bay-view-400: #86a2ba;
  --color-bay-view-500: #6a869e;
  --color-bay-view-600: #526c83;
  --color-bay-view-700: #3e566a;
  --color-bay-view-800: #2e4355;
  --color-bay-view-900: #223443;
  --color-bay-view-950: #13202b;
  --color-inkjet: #465871;
  --color-inkjet-50: #eff6ff;
  --color-inkjet-100: #dfecff;
  --color-inkjet-200: #cad9ef;
  --color-inkjet-300: #b1c3dc;
  --color-inkjet-400: #91a4bf;
  --color-inkjet-500: #7589a4;
  --color-inkjet-600: #5c6e88;
  --color-inkjet-700: #465871;
  --color-inkjet-800: #364559;
  --color-inkjet-900: #283546;
  --color-inkjet-950: #18202d;
  --color-strawberry-latte: #d3acaf;
  --color-strawberry-latte-50: #ffeaec;
  --color-strawberry-latte-100: #f8dddf;
  --color-strawberry-latte-200: #e6c6c9;
  --color-strawberry-latte-300: #d3acaf;
  --color-strawberry-latte-400: #b48f92;
  --color-strawberry-latte-500: #9a7578;
  --color-strawberry-latte-600: #7f5d60;
  --color-strawberry-latte-700: #68494c;
  --color-strawberry-latte-800: #53393b;
  --color-strawberry-latte-900: #422c2e;
  --color-strawberry-latte-950: #2a1a1c;
  --color-peppermint: #d9e7cf;
  --color-peppermint-50: #e8f0e2;
  --color-peppermint-100: #d9e7cf;
  --color-peppermint-200: #c9d4c1;
  --color-peppermint-300: #b3bfab;
  --color-peppermint-400: #95a28c;
  --color-peppermint-500: #7b8872;
  --color-peppermint-600: #636f5a;
  --color-peppermint-700: #4f5947;
  --color-peppermint-800: #3c4636;
  --color-peppermint-900: #2e3628;
  --color-peppermint-950: #1c2117;
  --color-underworld: #20261f;
  --color-underworld-50: #f2f7f1;
  --color-underworld-100: #e8ede7;
  --color-underworld-200: #d3d9d2;
  --color-underworld-300: #bcc3bb;
  --color-underworld-400: #9da49b;
  --color-underworld-500: #828a81;
  --color-underworld-600: #697068;
  --color-underworld-700: #545a53;
  --color-underworld-800: #424841;
  --color-underworld-900: #343933;
  --color-underworld-950: #20261f;
}