menu
White logo

Colors

Usage

Colors can be accessed in just about every coding environment: HAML views, SASS, JavaScript, and Ruby.

Base Red
Light Red
Dark Red
Base Red Text
Light Red Text
Dark Red Text
/ Background color classes are just the color name, e.g. "red", "light-blue", etc.
.red Base Red
/ Generates the following HTML:
/ <div class="red">Base Red</div>

/ Different shades can be achieved with 'lighten-N', 'darken-N', and 'accent-N' classes
/ where 'N' is the shade you want
.red.lighten-3 Light Red
.red.darken-3 Dark Red

/ Text color classes are the color name followed by '-text'
.red-text Base Red Text

/ Different shades for text can be achieved in much the same way as the background
/ classes, except those classes are 'text-lighten-N', 'text-darken-N', and 'text-accent-N'
.red-text.text-lighten-3 Light Red Text
.red-text.text-darken-3 Dark Red Text
/* The color() SASS function takes a color and a shade and returns a hex value */

.my-element
  background-color: color("red", "base")
  color: color("yellow", "lighten-5")

/*
 * The following CSS is generated:
 * 
 * .my-element {
 *   background-color: #F44336;
 *   color: #fffde7;
 * }
 *
 */
// Similarly to the SASS function, the JavaScript function takes a color and a shade
// and returns a hex value. The default shade is 'base'.

import { color } from 'n2_styles';

console.log(color('red'));
// => "#F44336"

console.log(color('cyan', 'darken-1'));
// => "#00acc1"
# In Ruby, we have helper classes with methods that return a hex value for a given
# color and shade. They follow this pattern:
# N2Styles::Color::|color|.|shade|

N2Styles::Color::Red.base
# => "#F44336"

N2Styles::Color::Cyan.darken_1
# => "#00acc1"

Bootstrap Helper Classes

Success
Info
Warning
Danger
Success
Info
Warning
Danger
/* Backgrounds */
.bg-success   /* .light-green.accent-4 */
.bg-info      /* .light-blue.accent-3  */
.bg-warning   /* .deep-orange          */
.bg-danger    /* .red.accent-4         */

/* Text Colors */
.text-success /* .light-green.accent-4 */
.text-info    /* .light-blue.accent-3  */
.text-warning /* .deep-orange          */
.text-danger  /* .red.accent-4         */

Full Color List

Most colors have a base color, 5 lighter shades, 4 darker shades, and 4 accent shades.

brown, grey, and blue-grey do not have accent shades, and black and white only have the base color.

red
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
pink
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
purple
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
deep-purple
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
indigo
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
blue
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
light-blue
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
cyan
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
teal
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
green
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
light-green
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
lime
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
yellow
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
amber
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
orange
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
deep-orange
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
brown
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
grey
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
blue-grey
lighten-5
lighten-4
lighten-3
lighten-2
lighten-1
base
darken-1
darken-2
darken-3
darken-4
black
white