Secret Passage to Dawn Patrol color palette

3B300CSecret Passage 4A4F6AIntergalactic BA725FSpiced 65C9D4Petrichor FCDDDBDawn Patrol

About this palette

Secret Passage to Dawn Patrol is a 5-color vintage palette: #3B300C (Secret Passage), #4A4F6A (Intergalactic), #BA725F (Spiced), #65C9D4 (Petrichor), #FCDDDB (Dawn Patrol). It mixes brown, purple, red, turquoise, gray tones and feels balanced overall. The strongest text pairing is #3B300C on #FCDDDB with a contrast ratio of 10.23:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(59, 48, 12)	hsl(46, 66%, 14%)
Intergalactic	rgb(74, 79, 106)	hsl(231, 18%, 35%)
Spiced	rgb(186, 114, 95)	hsl(13, 40%, 55%)
Petrichor	rgb(101, 201, 212)	hsl(186, 56%, 61%)
Dawn Patrol	rgb(252, 221, 219)	hsl(4, 85%, 92%)

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.

Aa10.23:1 Very good#3B300C on #FCDDDB
Aa10.23:1 Very good#FCDDDB on #3B300C
Aa6.73:1 Good#3B300C on #65C9D4
Aa6.73:1 Good#65C9D4 on #3B300C
Aa6.31:1 Good#4A4F6A on #FCDDDB
Aa6.31:1 Good#FCDDDB on #4A4F6A
Aa4.15:1 Poor#4A4F6A on #65C9D4
Aa4.15:1 Poor#65C9D4 on #4A4F6A

Color blindness preview

CSS variables

/* Secret Passage to Dawn Patrol — https://swatchly.xyz/palette/3b300c-4a4f6a-ba725f-65c9d4-fcdddb */
:root {
  --secret-passage: #3b300c;
  --intergalactic: #4a4f6a;
  --spiced: #ba725f;
  --petrichor: #65c9d4;
  --dawn-patrol: #fcdddb;
}

Tailwind CSS v4

/* Secret Passage to Dawn Patrol — https://swatchly.xyz/palette/3b300c-4a4f6a-ba725f-65c9d4-fcdddb */
@theme {
  --color-secret-passage: #3b300c;
  --color-secret-passage-50: #fcf5df;
  --color-secret-passage-100: #f3ebd3;
  --color-secret-passage-200: #e1d7ba;
  --color-secret-passage-300: #cbc1a0;
  --color-secret-passage-400: #ada17d;
  --color-secret-passage-500: #918560;
  --color-secret-passage-600: #766a47;
  --color-secret-passage-700: #5e5333;
  --color-secret-passage-800: #494024;
  --color-secret-passage-900: #3b300c;
  --color-secret-passage-950: #231d0d;
  --color-intergalactic: #4a4f6a;
  --color-intergalactic-50: #f2f5ff;
  --color-intergalactic-100: #e6eafe;
  --color-intergalactic-200: #d0d5ed;
  --color-intergalactic-300: #b8bed9;
  --color-intergalactic-400: #979dbb;
  --color-intergalactic-500: #7b819f;
  --color-intergalactic-600: #616682;
  --color-intergalactic-700: #4a4f6a;
  --color-intergalactic-800: #393d53;
  --color-intergalactic-900: #2c2f41;
  --color-intergalactic-950: #1a1c29;
  --color-spiced: #ba725f;
  --color-spiced-50: #fff2ef;
  --color-spiced-100: #ffe5de;
  --color-spiced-200: #ffcabc;
  --color-spiced-300: #f2b09e;
  --color-spiced-400: #d68e7b;
  --color-spiced-500: #ba725f;
  --color-spiced-600: #9c5846;
  --color-spiced-700: #804232;
  --color-spiced-800: #673123;
  --color-spiced-900: #522418;
  --color-spiced-950: #35140c;
  --color-petrichor: #65c9d4;
  --color-petrichor-50: #cdfaff;
  --color-petrichor-100: #b4f1f8;
  --color-petrichor-200: #94dee6;
  --color-petrichor-300: #65c9d4;
  --color-petrichor-400: #47aab5;
  --color-petrichor-500: #21909b;
  --color-petrichor-600: #00767f;
  --color-petrichor-700: #005e66;
  --color-petrichor-800: #004b51;
  --color-petrichor-900: #003b40;
  --color-petrichor-950: #002528;
  --color-dawn-patrol: #fcdddb;
  --color-dawn-patrol-50: #feebea;
  --color-dawn-patrol-100: #fcdddb;
  --color-dawn-patrol-200: #e4cccb;
  --color-dawn-patrol-300: #d0b6b4;
  --color-dawn-patrol-400: #b39795;
  --color-dawn-patrol-500: #987d7b;
  --color-dawn-patrol-600: #7e6462;
  --color-dawn-patrol-700: #664f4d;
  --color-dawn-patrol-800: #513c3b;
  --color-dawn-patrol-900: #3f2e2d;
  --color-dawn-patrol-950: #281c1b;
}