Secret Passage to Blue Bay color palette

3D2700Secret Passage A66C00Cookie Dough E9EFFFCotton Boll 604800Very Coffee BFD6FFOh Boy!749BE6Blue Bay

Open in generator Export PNG, PDF, ASE…

About this palette

Secret Passage to Blue Bay is a 6-color vintage palette: #3D2700 (Secret Passage), #A66C00 (Cookie Dough), #E9EFFF (Cotton Boll), #604800 (Very Coffee), #BFD6FF (Oh Boy!), #749BE6 (Blue Bay). It mixes brown, white, blue tones and feels warm overall. The strongest text pairing is #3D2700 on #E9EFFF with a contrast ratio of 12.26:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(61, 39, 0)	hsl(38, 100%, 12%)
Cookie Dough	rgb(166, 108, 0)	hsl(39, 100%, 33%)
Cotton Boll	rgb(233, 239, 255)	hsl(224, 100%, 96%)
Very Coffee	rgb(96, 72, 0)	hsl(45, 100%, 19%)
Oh Boy!	rgb(191, 214, 255)	hsl(218, 100%, 87%)
Blue Bay	rgb(116, 155, 230)	hsl(219, 70%, 68%)

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.26:1 Super#3D2700 on #E9EFFF
Aa12.26:1 Super#E9EFFF on #3D2700
Aa9.59:1 Very good#3D2700 on #BFD6FF
Aa9.59:1 Very good#BFD6FF on #3D2700
Aa7.53:1 Very good#E9EFFF on #604800
Aa7.53:1 Very good#604800 on #E9EFFF
Aa5.89:1 Good#604800 on #BFD6FF
Aa5.89:1 Good#BFD6FF on #604800

Color blindness preview

CSS variables

/* Secret Passage to Blue Bay — https://swatchly.xyz/palette/3d2700-a66c00-e9efff-604800-bfd6ff-749be6 */
:root {
  --secret-passage: #3d2700;
  --cookie-dough: #a66c00;
  --cotton-boll: #e9efff;
  --very-coffee: #604800;
  --oh-boy: #bfd6ff;
  --blue-bay: #749be6;
}

Tailwind CSS v4

/* Secret Passage to Blue Bay — https://swatchly.xyz/palette/3d2700-a66c00-e9efff-604800-bfd6ff-749be6 */
@theme {
  --color-secret-passage: #3d2700;
  --color-secret-passage-50: #fff3e3;
  --color-secret-passage-100: #fae8d0;
  --color-secret-passage-200: #e9d4b7;
  --color-secret-passage-300: #d5bd9c;
  --color-secret-passage-400: #b59c77;
  --color-secret-passage-500: #997f59;
  --color-secret-passage-600: #7c6340;
  --color-secret-passage-700: #624c2c;
  --color-secret-passage-800: #4b391d;
  --color-secret-passage-900: #3d2700;
  --color-secret-passage-950: #221808;
  --color-cookie-dough: #a66c00;
  --color-cookie-dough-50: #fff0df;
  --color-cookie-dough-100: #ffe1bd;
  --color-cookie-dough-200: #f8c789;
  --color-cookie-dough-300: #e4ad65;
  --color-cookie-dough-400: #c48a36;
  --color-cookie-dough-500: #a66c00;
  --color-cookie-dough-600: #865600;
  --color-cookie-dough-700: #6b4400;
  --color-cookie-dough-800: #553500;
  --color-cookie-dough-900: #432900;
  --color-cookie-dough-950: #2c1900;
  --color-cotton-boll: #e9efff;
  --color-cotton-boll-50: #f6f8ff;
  --color-cotton-boll-100: #e9efff;
  --color-cotton-boll-200: #d6dbe6;
  --color-cotton-boll-300: #bec3d0;
  --color-cotton-boll-400: #9ea3b1;
  --color-cotton-boll-500: #828795;
  --color-cotton-boll-600: #676c7a;
  --color-cotton-boll-700: #505561;
  --color-cotton-boll-800: #3e424d;
  --color-cotton-boll-900: #2f333c;
  --color-cotton-boll-950: #1d1f26;
  --color-very-coffee: #604800;
  --color-very-coffee-50: #fff4dc;
  --color-very-coffee-100: #fbeac4;
  --color-very-coffee-200: #e8d4a6;
  --color-very-coffee-300: #d2bb86;
  --color-very-coffee-400: #b3995f;
  --color-very-coffee-500: #967c40;
  --color-very-coffee-600: #786025;
  --color-very-coffee-700: #604800;
  --color-very-coffee-800: #4a3806;
  --color-very-coffee-900: #3a2b02;
  --color-very-coffee-950: #241900;
  --color-oh-boy: #bfd6ff;
  --color-oh-boy-50: #edf4ff;
  --color-oh-boy-100: #deeaff;
  --color-oh-boy-200: #bfd6ff;
  --color-oh-boy-300: #acc0e2;
  --color-oh-boy-400: #8ca1c6;
  --color-oh-boy-500: #7186ab;
  --color-oh-boy-600: #586b8f;
  --color-oh-boy-700: #435575;
  --color-oh-boy-800: #33425e;
  --color-oh-boy-900: #26334a;
  --color-oh-boy-950: #161f30;
  --color-blue-bay: #749be6;
  --color-blue-bay-50: #edf3ff;
  --color-blue-bay-100: #dde9ff;
  --color-blue-bay-200: #bdd4ff;
  --color-blue-bay-300: #99bcff;
  --color-blue-bay-400: #749be6;
  --color-blue-bay-500: #5b80c9;
  --color-blue-bay-600: #4366ab;
  --color-blue-bay-700: #31508f;
  --color-blue-bay-800: #233e75;
  --color-blue-bay-900: #19305e;
  --color-blue-bay-950: #0d1d3f;
}