Igniting to Very Coffee color palette

F7D399Igniting 8AB4F7Fly Away C28C00Moutarde de Bénichon 597CADEndless River 2F6197Starry Night 594500Very Coffee

Open in generator Export PNG, PDF, ASE…

About this palette

Igniting to Very Coffee is a 6-color palette: #F7D399 (Igniting), #8AB4F7 (Fly Away), #C28C00 (Moutarde de Bénichon), #597CAD (Endless River), #2F6197 (Starry Night), #594500 (Very Coffee). It mixes yellow, blue, brown tones and feels balanced overall. The strongest text pairing is #F7D399 on #594500 with a contrast ratio of 6.47:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Igniting	rgb(247, 211, 153)	hsl(37, 85%, 78%)
Fly Away	rgb(138, 180, 247)	hsl(217, 87%, 75%)
Moutarde de Bénichon	rgb(194, 140, 0)	hsl(43, 100%, 38%)
Endless River	rgb(89, 124, 173)	hsl(215, 34%, 51%)
Starry Night	rgb(47, 97, 151)	hsl(211, 53%, 39%)
Very Coffee	rgb(89, 69, 0)	hsl(47, 100%, 17%)

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.

Aa6.47:1 Good#F7D399 on #594500
Aa6.47:1 Good#594500 on #F7D399
Aa4.49:1 Poor#F7D399 on #2F6197
Aa4.49:1 Poor#2F6197 on #F7D399
Aa4.37:1 Poor#8AB4F7 on #594500
Aa4.37:1 Poor#594500 on #8AB4F7
Aa3.10:1 Poor#C28C00 on #594500
Aa3.10:1 Poor#594500 on #C28C00

Color blindness preview

CSS variables

/* Igniting to Very Coffee — https://swatchly.xyz/palette/f7d399-8ab4f7-c28c00-597cad-2f6197-594500 */
:root {
  --igniting: #f7d399;
  --fly-away: #8ab4f7;
  --moutarde-de-b-nichon: #c28c00;
  --endless-river: #597cad;
  --starry-night: #2f6197;
  --very-coffee: #594500;
}

Tailwind CSS v4

/* Igniting to Very Coffee — https://swatchly.xyz/palette/f7d399-8ab4f7-c28c00-597cad-2f6197-594500 */
@theme {
  --color-igniting: #f7d399;
  --color-igniting-50: #fff5e4;
  --color-igniting-100: #ffe9c7;
  --color-igniting-200: #f7d399;
  --color-igniting-300: #dbbd8d;
  --color-igniting-400: #be9d67;
  --color-igniting-500: #a28149;
  --color-igniting-600: #86662f;
  --color-igniting-700: #6d501b;
  --color-igniting-800: #563d0d;
  --color-igniting-900: #442e04;
  --color-igniting-950: #2b1c01;
  --color-fly-away: #8ab4f7;
  --color-fly-away-50: #e4efff;
  --color-fly-away-100: #d1e3ff;
  --color-fly-away-200: #aecdff;
  --color-fly-away-300: #8ab4f7;
  --color-fly-away-400: #6f97d7;
  --color-fly-away-500: #567ebd;
  --color-fly-away-600: #4065a0;
  --color-fly-away-700: #2f5186;
  --color-fly-away-800: #22406f;
  --color-fly-away-900: #19325b;
  --color-fly-away-950: #0c1f3c;
  --color-moutarde-de-b-nichon: #c28c00;
  --color-moutarde-de-b-nichon-50: #ffefd4;
  --color-moutarde-de-b-nichon-100: #ffe1ad;
  --color-moutarde-de-b-nichon-200: #f5c97a;
  --color-moutarde-de-b-nichon-300: #e0af52;
  --color-moutarde-de-b-nichon-400: #c28c00;
  --color-moutarde-de-b-nichon-500: #a27400;
  --color-moutarde-de-b-nichon-600: #835e00;
  --color-moutarde-de-b-nichon-700: #694a00;
  --color-moutarde-de-b-nichon-800: #543a00;
  --color-moutarde-de-b-nichon-900: #422d00;
  --color-moutarde-de-b-nichon-950: #2b1c00;
  --color-endless-river: #597cad;
  --color-endless-river-50: #ecf4ff;
  --color-endless-river-100: #d8e8ff;
  --color-endless-river-200: #b6d3fd;
  --color-endless-river-300: #9abbea;
  --color-endless-river-400: #7699cb;
  --color-endless-river-500: #597cad;
  --color-endless-river-600: #436491;
  --color-endless-river-700: #324f78;
  --color-endless-river-800: #243e61;
  --color-endless-river-900: #1a304e;
  --color-endless-river-950: #0e1e34;
  --color-starry-night: #2f6197;
  --color-starry-night-50: #eef6ff;
  --color-starry-night-100: #deedff;
  --color-starry-night-200: #bfddff;
  --color-starry-night-300: #9cc9fb;
  --color-starry-night-400: #7aabe3;
  --color-starry-night-500: #5e90ca;
  --color-starry-night-600: #4577ae;
  --color-starry-night-700: #2f6197;
  --color-starry-night-800: #214c79;
  --color-starry-night-900: #153a61;
  --color-starry-night-950: #092441;
  --color-very-coffee: #594500;
  --color-very-coffee-50: #fff5d9;
  --color-very-coffee-100: #f8eac5;
  --color-very-coffee-200: #e7d6aa;
  --color-very-coffee-300: #d4c18e;
  --color-very-coffee-400: #b7a26a;
  --color-very-coffee-500: #9c874d;
  --color-very-coffee-600: #826d34;
  --color-very-coffee-700: #6b5821;
  --color-very-coffee-800: #594500;
  --color-very-coffee-900: #443508;
  --color-very-coffee-950: #2c2102;
}