Material Ui 2 Dark Theme
About This Color Palette
Certainly! Based on your existing Material UI 2 palette in light mode, here’s a complete dark theme color palette that maintains the integrity of your colors while ensuring good contrast and readability. The colors have been adjusted for a dark environment.
Dark Theme Color Palette
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: Adjusted for better visibility against dark backgrounds while retaining the essence of your theme.
- Secondary Colors: Softened for contrast but still cohesive with the overall palette.
- Background Colors: Dark shades (
#121212for paper and#1E1E1Efor default) create a comfortable viewing experience. - Text Colors: Light colors for primary text ensure legibility against dark backgrounds, with secondary text providing a softer contrast.
Would you like any further adjustments or additional components for your dark theme?
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.
Primary Main
#B0BEC5
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Primary Light
#E0F7FA
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Primary Dark
#62757F
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)On Primary
#000000
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Secondary Main
#D7D9D9
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Secondary Light
#F0F0F0
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Secondary Dark
#8A8B8C
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)On Secondary
#000000
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Divider / Accent Main
#FF80AB
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)On Accent
#000000
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Background Paper
#121212
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Background Default
#1E1E1E
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Error Main
#EF5350
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Error Light
#FFCDD2
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Error Dark
#D32F2F
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)On Error
#FFFFFF
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Success Main
#4CAF50
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Success Light
#81C784
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Success Dark
#388E3C
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)On Success
#FFFFFF
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Warning Main
#FFEB3B
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Warning Light
#FFF176
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Warning Dark
#FBC02D
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)On Warning
#000000
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Info Main
#42A5F5
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Info Light
#90CAF9
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Info Dark
#1976D2
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)On Info
#FFFFFF
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Text Primary
#FFFFFF
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Text Secondary
#B0BEC5
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Text Disabled
#7B7B7B
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Common Black
#000000
Tints
(Mixed with white - lighter)Original
Shades
(Mixed with black - darker)Common White
#FFFFFF
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