Zucchini to Blue Fjord Color Palette

About this palette

Zucchini to Blue Fjord is a 5-color warm palette: #004938 (Zucchini), #C15C00 (Fire Ant), #C688A9 (Moonlight Mauve), #F8A2D3 (Violet Kiss), #00728D (Blue Fjord). It mixes turquoise, orange, pink, blue tones and feels warm overall. The strongest text pairing is #004938 on #F8A2D3 with a contrast ratio of 5.52:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini	rgb(0, 73, 56)	hsl(166, 100%, 14%)
Fire Ant	rgb(193, 92, 0)	hsl(29, 100%, 38%)
Moonlight Mauve	rgb(198, 136, 169)	hsl(328, 35%, 65%)
Violet Kiss	rgb(248, 162, 211)	hsl(326, 86%, 80%)
Blue Fjord	rgb(0, 114, 141)	hsl(191, 100%, 28%)

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.

Aa5.52:1 Good#004938 on #F8A2D3
Aa5.52:1 Good#F8A2D3 on #004938
Aa3.73:1 Poor#004938 on #C688A9
Aa3.73:1 Poor#C688A9 on #004938

Color blindness preview

CSS variables

/* Zucchini to Blue Fjord — https://swatchly.xyz/palette/004938-c15c00-c688a9-f8a2d3-00728d */
:root {
  --zucchini: #004938;
  --fire-ant: #c15c00;
  --moonlight-mauve: #c688a9;
  --violet-kiss: #f8a2d3;
  --blue-fjord: #00728d;
}

Tailwind CSS v4

/* Zucchini to Blue Fjord — https://swatchly.xyz/palette/004938-c15c00-c688a9-f8a2d3-00728d */
@theme {
  --color-zucchini: #004938;
  --color-zucchini-50: #dcfef1;
  --color-zucchini-100: #cff5e7;
  --color-zucchini-200: #b6e3d3;
  --color-zucchini-300: #99cdba;
  --color-zucchini-400: #73ae9a;
  --color-zucchini-500: #55917d;
  --color-zucchini-600: #3a7562;
  --color-zucchini-700: #265c4c;
  --color-zucchini-800: #004938;
  --color-zucchini-900: #0e372b;
  --color-zucchini-950: #05221a;
  --color-fire-ant: #c15c00;
  --color-fire-ant-50: #fff0e8;
  --color-fire-ant-100: #ffe1d0;
  --color-fire-ant-200: #ffc4a1;
  --color-fire-ant-300: #fea066;
  --color-fire-ant-400: #e07b36;
  --color-fire-ant-500: #c15c00;
  --color-fire-ant-600: #9c4900;
  --color-fire-ant-700: #7d3900;
  --color-fire-ant-800: #642c00;
  --color-fire-ant-900: #4f2100;
  --color-fire-ant-950: #341300;
  --color-moonlight-mauve: #c688a9;
  --color-moonlight-mauve-50: #ffeff7;
  --color-moonlight-mauve-100: #ffdfef;
  --color-moonlight-mauve-200: #f6c4de;
  --color-moonlight-mauve-300: #e3abc8;
  --color-moonlight-mauve-400: #c688a9;
  --color-moonlight-mauve-500: #a96e8e;
  --color-moonlight-mauve-600: #8d5574;
  --color-moonlight-mauve-700: #73415d;
  --color-moonlight-mauve-800: #5d3049;
  --color-moonlight-mauve-900: #492439;
  --color-moonlight-mauve-950: #301524;
  --color-violet-kiss: #f8a2d3;
  --color-violet-kiss-50: #fff1f8;
  --color-violet-kiss-100: #ffe2f1;
  --color-violet-kiss-200: #ffc3e4;
  --color-violet-kiss-300: #f8a2d3;
  --color-violet-kiss-400: #d484b2;
  --color-violet-kiss-500: #b86897;
  --color-violet-kiss-600: #9a4e7b;
  --color-violet-kiss-700: #7e3963;
  --color-violet-kiss-800: #66294e;
  --color-violet-kiss-900: #501d3d;
  --color-violet-kiss-950: #340f27;
  --color-blue-fjord: #00728d;
  --color-blue-fjord-50: #e7f9ff;
  --color-blue-fjord-100: #ccf1ff;
  --color-blue-fjord-200: #a1e1f7;
  --color-blue-fjord-300: #80cae4;
  --color-blue-fjord-400: #55abc6;
  --color-blue-fjord-500: #328eaa;
  --color-blue-fjord-600: #00728d;
  --color-blue-fjord-700: #005a70;
  --color-blue-fjord-800: #004759;
  --color-blue-fjord-900: #003745;
  --color-blue-fjord-950: #00222c;
}