Neopolitan Pizza Maker

    sass-colors

    1.0.14 • Public • Published

    Sass-colors Logo

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

    NPM Version Package License NPM Downloads Coverage

    🎉 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

    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

    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.

    🎩 Stay in touch

    Contributors

    Thanks to the wonderful people who collaborate with me !

    📜 License

    sass-colors under License MIT.

    Install

    npm i sass-colors

    DownloadsWeekly Downloads

    17

    Version

    1.0.14

    License

    MIT

    Unpacked Size

    29.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • yonicb