Palette

Cyber Rain Puddle

A progression of deep to bright teals, like futuristic rain reflecting neon signs in a puddle.

MonochromeDark5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyber Rain Puddle 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 Cyber Rain Puddle.

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

Data visualization

#001111#003333#006666#00CCCC#66FFFF

Palette guide

How to use Cyber Rain Puddle

Overview

The Cyber Rain Puddle palette offers a serene yet futuristic progression of deep to bright teals, like rain reflecting neon signs in a digital puddle. From the almost black #001111 to the luminous #66FFFF, this monochrome palette provides a sophisticated gradient. #003333 and #006666 offer versatile mid-tones, while #00CCCC introduces a vibrant, energetic teal. Designers can leverage these hex codes to create sleek, modern interfaces, calming yet innovative digital art, or branding that conveys a sense of depth, tranquility, and technological advancement. Developers will find this palette excellent for crafting structured, readable, and visually appealing user interfaces with a cohesive, cool aesthetic.

Best used for

Dark mode UI/UX designs
Eco-tech or sustainability branding
Sci-fi game environments (e.g., rain-slicked streets)
Water-themed digital art and illustrations
Corporate presentations with a calm, techy feel
Minimalist web design for productivity apps

Suggested color roles

primary

#006666 - A balanced, mid-tone teal that can serve as a strong primary color for branding and major content blocks.

secondary

#003333 - A deeper, more substantial teal, suitable for supporting content, navigation, or background sections that need gravitas.

accent

#00CCCC - A vibrant, energetic teal, perfect for subtle highlights, interactive elements, or outlining key information.

background

#001111 - A very dark, almost black-teal that provides a deep, immersive, and calming base for content.

text

#66FFFF - A very light, bright teal, offering excellent readability for headings and body text against the darkest backgrounds like #001111.

Accessibility notes

Ensure sufficient contrast between lighter shades like #66FFFF and darker backgrounds such as #001111 for text.
Avoid using #001111 and #003333 for small text or icons in close proximity due to their low contrast.
The palette is monochromatic teal; consider alternative visual cues for color-blind users beyond hue.
Test text legibility on all background shades, especially for smaller font sizes, to ensure WCAG AA compliance.

Recommended combinations

Deep Reflection

Creating a deep, layered background or subtle gradient, evoking depth like a puddle.

#001111 · #003333 · #006666

Neon Ripple

Highlighting interactive components or data points with vibrant, contrasting glows against a dark canvas.

#00CCCC · #66FFFF · #003333

Digital Rain

Smooth color transitions for banners, hero sections, or abstract background patterns, mimicking rain effects.

#006666 · #00CCCC · #001111

CSS variables

:root {
  --cyber-rain-puddle-1: #001111;
  --cyber-rain-puddle-2: #003333;
  --cyber-rain-puddle-3: #006666;
  --cyber-rain-puddle-4: #00CCCC;
  --cyber-rain-puddle-5: #66FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyber-rain-puddle": {
        1: "#001111",
        2: "#003333",
        3: "#006666",
        4: "#00CCCC",
        5: "#66FFFF",
      }
    }
  }
}

Hex values

Color 1#001111

Color 2#003333

Color 3#006666

Color 4#00CCCC

Color 5#66FFFF

Accessibility

Contrast checker

1.4:1Fail

2.8:1Fail

9.7:1AAA

15.9:1AAA

1.4:1Fail

2:1Fail

6.9:1AA

11.4:1AAA

2.8:1Fail

2:1Fail

3.4:1AA18

5.6:1AA

9.7:1AAA

6.9:1AA

3.4:1AA18

1.6:1Fail

15.9:1AAA

11.4:1AAA

5.6:1AA

1.6:1Fail

Similar palettes

More like Cyber Rain Puddle

Volcanic Obsidian Edge

Abyssal Pearl Gleam