Palette

Indigo Night Sky

Deep indigos transition to softer violets, capturing the vast, silent beauty of a star-dusted night sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Indigo Night Sky reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Indigo Night Sky.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#1A1A3A#2F2F5E#4A4A7A#7A7AB3#AFAFCC

Palette guide

How to use Indigo Night Sky

Overview

The 'Indigo Night Sky' palette captures the vast, silent beauty of a star-dusted night, transitioning from deep indigos to softer violets. This captivating collection, featuring the profound #1A1A3A, the rich #2F2F5E, the elegant #4A4A7A, and the luminous #7A7AB3, culminating in the gentle #AFAFCC, offers a serene and sophisticated gradient. Designers can leverage these hues to evoke mystery, tranquility, and a sense of cosmic wonder, perfect for projects requiring a deep yet ethereal aesthetic. Developers will find this palette excellent for crafting immersive dark mode experiences and branding that feels both profound and approachable.

Best used for

Astronomy or space-themed websites and apps
Meditation or mindfulness application interfaces
Luxury product packaging for evening wear or fragrances
Digital art and illustration with cosmic themes
E-learning platforms for science or philosophy
Event branding for sophisticated evening galas

Suggested color roles

primary

Utilize #1A1A3A as the foundational deep indigo for backgrounds or large containers, setting a mysterious tone.

secondary

Employ #2F2F5E for primary navigation, card backgrounds, or prominent sections, providing a slightly lighter contrast.

accent

Apply #7A7AB3 or #AFAFCC sparingly for interactive elements, highlights, or critical information, mimicking starlight.

background

The darkest shades, #1A1A3A or #2F2F5E, are ideal for a deep, immersive background. Ensure good contrast for text.

text

Pure white or a very light grey like #AFAFCC provides optimal readability on the dark backgrounds. For secondary text, #7A7AB3 works well.

Accessibility notes

Ensure white text on #1A1A3A or #2F2F5E meets WCAG AA or AAA contrast for body text.
Avoid using #4A4A7A for small text on #2F2F5E, as contrast may be insufficient for readability.
The lightest color, #AFAFCC, should be checked for contrast when used with any mid-tone blues for text.
Provide clear visual indicators for interactive states, as color shifts within this dark palette can be subtle.

Recommended combinations

Cosmic Depth

Excellent for creating layered backgrounds or sequential information displays, mimicking the vastness of space.

#1A1A3A · #2F2F5E · #4A4A7A

Starlight Glow

Ideal for highlighting key calls-to-action or interactive elements, providing a luminous focal point.

#2F2F5E · #7A7AB3 · #AFAFCC

Gentle Transition

Perfect for gradients or subtle visual cues in dark interfaces, offering elegance and clarity.

#1A1A3A · #4A4A7A · #AFAFCC

CSS variables

:root {
  --indigo-night-sky-1: #1A1A3A;
  --indigo-night-sky-2: #2F2F5E;
  --indigo-night-sky-3: #4A4A7A;
  --indigo-night-sky-4: #7A7AB3;
  --indigo-night-sky-5: #AFAFCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "indigo-night-sky": {
        1: "#1A1A3A",
        2: "#2F2F5E",
        3: "#4A4A7A",
        4: "#7A7AB3",
        5: "#AFAFCC",
      }
    }
  }
}

Hex values

Color 1#1A1A3A

Color 2#2F2F5E

Color 3#4A4A7A

Color 4#7A7AB3

Color 5#AFAFCC

Accessibility

Contrast checker

1.3:1Fail

2:1Fail

4.2:1AA18

7.8:1AAA

1.3:1Fail

1.5:1Fail

3.1:1AA18

5.8:1AA

2:1Fail

1.5:1Fail

2.1:1Fail

3.9:1AA18

4.2:1AA18

3.1:1AA18

2.1:1Fail

1.9:1Fail

7.8:1AAA

5.8:1AA

3.9:1AA18

1.9:1Fail

Similar palettes

More like Indigo Night Sky

View all dark

Aquatic Deep Dive

Celestial Night Bloom

Cosmic Veil Wonder

Desert Night Sky

Enchanted Forest Night

Midnight Bloom Shadow