Peach Fizz to Blossom Color Palette

About this palette

Peach Fizz to Blossom is a 5-color cool palette: #F8A982 (Peach Fizz), #0096C0 (Swimmer), #006D2A (Enchanted Glen), #5C0068 (Velvet Vortex), #FFE7D5 (Blossom). It mixes orange, blue, green, purple, white tones and feels cool overall. The strongest text pairing is #5C0068 on #FFE7D5 with a contrast ratio of 10.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Peach Fizz	rgb(248, 169, 130)	hsl(20, 89%, 74%)
Swimmer	rgb(0, 150, 192)	hsl(193, 100%, 38%)
Enchanted Glen	rgb(0, 109, 42)	hsl(143, 100%, 21%)
Velvet Vortex	rgb(92, 0, 104)	hsl(293, 100%, 20%)
Blossom	rgb(255, 231, 213)	hsl(26, 100%, 92%)

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.66:1 Very good#5C0068 on #FFE7D5
Aa10.66:1 Very good#FFE7D5 on #5C0068
Aa6.64:1 Good#F8A982 on #5C0068
Aa6.64:1 Good#5C0068 on #F8A982
Aa5.48:1 Good#006D2A on #FFE7D5
Aa5.48:1 Good#FFE7D5 on #006D2A
Aa3.70:1 Poor#0096C0 on #5C0068
Aa3.70:1 Poor#5C0068 on #0096C0

Color blindness preview

CSS variables

/* Peach Fizz to Blossom — https://swatchly.xyz/palette/f8a982-0096c0-006d2a-5c0068-ffe7d5 */
:root {
  --peach-fizz: #f8a982;
  --swimmer: #0096c0;
  --enchanted-glen: #006d2a;
  --velvet-vortex: #5c0068;
  --blossom: #ffe7d5;
}

Tailwind CSS v4

/* Peach Fizz to Blossom — https://swatchly.xyz/palette/f8a982-0096c0-006d2a-5c0068-ffe7d5 */
@theme {
  --color-peach-fizz: #f8a982;
  --color-peach-fizz-50: #fff1ea;
  --color-peach-fizz-100: #ffe3d6;
  --color-peach-fizz-200: #ffc8ad;
  --color-peach-fizz-300: #f8a982;
  --color-peach-fizz-400: #d58b66;
  --color-peach-fizz-500: #b96f4a;
  --color-peach-fizz-600: #9b5631;
  --color-peach-fizz-700: #80411e;
  --color-peach-fizz-800: #673011;
  --color-peach-fizz-900: #522308;
  --color-peach-fizz-950: #361402;
  --color-swimmer: #0096c0;
  --color-swimmer-50: #eaf8ff;
  --color-swimmer-100: #d4f2ff;
  --color-swimmer-200: #a3e4ff;
  --color-swimmer-300: #74d0f5;
  --color-swimmer-400: #42b2db;
  --color-swimmer-500: #0096c0;
  --color-swimmer-600: #00799b;
  --color-swimmer-700: #00607c;
  --color-swimmer-800: #004b61;
  --color-swimmer-900: #00394c;
  --color-swimmer-950: #002430;
  --color-enchanted-glen: #006d2a;
  --color-enchanted-glen-50: #e0ffe3;
  --color-enchanted-glen-100: #c6fbcd;
  --color-enchanted-glen-200: #abebb4;
  --color-enchanted-glen-300: #8ed79a;
  --color-enchanted-glen-400: #67ba76;
  --color-enchanted-glen-500: #479f5a;
  --color-enchanted-glen-600: #2a8441;
  --color-enchanted-glen-700: #006d2a;
  --color-enchanted-glen-800: #00561f;
  --color-enchanted-glen-900: #004216;
  --color-enchanted-glen-950: #002a0b;
  --color-velvet-vortex: #5c0068;
  --color-velvet-vortex-50: #fdf0ff;
  --color-velvet-vortex-100: #fbe1ff;
  --color-velvet-vortex-200: #f7c2ff;
  --color-velvet-vortex-300: #eba2f6;
  --color-velvet-vortex-400: #cf7fdb;
  --color-velvet-vortex-500: #b562c1;
  --color-velvet-vortex-600: #9948a5;
  --color-velvet-vortex-700: #7f348a;
  --color-velvet-vortex-800: #682573;
  --color-velvet-vortex-900: #5c0068;
  --color-velvet-vortex-950: #390c3f;
  --color-blossom: #ffe7d5;
  --color-blossom-50: #fff3eb;
  --color-blossom-100: #ffe7d5;
  --color-blossom-200: #e6d5c8;
  --color-blossom-300: #d1bdaf;
  --color-blossom-400: #b39d8d;
  --color-blossom-500: #978271;
  --color-blossom-600: #7c6758;
  --color-blossom-700: #635143;
  --color-blossom-800: #4f3f33;
  --color-blossom-900: #3d3025;
  --color-blossom-950: #271d16;
}