Lost in Time to Smoky Charcoal color palette

A6ADBELost in Time 5F7F72Ecological DBC6D2Light Lilac 5F5141Volcanic Island 31272DSmoky Charcoal

About this palette

Lost in Time to Smoky Charcoal is a 5-color muted palette: #A6ADBE (Lost in Time), #5F7F72 (Ecological), #DBC6D2 (Light Lilac), #5F5141 (Volcanic Island), #31272D (Smoky Charcoal). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #DBC6D2 on #31272D with a contrast ratio of 8.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lost in Time	rgb(166, 173, 190)	hsl(222, 16%, 70%)
Ecological	rgb(95, 127, 114)	hsl(156, 14%, 44%)
Light Lilac	rgb(219, 198, 210)	hsl(326, 23%, 82%)
Volcanic Island	rgb(95, 81, 65)	hsl(32, 19%, 31%)
Smoky Charcoal	rgb(49, 39, 45)	hsl(324, 11%, 17%)

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.93:1 Very good#DBC6D2 on #31272D
Aa8.93:1 Very good#31272D on #DBC6D2
Aa6.40:1 Good#A6ADBE on #31272D
Aa6.40:1 Good#31272D on #A6ADBE
Aa4.75:1 Good#DBC6D2 on #5F5141
Aa4.75:1 Good#5F5141 on #DBC6D2
Aa3.41:1 Poor#A6ADBE on #5F5141
Aa3.41:1 Poor#5F5141 on #A6ADBE

Color blindness preview

CSS variables

/* Lost in Time to Smoky Charcoal — https://swatchly.xyz/palette/a6adbe-5f7f72-dbc6d2-5f5141-31272d */
:root {
  --lost-in-time: #a6adbe;
  --ecological: #5f7f72;
  --light-lilac: #dbc6d2;
  --volcanic-island: #5f5141;
  --smoky-charcoal: #31272d;
}

Tailwind CSS v4

/* Lost in Time to Smoky Charcoal — https://swatchly.xyz/palette/a6adbe-5f7f72-dbc6d2-5f5141-31272d */
@theme {
  --color-lost-in-time: #a6adbe;
  --color-lost-in-time-50: #f7f9ff;
  --color-lost-in-time-100: #edf1fc;
  --color-lost-in-time-200: #dae0ec;
  --color-lost-in-time-300: #c5cbd9;
  --color-lost-in-time-400: #a6adbe;
  --color-lost-in-time-500: #898fa0;
  --color-lost-in-time-600: #6c7382;
  --color-lost-in-time-700: #545a69;
  --color-lost-in-time-800: #404652;
  --color-lost-in-time-900: #30343f;
  --color-lost-in-time-950: #1c1f26;
  --color-ecological: #5f7f72;
  --color-ecological-50: #e7faf2;
  --color-ecological-100: #def3ea;
  --color-ecological-200: #cae2d8;
  --color-ecological-300: #b2cfc3;
  --color-ecological-400: #92b2a5;
  --color-ecological-500: #78988b;
  --color-ecological-600: #5f7f72;
  --color-ecological-700: #48665a;
  --color-ecological-800: #355045;
  --color-ecological-900: #273d34;
  --color-ecological-950: #162620;
  --color-light-lilac: #dbc6d2;
  --color-light-lilac-50: #f7eaf1;
  --color-light-lilac-100: #ecdde6;
  --color-light-lilac-200: #dbc6d2;
  --color-light-lilac-300: #c5b2bd;
  --color-light-lilac-400: #a894a0;
  --color-light-lilac-500: #8e7b86;
  --color-light-lilac-600: #75636d;
  --color-light-lilac-700: #5f4e58;
  --color-light-lilac-800: #4c3d46;
  --color-light-lilac-900: #3b2f36;
  --color-light-lilac-950: #251c21;
  --color-volcanic-island: #5f5141;
  --color-volcanic-island-50: #fdf3e9;
  --color-volcanic-island-100: #f4e9de;
  --color-volcanic-island-200: #e1d5c7;
  --color-volcanic-island-300: #ccbeae;
  --color-volcanic-island-400: #ad9e8d;
  --color-volcanic-island-500: #918271;
  --color-volcanic-island-600: #766857;
  --color-volcanic-island-700: #5f5141;
  --color-volcanic-island-800: #4a3f32;
  --color-volcanic-island-900: #393025;
  --color-volcanic-island-950: #241d16;
  --color-smoky-charcoal: #31272d;
  --color-smoky-charcoal-50: #faf3f7;
  --color-smoky-charcoal-100: #f1e8ed;
  --color-smoky-charcoal-200: #ded4da;
  --color-smoky-charcoal-300: #c8bdc4;
  --color-smoky-charcoal-400: #a89ca3;
  --color-smoky-charcoal-500: #8b7f86;
  --color-smoky-charcoal-600: #6f636a;
  --color-smoky-charcoal-700: #564c52;
  --color-smoky-charcoal-800: #41383d;
  --color-smoky-charcoal-900: #31272d;
  --color-smoky-charcoal-950: #1c171a;
}