Secret Passage to Cotton Boll color palette

2E2500Secret Passage 354887Queen of the Night Shift 9F7D3BChai Tea B4A67AWindy Meadow E5EFFFCotton Boll

Open in generator Export PNG, PDF, ASE…

About this palette

Secret Passage to Cotton Boll is a 5-color warm, earthy, vintage palette: #2E2500 (Secret Passage), #354887 (Queen of the Night Shift), #9F7D3B (Chai Tea), #B4A67A (Windy Meadow), #E5EFFF (Cotton Boll). It mixes brown, blue, yellow, white tones and feels warm overall. The strongest text pairing is #2E2500 on #E5EFFF with a contrast ratio of 13.12:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(46, 37, 0)	hsl(48, 100%, 9%)
Queen of the Night Shift	rgb(53, 72, 135)	hsl(226, 44%, 37%)
Chai Tea	rgb(159, 125, 59)	hsl(40, 46%, 43%)
Windy Meadow	rgb(180, 166, 122)	hsl(46, 28%, 59%)
Cotton Boll	rgb(229, 239, 255)	hsl(217, 100%, 95%)

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.

Aa13.12:1 Super#2E2500 on #E5EFFF
Aa13.12:1 Super#E5EFFF on #2E2500
Aa7.46:1 Very good#354887 on #E5EFFF
Aa7.46:1 Very good#E5EFFF on #354887
Aa6.28:1 Good#2E2500 on #B4A67A
Aa6.28:1 Good#B4A67A on #2E2500
Aa3.96:1 Poor#2E2500 on #9F7D3B
Aa3.96:1 Poor#9F7D3B on #2E2500

Color blindness preview

CSS variables

/* Secret Passage to Cotton Boll — https://swatchly.xyz/palette/2e2500-354887-9f7d3b-b4a67a-e5efff */
:root {
  --secret-passage: #2e2500;
  --queen-of-the-night-shift: #354887;
  --chai-tea: #9f7d3b;
  --windy-meadow: #b4a67a;
  --cotton-boll: #e5efff;
}

Tailwind CSS v4

/* Secret Passage to Cotton Boll — https://swatchly.xyz/palette/2e2500-354887-9f7d3b-b4a67a-e5efff */
@theme {
  --color-secret-passage: #2e2500;
  --color-secret-passage-50: #fbf5df;
  --color-secret-passage-100: #f2ecd2;
  --color-secret-passage-200: #dfd8ba;
  --color-secret-passage-300: #cac19f;
  --color-secret-passage-400: #aba27c;
  --color-secret-passage-500: #928862;
  --color-secret-passage-600: #786e4a;
  --color-secret-passage-700: #625937;
  --color-secret-passage-800: #4f4729;
  --color-secret-passage-900: #3f381e;
  --color-secret-passage-950: #2e2500;
  --color-queen-of-the-night-shift: #354887;
  --color-queen-of-the-night-shift-50: #f1f5ff;
  --color-queen-of-the-night-shift-100: #e3ebff;
  --color-queen-of-the-night-shift-200: #c5d5ff;
  --color-queen-of-the-night-shift-300: #a5bcfb;
  --color-queen-of-the-night-shift-400: #829ade;
  --color-queen-of-the-night-shift-500: #667dc0;
  --color-queen-of-the-night-shift-600: #4c61a0;
  --color-queen-of-the-night-shift-700: #354887;
  --color-queen-of-the-night-shift-800: #293868;
  --color-queen-of-the-night-shift-900: #1e2b53;
  --color-queen-of-the-night-shift-950: #111936;
  --color-chai-tea: #9f7d3b;
  --color-chai-tea-50: #fff3de;
  --color-chai-tea-100: #fee7be;
  --color-chai-tea-200: #edd2a1;
  --color-chai-tea-300: #d9ba82;
  --color-chai-tea-400: #bb995a;
  --color-chai-tea-500: #9f7d3b;
  --color-chai-tea-600: #846321;
  --color-chai-tea-700: #6b4e0b;
  --color-chai-tea-800: #553c00;
  --color-chai-tea-900: #422e00;
  --color-chai-tea-950: #2a1c00;
  --color-windy-meadow: #b4a67a;
  --color-windy-meadow-50: #fff7de;
  --color-windy-meadow-100: #f6eed2;
  --color-windy-meadow-200: #e5dbba;
  --color-windy-meadow-300: #d1c5a0;
  --color-windy-meadow-400: #b4a67a;
  --color-windy-meadow-500: #978a5f;
  --color-windy-meadow-600: #7b6e45;
  --color-windy-meadow-700: #635730;
  --color-windy-meadow-800: #4e4321;
  --color-windy-meadow-900: #3c3316;
  --color-windy-meadow-950: #251f0a;
  --color-cotton-boll: #e5efff;
  --color-cotton-boll-50: #f4f8ff;
  --color-cotton-boll-100: #e5efff;
  --color-cotton-boll-200: #d3dae6;
  --color-cotton-boll-300: #bbc3d0;
  --color-cotton-boll-400: #9ba4b2;
  --color-cotton-boll-500: #7f8896;
  --color-cotton-boll-600: #646d7a;
  --color-cotton-boll-700: #4e5662;
  --color-cotton-boll-800: #3c434d;
  --color-cotton-boll-900: #2e333c;
  --color-cotton-boll-950: #1b1f26;
}