Sparky Blue to Alligator Gladiator color palette

56E8FESparky Blue FF958CMona Lisa 009AA1Baltic 747300Topiary Green 4D4C78Tangent Periwinkle 47400AAlligator Gladiator

Open in generator Export PNG, PDF, ASE…

About this palette

Sparky Blue to Alligator Gladiator is a 6-color palette: #56E8FE (Sparky Blue), #FF958C (Mona Lisa), #009AA1 (Baltic), #747300 (Topiary Green), #4D4C78 (Tangent Periwinkle), #47400A (Alligator Gladiator). It mixes turquoise, red, brown, purple tones and feels balanced overall. The strongest text pairing is #56E8FE on #47400A with a contrast ratio of 7.16:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sparky Blue	rgb(86, 232, 254)	hsl(188, 99%, 67%)
Mona Lisa	rgb(255, 149, 140)	hsl(5, 100%, 77%)
Baltic	rgb(0, 154, 161)	hsl(183, 100%, 32%)
Topiary Green	rgb(116, 115, 0)	hsl(59, 100%, 23%)
Tangent Periwinkle	rgb(77, 76, 120)	hsl(241, 22%, 38%)
Alligator Gladiator	rgb(71, 64, 10)	hsl(53, 75%, 16%)

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.16:1 Very good#56E8FE on #47400A
Aa7.16:1 Very good#47400A on #56E8FE
Aa5.48:1 Good#56E8FE on #4D4C78
Aa5.48:1 Good#4D4C78 on #56E8FE
Aa4.95:1 Good#FF958C on #47400A
Aa4.95:1 Good#47400A on #FF958C
Aa3.79:1 Poor#FF958C on #4D4C78
Aa3.79:1 Poor#4D4C78 on #FF958C

Color blindness preview

CSS variables

/* Sparky Blue to Alligator Gladiator — https://swatchly.xyz/palette/56e8fe-ff958c-009aa1-747300-4d4c78-47400a */
:root {
  --sparky-blue: #56e8fe;
  --mona-lisa: #ff958c;
  --baltic: #009aa1;
  --topiary-green: #747300;
  --tangent-periwinkle: #4d4c78;
  --alligator-gladiator: #47400a;
}

Tailwind CSS v4

/* Sparky Blue to Alligator Gladiator — https://swatchly.xyz/palette/56e8fe-ff958c-009aa1-747300-4d4c78-47400a */
@theme {
  --color-sparky-blue: #56e8fe;
  --color-sparky-blue-50: #d5f9ff;
  --color-sparky-blue-100: #b1f4ff;
  --color-sparky-blue-200: #56e8fe;
  --color-sparky-blue-300: #56cfe2;
  --color-sparky-blue-400: #00b2c6;
  --color-sparky-blue-500: #0094a6;
  --color-sparky-blue-600: #007886;
  --color-sparky-blue-700: #00606b;
  --color-sparky-blue-800: #004c55;
  --color-sparky-blue-900: #003a42;
  --color-sparky-blue-950: #00242a;
  --color-mona-lisa: #ff958c;
  --color-mona-lisa-50: #ffebe8;
  --color-mona-lisa-100: #ffdbd6;
  --color-mona-lisa-200: #ffbcb5;
  --color-mona-lisa-300: #ff958c;
  --color-mona-lisa-400: #dd7871;
  --color-mona-lisa-500: #c15e57;
  --color-mona-lisa-600: #a34540;
  --color-mona-lisa-700: #88322f;
  --color-mona-lisa-800: #6f2421;
  --color-mona-lisa-900: #5a1917;
  --color-mona-lisa-950: #3b0c0b;
  --color-baltic: #009aa1;
  --color-baltic-50: #dbfdff;
  --color-baltic-100: #b8fafd;
  --color-baltic-200: #99e8ed;
  --color-baltic-300: #75d4d9;
  --color-baltic-400: #43b5bc;
  --color-baltic-500: #009aa1;
  --color-baltic-600: #007c82;
  --color-baltic-700: #006267;
  --color-baltic-800: #004d51;
  --color-baltic-900: #003b3e;
  --color-baltic-950: #002527;
  --color-topiary-green: #747300;
  --color-topiary-green-50: #f8f9c8;
  --color-topiary-green-100: #eff0b9;
  --color-topiary-green-200: #dcde9b;
  --color-topiary-green-300: #c7c87b;
  --color-topiary-green-400: #a9a951;
  --color-topiary-green-500: #8e8e2d;
  --color-topiary-green-600: #747300;
  --color-topiary-green-700: #5c5b00;
  --color-topiary-green-800: #484700;
  --color-topiary-green-900: #373600;
  --color-topiary-green-950: #222200;
  --color-tangent-periwinkle: #4d4c78;
  --color-tangent-periwinkle-50: #f4f4ff;
  --color-tangent-periwinkle-100: #e8e9ff;
  --color-tangent-periwinkle-200: #d2d3fa;
  --color-tangent-periwinkle-300: #babbe7;
  --color-tangent-periwinkle-400: #9a9aca;
  --color-tangent-periwinkle-500: #7e7eae;
  --color-tangent-periwinkle-600: #646390;
  --color-tangent-periwinkle-700: #4d4c78;
  --color-tangent-periwinkle-800: #3c3b5e;
  --color-tangent-periwinkle-900: #2e2d4a;
  --color-tangent-periwinkle-950: #1b1b30;
  --color-alligator-gladiator: #47400a;
  --color-alligator-gladiator-50: #faf7d9;
  --color-alligator-gladiator-100: #f1edcc;
  --color-alligator-gladiator-200: #ded9b2;
  --color-alligator-gladiator-300: #c8c295;
  --color-alligator-gladiator-400: #a9a270;
  --color-alligator-gladiator-500: #8d8653;
  --color-alligator-gladiator-600: #726b3a;
  --color-alligator-gladiator-700: #5a5427;
  --color-alligator-gladiator-800: #47400a;
  --color-alligator-gladiator-900: #36310f;
  --color-alligator-gladiator-950: #211e06;
}