Bluedgeons to Electric Eel color palette

314A63Bluedgeons 2382C1Mediterranean Blue E3EFFFCotton Boll 121E28The Count’s Black 81BBEBElectric Eel

Open in generator Export PNG, PDF, ASE…

About this palette

Bluedgeons to Electric Eel is a 5-color cool palette: #314A63 (Bluedgeons), #2382C1 (Mediterranean Blue), #E3EFFF (Cotton Boll), #121E28 (The Count’s Black), #81BBEB (Electric Eel). It mixes blue, white, gray tones and feels cool overall. The strongest text pairing is #E3EFFF on #121E28 with a contrast ratio of 14.54:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bluedgeons	rgb(49, 74, 99)	hsl(210, 34%, 29%)
Mediterranean Blue	rgb(35, 130, 193)	hsl(204, 69%, 45%)
Cotton Boll	rgb(227, 239, 255)	hsl(214, 100%, 95%)
The Count’s Black	rgb(18, 30, 40)	hsl(207, 38%, 11%)
Electric Eel	rgb(129, 187, 235)	hsl(207, 73%, 71%)

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.

Aa14.54:1 Super#E3EFFF on #121E28
Aa14.54:1 Super#121E28 on #E3EFFF
Aa8.25:1 Very good#121E28 on #81BBEB
Aa8.25:1 Very good#81BBEB on #121E28
Aa7.88:1 Very good#314A63 on #E3EFFF
Aa7.88:1 Very good#E3EFFF on #314A63
Aa4.47:1 Poor#314A63 on #81BBEB
Aa4.47:1 Poor#81BBEB on #314A63

Color blindness preview

CSS variables

/* Bluedgeons to Electric Eel — https://swatchly.xyz/palette/314a63-2382c1-e3efff-121e28-81bbeb */
:root {
  --bluedgeons: #314a63;
  --mediterranean-blue: #2382c1;
  --cotton-boll: #e3efff;
  --the-count-s-black: #121e28;
  --electric-eel: #81bbeb;
}

Tailwind CSS v4

/* Bluedgeons to Electric Eel — https://swatchly.xyz/palette/314a63-2382c1-e3efff-121e28-81bbeb */
@theme {
  --color-bluedgeons: #314a63;
  --color-bluedgeons-50: #eef6ff;
  --color-bluedgeons-100: #dcedff;
  --color-bluedgeons-200: #c5daf1;
  --color-bluedgeons-300: #adc5de;
  --color-bluedgeons-400: #8ca7c2;
  --color-bluedgeons-500: #718ca8;
  --color-bluedgeons-600: #58728d;
  --color-bluedgeons-700: #445c75;
  --color-bluedgeons-800: #314a63;
  --color-bluedgeons-900: #27394b;
  --color-bluedgeons-950: #162431;
  --color-mediterranean-blue: #2382c1;
  --color-mediterranean-blue-50: #e9f5ff;
  --color-mediterranean-blue-100: #d3ebff;
  --color-mediterranean-blue-200: #a8d8ff;
  --color-mediterranean-blue-300: #75c1fd;
  --color-mediterranean-blue-400: #49a0df;
  --color-mediterranean-blue-500: #2382c1;
  --color-mediterranean-blue-600: #0069a3;
  --color-mediterranean-blue-700: #005383;
  --color-mediterranean-blue-800: #004168;
  --color-mediterranean-blue-900: #003352;
  --color-mediterranean-blue-950: #002037;
  --color-cotton-boll: #e3efff;
  --color-cotton-boll-50: #f2f8ff;
  --color-cotton-boll-100: #e3efff;
  --color-cotton-boll-200: #d2dae6;
  --color-cotton-boll-300: #bac4d1;
  --color-cotton-boll-400: #99a4b2;
  --color-cotton-boll-500: #7d8896;
  --color-cotton-boll-600: #636d7b;
  --color-cotton-boll-700: #4d5662;
  --color-cotton-boll-800: #3b434e;
  --color-cotton-boll-900: #2d333c;
  --color-cotton-boll-950: #1b2026;
  --color-the-count-s-black: #121e28;
  --color-the-count-s-black-50: #eef6fe;
  --color-the-count-s-black-100: #e3edf5;
  --color-the-count-s-black-200: #cdd9e4;
  --color-the-count-s-black-300: #b5c3cf;
  --color-the-count-s-black-400: #95a4b0;
  --color-the-count-s-black-500: #798894;
  --color-the-count-s-black-600: #5f6d79;
  --color-the-count-s-black-700: #495560;
  --color-the-count-s-black-800: #37424b;
  --color-the-count-s-black-900: #293239;
  --color-the-count-s-black-950: #121e28;
  --color-electric-eel: #81bbeb;
  --color-electric-eel-50: #e1f1ff;
  --color-electric-eel-100: #cae6ff;
  --color-electric-eel-200: #a4d3fa;
  --color-electric-eel-300: #81bbeb;
  --color-electric-eel-400: #669dcb;
  --color-electric-eel-500: #4b84b1;
  --color-electric-eel-600: #346b96;
  --color-electric-eel-700: #23567c;
  --color-electric-eel-800: #164466;
  --color-electric-eel-900: #0d3653;
  --color-electric-eel-950: #052136;
}