Starship Tonic to Horizon color palette

CBE6E9Starship Tonic C6A8CANovel Lilac 433D2EBatch Brew 76674DTreasure Chest 568D96Horizon

About this palette

Starship Tonic to Horizon is a 5-color muted palette: #CBE6E9 (Starship Tonic), #C6A8CA (Novel Lilac), #433D2E (Batch Brew), #76674D (Treasure Chest), #568D96 (Horizon). It mixes gray, pink, brown, turquoise tones and feels cool overall. The strongest text pairing is #CBE6E9 on #433D2E with a contrast ratio of 8.24:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Starship Tonic	rgb(203, 230, 233)	hsl(186, 41%, 85%)
Novel Lilac	rgb(198, 168, 202)	hsl(293, 24%, 73%)
Batch Brew	rgb(67, 61, 46)	hsl(43, 19%, 22%)
Treasure Chest	rgb(118, 103, 77)	hsl(38, 21%, 38%)
Horizon	rgb(86, 141, 150)	hsl(188, 27%, 46%)

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.24:1 Very good#CBE6E9 on #433D2E
Aa8.24:1 Very good#433D2E on #CBE6E9
Aa5.07:1 Good#C6A8CA on #433D2E
Aa5.07:1 Good#433D2E on #C6A8CA
Aa4.20:1 Poor#CBE6E9 on #76674D
Aa4.20:1 Poor#76674D on #CBE6E9

Color blindness preview

CSS variables

/* Starship Tonic to Horizon — https://swatchly.xyz/palette/cbe6e9-c6a8ca-433d2e-76674d-568d96 */
:root {
  --starship-tonic: #cbe6e9;
  --novel-lilac: #c6a8ca;
  --batch-brew: #433d2e;
  --treasure-chest: #76674d;
  --horizon: #568d96;
}

Tailwind CSS v4

/* Starship Tonic to Horizon — https://swatchly.xyz/palette/cbe6e9-c6a8ca-433d2e-76674d-568d96 */
@theme {
  --color-starship-tonic: #cbe6e9;
  --color-starship-tonic-50: #f1feff;
  --color-starship-tonic-100: #e7f6f8;
  --color-starship-tonic-200: #cbe6e9;
  --color-starship-tonic-300: #b7cdcf;
  --color-starship-tonic-400: #94acaf;
  --color-starship-tonic-500: #768f92;
  --color-starship-tonic-600: #5b7376;
  --color-starship-tonic-700: #455b5d;
  --color-starship-tonic-800: #334648;
  --color-starship-tonic-900: #263638;
  --color-starship-tonic-950: #162223;
  --color-novel-lilac: #c6a8ca;
  --color-novel-lilac-50: #fae7fc;
  --color-novel-lilac-100: #efdaf2;
  --color-novel-lilac-200: #dbc3df;
  --color-novel-lilac-300: #c6a8ca;
  --color-novel-lilac-400: #a88cac;
  --color-novel-lilac-500: #8f7393;
  --color-novel-lilac-600: #765b79;
  --color-novel-lilac-700: #604863;
  --color-novel-lilac-800: #4d3850;
  --color-novel-lilac-900: #3d2b40;
  --color-novel-lilac-950: #271a29;
  --color-batch-brew: #433d2e;
  --color-batch-brew-50: #f9f5eb;
  --color-batch-brew-100: #efebdf;
  --color-batch-brew-200: #dcd7ca;
  --color-batch-brew-300: #c6bfb0;
  --color-batch-brew-400: #a69f8e;
  --color-batch-brew-500: #8a8372;
  --color-batch-brew-600: #6e6858;
  --color-batch-brew-700: #565142;
  --color-batch-brew-800: #433d2e;
  --color-batch-brew-900: #332f24;
  --color-batch-brew-950: #1f1c15;
  --color-treasure-chest: #76674d;
  --color-treasure-chest-50: #fdf4e4;
  --color-treasure-chest-100: #f4e9d7;
  --color-treasure-chest-200: #e1d5bf;
  --color-treasure-chest-300: #ccbea5;
  --color-treasure-chest-400: #ad9e83;
  --color-treasure-chest-500: #918267;
  --color-treasure-chest-600: #76674d;
  --color-treasure-chest-700: #5e513a;
  --color-treasure-chest-800: #4b3f2b;
  --color-treasure-chest-900: #3a301f;
  --color-treasure-chest-950: #241d11;
  --color-horizon: #568d96;
  --color-horizon-50: #dffaff;
  --color-horizon-100: #cef1f7;
  --color-horizon-200: #b4dee6;
  --color-horizon-300: #98c8d0;
  --color-horizon-400: #74a9b2;
  --color-horizon-500: #568d96;
  --color-horizon-600: #3d737b;
  --color-horizon-700: #2a5c63;
  --color-horizon-800: #1c484f;
  --color-horizon-900: #12383e;
  --color-horizon-950: #072327;
}