Beekeeper to Italian Roast color palette

F7E18BBeekeeper 00E1D3Ice Climber 8A80D4Perrywinkle A35565Cherry Berry 413B00Dark Olive 220F0FItalian Roast

Open in generator Export PNG, PDF, ASE…

About this palette

Beekeeper to Italian Roast is a 6-color vintage palette: #F7E18B (Beekeeper), #00E1D3 (Ice Climber), #8A80D4 (Perrywinkle), #A35565 (Cherry Berry), #413B00 (Dark Olive), #220F0F (Italian Roast). It mixes yellow, turquoise, purple, red, brown, black tones and feels warm overall. The strongest text pairing is #F7E18B on #220F0F with a contrast ratio of 14.08:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beekeeper	rgb(247, 225, 139)	hsl(48, 87%, 76%)
Ice Climber	rgb(0, 225, 211)	hsl(176, 100%, 44%)
Perrywinkle	rgb(138, 128, 212)	hsl(247, 49%, 67%)
Cherry Berry	rgb(163, 85, 101)	hsl(348, 31%, 49%)
Dark Olive	rgb(65, 59, 0)	hsl(54, 100%, 13%)
Italian Roast	rgb(34, 15, 15)	hsl(0, 39%, 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.

Aa14.08:1 Super#F7E18B on #220F0F
Aa14.08:1 Super#220F0F on #F7E18B
Aa11.12:1 Very good#00E1D3 on #220F0F
Aa11.12:1 Very good#220F0F on #00E1D3
Aa8.70:1 Very good#F7E18B on #413B00
Aa8.70:1 Very good#413B00 on #F7E18B
Aa6.87:1 Good#00E1D3 on #413B00
Aa6.87:1 Good#413B00 on #00E1D3

Color blindness preview

CSS variables

/* Beekeeper to Italian Roast — https://swatchly.xyz/palette/f7e18b-00e1d3-8a80d4-a35565-413b00-220f0f */
:root {
  --beekeeper: #f7e18b;
  --ice-climber: #00e1d3;
  --perrywinkle: #8a80d4;
  --cherry-berry: #a35565;
  --dark-olive: #413b00;
  --italian-roast: #220f0f;
}

Tailwind CSS v4

/* Beekeeper to Italian Roast — https://swatchly.xyz/palette/f7e18b-00e1d3-8a80d4-a35565-413b00-220f0f */
@theme {
  --color-beekeeper: #f7e18b;
  --color-beekeeper-50: #fffcef;
  --color-beekeeper-100: #fff4c7;
  --color-beekeeper-200: #f7e18b;
  --color-beekeeper-300: #dac985;
  --color-beekeeper-400: #bba758;
  --color-beekeeper-500: #9f8a32;
  --color-beekeeper-600: #826d0b;
  --color-beekeeper-700: #675500;
  --color-beekeeper-800: #4f4100;
  --color-beekeeper-900: #3d3200;
  --color-beekeeper-950: #271f00;
  --color-ice-climber: #00e1d3;
  --color-ice-climber-50: #ddfffa;
  --color-ice-climber-100: #affff6;
  --color-ice-climber-200: #81f1e5;
  --color-ice-climber-300: #00e1d3;
  --color-ice-climber-400: #00bdb1;
  --color-ice-climber-500: #009d93;
  --color-ice-climber-600: #007e76;
  --color-ice-climber-700: #00645d;
  --color-ice-climber-800: #004e49;
  --color-ice-climber-900: #003c37;
  --color-ice-climber-950: #002623;
  --color-perrywinkle: #8a80d4;
  --color-perrywinkle-50: #f6f5ff;
  --color-perrywinkle-100: #ececff;
  --color-perrywinkle-200: #d9d6ff;
  --color-perrywinkle-300: #c2bdff;
  --color-perrywinkle-400: #a49ced;
  --color-perrywinkle-500: #8a80d4;
  --color-perrywinkle-600: #6f64b5;
  --color-perrywinkle-700: #584d96;
  --color-perrywinkle-800: #443a7a;
  --color-perrywinkle-900: #342a61;
  --color-perrywinkle-950: #1f1940;
  --color-cherry-berry: #a35565;
  --color-cherry-berry-50: #fff1f3;
  --color-cherry-berry-100: #ffe4e8;
  --color-cherry-berry-200: #ffc9d1;
  --color-cherry-berry-300: #f6acb9;
  --color-cherry-berry-400: #da8b99;
  --color-cherry-berry-500: #bf6f7e;
  --color-cherry-berry-600: #a35565;
  --color-cherry-berry-700: #863f4f;
  --color-cherry-berry-800: #6c2e3c;
  --color-cherry-berry-900: #55212d;
  --color-cherry-berry-950: #38121b;
  --color-dark-olive: #413b00;
  --color-dark-olive-50: #faf7d8;
  --color-dark-olive-100: #f0edcb;
  --color-dark-olive-200: #dddab1;
  --color-dark-olive-300: #c8c395;
  --color-dark-olive-400: #aaa572;
  --color-dark-olive-500: #918b56;
  --color-dark-olive-600: #77723e;
  --color-dark-olive-700: #615c2b;
  --color-dark-olive-800: #4f4a1e;
  --color-dark-olive-900: #413b00;
  --color-dark-olive-950: #292608;
  --color-italian-roast: #220f0f;
  --color-italian-roast-50: #fff1f1;
  --color-italian-roast-100: #f8e6e5;
  --color-italian-roast-200: #e7d2d1;
  --color-italian-roast-300: #d2bab9;
  --color-italian-roast-400: #b49a99;
  --color-italian-roast-500: #977d7c;
  --color-italian-roast-600: #796160;
  --color-italian-roast-700: #5f4949;
  --color-italian-roast-800: #473635;
  --color-italian-roast-900: #342625;
  --color-italian-roast-950: #220f0f;
}