Space color palettes

Where space palettes work

• Astronomy, science education and research project pages
• Launch pages for developer tools, AI and hardware products
• Game menus, sci-fi titles and streaming backdrops

Space versus night: more chroma, two families

Space palettes look a lot like night palettes at thumbnail size, but they are noticeably more saturated: about 39% of the swatches in these 258 palettes are strongly saturated midtones, roughly double the share in the night collection. Most palettes fall into one of two families.

• Nebula: indigo into violet and lavender, such as #0C134F, #1D267D, #5C469C, #D4ADFC.
• Aurora or deep field: dark teal into electric cyan, such as #0A4D68, #088395, #05BFDB, #00FFCA.
• A smaller group adds warm star color to a dark base, like #40128B, #9336B4, #DD58D6, #FFE79B.

Glow colors belong in small areas

The bright end of a space palette is good at pulling attention and poor at carrying long text. Cyan #00FFCA on #0A4D68 measures 7.10:1, fine for a short label or a stat. #05BFDB on the same background is 4.17:1, which only passes for large text.

Watch the near misses. White on #088395 is 4.48:1, just under the 4.5:1 needed for normal text, so a 16px button label on that fill fails. Darken the fill one step, or use a dark label instead: black on #05BFDB is 9.48:1.

A starfield hero that still reads

Keep the atmosphere behind the content, not under it. Put the starfield, mesh gradient or nebula image in the hero background, then place headings and body text on a solid or near-solid panel. With the palette #001C30, #176B87, #64CCC5, #DAFFFB, the panel is #001C30 and the text #DAFFFB (16.28:1). #176B87 measures 2.89:1 on that panel, so use it for dividers and secondary surfaces, not text.

If the star layer twinkles or drifts, wrap the animation in a prefers-reduced-motion media query so it can be switched off.

Pairing the colors

Choose one family per page, nebula violets or aurora teals; mixing both gives two competing light sources. Use the brightest swatch for one job only, such as the primary action, and a pale tint like #D4ADFC or #DAFFFB for text.

Contrast and readability

Mid-saturation violets sink into dark navy: #5C469C on #0C134F is 2.30:1, so it suits nebula shapes, not labels. When text sits over a glow or star layer, measure the text color against the lightest part of the background behind it.

Questions

What colors make a good space theme?

A very dark navy or indigo base (#001C30, #0C134F), one saturated mid color for nebula or aurora (#5C469C violet or #088395 teal), and a pale or bright highlight for stars and key actions (#D4ADFC, #00FFCA). Keep the bright highlight to a small share of the screen.

How do I make a galaxy background in CSS?

Layer two or three radial-gradient() calls on top of a dark base color: for example a violet ellipse near one corner and a teal one near the other, each fading to transparent. Small stars can be another layer of tiny radial gradients repeated with background-size. The mesh gradient tool builds the layered gradient for you.