Golden Eye to Secret Passage color palette

FBD988Golden Eye 7FB9F1Electric Eel 2C89D7Way Beyond the Blue 524279Drifting Violet 362A00Secret Passage

Open in generator Export PNG, PDF, ASE…

About this palette

Golden Eye to Secret Passage is a 5-color cool palette: #FBD988 (Golden Eye), #7FB9F1 (Electric Eel), #2C89D7 (Way Beyond the Blue), #524279 (Drifting Violet), #362A00 (Secret Passage). It mixes yellow, blue, purple, brown tones and feels cool overall. The strongest text pairing is #FBD988 on #362A00 with a contrast ratio of 10.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Golden Eye	rgb(251, 217, 136)	hsl(42, 93%, 76%)
Electric Eel	rgb(127, 185, 241)	hsl(209, 80%, 72%)
Way Beyond the Blue	rgb(44, 137, 215)	hsl(207, 68%, 51%)
Drifting Violet	rgb(82, 66, 121)	hsl(257, 29%, 37%)
Secret Passage	rgb(54, 42, 0)	hsl(47, 100%, 11%)

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.34:1 Very good#FBD988 on #362A00
Aa10.34:1 Very good#362A00 on #FBD988
Aa6.80:1 Good#7FB9F1 on #362A00
Aa6.80:1 Good#362A00 on #7FB9F1
Aa6.37:1 Good#FBD988 on #524279
Aa6.37:1 Good#524279 on #FBD988
Aa4.19:1 Poor#7FB9F1 on #524279
Aa4.19:1 Poor#524279 on #7FB9F1

Color blindness preview

CSS variables

/* Golden Eye to Secret Passage — https://swatchly.xyz/palette/fbd988-7fb9f1-2c89d7-524279-362a00 */
:root {
  --golden-eye: #fbd988;
  --electric-eel: #7fb9f1;
  --way-beyond-the-blue: #2c89d7;
  --drifting-violet: #524279;
  --secret-passage: #362a00;
}

Tailwind CSS v4

/* Golden Eye to Secret Passage — https://swatchly.xyz/palette/fbd988-7fb9f1-2c89d7-524279-362a00 */
@theme {
  --color-golden-eye: #fbd988;
  --color-golden-eye-50: #fff8e9;
  --color-golden-eye-100: #ffeec8;
  --color-golden-eye-200: #fbd988;
  --color-golden-eye-300: #dec281;
  --color-golden-eye-400: #c0a155;
  --color-golden-eye-500: #a48432;
  --color-golden-eye-600: #87690d;
  --color-golden-eye-700: #6c5200;
  --color-golden-eye-800: #543f00;
  --color-golden-eye-900: #413000;
  --color-golden-eye-950: #291d00;
  --color-electric-eel: #7fb9f1;
  --color-electric-eel-50: #e1f0ff;
  --color-electric-eel-100: #cbe5ff;
  --color-electric-eel-200: #a3d1ff;
  --color-electric-eel-300: #7fb9f1;
  --color-electric-eel-400: #649cd1;
  --color-electric-eel-500: #4a82b7;
  --color-electric-eel-600: #33699b;
  --color-electric-eel-700: #225481;
  --color-electric-eel-800: #15436a;
  --color-electric-eel-900: #0d3557;
  --color-electric-eel-950: #042139;
  --color-way-beyond-the-blue: #2c89d7;
  --color-way-beyond-the-blue-50: #edf6ff;
  --color-way-beyond-the-blue-100: #dbedff;
  --color-way-beyond-the-blue-200: #b7dbff;
  --color-way-beyond-the-blue-300: #8ac6ff;
  --color-way-beyond-the-blue-400: #51a6f3;
  --color-way-beyond-the-blue-500: #2c89d7;
  --color-way-beyond-the-blue-600: #006eb8;
  --color-way-beyond-the-blue-700: #005794;
  --color-way-beyond-the-blue-800: #004475;
  --color-way-beyond-the-blue-900: #00345c;
  --color-way-beyond-the-blue-950: #00203c;
  --color-drifting-violet: #524279;
  --color-drifting-violet-50: #f6f3ff;
  --color-drifting-violet-100: #ece7ff;
  --color-drifting-violet-200: #d9cefe;
  --color-drifting-violet-300: #c2b4eb;
  --color-drifting-violet-400: #a192ce;
  --color-drifting-violet-500: #8575b1;
  --color-drifting-violet-600: #695a92;
  --color-drifting-violet-700: #524279;
  --color-drifting-violet-800: #40335e;
  --color-drifting-violet-900: #31274a;
  --color-drifting-violet-950: #1e1730;
  --color-secret-passage: #362a00;
  --color-secret-passage-50: #fdf5dd;
  --color-secret-passage-100: #f4ebd0;
  --color-secret-passage-200: #e2d7b7;
  --color-secret-passage-300: #ccc19c;
  --color-secret-passage-400: #ad9f77;
  --color-secret-passage-500: #90835a;
  --color-secret-passage-600: #736740;
  --color-secret-passage-700: #5a4f2c;
  --color-secret-passage-800: #453b1d;
  --color-secret-passage-900: #362a00;
  --color-secret-passage-950: #1e1908;
}