menu

Usage

Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.

Background Color

To apply a background color, just add the color name and light/darkness as a class to the element.

This is a card panel with a teal lighten-5 ondark-teal ondark-darken-4 class
              Copied!
              content_copy
              
  <div class="card-panel teal lighten-5 ondark-teal ondark-darken-4">This is a card panel with a teal lighten-5 ondark-teal ondark-darken-4 class</div>

Text Color

To apply a text color, just append -text to the color class like this:

This is a card panel with dark blue text
              Copied!
              content_copy
              
  <div class="card-panel">
    <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
  </div>

Border Color

To apply a border color, just prefix .border- to the color class like this:

This is a card panel with red 5x-width dashed border 
              Copied!
              content_copy
              
  <div class="card-panel border-5x border-dashed border-red border-darken-2 ondark-border-red ondark-border-darken-1">
    <span>This is
    a card panel with red 5x-width dashed border</span>
  </div>

You can also use primary or secondary color like .border-primary or by semantic purpose like .border-success, .border-danger, etc.... Please refer to CSS > Helpers to check other border helper classes

Sass

For background colors, you can apply the color simply by extending the classes like the example below. 


  .ilike-blue-container {
    @extend .blue, .lighten-4;
  }

For changing text color, you can apply the color simply by extending the classes like the example below. 


  .ilike-blue-container {
    @extend .blue-text, .text-lighten-4;
  }

CSS Color Variables

If you need to change the primary or secondary color, on your custom CSS file, you just need to update the following CSS variables. Please note that this does not require you to recompile the SCSS files.

We recommend updating only the hue and saturation value and leave the lightness to 50%.


  :root {
    /** Provide the HSL values **/
    --primary-color-hs: 8deg, 34%;
    --primary-color-l: 50%;

    --secondary-color-hs: 188deg, 34%;
    --secondary-color-l: 50%;
  }

To use your primary and secondary color on your custom css file, you can use the following CSS variables: 


  :root {
    /** You can change the word primary to secondary, 
    success, info, danger, or warning, whichever you 
    want to use. **/
    
    --primary-color;
    --primary-color-light; /** +15%  **/
    --primary-color-dark; /** -15%  **/

    --primary-color-lighten-45;
    --primary-color-lighten-40;
    --primary-color-lighten-35;
    --primary-color-lighten-30;
    --primary-color-lighten-25;
    --primary-color-lighten-20;
    --primary-color-lighten-15;
    --primary-color-lighten-10;
    --primary-color-lighten-5;

    --primary-color-darken-5;
    --primary-color-darken-10;
    --primary-color-darken-15;
    --primary-color-darken-20;
    --primary-color-darken-25;
    --primary-color-darken-30;
    --primary-color-darken-35;
    --primary-color-darken-40;
    --primary-color-darken-45;
  }

  /** Usage Example **/

  .card {
    background-color: var(--secondary-color-lighten-40);
    color: var(--primary-color-dark);
    border: 2px solid var(--primary-color);
  }

If you need the alpha channel, you can use the following CSS variables for your primary and secondary color: 


  :root {
    /** You can change the word primary to secondary, 
    success, info, danger, or warning, whichever you 
    want to use. **/
    
    --primary-color-hsl;
    --primary-color-light-hsl; /** +15%  **/
    --primary-color-dark-hsl; /** -15%  **/

    --primary-color-lighten-45-hsl;
    --primary-color-lighten-40-hsl;
    --primary-color-lighten-35-hsl;
    --primary-color-lighten-30-hsl;
    --primary-color-lighten-25-hsl;
    --primary-color-lighten-20-hsl;
    --primary-color-lighten-15-hsl;
    --primary-color-lighten-10-hsl;
    --primary-color-lighten-5-hsl;

    --primary-color-darken-5-hsl;
    --primary-color-darken-10-hsl;
    --primary-color-darken-15-hsl;
    --primary-color-darken-20-hsl;
    --primary-color-darken-25-hsl;
    --primary-color-darken-30-hsl;
    --primary-color-darken-35-hsl;
    --primary-color-darken-40-hsl;
    --primary-color-darken-45-hsl;
  }

  /** Usage Example **/

  .card {
    background-color: hsla(var(--secondary-color-lighten-40-hsl), 50%);
    color: hsla(var(--primary-color-darken-15-hsl), 0.9);
    border: 2px solid hsla(var(--primary-color-hsl), .8);
  }

You can also use the following classes for quick setting of the element's background or text color to primary or secondary color: 


    .primary-color
    .primary-color-text

    .secondary-color
    .secondary-color-text

We also support colors by semantic purposes. 


    .success-color
    .success-color-text

    .info-color
    .info-color-text

    .danger-color
    .danger-color-text

    .warning-color
    .warning-color-text

Color Palette