Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the Material Design dark theme colors?

I'm looking for the color palette used by Material Design's Dark theme as found on this page: http://developer.android.com/training/material/theme.html

Any ideas? I've done a quick google and couldn't find anything about it. I'm looking for layout background, drawer background, appbar color, etc.

like image 743
REJH Avatar asked Apr 28 '16 13:04

REJH


People also ask

What is material design color palette?

Color usage and palettes link The Material Design color system helps you apply color to your UI in a meaningful way. In this system, you select a primary and a secondary color to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways.

What is a dark color palette?

Dark palettes don't necessarily need to consist of all darker colors and shades. Vibrant and bold colors can be included too. There is a lot of variety to play with when it comes to dark color schemes. You can use black and shades of grey, as well as deepened primary colors like navy blue, merlot, or deep greens.

What is material dark?

The Material dark theme system can be used to create a beautiful and functional dark theme for your app, which generally consists of dark background colors and light foreground colors for elements such as text and iconography.


3 Answers

Update: the answer below contains a link to an archive of the Material docs. Check out the current docs for the most up to date information.

Scroll to the bottom of the color docs to see the dark theme colors.

enter image description here

Here is the text color info from the same docs:

enter image description here

See this link to convert those percentage values to hex.

like image 145
Suragch Avatar answered Oct 17 '22 20:10

Suragch


This is the latest version of colors:

This page in the official material design website is dedicated to dark theme (including its colors). Here is the colors:

Dark theme colors

The image below compares Light and Dark theme colors (Light colors on the left side, Dark colors on the right):

Light and Dark theme colors

Image credits: official material design website

like image 29
Mahozad Avatar answered Oct 17 '22 22:10

Mahozad


Here's some more information related to the same topic. According to the Properties section in the Dark theme page of material.io, the base color is #121212, but when you want to place an element over another one, you use a white layer with transparency to generate a lighter version of that grey. And this is what they share:

The problem with it is that that's great in terms of design, but it doesn't make our work that simple as a developers. So I got the photo editor and mapped that guidelines to hexadecimal colors. And here it is!

| elevation | overlay |   hex   |
| --------- | ------- | ------- |
|   00dp    |    0%   | #121212 |
|   01dp    |    5%   | #1e1e1e |
|   02dp    |    7%   | #222222 |
|   03dp    |    8%   | #242424 |
|   04dp    |    9%   | #272727 |
|   06dp    |   11%   | #2c2c2c |
|   08dp    |   12%   | #2e2e2e |
|   12dp    |   14%   | #333333 |
|   16dp    |   15%   | #343434 |
|   24dp    |   16%   | #383838 |
like image 20
Roc Boronat Avatar answered Oct 17 '22 21:10

Roc Boronat