What are the hex codes in the Stellar Indigo & Cornflower palette?

The Stellar Indigo & Cornflower color palette consists of Licorice #121016, Indigo #54149C, Eggplant #693B79, Cornflower #5B9FFF.

How should I use the Stellar Indigo & Cornflower palette on a website?

Use Cornflower #5B9FFF as the background, Licorice #121016 for text, Indigo #54149C for buttons and links, and Eggplant #693B79 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Cornflower at 7.06:1.

Which colors in Stellar Indigo & Cornflower have enough contrast for text?

The highest-contrast pair is #121016 on #5B9FFF with a ratio of 7.06:1, which passes WCAG AA for normal text.

#121016Licorice

#54149CIndigo

#693B79Eggplant

#5B9FFFCornflower

Stellar Indigo & Cornflower color palette

Space Dark Vibrant Cold Black Purple Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Licorice	`#121016`	`rgb(18, 16, 22)`	`hsl(260, 16%, 7%)`	`oklch(17.8% 0.013 300)`
Indigo	`#54149C`	`rgb(84, 20, 156)`	`hsl(268, 77%, 35%)`	`oklch(38.8% 0.194 297)`
Eggplant	`#693B79`	`rgb(105, 59, 121)`	`hsl(285, 34%, 35%)`	`oklch(43.5% 0.111 317)`
Cornflower	`#5B9FFF`	`rgb(91, 159, 255)`	`hsl(215, 100%, 68%)`	`oklch(70.2% 0.158 257)`

Why it works and how to use it

Stellar Indigo & Cornflower is a dark, split color palette tagged space, dark, vibrant. The hues span about 70°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.

With 3 chromatic colors, Indigo takes the lead while the rest support. Lightness runs from 7% to 68%. Well suited to dark-mode interfaces and gaming.

Background: Cornflower (#5B9FFF) is the lightest color, so it belongs on large surfaces.
Text: Licorice (#121016) on #5B9FFF gives 7.06:1, passing WCAG AAA.
Primary: Indigo (#54149C) is the most saturated mid-tone; use it for buttons and links (4.01:1 against the background, fine for UI elements).
Accent: Eggplant (#693B79) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Cornflower at 7.06:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Stellar Indigo & Cornflower

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#121016

#54149C

#693B79

#5B9FFF

Color-blind check: under tritanopia, Indigo and Eggplant become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#121016` on `#5B9FFF`	Aa	7.06:1	AAA
`#54149C` on `#5B9FFF`	Aa	4.01:1	AA large only
`#693B79` on `#5B9FFF`	Aa	3.14:1	AA large only
`#121016` on `#693B79`	Aa	2.25:1	Fail
`#121016` on `#54149C`	Aa	1.76:1	Fail
`#54149C` on `#693B79`	Aa	1.28:1	Fail

:root {
  --licorice: #121016;
  --indigo: #54149C;
  --eggplant: #693B79;
  --cornflower: #5B9FFF;
}

$licorice: #121016;
$indigo: #54149C;
$eggplant: #693B79;
$cornflower: #5B9FFF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'licorice': '#121016',
        'indigo': '#54149C',
        'eggplant': '#693B79',
        'cornflower': '#5B9FFF',
      },
    },
  },
};

{
  "name": "Stellar Indigo & Cornflower",
  "colors": [
    "#121016",
    "#54149C",
    "#693B79",
    "#5B9FFF"
  ]
}

background: linear-gradient(135deg, #121016, #54149C, #693B79, #5B9FFF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-11-11 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood