Start generating

Frozen Salmon to Tamed Beast color palette

FFA899Frozen Salmon008146Bold Irish88B1F3Fly Away003319Haunted Hills5B94F2Polar Glow9A2A21Tamed Beast
Open in generator Export PNG, PDF, ASE…

About this palette

Frozen Salmon to Tamed Beast is a 6-color cool palette: #FFA899 (Frozen Salmon), #008146 (Bold Irish), #88B1F3 (Fly Away), #003319 (Haunted Hills), #5B94F2 (Polar Glow), #9A2A21 (Tamed Beast). It mixes pink, green, blue, red tones and feels cool overall. The strongest text pairing is #FFA899 on #003319 with a contrast ratio of 7.61:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Frozen Salmonrgb(255, 168, 153)hsl(9, 100%, 80%)
Bold Irishrgb(0, 129, 70)hsl(153, 100%, 25%)
Fly Awayrgb(136, 177, 243)hsl(217, 82%, 74%)
Haunted Hillsrgb(0, 51, 25)hsl(149, 100%, 10%)
Polar Glowrgb(91, 148, 242)hsl(217, 85%, 65%)
Tamed Beastrgb(154, 42, 33)hsl(4, 65%, 37%)

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.

  • Aa7.61:1 Very good#FFA899 on #003319
  • Aa7.61:1 Very good#003319 on #FFA899
  • Aa6.47:1 Good#88B1F3 on #003319
  • Aa6.47:1 Good#003319 on #88B1F3
  • Aa4.68:1 Good#003319 on #5B94F2
  • Aa4.68:1 Good#5B94F2 on #003319
  • Aa4.15:1 Poor#FFA899 on #9A2A21
  • Aa4.15:1 Poor#9A2A21 on #FFA899

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Frozen Salmon to Tamed Beast — https://swatchly.xyz/palette/ffa899-008146-88b1f3-003319-5b94f2-9a2a21 */
:root {
  --frozen-salmon: #ffa899;
  --bold-irish: #008146;
  --fly-away: #88b1f3;
  --haunted-hills: #003319;
  --polar-glow: #5b94f2;
  --tamed-beast: #9a2a21;
}

Tailwind CSS v4

/* Frozen Salmon to Tamed Beast — https://swatchly.xyz/palette/ffa899-008146-88b1f3-003319-5b94f2-9a2a21 */
@theme {
  --color-frozen-salmon: #ffa899;
  --color-frozen-salmon-50: #fff2f0;
  --color-frozen-salmon-100: #ffe5e0;
  --color-frozen-salmon-200: #ffcac0;
  --color-frozen-salmon-300: #ffa899;
  --color-frozen-salmon-400: #da8a7c;
  --color-frozen-salmon-500: #be6d60;
  --color-frozen-salmon-600: #a05347;
  --color-frozen-salmon-700: #833e33;
  --color-frozen-salmon-800: #6a2d24;
  --color-frozen-salmon-900: #542119;
  --color-frozen-salmon-950: #37120d;
  --color-bold-irish: #008146;
  --color-bold-irish-50: #deffe7;
  --color-bold-irish-100: #c1fcd2;
  --color-bold-irish-200: #a3ebba;
  --color-bold-irish-300: #83d79f;
  --color-bold-irish-400: #58b87c;
  --color-bold-irish-500: #339d60;
  --color-bold-irish-600: #008146;
  --color-bold-irish-700: #006736;
  --color-bold-irish-800: #005029;
  --color-bold-irish-900: #003e1f;
  --color-bold-irish-950: #002711;
  --color-fly-away: #88b1f3;
  --color-fly-away-50: #f8faff;
  --color-fly-away-100: #ecf3ff;
  --color-fly-away-200: #d1e3ff;
  --color-fly-away-300: #b1cfff;
  --color-fly-away-400: #88b1f3;
  --color-fly-away-500: #6b92d2;
  --color-fly-away-600: #4f75b2;
  --color-fly-away-700: #395b93;
  --color-fly-away-800: #284677;
  --color-fly-away-900: #1b345d;
  --color-fly-away-950: #0d1f3b;
  --color-haunted-hills: #003319;
  --color-haunted-hills-50: #e2fdea;
  --color-haunted-hills-100: #d6f4df;
  --color-haunted-hills-200: #bee2c9;
  --color-haunted-hills-300: #a3cdb0;
  --color-haunted-hills-400: #7eac8d;
  --color-haunted-hills-500: #608f70;
  --color-haunted-hills-600: #457255;
  --color-haunted-hills-700: #30593f;
  --color-haunted-hills-800: #20432d;
  --color-haunted-hills-900: #003319;
  --color-haunted-hills-950: #0a1d11;
  --color-polar-glow: #5b94f2;
  --color-polar-glow-50: #e9f1ff;
  --color-polar-glow-100: #d6e6ff;
  --color-polar-glow-200: #b4d1ff;
  --color-polar-glow-300: #8cb7ff;
  --color-polar-glow-400: #5b94f2;
  --color-polar-glow-500: #427ad6;
  --color-polar-glow-600: #2c61b7;
  --color-polar-glow-700: #1c4c9a;
  --color-polar-glow-800: #103b7f;
  --color-polar-glow-900: #082d68;
  --color-polar-glow-950: #031c48;
  --color-tamed-beast: #9a2a21;
  --color-tamed-beast-50: #fff2ef;
  --color-tamed-beast-100: #ffe4e0;
  --color-tamed-beast-200: #ffc9c1;
  --color-tamed-beast-300: #ffa89b;
  --color-tamed-beast-400: #ef7d6e;
  --color-tamed-beast-500: #d35f51;
  --color-tamed-beast-600: #b44439;
  --color-tamed-beast-700: #9a2a21;
  --color-tamed-beast-800: #7a1f17;
  --color-tamed-beast-900: #62130d;
  --color-tamed-beast-950: #410705;
}

Similar palettes