Blasphemous Blue to Veiling Waterfalls color palette

3557AEBlasphemous Blue 9DB2FFWondrous Wisteria 284681Maritime Outpost 6A8CF0Olympic Blue D9E4FFVeiling Waterfalls

Open in generator Export PNG, PDF, ASE…

About this palette

Blasphemous Blue to Veiling Waterfalls is a 5-color cool, monochromatic palette: #3557AE (Blasphemous Blue), #9DB2FF (Wondrous Wisteria), #284681 (Maritime Outpost), #6A8CF0 (Olympic Blue), #D9E4FF (Veiling Waterfalls). It mixes blue tones and feels cool overall. The strongest text pairing is #284681 on #D9E4FF with a contrast ratio of 7.22:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blasphemous Blue	rgb(53, 87, 174)	hsl(223, 53%, 45%)
Wondrous Wisteria	rgb(157, 178, 255)	hsl(227, 100%, 81%)
Maritime Outpost	rgb(40, 70, 129)	hsl(220, 53%, 33%)
Olympic Blue	rgb(106, 140, 240)	hsl(225, 82%, 68%)
Veiling Waterfalls	rgb(217, 228, 255)	hsl(223, 100%, 93%)

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.22:1 Very good#284681 on #D9E4FF
Aa7.22:1 Very good#D9E4FF on #284681
Aa5.28:1 Good#3557AE on #D9E4FF
Aa5.28:1 Good#D9E4FF on #3557AE
Aa4.49:1 Poor#9DB2FF on #284681
Aa4.49:1 Poor#284681 on #9DB2FF
Aa3.28:1 Poor#3557AE on #9DB2FF
Aa3.28:1 Poor#9DB2FF on #3557AE

Color blindness preview

CSS variables

/* Blasphemous Blue to Veiling Waterfalls — https://swatchly.xyz/palette/3557ae-9db2ff-284681-6a8cf0-d9e4ff */
:root {
  --blasphemous-blue: #3557ae;
  --wondrous-wisteria: #9db2ff;
  --maritime-outpost: #284681;
  --olympic-blue: #6a8cf0;
  --veiling-waterfalls: #d9e4ff;
}

Tailwind CSS v4

/* Blasphemous Blue to Veiling Waterfalls — https://swatchly.xyz/palette/3557ae-9db2ff-284681-6a8cf0-d9e4ff */
@theme {
  --color-blasphemous-blue: #3557ae;
  --color-blasphemous-blue-50: #f0f5ff;
  --color-blasphemous-blue-100: #e2ebff;
  --color-blasphemous-blue-200: #c7d9ff;
  --color-blasphemous-blue-300: #a8c4ff;
  --color-blasphemous-blue-400: #7ca3fc;
  --color-blasphemous-blue-500: #6188e3;
  --color-blasphemous-blue-600: #496ec6;
  --color-blasphemous-blue-700: #3557ae;
  --color-blasphemous-blue-800: #27438c;
  --color-blasphemous-blue-900: #1b3271;
  --color-blasphemous-blue-950: #0e1f4c;
  --color-wondrous-wisteria: #9db2ff;
  --color-wondrous-wisteria-50: #eaefff;
  --color-wondrous-wisteria-100: #dae3ff;
  --color-wondrous-wisteria-200: #becdff;
  --color-wondrous-wisteria-300: #9db2ff;
  --color-wondrous-wisteria-400: #8194dd;
  --color-wondrous-wisteria-500: #687ac3;
  --color-wondrous-wisteria-600: #5162a6;
  --color-wondrous-wisteria-700: #3f4d8b;
  --color-wondrous-wisteria-800: #303c72;
  --color-wondrous-wisteria-900: #242e5d;
  --color-wondrous-wisteria-950: #151c3d;
  --color-maritime-outpost: #284681;
  --color-maritime-outpost-50: #f0f5ff;
  --color-maritime-outpost-100: #e1ecff;
  --color-maritime-outpost-200: #c3d8ff;
  --color-maritime-outpost-300: #a3c3fd;
  --color-maritime-outpost-400: #82a4e3;
  --color-maritime-outpost-500: #6789ca;
  --color-maritime-outpost-600: #4f6fad;
  --color-maritime-outpost-700: #3b5992;
  --color-maritime-outpost-800: #284681;
  --color-maritime-outpost-900: #203662;
  --color-maritime-outpost-950: #112242;
  --color-olympic-blue: #6a8cf0;
  --color-olympic-blue-50: #f4f7ff;
  --color-olympic-blue-100: #e9f0ff;
  --color-olympic-blue-200: #d0deff;
  --color-olympic-blue-300: #b3c9ff;
  --color-olympic-blue-400: #88a8ff;
  --color-olympic-blue-500: #6a8cf0;
  --color-olympic-blue-600: #4f6ecf;
  --color-olympic-blue-700: #3a55ae;
  --color-olympic-blue-800: #29408f;
  --color-olympic-blue-900: #1d2f72;
  --color-olympic-blue-950: #0f1b4b;
  --color-veiling-waterfalls: #d9e4ff;
  --color-veiling-waterfalls-50: #e9efff;
  --color-veiling-waterfalls-100: #d9e4ff;
  --color-veiling-waterfalls-200: #c9d2e6;
  --color-veiling-waterfalls-300: #b3bcd3;
  --color-veiling-waterfalls-400: #949eb6;
  --color-veiling-waterfalls-500: #7a849c;
  --color-veiling-waterfalls-600: #616a81;
  --color-veiling-waterfalls-700: #4d556a;
  --color-veiling-waterfalls-800: #3b4254;
  --color-veiling-waterfalls-900: #2c3242;
  --color-veiling-waterfalls-950: #1b1f2a;
}