Huehive Logo

HueHive

Material Ui 2 Dark Theme

117 views
Primary Main #B0BEC5
Primary Light #E0F7FA
Primary Dark #62757F
On Primary #000000
Secondary Main #D7D9D9
Secondary Light #F0F0F0
Secondary Dark #8A8B8C
On Secondary #000000
Divider / Accent Main #FF80AB
On Accent #000000
Background Paper #121212
Background Default #1E1E1E
Error Main #EF5350
Error Light #FFCDD2
Error Dark #D32F2F
On Error #FFFFFF
Success Main #4CAF50
Success Light #81C784
Success Dark #388E3C
On Success #FFFFFF
Warning Main #FFEB3B
Warning Light #FFF176
Warning Dark #FBC02D
On Warning #000000
Info Main #42A5F5
Info Light #90CAF9
Info Dark #1976D2
On Info #FFFFFF
Text Primary #FFFFFF
Text Secondary #B0BEC5
Text Disabled #7B7B7B
Common Black #000000
Common White #FFFFFF
#B0BEC5 Primary Main
#E0F7FA Primary Light
#62757F Primary Dark
#000000 On Primary
#D7D9D9 Secondary Main
#F0F0F0 Secondary Light
#8A8B8C Secondary Dark
#000000 On Secondary
#FF80AB Divider / Accent Main
#000000 On Accent
#121212 Background Paper
#1E1E1E Background Default
#EF5350 Error Main
#FFCDD2 Error Light
#D32F2F Error Dark
#FFFFFF On Error
#4CAF50 Success Main
#81C784 Success Light
#388E3C Success Dark
#FFFFFF On Success
#FFEB3B Warning Main
#FFF176 Warning Light
#FBC02D Warning Dark
#000000 On Warning
#42A5F5 Info Main
#90CAF9 Info Light
#1976D2 Info Dark
#FFFFFF On Info
#FFFFFF Text Primary
#B0BEC5 Text Secondary
#7B7B7B Text Disabled
#000000 Common Black
#FFFFFF Common White

Material UI 2 Dark Theme

About This Color Palette

For a dark theme based on your existing Material UI 2 palette, I will adjust the colors to create a more suitable contrast for a dark environment. Here’s the suggested dark theme color palette:

  • Primary Colors: Darkened variants that maintain contrast against a dark background.
  • Secondary Colors: Adjusted to ensure visibility and aesthetics.
  • Error, Success, Warning, and Info: Colors that stand out against dark backgrounds.
  • Background: A dark shade for the overall background and a slightly lighter shade for surfaces.
  • Text Colors: Light colors to ensure readability.

Here’s the dark theme color palette in JSON format:

json
{
  "palette_name": "Material UI 2 Dark Theme",
  "colors": [
    {
      "name": "Primary Main",
      "hex_code": "
                            
                            #B0BEC5
                        "
    },
    {
      "name": "Primary Light",
      "hex_code": "
                            
                            #E0F7FA
                        "
    },
    {
      "name": "Primary Dark",
      "hex_code": "
                            
                            #62757F
                        "
    },
    {
      "name": "On Primary",
      "hex_code": "
                            
                            #000000
                        "
    },
    {
      "name": "Secondary Main",
      "hex_code": "
                            
                            #D7D9D9
                        "
    },
    {
      "name": "Secondary Light",
      "hex_code": "
                            
                            #F0F0F0
                        "
    },
    {
      "name": "Secondary Dark",
      "hex_code": "
                            
                            #8A8B8C
                        "
    },
    {
      "name": "On Secondary",
      "hex_code": "
                            
                            #000000
                        "
    },
    {
      "name": "Divider / Accent Main",
      "hex_code": "
                            
                            #FF80AB
                        "
    },
    {
      "name": "On Accent",
      "hex_code": "
                            
                            #000000
                        "
    },
    {
      "name": "Background Paper",
      "hex_code": "
                            
                            #121212
                        "
    },
    {
      "name": "Background Default",
      "hex_code": "
                            
                            #1E1E1E
                        "
    },
    {
      "name": "Error Main",
      "hex_code": "
                            
                            #EF5350
                        "
    },
    {
      "name": "Error Light",
      "hex_code": "
                            
                            #FFCDD2
                        "
    },
    {
      "name": "Error Dark",
      "hex_code": "
                            
                            #D32F2F
                        "
    },
    {
      "name": "On Error",
      "hex_code": "
                            
                            #FFFFFF
                        "
    },
    {
      "name": "Success Main",
      "hex_code": "
                            
                            #4CAF50
                        "
    },
    {
      "name": "Success Light",
      "hex_code": "
                            
                            #81C784
                        "
    },
    {
      "name": "Success Dark",
      "hex_code": "
                            
                            #388E3C
                        "
    },
    {
      "name": "On Success",
      "hex_code": "
                            
                            #FFFFFF
                        "
    },
    {
      "name": "Warning Main",
      "hex_code": "
                            
                            #FFEB3B
                        "
    },
    {
      "name": "Warning Light",
      "hex_code": "
                            
                            #FFF176
                        "
    },
    {
      "name": "Warning Dark",
      "hex_code": "
                            
                            #FBC02D
                        "
    },
    {
      "name": "On Warning",
      "hex_code": "
                            
                            #000000
                        "
    },
    {
      "name": "Info Main",
      "hex_code": "
                            
                            #42A5F5
                        "
    },
    {
      "name": "Info Light",
      "hex_code": "
                            
                            #90CAF9
                        "
    },
    {
      "name": "Info Dark",
      "hex_code": "
                            
                            #1976D2
                        "
    },
    {
      "name": "On Info",
      "hex_code": "
                            
                            #FFFFFF
                        "
    },
    {
      "name": "Text Primary",
      "hex_code": "
                            
                            #FFFFFF
                        "
    },
    {
      "name": "Text Secondary",
      "hex_code": "
                            
                            #B0BEC5
                        "
    },
    {
      "name": "Text Disabled",
      "hex_code": "
                            
                            #7B7B7B
                        "
    },
    {
      "name": "Common Black",
      "hex_code": "
                            
                            #000000
                        "
    },
    {
      "name": "Common White",
      "hex_code": "
                            
                            #FFFFFF
                        "
    }
  ]
}

Palette Description:

  • Primary Colors: Lightened to maintain visibility against the dark background while retaining the brand identity.
  • Secondary Colors: Adjusted to be neutral and still provide contrast.
  • Background Colors: Dark shades ( #121212 for paper and #1E1E1E for default) to reduce eye strain and enhance visual comfort.
  • Text Colors: Light colors to ensure legibility against the dark backdrop.

Would you like any further adjustments or additional components for your dark theme?

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

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)

Primary Main

#B0BEC5

Primary Light

#E0F7FA

Primary Dark

#62757F

On Primary

#000000

Secondary Main

#D7D9D9

Secondary Light

#F0F0F0

Secondary Dark

#8A8B8C

On Secondary

#000000

Divider / Accent Main

#FF80AB

On Accent

#000000

Background Paper

#121212

Background Default

#1E1E1E

Error Main

#EF5350

Error Light

#FFCDD2

Error Dark

#D32F2F

On Error

#FFFFFF

Success Main

#4CAF50

Success Light

#81C784

Success Dark

#388E3C

On Success

#FFFFFF

Warning Main

#FFEB3B

Warning Light

#FFF176

Warning Dark

#FBC02D

On Warning

#000000

Info Main

#42A5F5

Info Light

#90CAF9

Info Dark

#1976D2

On Info

#FFFFFF

Text Primary

#FFFFFF

Text Secondary

#B0BEC5

Text Disabled

#7B7B7B

Common Black

#000000

Common White

#FFFFFF

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

#529ACA
#FFD700
#FFEA00
#FFCC00
#FFC300
#A3C1E0
#4CAF50
#DE6586
#B00020
#7B001C
#C2185B
#D50032
#F8BBD0
#8E24AA
#B0BEC5
#E0F7FA
#62757F
#000000
#D7D9D9
#F0F0F0
#8A8B8C
#000000
#FF80AB
#000000
#121212
#1E1E1E
#EF5350
#FFCDD2
#D32F2F
#FFFFFF
#4CAF50
#81C784
#388E3C
#FFFFFF
#FFEB3B
#FFF176
#FBC02D
#000000
#42A5F5
#90CAF9
#1976D2
#FFFFFF
#FFFFFF
#B0BEC5
#7B7B7B
#000000
#FFFFFF
#3498DB
#1B1B1B
#2C2C2C
#FFFFFF
#1ABC9C
#3498DB
#673AB7
#1B1B1B
#2C2C2C
#FFFFFF
#3498DB
#673AB7
#1B1B1B

Update Your Palette

Current Palette

Primary Main
Primary Light
Primary Dark
On Primary
Secondary Main
Secondary Light
Secondary Dark
On Secondary
Divider / Accent Main
On Accent
Background Paper
Background Default
Error Main
Error Light
Error Dark
On Error
Success Main
Success Light
Success Dark
On Success
Warning Main
Warning Light
Warning Dark
On Warning
Info Main
Info Light
Info Dark
On Info
Text Primary
Text Secondary
Text Disabled
Common Black
Common White

Material UI 2 Dark Theme

Try these examples: