Tardis Blue to Secret Passage color palette

003D74Tardis Blue F9B6F0Strawberry Buttercream 00832BPoblano 769FD7Wisteria Blue 332600Secret Passage

Open in generator Export PNG, PDF, ASE…

About this palette

Tardis Blue to Secret Passage is a 5-color cool palette: #003D74 (Tardis Blue), #F9B6F0 (Strawberry Buttercream), #00832B (Poblano), #769FD7 (Wisteria Blue), #332600 (Secret Passage). It mixes blue, pink, green, brown tones and feels cool overall. The strongest text pairing is #F9B6F0 on #332600 with a contrast ratio of 9.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tardis Blue	rgb(0, 61, 116)	hsl(208, 100%, 23%)
Strawberry Buttercream	rgb(249, 182, 240)	hsl(308, 85%, 85%)
Poblano	rgb(0, 131, 43)	hsl(140, 100%, 26%)
Wisteria Blue	rgb(118, 159, 215)	hsl(215, 55%, 65%)
Secret Passage	rgb(51, 38, 0)	hsl(45, 100%, 10%)

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.

Aa9.15:1 Very good#F9B6F0 on #332600
Aa9.15:1 Very good#332600 on #F9B6F0
Aa6.76:1 Good#003D74 on #F9B6F0
Aa6.76:1 Good#F9B6F0 on #003D74
Aa5.44:1 Good#769FD7 on #332600
Aa5.44:1 Good#332600 on #769FD7
Aa4.02:1 Poor#003D74 on #769FD7
Aa4.02:1 Poor#769FD7 on #003D74

Color blindness preview

CSS variables

/* Tardis Blue to Secret Passage — https://swatchly.xyz/palette/003d74-f9b6f0-00832b-769fd7-332600 */
:root {
  --tardis-blue: #003d74;
  --strawberry-buttercream: #f9b6f0;
  --poblano: #00832b;
  --wisteria-blue: #769fd7;
  --secret-passage: #332600;
}

Tailwind CSS v4

/* Tardis Blue to Secret Passage — https://swatchly.xyz/palette/003d74-f9b6f0-00832b-769fd7-332600 */
@theme {
  --color-tardis-blue: #003d74;
  --color-tardis-blue-50: #eef6ff;
  --color-tardis-blue-100: #deedff;
  --color-tardis-blue-200: #bcdbff;
  --color-tardis-blue-300: #94c4fb;
  --color-tardis-blue-400: #6ea3e0;
  --color-tardis-blue-500: #5086c3;
  --color-tardis-blue-600: #366aa3;
  --color-tardis-blue-700: #235285;
  --color-tardis-blue-800: #003d74;
  --color-tardis-blue-900: #0c2f54;
  --color-tardis-blue-950: #041d37;
  --color-strawberry-buttercream: #f9b6f0;
  --color-strawberry-buttercream-50: #ffe7fb;
  --color-strawberry-buttercream-100: #ffd5f9;
  --color-strawberry-buttercream-200: #f9b6f0;
  --color-strawberry-buttercream-300: #dea4d6;
  --color-strawberry-buttercream-400: #c284ba;
  --color-strawberry-buttercream-500: #a76aa0;
  --color-strawberry-buttercream-600: #8c5185;
  --color-strawberry-buttercream-700: #733e6d;
  --color-strawberry-buttercream-800: #5d2e58;
  --color-strawberry-buttercream-900: #492245;
  --color-strawberry-buttercream-950: #2f132c;
  --color-poblano: #00832b;
  --color-poblano-50: #e0ffe2;
  --color-poblano-100: #c0fec5;
  --color-poblano-200: #a3eda9;
  --color-poblano-300: #83d98c;
  --color-poblano-400: #58bb65;
  --color-poblano-500: #339f47;
  --color-poblano-600: #00832b;
  --color-poblano-700: #006820;
  --color-poblano-800: #005217;
  --color-poblano-900: #003f10;
  --color-poblano-950: #002807;
  --color-wisteria-blue: #769fd7;
  --color-wisteria-blue-50: #ecf4ff;
  --color-wisteria-blue-100: #dbeaff;
  --color-wisteria-blue-200: #b9d7ff;
  --color-wisteria-blue-300: #9bbff2;
  --color-wisteria-blue-400: #769fd7;
  --color-wisteria-blue-500: #5c84ba;
  --color-wisteria-blue-600: #446a9d;
  --color-wisteria-blue-700: #325482;
  --color-wisteria-blue-800: #23426a;
  --color-wisteria-blue-900: #193255;
  --color-wisteria-blue-950: #0d1f38;
  --color-secret-passage: #332600;
  --color-secret-passage-50: #fdf5de;
  --color-secret-passage-100: #f4ebd1;
  --color-secret-passage-200: #e2d7b9;
  --color-secret-passage-300: #cdc09e;
  --color-secret-passage-400: #afa07b;
  --color-secret-passage-500: #968761;
  --color-secret-passage-600: #7c6e49;
  --color-secret-passage-700: #665937;
  --color-secret-passage-800: #534829;
  --color-secret-passage-900: #44391e;
  --color-secret-passage-950: #332600;
}