Color 1 – You Can Use This As Your Primary Brand Colour. Color 2 – Alternative Colour, Used Usually For The Hover Action Color 3 – Colour Used For General Text Paragraphs Color 4 – Colour Used For Headings, Subheadings And Titles Color 5 – Colour Used For Borders Color 6 – Colour Used For Subtle Backgrounds (Page Hero, Footer) Color 7 – Colour Used For The Site’s Background Color 8 – Lighter Alternative Colour, To Be Used In Header Backgrounds
Color 1 – you can use this as your primary brand colour. Color 2 – alternative colour, used usually for the hover action Color 3 – colour used for general text paragraphs Color 4 – colour used for headings, subheadings and titles Color 5 – colour used for borders Color 6 – colour used for subtle backgrounds (page hero, footer) Color 7 – colour used for the site’s background Color 8 – lighter alternative colour, to be used in header backgrounds
About This Color Palette
Color Palette:
1. Primary Brand Color:
- Name: Midnight Blue
- Hex Code:
#191970
- Description: This deep shade of blue represents stability and trust, making it ideal for branding.
2. Alternative Hover Color:
- Name: Electric Purple
- Hex Code:
#bf00ff
- Description: A vibrant and eye-catching purple that adds a pop of color for hover actions.
3. General Text Color:
- Name: Charcoal Gray
- Hex Code:
#333333
- Description: A classic dark gray that provides readability and contrast for text paragraphs.
4. Headings/Subheadings Color:
- Name: Crimson Red
- Hex Code:
#dc143c
- Description: A bold and attention-grabbing red that is perfect for headlines and titles.
5. Borders Color:
- Name: Steel Blue
- Hex Code:
#4682b4
- Description: A cool and sophisticated blue that defines borders and separates content.
6. Subtle Background Color:
- Name: Misty Rose
- Hex Code:
#ffe4e1
- Description: A soft and delicate pink that creates a calming background for hero sections and footers.
7. Site Background Color:
- Name: Platinum Gray
- Hex Code:
#e5e4e2
- Description: A light and neutral gray that provides a clean canvas for the website's content.
8. Lighter Header Background Color:
- Name: Sky Blue
- Hex Code:
#87ceeb
- Description: A refreshing and airy blue that can be used as a lighter alternative for header backgrounds.
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.
20000 Leagues Under the Sea
#191970
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Electric Purple
#bf00ff
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Carbon
#333333
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Wild Rider Red
#dc143c
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Steel Blue
#4682b4
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Misty Rose
#ffe4e1
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Platinum
#e5e4e2
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Afternoon Sky
#87ceeb
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