Galaxea to Icy Plains Color Palette

About this palette

Galaxea to Icy Plains is a 5-color cool, monochromatic, gradient palette: #31356B (Galaxea), #4B568C (Piccadilly Purple), #6B7CEF (Pan Purple), #889FFF (Fennel Flower), #CFD4FF (Icy Plains). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #31356B on #CFD4FF with a contrast ratio of 7.84:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Galaxea	rgb(49, 53, 107)	hsl(236, 37%, 31%)
Piccadilly Purple	rgb(75, 86, 140)	hsl(230, 30%, 42%)
Pan Purple	rgb(107, 124, 239)	hsl(232, 80%, 68%)
Fennel Flower	rgb(136, 159, 255)	hsl(228, 100%, 77%)
Icy Plains	rgb(207, 212, 255)	hsl(234, 100%, 91%)

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.84:1 Very good#31356B on #CFD4FF
Aa7.84:1 Very good#CFD4FF on #31356B
Aa4.82:1 Good#4B568C on #CFD4FF
Aa4.82:1 Good#CFD4FF on #4B568C
Aa4.56:1 Good#31356B on #889FFF
Aa4.56:1 Good#889FFF on #31356B
Aa3.11:1 Poor#31356B on #6B7CEF
Aa3.11:1 Poor#6B7CEF on #31356B

Color blindness preview

CSS variables

/* Galaxea to Icy Plains — https://swatchly.xyz/palette/31356b-4b568c-6b7cef-889fff-cfd4ff */
:root {
  --galaxea: #31356b;
  --piccadilly-purple: #4b568c;
  --pan-purple: #6b7cef;
  --fennel-flower: #889fff;
  --icy-plains: #cfd4ff;
}

Tailwind CSS v4

/* Galaxea to Icy Plains — https://swatchly.xyz/palette/31356b-4b568c-6b7cef-889fff-cfd4ff */
@theme {
  --color-galaxea: #31356b;
  --color-galaxea-50: #f2f4ff;
  --color-galaxea-100: #e6eaff;
  --color-galaxea-200: #cdd5ff;
  --color-galaxea-300: #b2bbf3;
  --color-galaxea-400: #919ad6;
  --color-galaxea-500: #757db9;
  --color-galaxea-600: #5a619a;
  --color-galaxea-700: #454a7d;
  --color-galaxea-800: #31356b;
  --color-galaxea-900: #262a4d;
  --color-galaxea-950: #161832;
  --color-piccadilly-purple: #4b568c;
  --color-piccadilly-purple-50: #f2f5ff;
  --color-piccadilly-purple-100: #e5eaff;
  --color-piccadilly-purple-200: #ccd7ff;
  --color-piccadilly-purple-300: #b3c0f4;
  --color-piccadilly-purple-400: #93a1da;
  --color-piccadilly-purple-500: #7986c0;
  --color-piccadilly-purple-600: #606ca4;
  --color-piccadilly-purple-700: #4b568c;
  --color-piccadilly-purple-800: #3a436f;
  --color-piccadilly-purple-900: #2b3359;
  --color-piccadilly-purple-950: #1a1f3a;
  --color-pan-purple: #6b7cef;
  --color-pan-purple-50: #f3f5ff;
  --color-pan-purple-100: #e6ebff;
  --color-pan-purple-200: #cdd7ff;
  --color-pan-purple-300: #b0bfff;
  --color-pan-purple-400: #889bff;
  --color-pan-purple-500: #6b7cef;
  --color-pan-purple-600: #5360ce;
  --color-pan-purple-700: #3f49ae;
  --color-pan-purple-800: #2f368f;
  --color-pan-purple-900: #232773;
  --color-pan-purple-950: #14164d;
  --color-fennel-flower: #889fff;
  --color-fennel-flower-50: #f4f7ff;
  --color-fennel-flower-100: #e8edff;
  --color-fennel-flower-200: #cedaff;
  --color-fennel-flower-300: #b1c2ff;
  --color-fennel-flower-400: #889fff;
  --color-fennel-flower-500: #6d82df;
  --color-fennel-flower-600: #5466bf;
  --color-fennel-flower-700: #3f4ea0;
  --color-fennel-flower-800: #2f3b83;
  --color-fennel-flower-900: #222c68;
  --color-fennel-flower-950: #131a45;
  --color-icy-plains: #cfd4ff;
  --color-icy-plains-50: #f3f4ff;
  --color-icy-plains-100: #e7eaff;
  --color-icy-plains-200: #cfd4ff;
  --color-icy-plains-300: #babee2;
  --color-icy-plains-400: #9a9ec5;
  --color-icy-plains-500: #7f83aa;
  --color-icy-plains-600: #65688e;
  --color-icy-plains-700: #4f5274;
  --color-icy-plains-800: #3d3f5d;
  --color-icy-plains-900: #2e3049;
  --color-icy-plains-950: #1c1d2f;
}