• 🔨 Demo
• 📘 Documentation
• 💬 Description
• 🐦 Installation
• ▶️ Getting started
• 🎨 Colors

🎉 Demo

📚 Documentation

🌐 Description

📦 Installation

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

// To install using yarn
yarn add sass-colors

▶️ Getting started

// If you use nodejs, reactjs, vuejs or angular
@import "node_modules/sass-colors/src/colors.scss";

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

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

@import "src/colors.scss";

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 | |----|-------------|---------|--------|--------| | 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 | |----|-------------|---------|--------|--------| | 22 | black | ❌ | ❌ | ❌ | | 23 | white | ❌ | ❌ | ❌ | | 24 | 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.

🎩 Stay in touch

• Author Yoni Calsin
• Twitter Yoni Calsin

This project follows the all-contributors specification. Contributions of any kind welcome!

📜 License

Sass-colors is MIT licensed.