Start generating

Galactic Compass to Homeworld color palette

463277Galactic Compass2C66BFMatt BlueC6BBFFViolet HeavenE2EEFFCotton Boll001E2DOxford by Night0091DDHomeworld
Open in generator Export PNG, PDF, ASE…

About this palette

Galactic Compass to Homeworld is a 6-color cool palette: #463277 (Galactic Compass), #2C66BF (Matt Blue), #C6BBFF (Violet Heaven), #E2EEFF (Cotton Boll), #001E2D (Oxford by Night), #0091DD (Homeworld). It mixes purple, blue, white tones and feels cool overall. The strongest text pairing is #E2EEFF on #001E2D with a contrast ratio of 14.64:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Galactic Compassrgb(70, 50, 119)hsl(257, 41%, 33%)
Matt Bluergb(44, 102, 191)hsl(216, 63%, 46%)
Violet Heavenrgb(198, 187, 255)hsl(250, 100%, 87%)
Cotton Bollrgb(226, 238, 255)hsl(215, 100%, 94%)
Oxford by Nightrgb(0, 30, 45)hsl(200, 100%, 9%)
Homeworldrgb(0, 145, 221)hsl(201, 100%, 43%)

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.64:1 Super#E2EEFF on #001E2D
  • Aa14.64:1 Super#001E2D on #E2EEFF
  • Aa9.77:1 Very good#C6BBFF on #001E2D
  • Aa9.77:1 Very good#001E2D on #C6BBFF
  • Aa9.03:1 Very good#463277 on #E2EEFF
  • Aa9.03:1 Very good#E2EEFF on #463277
  • Aa6.03:1 Good#463277 on #C6BBFF
  • Aa6.03:1 Good#C6BBFF on #463277

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Galactic Compass to Homeworld — https://swatchly.xyz/palette/463277-2c66bf-c6bbff-e2eeff-001e2d-0091dd */
:root {
  --galactic-compass: #463277;
  --matt-blue: #2c66bf;
  --violet-heaven: #c6bbff;
  --cotton-boll: #e2eeff;
  --oxford-by-night: #001e2d;
  --homeworld: #0091dd;
}

Tailwind CSS v4

/* Galactic Compass to Homeworld — https://swatchly.xyz/palette/463277-2c66bf-c6bbff-e2eeff-001e2d-0091dd */
@theme {
  --color-galactic-compass: #463277;
  --color-galactic-compass-50: #f5f3ff;
  --color-galactic-compass-100: #ece8ff;
  --color-galactic-compass-200: #d9d0ff;
  --color-galactic-compass-300: #c3b5fa;
  --color-galactic-compass-400: #a494df;
  --color-galactic-compass-500: #8978c3;
  --color-galactic-compass-600: #6f5da5;
  --color-galactic-compass-700: #584789;
  --color-galactic-compass-800: #463277;
  --color-galactic-compass-900: #352858;
  --color-galactic-compass-950: #21173a;
  --color-matt-blue: #2c66bf;
  --color-matt-blue-50: #eff6ff;
  --color-matt-blue-100: #dfecff;
  --color-matt-blue-200: #bfd8ff;
  --color-matt-blue-300: #99c1ff;
  --color-matt-blue-400: #659ffa;
  --color-matt-blue-500: #4782de;
  --color-matt-blue-600: #2c66bf;
  --color-matt-blue-700: #1b509f;
  --color-matt-blue-800: #0e3d82;
  --color-matt-blue-900: #062e69;
  --color-matt-blue-950: #021c46;
  --color-violet-heaven: #c6bbff;
  --color-violet-heaven-50: #f7f6ff;
  --color-violet-heaven-100: #eeecff;
  --color-violet-heaven-200: #dbd6ff;
  --color-violet-heaven-300: #c6bbff;
  --color-violet-heaven-400: #a69bda;
  --color-violet-heaven-500: #8a7fbe;
  --color-violet-heaven-600: #6f63a0;
  --color-violet-heaven-700: #584d84;
  --color-violet-heaven-800: #443a6a;
  --color-violet-heaven-900: #342b54;
  --color-violet-heaven-950: #201a37;
  --color-cotton-boll: #e2eeff;
  --color-cotton-boll-50: #f1f7ff;
  --color-cotton-boll-100: #e2eeff;
  --color-cotton-boll-200: #d1dae6;
  --color-cotton-boll-300: #b9c3d1;
  --color-cotton-boll-400: #99a3b2;
  --color-cotton-boll-500: #7d8897;
  --color-cotton-boll-600: #636d7b;
  --color-cotton-boll-700: #4d5663;
  --color-cotton-boll-800: #3b434e;
  --color-cotton-boll-900: #2d333d;
  --color-cotton-boll-950: #1b2026;
  --color-oxford-by-night: #001e2d;
  --color-oxford-by-night-50: #ebf7ff;
  --color-oxford-by-night-100: #d9effc;
  --color-oxford-by-night-200: #c2dceb;
  --color-oxford-by-night-300: #a9c6d7;
  --color-oxford-by-night-400: #87a7b9;
  --color-oxford-by-night-500: #6a8a9d;
  --color-oxford-by-night-600: #506f81;
  --color-oxford-by-night-700: #3b5767;
  --color-oxford-by-night-800: #2a4350;
  --color-oxford-by-night-900: #1e323d;
  --color-oxford-by-night-950: #001e2d;
  --color-homeworld: #0091dd;
  --color-homeworld-50: #eef7ff;
  --color-homeworld-100: #dcefff;
  --color-homeworld-200: #b7dfff;
  --color-homeworld-300: #89cbff;
  --color-homeworld-400: #41adf7;
  --color-homeworld-500: #0091dd;
  --color-homeworld-600: #0075b3;
  --color-homeworld-700: #005c8f;
  --color-homeworld-800: #004871;
  --color-homeworld-900: #003758;
  --color-homeworld-950: #002239;
}

Similar palettes