🎨 Sass-colors 🌐 is a scss library, which adds modern colors.

• Demo

• Documentation

• Description

• Installation

• Getting started

• Colors

  • 🏮 Deep Red
  • 🔴 Red
  • 🎀 Pink
  • 💜 Purple
  • ☂️ Deep Purple
  • 🎨 Indigo
  • 📘 Blue
  • 🔵 Light Blue
  • 🎨 Cyan
  • 🎨 Teal
  • 💚 Green
  • 🍏 Light Green
  • 🍈 Lime
  • 💛 Yellow
  • 🎨 Amber
  • 📙 Orange
  • 🧡 Deep Orange
  • 🤝🏾 Brown
  • 🎨 Blue Grey
  • 🎨 Grey
  • ⚫ Black
  • ⚪ White
  • 🎨 Transparent

Demo

Preview live Click Here

Documentation

Go to documentation Click Here

Description

Under the hood, sass-colors uses scss/sass, but also provides compatibility with a wide range of other libraries, such as Eg ReactJs, Vuejs, Angular, which allows easy use of the countless third-party add-ons that are available!

Installation

To start using Sass-colors you need to install it with the package manager npm or yarn, as shown in the next section or download it directly!

// To install using npm
npm install sass-colors -S

// To install using yarn
yarn add sass-colors

▶️ Getting started

To use the beautiful colors of sass-colors is very simple, first we will import the colors.scss file that contains the colors. Example:

// If you use nodejs, reactjs, vuejs or angular
@import '~sass-colors';

// You can also download it directly and import the file colors.scss, as follows
@import 'index.scss';

// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)

As you can see we already import correctly! Sass-Colors includes a function that adds selection a color and its secondary color, for example:

@import '~sass-colors';

body {
   // First parameter receives the name of the main color, and as a second parameter requires the name of the secondary color

   // usage: color("name_of_color", "type_of_color")
   // to avoid to repeating map-get($colors, ...)
   background: color('red', 'base');
}
.button {
   background: color('blue', 'accent-1');
   color: white;
   border: 1px solid color('blue', 'darken-1');
}

// I will explain more clearly!
// First we import this color map for this example.

/**
| Main Color | Color value |
**/
$deep-red: (
   'base': #e51c23,
   'lighten-5': #fdeaeb,
   'lighten-4': #f8c1c3,
   'lighten-3': #f3989b,
   'lighten-2': #ee6e73,
   'lighten-1': #ea454b,
   'darken-1': #d0181e,
   'darken-2': #b9151b,
   'darken-3': #a21318,
   'darken-4': #8b1014,
);
// When you execute the function that requires two parameters
/**
color($primary-color, $secondary-color)
**/

Colors

N°	Name	Lighten	Darken	Accent	Base
1	deep-red	✔️	✔️	❌	✔️
2	red	✔️	✔️	✔️	✔️
3	pink	✔️	✔️	✔️	✔️
4	purple	✔️	✔️	✔️	✔️
5	deep-purple	✔️	✔️	✔️	✔️
6	indigo	✔️	✔️	✔️	✔️
7	blue	✔️	✔️	✔️	✔️
8	light-blue	✔️	✔️	✔️	✔️
9	cyan	✔️	✔️	✔️	✔️
10	teal	✔️	✔️	✔️	✔️
11	green	✔️	✔️	✔️	✔️
12	light-green	✔️	✔️	✔️	✔️
13	lime	✔️	✔️	✔️	✔️
15	yellow	✔️	✔️	✔️	✔️
16	amber	✔️	✔️	✔️	✔️
17	orange	✔️	✔️	✔️	✔️
18	deep-orange	✔️	✔️	✔️	✔️
19	brown	✔️	✔️	❌	✔️
20	blue-grey	✔️	✔️	❌	✔️
21	grey	✔️	✔️	❌	✔️

Shades

N°	Name	Ligthen	Darken	Accent	Base
22	black	❌	❌	❌	✔️
23	white	❌	❌	❌	✔️
24	transparent	❌	❌	❌	✔️

Deep Red Colors

Show Deep Red Colors

/**
*  Deep Red Colors
**/
$deep-red: (
   'base': #e51c23,
   'lighten-5': #fdeaeb,
   'lighten-4': #f8c1c3,
   'lighten-3': #f3989b,
   'lighten-2': #ee6e73,
   'lighten-1': #ea454b,
   'darken-1': #d0181e,
   'darken-2': #b9151b,
   'darken-3': #a21318,
   'darken-4': #8b1014,
);

Red Colors

Show Red Colors

/**
*  Red Colors
**/
$red: (
   'base': #f44336,
   'lighten-5': #ffebee,
   'lighten-4': #ffcdd2,
   'lighten-3': #ef9a9a,
   'lighten-2': #e57373,
   'lighten-1': #ef5350,
   'darken-1': #e53935,
   'darken-2': #d32f2f,
   'darken-3': #c62828,
   'darken-4': #b71c1c,
   'accent-1': #ff8a80,
   'accent-2': #ff5252,
   'accent-3': #ff1744,
   'accent-4': #d50000,
);

Pink Colors

Show Pink Colors

Example:

/**
*  Pink Colors
**/
$pink: (
   'base': #e91e63,
   'lighten-5': #fce4ec,
   'lighten-4': #f8bbd0,
   'lighten-3': #f48fb1,
   'lighten-2': #f06292,
   'lighten-1': #ec407a,
   'darken-1': #d81b60,
   'darken-2': #c2185b,
   'darken-3': #ad1457,
   'darken-4': #880e4f,
   'accent-1': #ff80ab,
   'accent-2': #ff4081,
   'accent-3': #f50057,
   'accent-4': #c51162,
);

Purple Colors

Show Purple Colors

Example:

/**
*  Purple Colors
**/
$purple: (
   'base': #9c27b0,
   'lighten-5': #f3e5f5,
   'lighten-4': #e1bee7,
   'lighten-3': #ce93d8,
   'lighten-2': #ba68c8,
   'lighten-1': #ab47bc,
   'darken-1': #8e24aa,
   'darken-2': #7b1fa2,
   'darken-3': #6a1b9a,
   'darken-4': #4a148c,
   'accent-1': #ea80fc,
   'accent-2': #e040fb,
   'accent-3': #d500f9,
   'accent-4': #aa00ff,
);

Deep Purple Colors

Show Deep Purple Colors

Example:

/**
*  Deep Purple Colors
**/
$deep-purple: (
   'base': #673ab7,
   'lighten-5': #ede7f6,
   'lighten-4': #d1c4e9,
   'lighten-3': #b39ddb,
   'lighten-2': #9575cd,
   'lighten-1': #7e57c2,
   'darken-1': #5e35b1,
   'darken-2': #512da8,
   'darken-3': #4527a0,
   'darken-4': #311b92,
   'accent-1': #b388ff,
   'accent-2': #7c4dff,
   'accent-3': #651fff,
   'accent-4': #6200ea,
);

Indigo Colors

Show Indigo Colors

Example:

/**
*  Indigo Colors
**/
$indigo: (
   'base': #3f51b5,
   'lighten-5': #e8eaf6,
   'lighten-4': #c5cae9,
   'lighten-3': #9fa8da,
   'lighten-2': #7986cb,
   'lighten-1': #5c6bc0,
   'darken-1': #3949ab,
   'darken-2': #303f9f,
   'darken-3': #283593,
   'darken-4': #1a237e,
   'accent-1': #8c9eff,
   'accent-2': #536dfe,
   'accent-3': #3d5afe,
   'accent-4': #304ffe,
);

Blue Colors

Show Blue Colors

Example:

/**
*  Blue Colors
**/
$blue: (
   'base': #2196f3,
   'lighten-5': #e3f2fd,
   'lighten-4': #bbdefb,
   'lighten-3': #90caf9,
   'lighten-2': #64b5f6,
   'lighten-1': #42a5f5,
   'darken-1': #1e88e5,
   'darken-2': #1976d2,
   'darken-3': #1565c0,
   'darken-4': #0d47a1,
   'accent-1': #82b1ff,
   'accent-2': #448aff,
   'accent-3': #2979ff,
   'accent-4': #2962ff,
);

Light Blue Colors

Show Light Blue Colors

Example:

/**
*  Light Blue Colors
**/
$light-blue: (
   'base': #03a9f4,
   'lighten-5': #e1f5fe,
   'lighten-4': #b3e5fc,
   'lighten-3': #81d4fa,
   'lighten-2': #4fc3f7,
   'lighten-1': #29b6f6,
   'darken-1': #039be5,
   'darken-2': #0288d1,
   'darken-3': #0277bd,
   'darken-4': #01579b,
   'accent-1': #80d8ff,
   'accent-2': #40c4ff,
   'accent-3': #00b0ff,
   'accent-4': #0091ea,
);

Cyan Colors

Show Cyan Colors

Example:

/**
*  Cyan Colors
**/
$cyan: (
   'base': #00bcd4,
   'lighten-5': #e0f7fa,
   'lighten-4': #b2ebf2,
   'lighten-3': #80deea,
   'lighten-2': #4dd0e1,
   'lighten-1': #26c6da,
   'darken-1': #00acc1,
   'darken-2': #0097a7,
   'darken-3': #00838f,
   'darken-4': #006064,
   'accent-1': #84ffff,
   'accent-2': #18ffff,
   'accent-3': #00e5ff,
   'accent-4': #00b8d4,
);

Teal Colors

Show Teal Colors

Example:

/**
*  Teal Colors
**/
$teal: (
   'base': #009688,
   'lighten-5': #e0f2f1,
   'lighten-4': #b2dfdb,
   'lighten-3': #80cbc4,
   'lighten-2': #4db6ac,
   'lighten-1': #26a69a,
   'darken-1': #00897b,
   'darken-2': #00796b,
   'darken-3': #00695c,
   'darken-4': #004d40,
   'accent-1': #a7ffeb,
   'accent-2': #64ffda,
   'accent-3': #1de9b6,
   'accent-4': #00bfa5,
);

Green Colors

Show Green Colors

Example:

/**
*  Green Colors
**/
$green: (
   'base': #4caf50,
   'lighten-5': #e8f5e9,
   'lighten-4': #c8e6c9,
   'lighten-3': #a5d6a7,
   'lighten-2': #81c784,
   'lighten-1': #66bb6a,
   'darken-1': #43a047,
   'darken-2': #388e3c,
   'darken-3': #2e7d32,
   'darken-4': #1b5e20,
   'accent-1': #b9f6ca,
   'accent-2': #69f0ae,
   'accent-3': #00e676,
   'accent-4': #00c853,
);

Light Green Colors

Show Light Green Colors

Example:

/**
*  Light Green Colors
**/
$light-green: (
   'base': #8bc34a,
   'lighten-5': #f1f8e9,
   'lighten-4': #dcedc8,
   'lighten-3': #c5e1a5,
   'lighten-2': #aed581,
   'lighten-1': #9ccc65,
   'darken-1': #7cb342,
   'darken-2': #689f38,
   'darken-3': #558b2f,
   'darken-4': #33691e,
   'accent-1': #ccff90,
   'accent-2': #b2ff59,
   'accent-3': #76ff03,
   'accent-4': #64dd17,
);

Lime Colors

Show Lime Colors

Example:

/**
*  Lime Colors
**/
$lime: (
   'base': #cddc39,
   'lighten-5': #f9fbe7,
   'lighten-4': #f0f4c3,
   'lighten-3': #e6ee9c,
   'lighten-2': #dce775,
   'lighten-1': #d4e157,
   'darken-1': #c0ca33,
   'darken-2': #afb42b,
   'darken-3': #9e9d24,
   'darken-4': #827717,
   'accent-1': #f4ff81,
   'accent-2': #eeff41,
   'accent-3': #c6ff00,
   'accent-4': #aeea00,
);

Yellow Colors

Show Yellow Colors

Example:

/**
*  Yellow Colors
**/
$yellow: (
   'base': #ffeb3b,
   'lighten-5': #fffde7,
   'lighten-4': #fff9c4,
   'lighten-3': #fff59d,
   'lighten-2': #fff176,
   'lighten-1': #ffee58,
   'darken-1': #fdd835,
   'darken-2': #fbc02d,
   'darken-3': #f9a825,
   'darken-4': #f57f17,
   'accent-1': #ffff8d,
   'accent-2': #ffff00,
   'accent-3': #ffea00,
   'accent-4': #ffd600,
);

Amber Colors

Show Amber Colors

Example:

/**
*  Amber Colors
**/
$amber: (
   'base': #ffc107,
   'lighten-5': #fff8e1,
   'lighten-4': #ffecb3,
   'lighten-3': #ffe082,
   'lighten-2': #ffd54f,
   'lighten-1': #ffca28,
   'darken-1': #ffb300,
   'darken-2': #ffa000,
   'darken-3': #ff8f00,
   'darken-4': #ff6f00,
   'accent-1': #ffe57f,
   'accent-2': #ffd740,
   'accent-3': #ffc400,
   'accent-4': #ffab00,
);

Orange Colors

Show Orange Colors

Example:

/**
*  Orange Colors
**/
$orange: (
  "base":       #ff9800,
  "lighten-5":  #fff3e0,
  "lighten-4":  #ffe0b2,
  "lighten-3":  #ffcc80,
  "lighten-2":  #ffb74d,
  "lighten-1":  #ffa726,
  "darken-1":   #fb8c00,
  "darken-2":   #f57c00,
  "darken-3":   #ef6c00,
  "darken-4":   #e65100,
  "accent-1":    #ffd180,
  "accent-2":    #ffab40,
  "accent-3":    #ff9100,
  "accent-4":    #ff6d00
);

Deep Orange Colors

Show Deep Orange Colors

Example:

/**
*  Deep Orange Colors
**/
$deep-orange: (
   'base': #ff5722,
   'lighten-5': #fbe9e7,
   'lighten-4': #ffccbc,
   'lighten-3': #ffab91,
   'lighten-2': #ff8a65,
   'lighten-1': #ff7043,
   'darken-1': #f4511e,
   'darken-2': #e64a19,
   'darken-3': #d84315,
   'darken-4': #bf360c,
   'accent-1': #ff9e80,
   'accent-2': #ff6e40,
   'accent-3': #ff3d00,
   'accent-4': #dd2c00,
);

Brown Colors

Show Brown Colors

Example:

/**
*  Brown Colors
**/
$brown: (
   'base': #795548,
   'lighten-5': #efebe9,
   'lighten-4': #d7ccc8,
   'lighten-3': #bcaaa4,
   'lighten-2': #a1887f,
   'lighten-1': #8d6e63,
   'darken-1': #6d4c41,
   'darken-2': #5d4037,
   'darken-3': #4e342e,
   'darken-4': #3e2723,
);

Blue Grey Colors

Show Blue Grey Colors

Example:

/**
*  Blue Grey Colors
**/
$blue-grey: (
   'base': #607d8b,
   'lighten-5': #eceff1,
   'lighten-4': #cfd8dc,
   'lighten-3': #b0bec5,
   'lighten-2': #90a4ae,
   'lighten-1': #78909c,
   'darken-1': #546e7a,
   'darken-2': #455a64,
   'darken-3': #37474f,
   'darken-4': #263238,
);

Grey Colors

Show Grey Colors

Example:

/**
*  Grey Colors
**/
$grey: (
   'base': #9e9e9e,
   'lighten-5': #fafafa,
   'lighten-4': #f5f5f5,
   'lighten-3': #eeeeee,
   'lighten-2': #e0e0e0,
   'lighten-1': #bdbdbd,
   'darken-1': #757575,
   'darken-2': #616161,
   'darken-3': #424242,
   'darken-4': #212121,
);

Shades Colors

Show Shades Colors

Example:

/**
*  Shades Colors
**/
$shades: (
   'black': #000000,
   'white': #ffffff,
   'transparent': transparent,
);

Stay in touch

• Github @yonycalsin
• Twitter @yonycalsin

License

sass-colors under License MIT.