๐จ Sass-colors ๐ is a scss library, which adds modern colors.
- ๐จ [Demo](#-demo)
- ๐ [Documentation](#-documentation)
- ๐ฌ [Description](#-description)
- ๐ฆ [Installation](#-installation)
- โถ๏ธ [Getting started](#%EF%B8%8F-getting-started)
- ๐จ [Colors](#-colors)
- ๐ฎ [Deep Red](#-deep-red-colors)
- ๐ด [Red](#-red-colors)
- ๐ [Pink](#-pink-colors)
- ๐ [Purple](#-purple-colors)
- โ๏ธ [Deep Purple](#-deep-purple-colors)
- ๐จ [Indigo](#-indigo-colors)
- ๐ [Blue](#-blue-colors)
- ๐ต [Light Blue](#-light-blue-colors)
- ๐จ [Cyan](#-cyan-colors)
- ๐จ [Teal](#-teal-colors)
- ๐ [Green](#-green-colors)
- ๐ [Light Green](#-light-green-colors)
- ๐ [Lime](#-lime-colors)
- ๐ [Yellow](#-yellow-colors)
- ๐จ [Amber](#-amber-colors)
- ๐ [Orange](#-orange-colors)
- ๐งก [Deep Orange](#-deep-orange-colors)
- ๐ค๐พ [Brown](#-brown-colors)
- ๐จ [Blue Grey](#-blue-grey-colors)
- ๐จ [Grey](#-grey-colors)
- โซ [Black](#-shades-colors)
- โช [White](#-shades-colors)
- ๐จ [Transparent](#-shades-colors)
## ๐ 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!
```ts
// 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:
```scss
// 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:
```scss
@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');
}
```
```scss
// 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
```scss
/**
* 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
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* 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:
```scss
/**
* Shades Colors
**/
$shades: (
'black': #000000,
'white': #ffffff,
'transparent': transparent,
);
```
## โญ Support for
`sass-colors` is an open source project licensed by [MIT](LICENSE). You can grow thanks to the sponsors and the support of the amazing sponsors. If you want to join them, [contact me here](https://twitter.com/yonycalsin).
## ๐ฉ Stay in touch
- Github [@yonycalsin](https://github.com/yonycalsin)
- Twitter [@yonycalsin](https://twitter.com/yonycalsin)
- Instagram [@yony_calsin](https://instagram.com/yony_calsin)
- Medium [@yonycalsin](https://medium.com/yonycalsin)
## Contributors
Thanks to the wonderful people who collaborate with me !
## ๐ License
`sass-colors` under [License MIT.](LICENSE)