Olympic Blue to Godzilla color palette

618EEAOlympic Blue 925597Vicious Violet B5D22DSerpent Sceptre DDE7FFVeiling Waterfalls 4E4D01Godzilla

Open in generator Export PNG, PDF, ASE…

About this palette

Olympic Blue to Godzilla is a 5-color cool palette: #618EEA (Olympic Blue), #925597 (Vicious Violet), #B5D22D (Serpent Sceptre), #DDE7FF (Veiling Waterfalls), #4E4D01 (Godzilla). It mixes blue, pink, green, gray, brown tones and feels cool overall. The strongest text pairing is #DDE7FF on #4E4D01 with a contrast ratio of 7.10:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Olympic Blue	rgb(97, 142, 234)	hsl(220, 77%, 65%)
Vicious Violet	rgb(146, 85, 151)	hsl(295, 28%, 46%)
Serpent Sceptre	rgb(181, 210, 45)	hsl(71, 65%, 50%)
Veiling Waterfalls	rgb(221, 231, 255)	hsl(222, 100%, 93%)
Godzilla	rgb(78, 77, 1)	hsl(59, 97%, 15%)

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.10:1 Very good#DDE7FF on #4E4D01
Aa7.10:1 Very good#4E4D01 on #DDE7FF
Aa5.12:1 Good#B5D22D on #4E4D01
Aa5.12:1 Good#4E4D01 on #B5D22D
Aa4.27:1 Poor#925597 on #DDE7FF
Aa4.27:1 Poor#DDE7FF on #925597
Aa3.08:1 Poor#925597 on #B5D22D
Aa3.08:1 Poor#B5D22D on #925597

Color blindness preview

CSS variables

/* Olympic Blue to Godzilla — https://swatchly.xyz/palette/618eea-925597-b5d22d-dde7ff-4e4d01 */
:root {
  --olympic-blue: #618eea;
  --vicious-violet: #925597;
  --serpent-sceptre: #b5d22d;
  --veiling-waterfalls: #dde7ff;
  --godzilla: #4e4d01;
}

Tailwind CSS v4

/* Olympic Blue to Godzilla — https://swatchly.xyz/palette/618eea-925597-b5d22d-dde7ff-4e4d01 */
@theme {
  --color-olympic-blue: #618eea;
  --color-olympic-blue-50: #f3f7ff;
  --color-olympic-blue-100: #e7f0ff;
  --color-olympic-blue-200: #cddeff;
  --color-olympic-blue-300: #adc9ff;
  --color-olympic-blue-400: #7ea9ff;
  --color-olympic-blue-500: #618eea;
  --color-olympic-blue-600: #4670c9;
  --color-olympic-blue-700: #3157a9;
  --color-olympic-blue-800: #21428a;
  --color-olympic-blue-900: #15316e;
  --color-olympic-blue-950: #091d49;
  --color-vicious-violet: #925597;
  --color-vicious-violet-50: #fef0ff;
  --color-vicious-violet-100: #fde1ff;
  --color-vicious-violet-200: #f7c6fa;
  --color-vicious-violet-300: #e5ade8;
  --color-vicious-violet-400: #c88bcd;
  --color-vicious-violet-500: #ae6fb2;
  --color-vicious-violet-600: #925597;
  --color-vicious-violet-700: #77407c;
  --color-vicious-violet-800: #5f2f63;
  --color-vicious-violet-900: #4b214e;
  --color-vicious-violet-950: #301233;
  --color-serpent-sceptre: #b5d22d;
  --color-serpent-sceptre-50: #eeffbf;
  --color-serpent-sceptre-100: #e3f8a3;
  --color-serpent-sceptre-200: #cee67e;
  --color-serpent-sceptre-300: #b5d22d;
  --color-serpent-sceptre-400: #97b100;
  --color-serpent-sceptre-500: #7d9300;
  --color-serpent-sceptre-600: #647600;
  --color-serpent-sceptre-700: #4f5d00;
  --color-serpent-sceptre-800: #3d4900;
  --color-serpent-sceptre-900: #2e3800;
  --color-serpent-sceptre-950: #1c2300;
  --color-veiling-waterfalls: #dde7ff;
  --color-veiling-waterfalls-50: #ecf2ff;
  --color-veiling-waterfalls-100: #dde7ff;
  --color-veiling-waterfalls-200: #cdd4e6;
  --color-veiling-waterfalls-300: #b6bed2;
  --color-veiling-waterfalls-400: #969fb5;
  --color-veiling-waterfalls-500: #7c859a;
  --color-veiling-waterfalls-600: #636b7f;
  --color-veiling-waterfalls-700: #4d5567;
  --color-veiling-waterfalls-800: #3c4252;
  --color-veiling-waterfalls-900: #2d3340;
  --color-veiling-waterfalls-950: #1b1f29;
  --color-godzilla: #4e4d01;
  --color-godzilla-50: #f7f8d3;
  --color-godzilla-100: #edefc5;
  --color-godzilla-200: #dadcaa;
  --color-godzilla-300: #c6c78f;
  --color-godzilla-400: #a8a96a;
  --color-godzilla-500: #8e8f4d;
  --color-godzilla-600: #757534;
  --color-godzilla-700: #605f21;
  --color-godzilla-800: #4e4d01;
  --color-godzilla-900: #3c3b08;
  --color-godzilla-950: #262502;
}