TEST POST
Tags: sdfsdfasdfasd
Published: 2020-05-31 16:28:55

<div class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="jimniels" data-slug-hash="abvXbvp" data-prefill='{"title":"Color Manipulations in CSS","tags":[],"scripts":[],"stylesheets":[]}'>
  <pre data-lang="html">&lt;h1>Color Maninpulations in CSS&lt;/h1>

&lt;p>Given the base set of color values for a single color:&lt;/p>

&lt;pre>
:root {
  --h: 100;
  --s: 50%;
  --l: 50%;
  --hsl: var(--h), var(--s), var(--l);
  --hslf: hsl(var(--hsl));
}
&lt;/pre>

&lt;p>You can play with color in any of the following ways.&lt;/p>

&lt;h2>Alpha Channel&lt;/h2>

&lt;h3>Base color with variations using the alpha channel&lt;/h3>

&lt;pre class="example">
background-color: hsla(
  var(--hsl),
  1
);
&lt;/pre>

&lt;pre class="example">
background-color: hsla(
  var(--hsl),
  .8
);
&lt;/pre>

&lt;pre class="example">
background-color: hsla(
  var(--hsl),
  .6
);
&lt;/pre>

&lt;pre class="example">
background-color: hsla(
  var(--hsl),
  .4
);
&lt;/pre>

&lt;pre class="example">
background-color: hsla(
  var(--hsl),
  .2
);
&lt;/pre>

&lt;h2>Sass Color Function Equivalents&lt;/h2>

&lt;h3>`adjust-hue`&lt;/h3>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  var(--s),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  calc(var(--h) + 72),
  var(--s),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example w">
background-color: hsl(
  calc(var(--h) + 144),
  var(--s),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example w">
background-color: hsl(
  calc(var(--h) + 216),
  var(--s),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example w">
background-color: hsl(
  calc(var(--h) + 288),
  var(--s),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  calc(var(--h) + 360),
  var(--s),
  var(--l)
 );
&lt;/pre>

&lt;h3>`saturate`&lt;/h3>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  var(--s),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  calc(var(--s) + 10%),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  calc(var(--s) + 20%),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  calc(var(--s) + 30%),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  calc(var(--s) + 40%),
  var(--l)
 );
&lt;/pre>

&lt;h3>`desaturate`&lt;/h3>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  var(--s),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  calc(var(--s) - 10%),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  calc(var(--s) - 20%),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  calc(var(--s) - 30%),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  calc(var(--s) - 40%),
  var(--l)
 );
&lt;/pre>

  
&lt;h3>`lighten`&lt;/h3>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  var(--s),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) + 10%)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) + 20%)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) + 30%)
 );
&lt;/pre>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) + 40%)
 );
&lt;/pre>


&lt;h3>`darken`&lt;/h3>

&lt;pre class="example">
background-color: hsl(
  var(--h),
  var(--s),
  var(--l)
 );
&lt;/pre>

&lt;pre class="example w">
background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) - 10%)
 );
&lt;/pre>

&lt;pre class="example w">
background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) - 20%)
 );
&lt;/pre>

&lt;pre class="example w">
background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) - 30%)
 );
&lt;/pre>

&lt;pre class="example w">
background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) - 40%)
 );
&lt;/pre></pre>
  <pre data-lang="css">:root {
  --h: 100;
  --s: 50%;
  --l: 50%;
  --hsl: var(--h), var(--s), var(--l);
  --hslf: hsl(var(--hsl));
}

body {
  font-family: monospace;
}

pre:not(.example) {
  background-color: lightgray;
}

.example {
  width: 300px;
  height: 100px;
  margin: 5px;
  padding: 10px;
}

.w {
  color: white;
}</pre>
  <pre data-lang="js">Array
  .from(document.querySelectorAll(".example"))
  .forEach(el => {    
    el.style = el.textContent;
  });
</pre></div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>