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
npminstallsass-colors-S
// To install using yarn
yarnaddsass-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:1pxsolidcolor('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,
);
⭐ Support for
sass-colors is an open source project licensed by MIT. You can grow thanks to the sponsors and the support of the amazing sponsors. If you want to join them, contact me here.
