Skip to content
This repository has been archived by the owner on Mar 7, 2024. It is now read-only.

toviszsolt/css-material-colors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 

Repository files navigation

CSS Material Colors

CSS library for Material Design Background and Foreground colors
Test it on CodePen: http://codepen.io/badboy/pen/BKPQWr/

1. Download CSS file, it's easy

Simply download the material-colors.css and link to your next HTML project.

2. Import downloaded CSS to your html file

Just import css into your html code between <head> section and set the path to css file, like this:

<html>
  <head>
    ...
    <link href="/css/material-colors.css" rel="stylesheet" type="text/css"/>
    ...
  </head>
  ...
</html>

3. Use & Enjoy the material colors

  • You can use the colors by class property on any tags like this: class="..."
  • Can be set background color by class: bg-...
  • Can be set foreground color by class: fg-...
  • May be call a simple color like this: bg-indigo or fg-pink
  • And may be call a color tone like this: bg-deep-purple-700 or fg-lime-a200

4. Colors and Tones

  • Colors: -red, -pink, -purple, -deep-purple, -indigo, -blue, -light-blue, -cyan, -teal, -green, -light-green, -lime, -yellow, -amber, -orange, -deep-orange, -brown, -grey, -blue-grey and without tones: -black, -white
  • Tones: -50, -100, -200, -300, -400, -500, -600, -700, -800, -900, -a100, -a200, -a400, -a700
  • Color palette: https://www.google.com/design/spec/style/color.html#color-color-palette