Sass Syntax - scss
.hue-adjusted { fill: adjust-hue($base00,15deg); }
.lightened { fill: lighten($base01,15%); }
.darkened { fill: darken($base02,15%); }
.saturated { fill: saturate($base03,15%); }
.desaturated { fill: desaturate($base04,15%); }
.grayscaled { fill: grayscale($base05); }
.complemented { fill: complement($base06); }
.inverted { fill: invert($base07); }
.shaded { fill: shade($red,15%); }
.tinted { fill: tint($orange,15%); }
.transprtized { fill: transparentize($magenta, 0.5); }
.scaled { fill: scale-color($violet,
$saturation: 15%,
$lightness: 15%); }
.c-adjusted { fill: adjust-color($blue,
$hue: 15deg,
$saturation: 15%,
$lightness: 15%); }
All functions here are increased here by 15%, except: grayscale, complement, and invert, which are ‘boolean’ functions.
$base00: hsla(188, 20%, 8%, 1); // #101718
$base01: hsla(196, 19%, 15%, 1); // #1f2a2e
$base02: hsla(193, 15%, 25%, 1); // #364549
$base03: hsla(193, 12%, 32%, 1); // #48575b
$base04: hsla(194, 10%, 42%, 1); // #607176
$base05: hsla(193, 100%, 55%, 1); // #7b8a8e
$base06: hsla(194, 39%, 80%, 1); // #b8d7e0
$base07: hsla(196, 100%, 97%, 1); // #f0fbff
$base16-red: hsla(344, 80%, 52%, 1); // #e72357
$base16-orange: hsla( 14, 100%, 55%, 1); // #ff4f1a
$base16-yellow: hsla( 38, 88%, 48%, 1); // #e6970f
$base16-green: hsla(164, 75%, 40%, 1); // #19b38a
$base16-cyan: hsla(194, 80%, 45%, 1); // #17a4cf
$base16-blue: hsla(214, 95%, 56%, 1); // #2481f9
$base16-violet: hsla(260, 65%, 60%, 1); // #8357db
$base16-magenta: hsla(304, 80%, 55%, 1); // #e830dc
Colorscheming
- Introduction
- This colorscheming test playground is assembled to have the best colorscheming tools, alongside colorscheme-tiles on one webpage-test-playground, making it convenient to create your own colorscheme, with sixteen variables
- Getting Started
-
A possible way to make this tool, or rather collection-of-tools, your own can be:
- download the zip-file (, or clone the repo)
- when using Sass, open
assets/sass/ctiles16-custom.scss
(which is a copy ofctiles16-ctiles.scss
) in a text-editor. Don’t rename it just yet, but: - (this works best full screen) start editing the values of the variables with the text-editor on one side, and the browser-window with this test colorscheming playground (
colorscheming/index.html
) on the other side of your screen - play with the hsl-picker to help you get along
- try some live editing with the hidden styles in the top.
- from the dropdown-menu you can pick and see how other colorschemes look.
- there’s a button for toggling the page background-color, and you can also hover with your mouse over the colortiles, to see the effect of a larger amount colorfield
- refresh the colorschemer-webpage after each time you edit your
ctiles16-custom.scss
-colorscheme-variables file (or use something like LiveReload) - When following the workflow above, you have been using c-Tiles16 to make a colorscheme made out of sixteen colors
- Development
-
- Now put the colorscheme you just made as one of the first partial files to import in the
_base-partial
file (the one that is included throughout the whole project) - Keep using the colorschemer any time you like to generate color-values during the design phase of the website
- One can make it a personal challenge to only use the colorscheme values, or variations of those with Sass color-functions
- BTW: You can also try to make a pull request on Github, in order to submit your colorscheme to this collection here on c-Tiles16
- Now put the colorscheme you just made as one of the first partial files to import in the