Whole Nine Yards to Shallow Water color palette

1EC02FWhole Nine Yards 58BCFFHello Summer F2A2FFParty Pig 8AD2FFClear Sky 73E9FFShallow Water

About this palette

Whole Nine Yards to Shallow Water is a 5-color vibrant, light, cool, neon palette: #1EC02F (Whole Nine Yards), #58BCFF (Hello Summer), #F2A2FF (Party Pig), #8AD2FF (Clear Sky), #73E9FF (Shallow Water). It mixes green, blue, purple, turquoise tones and feels cool overall. The strongest text pairing is #1EC02F on #73E9FF with a contrast ratio of 1.72:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Whole Nine Yards	rgb(30, 192, 47)	hsl(126, 73%, 44%)
Hello Summer	rgb(88, 188, 255)	hsl(204, 100%, 67%)
Party Pig	rgb(242, 162, 255)	hsl(292, 100%, 82%)
Clear Sky	rgb(138, 210, 255)	hsl(203, 100%, 77%)
Shallow Water	rgb(115, 233, 255)	hsl(189, 100%, 73%)

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.

Color blindness preview

CSS variables

/* Whole Nine Yards to Shallow Water — https://swatchly.xyz/palette/1ec02f-58bcff-f2a2ff-8ad2ff-73e9ff */
:root {
  --whole-nine-yards: #1ec02f;
  --hello-summer: #58bcff;
  --party-pig: #f2a2ff;
  --clear-sky: #8ad2ff;
  --shallow-water: #73e9ff;
}

Tailwind CSS v4

/* Whole Nine Yards to Shallow Water — https://swatchly.xyz/palette/1ec02f-58bcff-f2a2ff-8ad2ff-73e9ff */
@theme {
  --color-whole-nine-yards: #1ec02f;
  --color-whole-nine-yards-50: #dfffdd;
  --color-whole-nine-yards-100: #bbffb8;
  --color-whole-nine-yards-200: #8ef28d;
  --color-whole-nine-yards-300: #67de69;
  --color-whole-nine-yards-400: #1ec02f;
  --color-whole-nine-yards-500: #00a11d;
  --color-whole-nine-yards-600: #008215;
  --color-whole-nine-yards-700: #00670e;
  --color-whole-nine-yards-800: #005109;
  --color-whole-nine-yards-900: #003f05;
  --color-whole-nine-yards-950: #002802;
  --color-hello-summer: #58bcff;
  --color-hello-summer-50: #ddf0ff;
  --color-hello-summer-100: #c5e6ff;
  --color-hello-summer-200: #97d3ff;
  --color-hello-summer-300: #58bcff;
  --color-hello-summer-400: #3a9ede;
  --color-hello-summer-500: #0d85c4;
  --color-hello-summer-600: #006ca2;
  --color-hello-summer-700: #005683;
  --color-hello-summer-800: #00456a;
  --color-hello-summer-900: #003655;
  --color-hello-summer-950: #002237;
  --color-party-pig: #f2a2ff;
  --color-party-pig-50: #fdf3ff;
  --color-party-pig-100: #fce5ff;
  --color-party-pig-200: #f7c7ff;
  --color-party-pig-300: #f2a2ff;
  --color-party-pig-400: #ce84da;
  --color-party-pig-500: #b266be;
  --color-party-pig-600: #944ba0;
  --color-party-pig-700: #793584;
  --color-party-pig-800: #61256a;
  --color-party-pig-900: #4c1954;
  --color-party-pig-950: #310c37;
  --color-clear-sky: #8ad2ff;
  --color-clear-sky-50: #f3faff;
  --color-clear-sky-100: #e2f3ff;
  --color-clear-sky-200: #bbe4ff;
  --color-clear-sky-300: #8ad2ff;
  --color-clear-sky-400: #6db0d9;
  --color-clear-sky-500: #4c93bd;
  --color-clear-sky-600: #2f779f;
  --color-clear-sky-700: #175e83;
  --color-clear-sky-800: #054969;
  --color-clear-sky-900: #003752;
  --color-clear-sky-950: #002235;
  --color-shallow-water: #73e9ff;
  --color-shallow-water-50: #dff9ff;
  --color-shallow-water-100: #bff4ff;
  --color-shallow-water-200: #73e9ff;
  --color-shallow-water-300: #6fd0e2;
  --color-shallow-water-400: #3bb2c6;
  --color-shallow-water-500: #0096aa;
  --color-shallow-water-600: #007989;
  --color-shallow-water-700: #00606e;
  --color-shallow-water-800: #004b56;
  --color-shallow-water-900: #003a43;
  --color-shallow-water-950: #00242b;
}