Skip to content
This repository has been archived by the owner on Feb 5, 2020. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


npm npm devDependency Status jsdelivr npm

siimple colors is an elegant and minimalistic color palette for UI design.

Getting started

siimple colors can be installed using npm:

$ npm install --save @siimple/colors

Or imported in your HTML files using a CDN.

<link rel="stylesheet" href="">


We are working on a new documentation for v1.0.0.


Using CSS variables:

You can apply the color in your CSS styles simply by using our CSS variables:

.red-text {
    color: var(--siimple-red);

.blue-text {
    color: var(--siimple-blue-light);

.green-bg {
    background-color: var(--siimple-green-dark);

Using CSS selectors

Use .siimple--color-{COLOR} class to change the text color, or .siimple--bg-{COLOR} to change the background color. Optionally, you can use a lighten or darken color using .siimple--color{COLOR}-{LIGHTNESS} class for changing the text color, and .siimple--bg-{COLOR}-{LIGHTNESS} for changing the background color.

<span class="siimple--color-red">Text with red color</span>
<span class="siimple--bg-blue-dark siimple--color-white">White text with dark blue color</span>


Using the siimple-color function defined in scss/functions.scss is the easiest way to load our colors in your SASS/SCSS files. This function will return a string with the hex value of the desired color, and gets two arguments:

  • COLOR: a string with the desired color.
  • LIGHTNESS (optionally): a string with the desired lightness variant of the color. If not provided, the function will return the base color.
@import "@siimple/colors/scss/functions.scss";

.blue-text {
    color: siimple-color("blue");
.red-text {
    color: siimple-color("red", "extra-dark");
.green-bg {
    background-color: siimple-color("green", "light");

You can also use the colors variables defined in scss/colors.scss. Each color has a variable with the following formats:

  • $siimple-{COLOR} for the base color.
  • $siimple-{COLOR}-{LIGHTNESS} for the darken and lighten variants of the color.
@import "siimple-colors/scss/colors.scss";

.blue-text {
    color: $siimple-blue;
.red-text {
    color: $siimple-red-extra-dark;
.green-bg {
    background-color: $siimple-green-light;


Code and documentation © 2018 the siimple team. The code is released under the MIT License and the documentation is released under the Creative Commons CC BY 4.0 License.