Sunny Glory to Secret Passage Color Palette

About this palette

Sunny Glory to Secret Passage is a 4-color palette: #EADB9E (Sunny Glory), #8398FA (Perrywinkle), #3A579C (Blasphemous Blue), #332A00 (Secret Passage). It mixes yellow, blue, brown tones and feels balanced overall. The strongest text pairing is #EADB9E on #332A00 with a contrast ratio of 10.28:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunny Glory	rgb(234, 219, 158)	hsl(48, 64%, 77%)
Perrywinkle	rgb(131, 152, 250)	hsl(229, 92%, 75%)
Blasphemous Blue	rgb(58, 87, 156)	hsl(222, 46%, 42%)
Secret Passage	rgb(51, 42, 0)	hsl(49, 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.

Aa10.28:1 Very good#EADB9E on #332A00
Aa10.28:1 Very good#332A00 on #EADB9E
Aa5.32:1 Good#8398FA on #332A00
Aa5.32:1 Good#332A00 on #8398FA
Aa5.00:1 Good#EADB9E on #3A579C
Aa5.00:1 Good#3A579C on #EADB9E

Color blindness preview

CSS variables

/* Sunny Glory to Secret Passage — https://swatchly.xyz/palette/eadb9e-8398fa-3a579c-332a00 */
:root {
  --sunny-glory: #eadb9e;
  --perrywinkle: #8398fa;
  --blasphemous-blue: #3a579c;
  --secret-passage: #332a00;
}

Tailwind CSS v4

/* Sunny Glory to Secret Passage — https://swatchly.xyz/palette/eadb9e-8398fa-3a579c-332a00 */
@theme {
  --color-sunny-glory: #eadb9e;
  --color-sunny-glory-50: #fff8d9;
  --color-sunny-glory-100: #f7eeca;
  --color-sunny-glory-200: #eadb9e;
  --color-sunny-glory-300: #d0c492;
  --color-sunny-glory-400: #b1a46b;
  --color-sunny-glory-500: #96884d;
  --color-sunny-glory-600: #7a6c33;
  --color-sunny-glory-700: #62551f;
  --color-sunny-glory-800: #4d4211;
  --color-sunny-glory-900: #3c3208;
  --color-sunny-glory-950: #261f02;
  --color-perrywinkle: #8398fa;
  --color-perrywinkle-50: #f1f4ff;
  --color-perrywinkle-100: #e4eaff;
  --color-perrywinkle-200: #c9d5ff;
  --color-perrywinkle-300: #abbcff;
  --color-perrywinkle-400: #8398fa;
  --color-perrywinkle-500: #697cdb;
  --color-perrywinkle-600: #5161bc;
  --color-perrywinkle-700: #3e4b9e;
  --color-perrywinkle-800: #2e3981;
  --color-perrywinkle-900: #222b68;
  --color-perrywinkle-950: #141946;
  --color-blasphemous-blue: #3a579c;
  --color-blasphemous-blue-50: #f0f5ff;
  --color-blasphemous-blue-100: #e2ebff;
  --color-blasphemous-blue-200: #c6d9ff;
  --color-blasphemous-blue-300: #a6c3ff;
  --color-blasphemous-blue-400: #82a3eb;
  --color-blasphemous-blue-500: #6788d1;
  --color-blasphemous-blue-600: #4f6eb4;
  --color-blasphemous-blue-700: #3a579c;
  --color-blasphemous-blue-800: #2c447d;
  --color-blasphemous-blue-900: #1f3364;
  --color-blasphemous-blue-950: #111f43;
  --color-secret-passage: #332a00;
  --color-secret-passage-50: #fbf6dd;
  --color-secret-passage-100: #f2ecd0;
  --color-secret-passage-200: #dfd8b8;
  --color-secret-passage-300: #cac29d;
  --color-secret-passage-400: #aaa078;
  --color-secret-passage-500: #8d835a;
  --color-secret-passage-600: #706740;
  --color-secret-passage-700: #584f2c;
  --color-secret-passage-800: #423b1d;
  --color-secret-passage-900: #332a00;
  --color-secret-passage-950: #1d1908;
}