Start generating

Tardis Blue to Salty Ice color palette

003D69Tardis Blue834D00Milk ChocolateB15394Magenta Memoir00A47ABejewelled7FC08AExhilarating GreenC9E5FFSalty Ice
Open in generator Export PNG, PDF, ASE…

About this palette

Tardis Blue to Salty Ice is a 6-color cool palette: #003D69 (Tardis Blue), #834D00 (Milk Chocolate), #B15394 (Magenta Memoir), #00A47A (Bejewelled), #7FC08A (Exhilarating Green), #C9E5FF (Salty Ice). It mixes blue, brown, red, turquoise, green tones and feels cool overall. The strongest text pairing is #003D69 on #C9E5FF with a contrast ratio of 8.62:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Tardis Bluergb(0, 61, 105)hsl(205, 100%, 21%)
Milk Chocolatergb(131, 77, 0)hsl(35, 100%, 26%)
Magenta Memoirrgb(177, 83, 148)hsl(319, 38%, 51%)
Bejewelledrgb(0, 164, 122)hsl(165, 100%, 32%)
Exhilarating Greenrgb(127, 192, 138)hsl(130, 34%, 63%)
Salty Icergb(201, 229, 255)hsl(209, 100%, 89%)

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.62:1 Very good#003D69 on #C9E5FF
  • Aa8.62:1 Very good#C9E5FF on #003D69
  • Aa5.33:1 Good#834D00 on #C9E5FF
  • Aa5.33:1 Good#C9E5FF on #834D00
  • Aa5.24:1 Good#003D69 on #7FC08A
  • Aa5.24:1 Good#7FC08A on #003D69
  • Aa3.56:1 Poor#B15394 on #C9E5FF
  • Aa3.56:1 Poor#C9E5FF on #B15394

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Tardis Blue to Salty Ice — https://swatchly.xyz/palette/003d69-834d00-b15394-00a47a-7fc08a-c9e5ff */
:root {
  --tardis-blue: #003d69;
  --milk-chocolate: #834d00;
  --magenta-memoir: #b15394;
  --bejewelled: #00a47a;
  --exhilarating-green: #7fc08a;
  --salty-ice: #c9e5ff;
}

Tailwind CSS v4

/* Tardis Blue to Salty Ice — https://swatchly.xyz/palette/003d69-834d00-b15394-00a47a-7fc08a-c9e5ff */
@theme {
  --color-tardis-blue: #003d69;
  --color-tardis-blue-50: #eef6ff;
  --color-tardis-blue-100: #dceeff;
  --color-tardis-blue-200: #b8dcff;
  --color-tardis-blue-300: #96c5f2;
  --color-tardis-blue-400: #70a4d5;
  --color-tardis-blue-500: #5287b8;
  --color-tardis-blue-600: #376a98;
  --color-tardis-blue-700: #23527b;
  --color-tardis-blue-800: #003d69;
  --color-tardis-blue-900: #0d2f4c;
  --color-tardis-blue-950: #051c30;
  --color-milk-chocolate: #834d00;
  --color-milk-chocolate-50: #fff3e7;
  --color-milk-chocolate-100: #ffe6cf;
  --color-milk-chocolate-200: #fdcfa3;
  --color-milk-chocolate-300: #ecb885;
  --color-milk-chocolate-400: #d0985f;
  --color-milk-chocolate-500: #b67d40;
  --color-milk-chocolate-600: #9a6324;
  --color-milk-chocolate-700: #834d00;
  --color-milk-chocolate-800: #673c00;
  --color-milk-chocolate-900: #502d00;
  --color-milk-chocolate-950: #341b00;
  --color-magenta-memoir: #b15394;
  --color-magenta-memoir-50: #ffedf8;
  --color-magenta-memoir-100: #ffdaf1;
  --color-magenta-memoir-200: #ffb7e5;
  --color-magenta-memoir-300: #f097d1;
  --color-magenta-memoir-400: #d071b2;
  --color-magenta-memoir-500: #b15394;
  --color-magenta-memoir-600: #943c7a;
  --color-magenta-memoir-700: #7a2a63;
  --color-magenta-memoir-800: #631d4f;
  --color-magenta-memoir-900: #4f133f;
  --color-magenta-memoir-950: #350929;
  --color-bejewelled: #00a47a;
  --color-bejewelled-50: #dffff1;
  --color-bejewelled-100: #baffe2;
  --color-bejewelled-200: #9befcd;
  --color-bejewelled-300: #78dcb5;
  --color-bejewelled-400: #45bf95;
  --color-bejewelled-500: #00a47a;
  --color-bejewelled-600: #008462;
  --color-bejewelled-700: #00694d;
  --color-bejewelled-800: #00523b;
  --color-bejewelled-900: #003f2d;
  --color-bejewelled-950: #00271b;
  --color-exhilarating-green: #7fc08a;
  --color-exhilarating-green-50: #eefff0;
  --color-exhilarating-green-100: #d8fddd;
  --color-exhilarating-green-200: #c1eec7;
  --color-exhilarating-green-300: #a7dbae;
  --color-exhilarating-green-400: #7fc08a;
  --color-exhilarating-green-500: #62a16d;
  --color-exhilarating-green-600: #458451;
  --color-exhilarating-green-700: #2e693b;
  --color-exhilarating-green-800: #1d522a;
  --color-exhilarating-green-900: #113f1d;
  --color-exhilarating-green-950: #06270f;
  --color-salty-ice: #c9e5ff;
  --color-salty-ice-50: #f9fcff;
  --color-salty-ice-100: #eaf5ff;
  --color-salty-ice-200: #c9e5ff;
  --color-salty-ice-300: #b6cce1;
  --color-salty-ice-400: #92abc2;
  --color-salty-ice-500: #748ea6;
  --color-salty-ice-600: #597288;
  --color-salty-ice-700: #43596e;
  --color-salty-ice-800: #314556;
  --color-salty-ice-900: #243544;
  --color-salty-ice-950: #15212b;
}

Similar palettes