Alligator Alley to Purple Void color palette

BED183Alligator Alley 00B5FAHawaii Morning D74784Kirby 005E89Oceanic Motion 4B1E38Purple Void

About this palette

Alligator Alley to Purple Void is a 5-color cool palette: #BED183 (Alligator Alley), #00B5FA (Hawaii Morning), #D74784 (Kirby), #005E89 (Oceanic Motion), #4B1E38 (Purple Void). It mixes green, blue, pink, red tones and feels cool overall. The strongest text pairing is #BED183 on #4B1E38 with a contrast ratio of 8.20:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Alligator Alley	rgb(190, 209, 131)	hsl(75, 46%, 67%)
Hawaii Morning	rgb(0, 181, 250)	hsl(197, 100%, 49%)
Kirby	rgb(215, 71, 132)	hsl(335, 64%, 56%)
Oceanic Motion	rgb(0, 94, 137)	hsl(199, 100%, 27%)
Purple Void	rgb(75, 30, 56)	hsl(325, 43%, 21%)

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.

Aa8.20:1 Very good#BED183 on #4B1E38
Aa8.20:1 Very good#4B1E38 on #BED183
Aa5.83:1 Good#00B5FA on #4B1E38
Aa5.83:1 Good#4B1E38 on #00B5FA
Aa4.27:1 Poor#BED183 on #005E89
Aa4.27:1 Poor#005E89 on #BED183
Aa3.32:1 Poor#D74784 on #4B1E38
Aa3.32:1 Poor#4B1E38 on #D74784

Color blindness preview

CSS variables

/* Alligator Alley to Purple Void — https://swatchly.xyz/palette/bed183-00b5fa-d74784-005e89-4b1e38 */
:root {
  --alligator-alley: #bed183;
  --hawaii-morning: #00b5fa;
  --kirby: #d74784;
  --oceanic-motion: #005e89;
  --purple-void: #4b1e38;
}

Tailwind CSS v4

/* Alligator Alley to Purple Void — https://swatchly.xyz/palette/bed183-00b5fa-d74784-005e89-4b1e38 */
@theme {
  --color-alligator-alley: #bed183;
  --color-alligator-alley-50: #f3fed5;
  --color-alligator-alley-100: #eaf6c8;
  --color-alligator-alley-200: #d6e4ad;
  --color-alligator-alley-300: #bed183;
  --color-alligator-alley-400: #9eaf67;
  --color-alligator-alley-500: #829347;
  --color-alligator-alley-600: #67772b;
  --color-alligator-alley-700: #505e15;
  --color-alligator-alley-800: #3e4905;
  --color-alligator-alley-900: #2e3800;
  --color-alligator-alley-950: #1c2300;
  --color-hawaii-morning: #00b5fa;
  --color-hawaii-morning-50: #eff9ff;
  --color-hawaii-morning-100: #ddf2ff;
  --color-hawaii-morning-200: #b5e3ff;
  --color-hawaii-morning-300: #81d1ff;
  --color-hawaii-morning-400: #00b5fa;
  --color-hawaii-morning-500: #0096d1;
  --color-hawaii-morning-600: #0079a9;
  --color-hawaii-morning-700: #005f86;
  --color-hawaii-morning-800: #004a69;
  --color-hawaii-morning-900: #003851;
  --color-hawaii-morning-950: #002334;
  --color-kirby: #d74784;
  --color-kirby-50: #fff1f5;
  --color-kirby-100: #ffe2ea;
  --color-kirby-200: #ffc4d6;
  --color-kirby-300: #ff9ebf;
  --color-kirby-400: #f568a0;
  --color-kirby-500: #d74784;
  --color-kirby-600: #b6296a;
  --color-kirby-700: #981054;
  --color-kirby-800: #7b0041;
  --color-kirby-900: #600032;
  --color-kirby-950: #3f001f;
  --color-oceanic-motion: #005e89;
  --color-oceanic-motion-50: #ecf7ff;
  --color-oceanic-motion-100: #d8efff;
  --color-oceanic-motion-200: #b0dfff;
  --color-oceanic-motion-300: #8ccaf4;
  --color-oceanic-motion-400: #65abd9;
  --color-oceanic-motion-500: #4590be;
  --color-oceanic-motion-600: #2875a1;
  --color-oceanic-motion-700: #005e89;
  --color-oceanic-motion-800: #00496c;
  --color-oceanic-motion-900: #003855;
  --color-oceanic-motion-950: #002337;
  --color-purple-void: #4b1e38;
  --color-purple-void-50: #fff1f7;
  --color-purple-void-100: #ffe2f0;
  --color-purple-void-200: #f5c9df;
  --color-purple-void-300: #e2b0c9;
  --color-purple-void-400: #c48faa;
  --color-purple-void-500: #a8728e;
  --color-purple-void-600: #8a5873;
  --color-purple-void-700: #70435b;
  --color-purple-void-800: #583247;
  --color-purple-void-900: #4b1e38;
  --color-purple-void-950: #2c1521;
}