Palette

Dreamscape Aurora Flow

An ethereal blend of vibrant blues and greens, like the dancing lights of a surreal aurora.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dreamscape Aurora Flow 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 Dreamscape Aurora Flow.

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

Data visualization

#006666#009999#33CCCC#66FFFF#99FFFF

Palette guide

How to use Dreamscape Aurora Flow

Overview

The Dreamscape Aurora Flow palette, with its mesmerizing blend of teal and aqua hues like #006666, #009999, and #33CCCC, offers designers a vibrant yet serene foundation for digital and print projects. This collection evokes the ethereal dance of an aurora, providing a cool, refreshing aesthetic. Developers will find these hex codes easy to implement for UI elements, backgrounds, and interactive components. The lighter shades, #66FFFF and #99FFFF, are perfect for highlights or subtle gradients, adding depth without overwhelming. Utilize this palette to infuse designs with a sense of wonder and calm, ensuring a cohesive and visually striking user experience.

Best used for

Fantasy game user interfaces
Nature-inspired branding and logos
Website headers with a celestial theme
Digital art and illustrations for magical scenes
Meditation or wellness app interfaces
Event promotions for light shows or festivals

Suggested color roles

primary

#006666 (Deep Teal): Establishes a strong, grounding presence, ideal for main navigation or hero sections.

secondary

#009999 (Vibrant Teal): A balanced and versatile shade for subheadings, buttons, or accent panels.

accent

#66FFFF (Bright Aqua): Provides a luminous pop, perfect for calls-to-action, interactive elements, or focal points.

background

#99FFFF (Pale Cyan): A light, airy base that allows other colors to shine, suitable for main content areas or subtle gradients.

text

Use a dark charcoal like #333333 or pure black for optimal readability against lighter backgrounds in this palette.

Accessibility notes

Ensure sufficient contrast when using #66FFFF or #99FFFF for text against light backgrounds; pair them with very dark text.
The darker shades, #006666 and #009999, offer good contrast for white text.
Avoid using #99FFFF as text on #66FFFF as contrast will be insufficient.
Check WCAG 2.1 AA guidelines for all text-to-background color pairings, especially with brighter hues.

Recommended combinations

Deep Sea Glow

Ideal for strong branding elements, primary buttons, and hero banners where depth and vibrancy are key.

#006666 · #009999 · #66FFFF

Aurora Mist

Perfect for creating light, ethereal gradients, background patterns, or secondary information panels that need to feel airy.

#33CCCC · #66FFFF · #99FFFF

Celestial Contrast

Use #006666 for headings, #33CCCC for subheadings, and #99FFFF for backgrounds to achieve a balanced, readable layout.

#006666 · #33CCCC · #99FFFF

CSS variables

:root {
  --dreamscape-aurora-flow-1: #006666;
  --dreamscape-aurora-flow-2: #009999;
  --dreamscape-aurora-flow-3: #33CCCC;
  --dreamscape-aurora-flow-4: #66FFFF;
  --dreamscape-aurora-flow-5: #99FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamscape-aurora-flow": {
        1: "#006666",
        2: "#009999",
        3: "#33CCCC",
        4: "#66FFFF",
        5: "#99FFFF",
      }
    }
  }
}

Hex values

Color 1#006666

Color 2#009999

Color 3#33CCCC

Color 4#66FFFF

Color 5#99FFFF

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.6:1AA

5.9:1AA

1.9:1Fail

1.8:1Fail

2.9:1Fail

3:1AA18

3.4:1AA18

1.8:1Fail

1.6:1Fail

1.7:1Fail

5.6:1AA

2.9:1Fail

1.6:1Fail

1:1Fail

5.9:1AA

3:1AA18

1.7:1Fail

1:1Fail

Similar palettes

More like Dreamscape Aurora Flow

Enchanted Forest Glow