Huehive Logo

HueHive

Material Design Stacked Bar Chart Colors

179 views
Sky Blue #3B82F6
Soft Red #F87171
Emerald Green #34D399
Amber #FBBF24
Lavender #A78BFA
Deep Orange #FB923C
Blue Gray #1E293B
Bright Coral #FCA5A1
Dark Green #065F46
Deep Purple #5B21B6
Dark Orange #C05621
Teal #0D9488
#3B82F6 Sky Blue
#F87171 Soft Red
#34D399 Emerald Green
#FBBF24 Amber
#A78BFA Lavender
#FB923C Deep Orange
#1E293B Blue Gray
#FCA5A1 Bright Coral
#065F46 Dark Green
#5B21B6 Deep Purple
#C05621 Dark Orange
#0D9488 Teal

Material Design Stacked Bar Chart Colors

About This Color Palette

Absolutely! Here’s a color palette for a stacked bar chart that aligns with Material Design 3 (Material You) principles, incorporating vibrant and harmonious colors that can adapt well in both light and dark modes.

 <Material Design Stacked Bar Chart Colors>
1. Sky Blue - 
                            
                            #3B82F6
                         - A vibrant blue that embodies openness and trust.
2. Soft Red - 
                            
                            #F87171
                         - A warm red that brings energy and attention.
3. Emerald Green - 
                            
                            #34D399
                         - A fresh green that represents nature and renewal.
4. Amber - 
                            
                            #FBBF24
                         - A bright amber that adds warmth and cheerfulness.
5. Lavender - 
                            
                            #A78BFA
                         - A soft lavender that introduces calmness and creativity.
6. Deep Orange - 
                            
                            #FB923C
                         - A bold orange that provides warmth and enthusiasm.
7. Ocean Blue - 
                            
                            #3B82F6
                         - A soothing blue reminiscent of calm waters.

1. Blue Gray - #1E293B - A deep blue-gray that grounds the palette. 2. Bright Coral - #FCA5A1 - A lively coral that stands out against a dark background. 3. Dark Green - #065F46 - A rich green that remains vibrant in dark mode. 4. Gold - #FBBF24 - A bright gold that maintains visibility and warmth. 5. Deep Purple - #5B21B6 - A striking purple that adds depth and richness. 6. Dark Orange - #C05621 - A deep orange that provides warmth with contrast. 7. Teal - #0D9488 - A vibrant teal that pops on dark backgrounds. This palette captures the essence of Material Design 3, focusing on dynamic colors that can be customized and adapted, while ensuring clarity and accessibility for data visualization. Would you like to see specific applications of these colors or need any additional variations?
C
Croma
Dashboard
Analytics
Customers
Settings
John Doe
Admin
Search...

Overview

Welcome back, here's what's happening today.

+12%
$45,231
Total Revenue
+12%
2,345
Active Users
+12%
128
New Orders

Revenue Growth

Brand
Features Pricing About

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.

9:41

Good Morning

Here's your daily update

Today

Design Review
10:00 AM
Team Meeting
11:30 AM
Lunch Break
1:00 PM
Project Focus
2:00 PM
Home
Search
Profile
B
BrandName
Sponsored
...
New Collection

Summer
Sale

Get up to 50% off on all items.

1,234 likes
BrandName Don't miss out on our biggest sale of the season! #summersale #fashion

Logo Variations

B
BrandName
B
BrandName

Business Card

B
BrandName

John Doe

Creative Director

john.doe@brandname.com

+1 (555) 123-4567

www.brandname.com

Type Scale

Heading 1

Bold / 48px

Heading 2

Bold / 36px

Heading 3

Bold / 30px

Heading 4

Bold / 24px

Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Regular / 16px

Article Layout

Design Trends

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

PNG Image

Raster image format

Copy Code

variables.css

          

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.

Sky Blue

#3B82F6

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Soft Red

#F87171

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Emerald Green

#34D399

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Amber

#FBBF24

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Lavender

#A78BFA

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Deep Orange

#FB923C

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Blue Gray

#1E293B

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Bright Coral

#FCA5A1

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Dark Green

#065F46

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Deep Purple

#5B21B6

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Dark Orange

#C05621

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Teal

#0D9488

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.

Contrast Ratio --

Normal Text

WCAG AA --
WCAG AAA --

Large Text

WCAG AA --
WCAG AAA --

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

What would you like to do?

Other Similar Palettes

#4A90E2
#FF6F61
#7D9A44
#F5B041
#A67CBE
#D35400
#008C74
#2C3E50
#E74C3C
#3D9970
#F39C12
#5D3F91
#A0522D
#16A085
#A5C8E8
#F5B2B2
#A8D8B9
#E3B84D
#D6C5E5
#F8CBA6
#A0DBD7
#2E2E2E
#F5C2C2
#6B8E4D
#E2C46D
#BFA7D9
#C76A4D
#007C7A
#A3C4E0
#007BFF
#004085
#FF6F61
#009688
#FFC107
#87CEFA
#FFDAB9
#98FB98
#E6E6FA
#F08080
#FAFAD2
#B0E0E6
#FFE4E1
#87CEFA
#4682B4
#FFD300
#FFFACD
#0047AB
#DAA520

Update Your Palette

Current Palette

Sky Blue
Soft Red
Emerald Green
Amber
Lavender
Deep Orange
Blue Gray
Bright Coral
Dark Green
Deep Purple
Dark Orange
Teal

Material Design Stacked Bar Chart Colors

Try these examples: