Lost in Time to Turtle color palette

99B3C7Lost in Time 709EBDLake Lucerne ECDAC4Oatmeal Cookie 456279Night Market 241C17Dark Orchestra 533C28Turtle

Open in generator Export PNG, PDF, ASE…

About this palette

Lost in Time to Turtle is a 6-color muted palette: #99B3C7 (Lost in Time), #709EBD (Lake Lucerne), #ECDAC4 (Oatmeal Cookie), #456279 (Night Market), #241C17 (Dark Orchestra), #533C28 (Turtle). It mixes blue, orange, gray, brown tones and feels cool overall. The strongest text pairing is #ECDAC4 on #241C17 with a contrast ratio of 12.28:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lost in Time	rgb(153, 179, 199)	hsl(206, 29%, 69%)
Lake Lucerne	rgb(112, 158, 189)	hsl(204, 37%, 59%)
Oatmeal Cookie	rgb(236, 218, 196)	hsl(33, 51%, 85%)
Night Market	rgb(69, 98, 121)	hsl(207, 27%, 37%)
Dark Orchestra	rgb(36, 28, 23)	hsl(23, 22%, 12%)
Turtle	rgb(83, 60, 40)	hsl(28, 35%, 24%)

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.

Aa12.28:1 Super#ECDAC4 on #241C17
Aa12.28:1 Super#241C17 on #ECDAC4
Aa7.68:1 Very good#99B3C7 on #241C17
Aa7.68:1 Very good#241C17 on #99B3C7
Aa7.53:1 Very good#ECDAC4 on #533C28
Aa7.53:1 Very good#533C28 on #ECDAC4
Aa5.84:1 Good#709EBD on #241C17
Aa5.84:1 Good#241C17 on #709EBD

Color blindness preview

CSS variables

/* Lost in Time to Turtle — https://swatchly.xyz/palette/99b3c7-709ebd-ecdac4-456279-241c17-533c28 */
:root {
  --lost-in-time: #99b3c7;
  --lake-lucerne: #709ebd;
  --oatmeal-cookie: #ecdac4;
  --night-market: #456279;
  --dark-orchestra: #241c17;
  --turtle: #533c28;
}

Tailwind CSS v4

/* Lost in Time to Turtle — https://swatchly.xyz/palette/99b3c7-709ebd-ecdac4-456279-241c17-533c28 */
@theme {
  --color-lost-in-time: #99b3c7;
  --color-lost-in-time-50: #f5fbff;
  --color-lost-in-time-100: #e7f5ff;
  --color-lost-in-time-200: #d1e4f2;
  --color-lost-in-time-300: #bbd0e0;
  --color-lost-in-time-400: #99b3c7;
  --color-lost-in-time-500: #7c95a8;
  --color-lost-in-time-600: #5f788a;
  --color-lost-in-time-700: #485e6f;
  --color-lost-in-time-800: #354958;
  --color-lost-in-time-900: #263743;
  --color-lost-in-time-950: #152129;
  --color-lake-lucerne: #709ebd;
  --color-lake-lucerne-50: #e5f4ff;
  --color-lake-lucerne-100: #cdebff;
  --color-lake-lucerne-200: #b1d6f0;
  --color-lake-lucerne-300: #95bfdb;
  --color-lake-lucerne-400: #709ebd;
  --color-lake-lucerne-500: #5784a2;
  --color-lake-lucerne-600: #406b87;
  --color-lake-lucerne-700: #2e566f;
  --color-lake-lucerne-800: #21445a;
  --color-lake-lucerne-900: #173548;
  --color-lake-lucerne-950: #0b222f;
  --color-oatmeal-cookie: #ecdac4;
  --color-oatmeal-cookie-50: #fff8ef;
  --color-oatmeal-cookie-100: #f9eee1;
  --color-oatmeal-cookie-200: #ecdac4;
  --color-oatmeal-cookie-300: #d2c3b1;
  --color-oatmeal-cookie-400: #b2a28e;
  --color-oatmeal-cookie-500: #968672;
  --color-oatmeal-cookie-600: #7a6b57;
  --color-oatmeal-cookie-700: #625342;
  --color-oatmeal-cookie-800: #4c4031;
  --color-oatmeal-cookie-900: #3b3124;
  --color-oatmeal-cookie-950: #251e15;
  --color-night-market: #456279;
  --color-night-market-50: #edf7ff;
  --color-night-market-100: #daeeff;
  --color-night-market-200: #c5ddf0;
  --color-night-market-300: #aec8de;
  --color-night-market-400: #8dabc3;
  --color-night-market-500: #7291a9;
  --color-night-market-600: #5a788f;
  --color-night-market-700: #456279;
  --color-night-market-800: #344d60;
  --color-night-market-900: #263b4b;
  --color-night-market-950: #162531;
  --color-dark-orchestra: #241c17;
  --color-dark-orchestra-50: #faf4f0;
  --color-dark-orchestra-100: #f1eae5;
  --color-dark-orchestra-200: #ded6d0;
  --color-dark-orchestra-300: #c8bfb9;
  --color-dark-orchestra-400: #a99f99;
  --color-dark-orchestra-500: #8e847d;
  --color-dark-orchestra-600: #736963;
  --color-dark-orchestra-700: #5b524d;
  --color-dark-orchestra-800: #47403b;
  --color-dark-orchestra-900: #37302c;
  --color-dark-orchestra-950: #241c17;
  --color-turtle: #533c28;
  --color-turtle-50: #fff3e9;
  --color-turtle-100: #fae8d9;
  --color-turtle-200: #e8d3c2;
  --color-turtle-300: #d4bca8;
  --color-turtle-400: #b69c86;
  --color-turtle-500: #9a806a;
  --color-turtle-600: #7e6651;
  --color-turtle-700: #664f3d;
  --color-turtle-800: #533c28;
  --color-turtle-900: #3f2e20;
  --color-turtle-950: #281c12;
}