Oh Boy! to Autumn Gold color palette

BFD5FFOh Boy!358FD6Magical Merlin 85A6CFWindfall 6B4700Very Coffee 2C2012Burnt Coffee 7F6236Autumn Gold

Open in generator Export PNG, PDF, ASE…

About this palette

Oh Boy! to Autumn Gold is a 6-color palette: #BFD5FF (Oh Boy!), #358FD6 (Magical Merlin), #85A6CF (Windfall), #6B4700 (Very Coffee), #2C2012 (Burnt Coffee), #7F6236 (Autumn Gold). It mixes blue, brown, gray tones and feels cool overall. The strongest text pairing is #BFD5FF on #2C2012 with a contrast ratio of 10.72:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oh Boy!	rgb(191, 213, 255)	hsl(219, 100%, 87%)
Magical Merlin	rgb(53, 143, 214)	hsl(206, 66%, 52%)
Windfall	rgb(133, 166, 207)	hsl(213, 44%, 67%)
Very Coffee	rgb(107, 71, 0)	hsl(40, 100%, 21%)
Burnt Coffee	rgb(44, 32, 18)	hsl(32, 42%, 12%)
Autumn Gold	rgb(127, 98, 54)	hsl(36, 40%, 35%)

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.72:1 Very good#BFD5FF on #2C2012
Aa10.72:1 Very good#2C2012 on #BFD5FF
Aa6.32:1 Good#85A6CF on #2C2012
Aa6.32:1 Good#2C2012 on #85A6CF
Aa5.61:1 Good#BFD5FF on #6B4700
Aa5.61:1 Good#6B4700 on #BFD5FF
Aa4.58:1 Good#358FD6 on #2C2012
Aa4.58:1 Good#2C2012 on #358FD6

Color blindness preview

CSS variables

/* Oh Boy! to Autumn Gold — https://swatchly.xyz/palette/bfd5ff-358fd6-85a6cf-6b4700-2c2012-7f6236 */
:root {
  --oh-boy: #bfd5ff;
  --magical-merlin: #358fd6;
  --windfall: #85a6cf;
  --very-coffee: #6b4700;
  --burnt-coffee: #2c2012;
  --autumn-gold: #7f6236;
}

Tailwind CSS v4

/* Oh Boy! to Autumn Gold — https://swatchly.xyz/palette/bfd5ff-358fd6-85a6cf-6b4700-2c2012-7f6236 */
@theme {
  --color-oh-boy: #bfd5ff;
  --color-oh-boy-50: #edf3ff;
  --color-oh-boy-100: #dde9ff;
  --color-oh-boy-200: #bfd5ff;
  --color-oh-boy-300: #acbfe3;
  --color-oh-boy-400: #8ca0c6;
  --color-oh-boy-500: #7185ab;
  --color-oh-boy-600: #586b8f;
  --color-oh-boy-700: #445576;
  --color-oh-boy-800: #33425f;
  --color-oh-boy-900: #26334b;
  --color-oh-boy-950: #161f30;
  --color-magical-merlin: #358fd6;
  --color-magical-merlin-50: #eef7ff;
  --color-magical-merlin-100: #ddefff;
  --color-magical-merlin-200: #badeff;
  --color-magical-merlin-300: #8ecaff;
  --color-magical-merlin-400: #58abf0;
  --color-magical-merlin-500: #358fd6;
  --color-magical-merlin-600: #0f73b7;
  --color-magical-merlin-700: #005b94;
  --color-magical-merlin-800: #004775;
  --color-magical-merlin-900: #00365c;
  --color-magical-merlin-950: #00213c;
  --color-windfall: #85a6cf;
  --color-windfall-50: #f0f6ff;
  --color-windfall-100: #e0eeff;
  --color-windfall-200: #c2dbfb;
  --color-windfall-300: #a8c5e9;
  --color-windfall-400: #85a6cf;
  --color-windfall-500: #6a8ab2;
  --color-windfall-600: #506f95;
  --color-windfall-700: #3c587a;
  --color-windfall-800: #2c4462;
  --color-windfall-900: #20344d;
  --color-windfall-950: #112032;
  --color-very-coffee: #6b4700;
  --color-very-coffee-50: #fff3e3;
  --color-very-coffee-100: #ffe7c7;
  --color-very-coffee-200: #f0d1a5;
  --color-very-coffee-300: #dcb886;
  --color-very-coffee-400: #bd975f;
  --color-very-coffee-500: #a17a40;
  --color-very-coffee-600: #835f25;
  --color-very-coffee-700: #6b4700;
  --color-very-coffee-800: #533704;
  --color-very-coffee-900: #412a00;
  --color-very-coffee-950: #2a1900;
  --color-burnt-coffee: #2c2012;
  --color-burnt-coffee-50: #fdf3e9;
  --color-burnt-coffee-100: #f4e9de;
  --color-burnt-coffee-200: #e1d5c8;
  --color-burnt-coffee-300: #ccbeaf;
  --color-burnt-coffee-400: #ae9f8e;
  --color-burnt-coffee-500: #938473;
  --color-burnt-coffee-600: #796a5b;
  --color-burnt-coffee-700: #625546;
  --color-burnt-coffee-800: #4e4336;
  --color-burnt-coffee-900: #3e3429;
  --color-burnt-coffee-950: #2c2012;
  --color-autumn-gold: #7f6236;
  --color-autumn-gold-50: #fff3e3;
  --color-autumn-gold-100: #fce7ca;
  --color-autumn-gold-200: #ead2af;
  --color-autumn-gold-300: #d6ba92;
  --color-autumn-gold-400: #b7996e;
  --color-autumn-gold-500: #9b7d51;
  --color-autumn-gold-600: #7f6236;
  --color-autumn-gold-700: #664d26;
  --color-autumn-gold-800: #513b18;
  --color-autumn-gold-900: #402d0f;
  --color-autumn-gold-950: #291b06;
}