Heat Wave to Fading Horizon Color Palette

About this palette

Heat Wave to Fading Horizon is a 4-color cool palette: #FF7D2B (Heat Wave), #5A6E00 (Over the Hills), #8BEEFF (Shallow Water), #412965 (Fading Horizon). It mixes orange, green, turquoise, purple tones and feels cool overall. The strongest text pairing is #8BEEFF on #412965 with a contrast ratio of 9.12:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Heat Wave	rgb(255, 125, 43)	hsl(23, 100%, 58%)
Over the Hills	rgb(90, 110, 0)	hsl(71, 100%, 22%)
Shallow Water	rgb(139, 238, 255)	hsl(189, 100%, 77%)
Fading Horizon	rgb(65, 41, 101)	hsl(264, 42%, 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.

Aa9.12:1 Very good#8BEEFF on #412965
Aa9.12:1 Very good#412965 on #8BEEFF
Aa4.75:1 Good#FF7D2B on #412965
Aa4.75:1 Good#412965 on #FF7D2B
Aa4.30:1 Poor#5A6E00 on #8BEEFF
Aa4.30:1 Poor#8BEEFF on #5A6E00

Color blindness preview

CSS variables

/* Heat Wave to Fading Horizon — https://swatchly.xyz/palette/ff7d2b-5a6e00-8beeff-412965 */
:root {
  --heat-wave: #ff7d2b;
  --over-the-hills: #5a6e00;
  --shallow-water: #8beeff;
  --fading-horizon: #412965;
}

Tailwind CSS v4

/* Heat Wave to Fading Horizon — https://swatchly.xyz/palette/ff7d2b-5a6e00-8beeff-412965 */
@theme {
  --color-heat-wave: #ff7d2b;
  --color-heat-wave-50: #fff5f0;
  --color-heat-wave-100: #ffe9df;
  --color-heat-wave-200: #ffd0b9;
  --color-heat-wave-300: #ffb189;
  --color-heat-wave-400: #ff7d2b;
  --color-heat-wave-500: #db6200;
  --color-heat-wave-600: #b14e00;
  --color-heat-wave-700: #8d3c00;
  --color-heat-wave-800: #6f2e00;
  --color-heat-wave-900: #562200;
  --color-heat-wave-950: #371300;
  --color-over-the-hills: #5a6e00;
  --color-over-the-hills-50: #eefdcb;
  --color-over-the-hills-100: #e1f2ba;
  --color-over-the-hills-200: #cbdf9a;
  --color-over-the-hills-300: #b2c879;
  --color-over-the-hills-400: #91a74f;
  --color-over-the-hills-500: #758a2d;
  --color-over-the-hills-600: #5a6e00;
  --color-over-the-hills-700: #475700;
  --color-over-the-hills-800: #374400;
  --color-over-the-hills-900: #2a3500;
  --color-over-the-hills-950: #192100;
  --color-shallow-water: #8beeff;
  --color-shallow-water-50: #ebfcff;
  --color-shallow-water-100: #cff8ff;
  --color-shallow-water-200: #8beeff;
  --color-shallow-water-300: #84d3e1;
  --color-shallow-water-400: #56b4c4;
  --color-shallow-water-500: #2e98a8;
  --color-shallow-water-600: #007b8a;
  --color-shallow-water-700: #00616e;
  --color-shallow-water-800: #004c55;
  --color-shallow-water-900: #003a42;
  --color-shallow-water-950: #00242a;
  --color-fading-horizon: #412965;
  --color-fading-horizon-50: #f6f3ff;
  --color-fading-horizon-100: #eee7ff;
  --color-fading-horizon-200: #deceff;
  --color-fading-horizon-300: #c9b5f2;
  --color-fading-horizon-400: #ab95d7;
  --color-fading-horizon-500: #917abd;
  --color-fading-horizon-600: #7861a1;
  --color-fading-horizon-700: #614c87;
  --color-fading-horizon-800: #4f3b70;
  --color-fading-horizon-900: #412965;
  --color-fading-horizon-950: #281c3d;
}