Sea Lion to Night Market Color Palette

About this palette

Sea Lion to Night Market is a 5-color muted palette: #7C889D (Sea Lion), #3B2F21 (Cola), #DCE7F8 (Freeze Up), #CAB19A (Frappé), #4D607A (Night Market). It mixes gray, orange, blue tones and feels balanced overall. The strongest text pairing is #3B2F21 on #DCE7F8 with a contrast ratio of 10.42:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Lion	rgb(124, 136, 157)	hsl(218, 14%, 55%)
Cola	rgb(59, 47, 33)	hsl(32, 28%, 18%)
Freeze Up	rgb(220, 231, 248)	hsl(216, 67%, 92%)
Frappé	rgb(202, 177, 154)	hsl(29, 31%, 70%)
Night Market	rgb(77, 96, 122)	hsl(215, 23%, 39%)

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.

Aa10.42:1 Very good#3B2F21 on #DCE7F8
Aa10.42:1 Very good#DCE7F8 on #3B2F21
Aa6.36:1 Good#3B2F21 on #CAB19A
Aa6.36:1 Good#CAB19A on #3B2F21
Aa5.15:1 Good#DCE7F8 on #4D607A
Aa5.15:1 Good#4D607A on #DCE7F8
Aa3.63:1 Poor#7C889D on #3B2F21
Aa3.63:1 Poor#3B2F21 on #7C889D

Color blindness preview

CSS variables

/* Sea Lion to Night Market — https://swatchly.xyz/palette/7c889d-3b2f21-dce7f8-cab19a-4d607a */
:root {
  --sea-lion: #7c889d;
  --cola: #3b2f21;
  --freeze-up: #dce7f8;
  --frapp: #cab19a;
  --night-market: #4d607a;
}

Tailwind CSS v4

/* Sea Lion to Night Market — https://swatchly.xyz/palette/7c889d-3b2f21-dce7f8-cab19a-4d607a */
@theme {
  --color-sea-lion: #7c889d;
  --color-sea-lion-50: #f0f6ff;
  --color-sea-lion-100: #e4ecfa;
  --color-sea-lion-200: #cfd9ea;
  --color-sea-lion-300: #b7c2d6;
  --color-sea-lion-400: #97a3b8;
  --color-sea-lion-500: #7c889d;
  --color-sea-lion-600: #626d81;
  --color-sea-lion-700: #4c5668;
  --color-sea-lion-800: #3a4353;
  --color-sea-lion-900: #2c3341;
  --color-sea-lion-950: #1a2029;
  --color-cola: #3b2f21;
  --color-cola-50: #fcf4ea;
  --color-cola-100: #f3e9de;
  --color-cola-200: #e1d5c8;
  --color-cola-300: #ccbfb0;
  --color-cola-400: #ad9f8f;
  --color-cola-500: #918373;
  --color-cola-600: #766859;
  --color-cola-700: #5e5244;
  --color-cola-800: #4a3f33;
  --color-cola-900: #3b2f21;
  --color-cola-950: #231d16;
  --color-freeze-up: #dce7f8;
  --color-freeze-up-50: #ebf1fb;
  --color-freeze-up-100: #dce7f8;
  --color-freeze-up-200: #ccd4e1;
  --color-freeze-up-300: #b5becd;
  --color-freeze-up-400: #96a0af;
  --color-freeze-up-500: #7b8595;
  --color-freeze-up-600: #626c7a;
  --color-freeze-up-700: #4d5663;
  --color-freeze-up-800: #3b434e;
  --color-freeze-up-900: #2d333d;
  --color-freeze-up-950: #1b2026;
  --color-frapp: #cab19a;
  --color-frapp-50: #fcecde;
  --color-frapp-100: #f2e0d0;
  --color-frapp-200: #dfcab8;
  --color-frapp-300: #cab19a;
  --color-frapp-400: #ac947e;
  --color-frapp-500: #927a65;
  --color-frapp-600: #78624e;
  --color-frapp-700: #624e3b;
  --color-frapp-800: #4e3d2d;
  --color-frapp-900: #3e3022;
  --color-frapp-950: #271d13;
  --color-night-market: #4d607a;
  --color-night-market-50: #eff6ff;
  --color-night-market-100: #dfecff;
  --color-night-market-200: #cbdbf1;
  --color-night-market-300: #b4c6df;
  --color-night-market-400: #95a8c4;
  --color-night-market-500: #7a8faa;
  --color-night-market-600: #627590;
  --color-night-market-700: #4d607a;
  --color-night-market-800: #3b4b61;
  --color-night-market-900: #2c394c;
  --color-night-market-950: #1a2431;
}