siimple-colors
v0.2.0
siimple-colors is an elegant and minimalistic color palette. It provides a set of colors optimized to be used in UI projects.
You can use the compiled and minified CSS bundle that allows you import all colors in the palette using CSS variables, or import the source SASS/SCSS files and use the SASS variables.
Installation
Download siimple-colors to get the compiled CSS file and start using the color palette in your project. You can download it using a package manager, manually or using a CDN.
1. Install using a package manager
Install using npm:
$ npm install siimple-colors
Install using bower:
$ bower install siimple/siimple-colors
2. Using a CDN
You can use the JsDelivr CDN.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple-colors@0.2.0/dist/siimple-colors.min.css">
3. Download manually from the repository
You can visit the repository hosted on GitHub and download the latest version from the releases page. You can find the CSS files on the ./dist/ folder, so you can copy them to your project.
Usage
For each color in the palette, there is a CSS variable that follows the pattern --siimple-{color}-{number}, where {color} is the name of the color on the palette, and {number} is a number in the range [0-4] that is used for the color brightness (0 is the lightest, 4 is the darkest). If you are interested on the base color, you can set it with --siimple-{color}.
.my_link
{
  color: var(--siimple-red);
}

.bg_blue_light
{
  background-color: var(--siimple-blue-4);
}

.bg_blue_dark
{
  background-color: var(--siimple-blue-0);
}
If you are interested in using the SASS/SCSS variables, please visit the documentation hosted on the GitHub repository.
The color palette
navy #57607c
navy-0 #3f465a
navy-1 #495169
navy-2 #57607c
navy-3 #697496
navy-4 #8790ab
green #1add9f
green-0 #15b784
green-1 #18cd94
green-2 #1add9f
green-3 #32e7ad
green-4 #48eab7
teal #18d2ba
teal-0 #13a08d
teal-1 #15b7a1
teal-2 #18d2ba
teal-3 #1be4c9
teal-4 #32e7cf
blue #4894f0
blue-0 #1275ed
blue-1 #2a82ef
blue-2 #4894f0
blue-3 #599ef3
blue-4 #71acf4
purple #b490f5
purple-0 #905cf0
purple-1 #9f73f2
purple-2 #b490f5
purple-3 #bfa2f6
purple-4 #cfb9f8
pink #f45b93
pink-0 #f02872
pink-1 #f24081
pink-2 #f45b93
pink-3 #f570a1
pink-4 #f788b0
red #ff1a4f
red-0 #e60036
red-1 #ff003c
red-2 #ff1a4f
red-3 #ff3363
red-4 #ff4d76
orange #ff8463
orange-0 #ff5f33
orange-1 #ff734d
orange-2 #ff8463
orange-3 #ff9b80
orange-4 #ffaf99
yellow #ffbf00
yellow-0 #cc9900
yellow-1 #e6ac00
yellow-2 #ffbf00
yellow-3 #ffc61a
yellow-4 #ffcc33
grey #ebf2fa
grey-0 #c3d7ef
grey-1 #d7e4f4
grey-2 #ebf2fa
grey-3 #f0f5fb
grey-4 #f1f4f9
white #ffffff
Found a mistake or want to help improve this documentation? Suggest changes on GitHub