Celadon to Secret Passage Color Palette

About this palette

Celadon to Secret Passage is a 4-color warm, earthy, vintage, gradient palette: #B2E4B4 (Celadon), #9FA760 (Gallant Green), #726000 (Himalaya), #302B00 (Secret Passage). It mixes green, brown tones and feels warm overall. The strongest text pairing is #B2E4B4 on #302B00 with a contrast ratio of 9.96:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Celadon	rgb(178, 228, 180)	hsl(122, 48%, 80%)
Gallant Green	rgb(159, 167, 96)	hsl(67, 29%, 52%)
Himalaya	rgb(114, 96, 0)	hsl(51, 100%, 22%)
Secret Passage	rgb(48, 43, 0)	hsl(54, 100%, 9%)

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.96:1 Very good#B2E4B4 on #302B00
Aa9.96:1 Very good#302B00 on #B2E4B4
Aa5.55:1 Good#9FA760 on #302B00
Aa5.55:1 Good#302B00 on #9FA760
Aa4.32:1 Poor#B2E4B4 on #726000
Aa4.32:1 Poor#726000 on #B2E4B4

Color blindness preview

CSS variables

/* Celadon to Secret Passage — https://swatchly.xyz/palette/b2e4b4-9fa760-726000-302b00 */
:root {
  --celadon: #b2e4b4;
  --gallant-green: #9fa760;
  --himalaya: #726000;
  --secret-passage: #302b00;
}

Tailwind CSS v4

/* Celadon to Secret Passage — https://swatchly.xyz/palette/b2e4b4-9fa760-726000-302b00 */
@theme {
  --color-celadon: #b2e4b4;
  --color-celadon-50: #e0fce1;
  --color-celadon-100: #d3f3d4;
  --color-celadon-200: #b2e4b4;
  --color-celadon-300: #a1cca3;
  --color-celadon-400: #7fae82;
  --color-celadon-500: #649366;
  --color-celadon-600: #4b784e;
  --color-celadon-700: #37603a;
  --color-celadon-800: #284c2b;
  --color-celadon-900: #1c3b1f;
  --color-celadon-950: #0f2511;
  --color-gallant-green: #9fa760;
  --color-gallant-green-50: #f3f9d1;
  --color-gallant-green-100: #e9f0c3;
  --color-gallant-green-200: #d5dca7;
  --color-gallant-green-300: #bec689;
  --color-gallant-green-400: #9fa760;
  --color-gallant-green-500: #848b45;
  --color-gallant-green-600: #6a712b;
  --color-gallant-green-700: #545a18;
  --color-gallant-green-800: #424609;
  --color-gallant-green-900: #323602;
  --color-gallant-green-950: #1f2200;
  --color-himalaya: #726000;
  --color-himalaya-50: #fff6cf;
  --color-himalaya-100: #f5eab9;
  --color-himalaya-200: #e2d499;
  --color-himalaya-300: #cbbb78;
  --color-himalaya-400: #ac9a4e;
  --color-himalaya-500: #8e7c2c;
  --color-himalaya-600: #726000;
  --color-himalaya-700: #5b4c00;
  --color-himalaya-800: #473b00;
  --color-himalaya-900: #372d00;
  --color-himalaya-950: #231c00;
  --color-secret-passage: #302b00;
  --color-secret-passage-50: #f9f7de;
  --color-secret-passage-100: #efedd1;
  --color-secret-passage-200: #ddd9b8;
  --color-secret-passage-300: #c7c39d;
  --color-secret-passage-400: #a6a278;
  --color-secret-passage-500: #89855a;
  --color-secret-passage-600: #6d6840;
  --color-secret-passage-700: #54502c;
  --color-secret-passage-800: #3f3c1d;
  --color-secret-passage-900: #302b00;
  --color-secret-passage-950: #1b1908;
}