Golden Eye to 3AM Breakup color palette

FFD98BGolden Eye DC8644Touch of Glamour F01224First Blood 6B2D00Cold Press Coffee 36030B3AM Breakup

About this palette

Golden Eye to 3AM Breakup is a 5-color warm, gradient palette: #FFD98B (Golden Eye), #DC8644 (Touch of Glamour), #F01224 (First Blood), #6B2D00 (Cold Press Coffee), #36030B (3AM Breakup). It mixes yellow, orange, red, brown tones and feels warm overall. The strongest text pairing is #FFD98B on #36030B with a contrast ratio of 13.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Golden Eye	rgb(255, 217, 139)	hsl(40, 100%, 77%)
Touch of Glamour	rgb(220, 134, 68)	hsl(26, 68%, 56%)
First Blood	rgb(240, 18, 36)	hsl(355, 88%, 51%)
Cold Press Coffee	rgb(107, 45, 0)	hsl(25, 100%, 21%)
3AM Breakup	rgb(54, 3, 11)	hsl(351, 89%, 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.

Aa13.24:1 Super#FFD98B on #36030B
Aa13.24:1 Super#36030B on #FFD98B
Aa7.77:1 Very good#FFD98B on #6B2D00
Aa7.77:1 Very good#6B2D00 on #FFD98B
Aa6.42:1 Good#DC8644 on #36030B
Aa6.42:1 Good#36030B on #DC8644
Aa4.10:1 Poor#F01224 on #36030B
Aa4.10:1 Poor#36030B on #F01224

Color blindness preview

CSS variables

/* Golden Eye to 3AM Breakup — https://swatchly.xyz/palette/ffd98b-dc8644-f01224-6b2d00-36030b */
:root {
  --golden-eye: #ffd98b;
  --touch-of-glamour: #dc8644;
  --first-blood: #f01224;
  --cold-press-coffee: #6b2d00;
  --c-3am-breakup: #36030b;
}

Tailwind CSS v4

/* Golden Eye to 3AM Breakup — https://swatchly.xyz/palette/ffd98b-dc8644-f01224-6b2d00-36030b */
@theme {
  --color-golden-eye: #ffd98b;
  --color-golden-eye-50: #fff9ed;
  --color-golden-eye-100: #ffefd0;
  --color-golden-eye-200: #ffd98b;
  --color-golden-eye-300: #e1c284;
  --color-golden-eye-400: #c3a158;
  --color-golden-eye-500: #a78435;
  --color-golden-eye-600: #8a6812;
  --color-golden-eye-700: #6e5100;
  --color-golden-eye-800: #563e00;
  --color-golden-eye-900: #422f00;
  --color-golden-eye-950: #2a1d00;
  --color-touch-of-glamour: #dc8644;
  --color-touch-of-glamour-50: #fff1e8;
  --color-touch-of-glamour-100: #ffe3d1;
  --color-touch-of-glamour-200: #ffc8a2;
  --color-touch-of-glamour-300: #f7aa73;
  --color-touch-of-glamour-400: #dc8644;
  --color-touch-of-glamour-500: #be6b25;
  --color-touch-of-glamour-600: #a05200;
  --color-touch-of-glamour-700: #804000;
  --color-touch-of-glamour-800: #653100;
  --color-touch-of-glamour-900: #4f2500;
  --color-touch-of-glamour-950: #341600;
  --color-first-blood: #f01224;
  --color-first-blood-50: #fff0ef;
  --color-first-blood-100: #ffe2de;
  --color-first-blood-200: #ffc5be;
  --color-first-blood-300: #ffa096;
  --color-first-blood-400: #ff625a;
  --color-first-blood-500: #f01224;
  --color-first-blood-600: #c50018;
  --color-first-blood-700: #9e0011;
  --color-first-blood-800: #7e000b;
  --color-first-blood-900: #630006;
  --color-first-blood-950: #420003;
  --color-cold-press-coffee: #6b2d00;
  --color-cold-press-coffee-50: #fff2ec;
  --color-cold-press-coffee-100: #ffe5d8;
  --color-cold-press-coffee-200: #ffcbaf;
  --color-cold-press-coffee-300: #f0b08f;
  --color-cold-press-coffee-400: #d38f6a;
  --color-cold-press-coffee-500: #b7724d;
  --color-cold-press-coffee-600: #995833;
  --color-cold-press-coffee-700: #7e4321;
  --color-cold-press-coffee-800: #6b2d00;
  --color-cold-press-coffee-900: #502509;
  --color-cold-press-coffee-950: #341503;
  --color-c-3am-breakup: #36030b;
  --color-c-3am-breakup-50: #fff1f1;
  --color-c-3am-breakup-100: #ffe4e4;
  --color-c-3am-breakup-200: #fcc9c9;
  --color-c-3am-breakup-300: #eab0b1;
  --color-c-3am-breakup-400: #cd8e90;
  --color-c-3am-breakup-500: #b07173;
  --color-c-3am-breakup-600: #915659;
  --color-c-3am-breakup-700: #754143;
  --color-c-3am-breakup-800: #5c2f31;
  --color-c-3am-breakup-900: #462123;
  --color-c-3am-breakup-950: #36030b;
}