Palette
Dazzling electric blues and teals create a vibrant, high-energy atmosphere.
Preview
Interface
A quick look at how Electric Dreams reads on buttons, badges, and alerts before you commit.
Marketing banner
A bolder treatment that stretches the primary and secondary colors across a full gradient banner.
Data visualization
Palette guide
The 'Electric Dreams' palette features dazzling electric blues and teals that create a vibrant, high-energy atmosphere. This cohesive range, from the bright #00FFFF to the deeper #0099FF, with intermediary shades like #33FFFF, #66FFFF, and #00CCFF, offers a sense of fluidity and modern sophistication. It's perfect for tech-focused, digital, or futuristic themes, conveying innovation, clarity, and a dynamic, ethereal quality.
primary
Utilize #00CCFF as the dominant electric blue for main calls-to-action, prominent headings, or key interactive elements that convey tech.
secondary
Employ #00FFFF for strong supporting elements, subheadings, or to create a vibrant, high-energy highlight that catches the eye.
accent
Apply #0099FF sparingly for deeper, grounding blue accents, or to add richness and depth within the blue spectrum.
background
Use a darker blue like #0099FF for depth, or opt for white/light grey for a clean, airy, and modern feel.
text
For body text on light backgrounds, use black or dark grey. On dark backgrounds, white or #00FFFF for impactful headlines will be highly visible.
Create a smooth, dynamic blue gradient for backgrounds or large graphical elements, adding depth and visual interest.
#0099FF · #00CCFF · #00FFFFIdeal for clean UI: #00CCFF for primary content, #33FFFF for bright accents, and #0099FF for supportive backgrounds or text.
#00CCFF · #33FFFF · #0099FFUse #66FFFF as a light base, #00FFFF for striking, eye-catching accents, and #00CCFF for supporting elements in digital art or tech interfaces.
#66FFFF · #00FFFF · #00CCFF:root {
--electric-dreams-1: #00FFFF;
--electric-dreams-2: #33FFFF;
--electric-dreams-3: #66FFFF;
--electric-dreams-4: #00CCFF;
--electric-dreams-5: #0099FF;
}theme: {
extend: {
colors: {
"electric-dreams": {
1: "#00FFFF",
2: "#33FFFF",
3: "#66FFFF",
4: "#00CCFF",
5: "#0099FF",
}
}
}
}Palette colors
Accessibility
Similar palettes