c-Tiles16

Colorscheming with Variables

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.

background-color: hsla
   188  H  
   20%   S  
   8%    L  
   1.00  A  
              
text-color: hsla
   14    H  
   100%  S  
   55%   L  
   1.00   A  
              

$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 of ctiles16-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