Distant Homeworld to Murasaki color palette

9BDFF7Distant Homeworld CCB600Mustard BC9732Nugget 9D6198Bermuda Onion 005970Deep Lagoon 492846Murasaki

Open in generator Export PNG, PDF, ASE…

About this palette

Distant Homeworld to Murasaki is a 6-color palette: #9BDFF7 (Distant Homeworld), #CCB600 (Mustard), #BC9732 (Nugget), #9D6198 (Bermuda Onion), #005970 (Deep Lagoon), #492846 (Murasaki). It mixes blue, yellow, pink, purple tones and feels balanced overall. The strongest text pairing is #9BDFF7 on #492846 with a contrast ratio of 8.53:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Distant Homeworld	rgb(155, 223, 247)	hsl(196, 85%, 79%)
Mustard	rgb(204, 182, 0)	hsl(54, 100%, 40%)
Nugget	rgb(188, 151, 50)	hsl(44, 58%, 47%)
Bermuda Onion	rgb(157, 97, 152)	hsl(305, 24%, 50%)
Deep Lagoon	rgb(0, 89, 112)	hsl(192, 100%, 22%)
Murasaki	rgb(73, 40, 70)	hsl(305, 29%, 22%)

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.

Aa8.53:1 Very good#9BDFF7 on #492846
Aa8.53:1 Very good#492846 on #9BDFF7
Aa6.12:1 Good#CCB600 on #492846
Aa6.12:1 Good#492846 on #CCB600
Aa5.37:1 Good#9BDFF7 on #005970
Aa5.37:1 Good#005970 on #9BDFF7
Aa4.54:1 Good#BC9732 on #492846
Aa4.54:1 Good#492846 on #BC9732

Color blindness preview

CSS variables

/* Distant Homeworld to Murasaki — https://swatchly.xyz/palette/9bdff7-ccb600-bc9732-9d6198-005970-492846 */
:root {
  --distant-homeworld: #9bdff7;
  --mustard: #ccb600;
  --nugget: #bc9732;
  --bermuda-onion: #9d6198;
  --deep-lagoon: #005970;
  --murasaki: #492846;
}

Tailwind CSS v4

/* Distant Homeworld to Murasaki — https://swatchly.xyz/palette/9bdff7-ccb600-bc9732-9d6198-005970-492846 */
@theme {
  --color-distant-homeworld: #9bdff7;
  --color-distant-homeworld-50: #e0f7ff;
  --color-distant-homeworld-100: #c5f0ff;
  --color-distant-homeworld-200: #9bdff7;
  --color-distant-homeworld-300: #8ec8dc;
  --color-distant-homeworld-400: #69a9c0;
  --color-distant-homeworld-500: #4c8fa5;
  --color-distant-homeworld-600: #327489;
  --color-distant-homeworld-700: #1e5d70;
  --color-distant-homeworld-800: #0f4a5b;
  --color-distant-homeworld-900: #053947;
  --color-distant-homeworld-950: #01242e;
  --color-mustard: #ccb600;
  --color-mustard-50: #fdf1a6;
  --color-mustard-100: #f2e58f;
  --color-mustard-200: #e0cf65;
  --color-mustard-300: #ccb600;
  --color-mustard-400: #ab9900;
  --color-mustard-500: #8f7f00;
  --color-mustard-600: #746700;
  --color-mustard-700: #5d5200;
  --color-mustard-800: #4a4100;
  --color-mustard-900: #3b3300;
  --color-mustard-950: #252000;
  --color-nugget: #bc9732;
  --color-nugget-50: #fff2d4;
  --color-nugget-100: #fee6ac;
  --color-nugget-200: #eed18b;
  --color-nugget-300: #d9b867;
  --color-nugget-400: #bc9732;
  --color-nugget-500: #a17c02;
  --color-nugget-600: #826400;
  --color-nugget-700: #684f00;
  --color-nugget-800: #523e00;
  --color-nugget-900: #403000;
  --color-nugget-950: #291d00;
  --color-bermuda-onion: #9d6198;
  --color-bermuda-onion-50: #ffecfd;
  --color-bermuda-onion-100: #ffd8fb;
  --color-bermuda-onion-200: #f1bdeb;
  --color-bermuda-onion-300: #dba2d5;
  --color-bermuda-onion-400: #bb7eb6;
  --color-bermuda-onion-500: #9d6198;
  --color-bermuda-onion-600: #824a7e;
  --color-bermuda-onion-700: #6a3866;
  --color-bermuda-onion-800: #552a52;
  --color-bermuda-onion-900: #441f42;
  --color-bermuda-onion-950: #2d122b;
  --color-deep-lagoon: #005970;
  --color-deep-lagoon-50: #e8f8ff;
  --color-deep-lagoon-100: #d0f2ff;
  --color-deep-lagoon-200: #ace0f4;
  --color-deep-lagoon-300: #8dc9e0;
  --color-deep-lagoon-400: #65a9c2;
  --color-deep-lagoon-500: #468da6;
  --color-deep-lagoon-600: #2a7188;
  --color-deep-lagoon-700: #005970;
  --color-deep-lagoon-800: #054557;
  --color-deep-lagoon-900: #003645;
  --color-deep-lagoon-950: #00212c;
  --color-murasaki: #492846;
  --color-murasaki-50: #fff0fd;
  --color-murasaki-100: #fce2f9;
  --color-murasaki-200: #ebcce7;
  --color-murasaki-300: #d7b4d3;
  --color-murasaki-400: #ba94b5;
  --color-murasaki-500: #9f799b;
  --color-murasaki-600: #845f80;
  --color-murasaki-700: #6c4a68;
  --color-murasaki-800: #573953;
  --color-murasaki-900: #492846;
  --color-murasaki-950: #2c1a2b;
}