Golden Eye to Pop That Gum color palette

FFD889Golden Eye 2C71BCMatt Blue 002119Nightmare 0C4081Pacific Depths EB74BFPop That Gum

About this palette

Golden Eye to Pop That Gum is a 5-color cool palette: #FFD889 (Golden Eye), #2C71BC (Matt Blue), #002119 (Nightmare), #0C4081 (Pacific Depths), #EB74BF (Pop That Gum). It mixes yellow, blue, turquoise, pink tones and feels cool overall. The strongest text pairing is #FFD889 on #002119 with a contrast ratio of 12.53:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Golden Eye	rgb(255, 216, 137)	hsl(40, 100%, 77%)
Matt Blue	rgb(44, 113, 188)	hsl(211, 62%, 45%)
Nightmare	rgb(0, 33, 25)	hsl(165, 100%, 6%)
Pacific Depths	rgb(12, 64, 129)	hsl(213, 83%, 28%)
Pop That Gum	rgb(235, 116, 191)	hsl(322, 75%, 69%)

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.53:1 Super#FFD889 on #002119
Aa12.53:1 Super#002119 on #FFD889
Aa7.47:1 Very good#FFD889 on #0C4081
Aa7.47:1 Very good#0C4081 on #FFD889
Aa6.32:1 Good#002119 on #EB74BF
Aa6.32:1 Good#EB74BF on #002119
Aa3.77:1 Poor#0C4081 on #EB74BF
Aa3.77:1 Poor#EB74BF on #0C4081

Color blindness preview

CSS variables

/* Golden Eye to Pop That Gum — https://swatchly.xyz/palette/ffd889-2c71bc-002119-0c4081-eb74bf */
:root {
  --golden-eye: #ffd889;
  --matt-blue: #2c71bc;
  --nightmare: #002119;
  --pacific-depths: #0c4081;
  --pop-that-gum: #eb74bf;
}

Tailwind CSS v4

/* Golden Eye to Pop That Gum — https://swatchly.xyz/palette/ffd889-2c71bc-002119-0c4081-eb74bf */
@theme {
  --color-golden-eye: #ffd889;
  --color-golden-eye-50: #fff9ec;
  --color-golden-eye-100: #ffeece;
  --color-golden-eye-200: #ffd889;
  --color-golden-eye-300: #e1c282;
  --color-golden-eye-400: #c3a056;
  --color-golden-eye-500: #a78333;
  --color-golden-eye-600: #8a670f;
  --color-golden-eye-700: #6e5100;
  --color-golden-eye-800: #563e00;
  --color-golden-eye-900: #432f00;
  --color-golden-eye-950: #2a1d00;
  --color-matt-blue: #2c71bc;
  --color-matt-blue-50: #eef6ff;
  --color-matt-blue-100: #dfeeff;
  --color-matt-blue-200: #bfdcff;
  --color-matt-blue-300: #98c7ff;
  --color-matt-blue-400: #67a8f3;
  --color-matt-blue-500: #488cd9;
  --color-matt-blue-600: #2c71bc;
  --color-matt-blue-700: #17599d;
  --color-matt-blue-800: #064580;
  --color-matt-blue-900: #003467;
  --color-matt-blue-950: #002043;
  --color-nightmare: #002119;
  --color-nightmare-50: #e6fbf4;
  --color-nightmare-100: #daf1e9;
  --color-nightmare-200: #c4dfd6;
  --color-nightmare-300: #aac9bf;
  --color-nightmare-400: #88aa9f;
  --color-nightmare-500: #6b8e83;
  --color-nightmare-600: #517268;
  --color-nightmare-700: #3c5a51;
  --color-nightmare-800: #2b453d;
  --color-nightmare-900: #1e342d;
  --color-nightmare-950: #002119;
  --color-pacific-depths: #0c4081;
  --color-pacific-depths-50: #eff6ff;
  --color-pacific-depths-100: #dfecff;
  --color-pacific-depths-200: #bfdaff;
  --color-pacific-depths-300: #99c3ff;
  --color-pacific-depths-400: #71a3ea;
  --color-pacific-depths-500: #5487ce;
  --color-pacific-depths-600: #3b6cb0;
  --color-pacific-depths-700: #285592;
  --color-pacific-depths-800: #0c4081;
  --color-pacific-depths-900: #10325f;
  --color-pacific-depths-950: #061e3f;
  --color-pop-that-gum: #eb74bf;
  --color-pop-that-gum-50: #fff2f9;
  --color-pop-that-gum-100: #ffe4f3;
  --color-pop-that-gum-200: #ffc6e6;
  --color-pop-that-gum-300: #ffa0d9;
  --color-pop-that-gum-400: #eb74bf;
  --color-pop-that-gum-500: #cb57a2;
  --color-pop-that-gum-600: #ac3b86;
  --color-pop-that-gum-700: #8e266c;
  --color-pop-that-gum-800: #731556;
  --color-pop-that-gum-900: #5b0a43;
  --color-pop-that-gum-950: #3b032b;
}