Dark Neon Space Theme With States
About This Color Palette
<Dark Neon Space Theme with States>
1. Background -
#000000
- A deep black color for the primary background.
2. Text -
#FFFFFF
- Pure white for main text, ensuring high readability.
3. Headers -
#00FF00
- Neon green for headers, providing a vibrant focal point.
4. Links -
#FF00FF
- Neon magenta for links, which stands out against the dark background.
- Hover State -
#FF69B4
- Lighter pink for hover state on links, creating a visual cue for interactivity.
- Active State -
#C71585
- Darker pink for active state on links, indicating selection.
5. Primary Action Button -
#00FF00
- Neon green for primary action buttons.
- Hover State -
#00CC00
- A slightly darker green for hover state, indicating actionability.
- Active State -
#009900
- Even darker green for the active state, enhancing feedback.
6. Secondary Action Button -
#FF00FF
- Neon magenta for secondary action buttons.
- Hover State -
#D5006D
- A softer magenta for hover state, providing feedback to the user.
- Active State -
#A0004D
- Darker magenta for active state, indicating selection.
7. Tags -
#FFFF00
- Bright yellow for tags, ensuring visibility.
- Hover State -
#FFD700
- Golden yellow for hover state, enhancing the interactive feel.
- Active State -
#FFC300
- A deeper shade of yellow for the active state.
8. Search Input -
#333333
- Dark gray for the search input background, providing contrast for text.
- Placeholder Text -
#AAAAAA
- Light gray for placeholder text, ensuring it is visible but subtle.
- Focused State -
#00FF00
- Neon green outline when the input is focused, drawing attention to it.
This expanded color palette not only defines colors for various interface elements but also includes hover and active states, enhancing user interaction and feedback. The neon colors against the dark background maintain the brutalist theme while ensuring usability and accessibility.
Would you like to explore any additional elements or variations on the current palette?
Overview
Welcome back, here's what's happening today.
Revenue Growth
Build something amazing
Create stunning designs with our AI-powered color palette generator. Perfect for web, mobile, and print.
Fast Performance
Optimized for speed and efficiency.
Secure by Default
Enterprise-grade security built-in.
Easy to Use
Intuitive interface for everyone.
Good Morning
Here's your daily update
Today
Logo Variations
Business Card
John Doe
Creative Director
john.doe@brandname.com
+1 (555) 123-4567
www.brandname.com
Type Scale
Heading 1
Bold / 48pxHeading 2
Bold / 36pxHeading 3
Bold / 30pxHeading 4
Bold / 24pxBody text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Regular / 16pxArticle Layout
The Future of Color
Color trends are evolving rapidly. We are seeing a shift towards more vibrant, expressive palettes that capture attention and evoke emotion.
"Color is a power which directly influences the soul."
Why it matters
Choosing the right color palette is crucial for brand identity. It communicates values without words and creates an instant connection with the audience.
Abstract
Composition #01
Download Files
Copy Code
Simulate how your palette appears to users with different types of color vision deficiencies. Approximately 8% of men and 0.5% of women have some form of color blindness.
Original Palette
Protanopia
Red-blind (approx. 1% of men)
Deuteranopia
Green-blind (approx. 1% of men)
Tritanopia
Blue-blind (very rare)
Achromatopsia
Total color blindness (monochromacy)
Shades & Tints
Explore lighter variations (tints) and darker variations (shades) of each color. Click any color to copy its hex code.
Background
#000000
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Text
#FFFFFF
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Headers
#00FF00
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Links
#FF00FF
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Pop That Gum
#FF69B4
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Very Berry
#C71585
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Tunic Green
#00CC00
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Islamic Green
#009900
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Magenta Elephant
#D5006D
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Tags
#FFFF00
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Gold
#FFD700
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Mikado Yellow
#FFC300
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Search Input
#333333
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Moon Landing
#AAAAAA
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Berry
#A0004D
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Color Wheel Distribution
Harmony Analysis
Dominant Temperature
--
Harmony Type
--
Analyzing color relationships...
Color Values (HSL)
Select Background
Select Text Color
Contrast Analysis
Aa
The quick brown fox jumps over the lazy dog.
Normal Text
Large Text
Understanding WCAG Scores
Normal Text
- AA requires 4.5:1 ratio
- AAA requires 7.0:1 ratio
Large Text (18pt+ or 14pt+ bold)
- AA requires 3.0:1 ratio
- AAA requires 4.5:1 ratio