HTML
<img alt="" class="fullscreen" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/title_page.png" /> <h2 class="toc">Table of Contents</h2> <ul class="toc no-parts"> <li><a href="#intro">Intro</a><a href="#intro"></a></li> <li> <a href="#current-ways-to-express-colors">Current Ways to Express Colors!</a><a href="#current-ways-to-express-colors"></a> <ul> <li><a href="#code-samples">Code Samples</a><a href="#code-samples"></a></li> <li><a href="#hex">Hex</a><a href="#hex"></a></li> <li><a href="#rgb">RGB</a><a href="#rgb"></a></li> <li><a href="#hsl">HSL</a><a href="#hsl"></a></li> <li><a href="#keywords">Keywords</a><a href="#keywords"></a></li> </ul> </li> <li> <a href="#new-ways-to-express-colors">New Ways to Express Colors!</a><a href="#new-ways-to-express-colors"></a> <ul> <li><a href="#code-samples-update">Code Samples Update</a><a href="#code-samples-update"></a></li> <li><a href="#hwb">HWB</a><a href="#hwb"></a></li> <li><a href="#lab">Lab</a><a href="#lab"></a></li> <li><a href="#lch">LCH</a><a href="#lch"></a></li> <li><a href="#color">Color</a><a href="#color"></a></li> <li><a href="#gray">Gray</a><a href="#gray"></a></li> </ul> </li> <li> <a href="#cool-ways-to-use-colors">Cool Ways to Use Colors!</a><a href="#cool-ways-to-use-colors"></a> <ul> <li><a href="#text-gradient">Text Gradient</a><a href="#text-gradient"></a></li> <li><a href="#box-shadows-as-borders">Box Shadows as Borders</a><a href="#box-shadows-as-borders"></a></li> </ul> </li> <li><a href="#answers">Answers to Exercises</a><a href="#answers"></a></li> </ul> <h1 id="intro">Intro</h1> <p> This booklet helps you understand the current and future color notations<span class="note"> (Color notations are different ways to write down colors in your CSS code.)</span> in CSS. </p> <p>The aim is to teach you all different color notations available in CSS. Tell you whether the browsers support these notations already and show you some code examples.</p> <p> The color spaces<span class="note"> (Color spaces are organizations of colors. A color space may define color swatches, like Pantone. Or have a more mathematical notation like sRGB or CMYK.)</span>, which CSS uses in these different ways to express colors are not part of this booklet. In some places I mention them but do not explain any color space in detail. </p> <p>To make full use of this booklet, all you need to know is how to create an HTML tag and apply CSS to it. All the different color options you will learn here!</p> <p> Most of the CSS colors are in the sRGB<span class="note"> (sRGB (standard RED GREEN BLUE) is an RGB color space created to for the use on monitors and the web.)</span> color space, except Lab and LCH, where the computed value is a CIELab <span class="note"> (The CIELAB color space defined by the International Commission on Illumination (CIE).)</span> color. Not to forget the new <code>color()</code> function. This makes it possible to pass your own or predefined color profiles! </p> <p> All these color notations offer an optional parameter for the alpha value. The alpha value indicates how transparent the color is. In the booklet, there is an extra section in each chapter that shows how to use the alpha values. </p> <aside class="information blurb"> <p> Before you use colors in your HTML documents, please consider the <a href="https://www.w3.org/TR/WCAG20/">W3C Web Content Accessibility Guidelines</a>. Most important is the contrast between your foreground and background color. For the current color notations, you can check the contrast with my <a href="https://convertingcolors.com/color-contrast-checker.html">Color Contrast Checker</a>. </p> </aside> <img alt="" class="fullscreen" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/howcolors_work_book_current_section.png" style="width: 100%;" /> <h1 id="current-ways-to-express-colors">Current Ways to Express Colors!</h1> <h2 id="code-samples">Code Samples</h2> <p>All the examples in this booklet use the same HTML structure. To make the examples look nice, I added a simple CSS grid and some basic formatting. The colors I define as CSS variables on the top.</p> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno"> 1 </code><code class="cp">&lt;!DOCTYPE html&gt;</code> <code class="lineno"> 2 </code><code class="p">&lt;</code><code class="nt">html</code><code class="p">&gt;</code> <code class="lineno"> 3 </code> <code class="p">&lt;</code><code class="nt">head</code><code class="p">&gt;</code> <code class="lineno"> 4 </code> <code class="p">&lt;</code><code class="nt">style</code><code class="p">&gt;</code> <code class="lineno"> 5 </code> <code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno"> 6 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="mh">#128458</code><code class="p">;</code> <code class="lineno"> 7 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="mh">#128458</code><code class="mi">77</code><code class="p">;</code> <code class="lineno"> 8 </code> <code class="p">}</code> <code class="lineno"> 9 </code> <code class="lineno"> 10 </code> <code class="nt">body</code><code class="p">{</code> <code class="lineno"> 11 </code> <code class="k">font-size</code><code class="p">:</code><code class="mi">20</code><code class="kt">pt</code><code class="p">;</code> <code class="lineno"> 12 </code> <code class="k">font-family</code><code class="p">:</code><code class="kc">monospace</code><code class="p">;</code> <code class="lineno"> 13 </code> <code class="k">margin</code><code class="p">:</code><code class="mi">1</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno"> 14 </code> <code class="p">}</code> <code class="lineno"> 15 </code> <code class="lineno"> 16 </code> <code class="nt">h2</code><code class="p">{</code> <code class="lineno"> 17 </code> <code class="k">margin</code><code class="p">:</code><code class="mi">0</code><code class="p">;</code> <code class="lineno"> 18 </code> <code class="p">}</code> <code class="lineno"> 19 </code> <code class="lineno"> 20 </code> <code class="nt">h3</code><code class="p">{</code> <code class="lineno"> 21 </code> <code class="k">margin</code><code class="p">:</code><code class="mi">0</code><code class="p">;</code> <code class="lineno"> 22 </code> <code class="k">margin-top</code><code class="p">:</code><code class="mi">2</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno"> 23 </code> <code class="p">}</code> <code class="lineno"> 24 </code> <code class="lineno"> 25 </code> <code class="nt">p</code><code class="p">{</code> <code class="lineno"> 26 </code> <code class="k">padding</code><code class="p">:</code><code class="mi">2</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno"> 27 </code> <code class="k">font-weight</code><code class="p">:</code><code class="kc">bold</code><code class="p">;</code> <code class="lineno"> 28 </code> <code class="p">}</code> <code class="lineno"> 29 </code> <code class="lineno"> 30 </code> <code class="p">.</code><code class="nc">grid</code><code class="p">{</code> <code class="lineno"> 31 </code> <code class="k">display</code><code class="p">:</code> <code class="k">grid</code><code class="p">;</code> <code class="lineno"> 32 </code> <code class="k">grid-template-columns</code><code class="p">:</code> <code class="nf">repeat</code><code class="p">(</code><code class="kc">auto</code><code class="o">-</code><code class="kc">fill</code><code class="p">,</code><code class="nf">minmax</code><code class="p">(</code><code class="mi">640</code><code class="kt">px</code><code class="p">,</code><code class="mi">1</code><code class="n">fr</code><code class="p">));</code> <code class="lineno"> 33 </code> <code class="k">grid-gap</code><code class="p">:</code><code class="mi">2</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno"> 34 </code> <code class="p">}</code> <code class="lineno"> 35 </code> <code class="lineno"> 36 </code> <code class="p">.</code><code class="nc">grid</code> <code class="nt">div</code><code class="p">{</code> <code class="lineno"> 37 </code> <code class="k">border</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="kc">solid</code> <code class="mh">#128458</code><code class="p">;</code> <code class="lineno"> 38 </code> <code class="k">padding</code><code class="p">:</code><code class="mi">2</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno"> 39 </code> <code class="k">padding-top</code><code class="p">:</code><code class="mi">1</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno"> 40 </code> <code class="k">padding-bottom</code><code class="p">:</code><code class="mi">1</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno"> 41 </code> <code class="p">}</code> <code class="lineno"> 42 </code> <code class="lineno"> 43 </code> <code class="p">.</code><code class="nc">textsample</code><code class="p">{</code> <code class="lineno"> 44 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno"> 45 </code> <code class="p">}</code> <code class="lineno"> 46 </code> <code class="lineno"> 47 </code> <code class="p">.</code><code class="nc">textsample_alpha</code><code class="p">{</code> <code class="lineno"> 48 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno"> 49 </code> <code class="p">}</code> <code class="lineno"> 50 </code> <code class="lineno"> 51 </code> <code class="p">.</code><code class="nc">bgsample</code><code class="p">{</code> <code class="lineno"> 52 </code> <code class="k">background-color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno"> 53 </code> <code class="p">}</code> <code class="lineno"> 54 </code> <code class="lineno"> 55 </code> <code class="p">.</code><code class="nc">bgsample_alpha</code><code class="p">{</code> <code class="lineno"> 56 </code> <code class="k">background-color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno"> 57 </code> <code class="p">}</code> <code class="lineno"> 58 </code> <code class="lineno"> 59 </code> <code class="p">.</code><code class="nc">bordersample</code><code class="p">{</code> <code class="lineno"> 60 </code> <code class="k">border</code><code class="p">:</code><code class="mi">8</code><code class="kt">px</code> <code class="kc">solid</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno"> 61 </code> <code class="p">}</code> <code class="lineno"> 62 </code> <code class="lineno"> 63 </code> <code class="p">.</code><code class="nc">bordersample_alpha</code><code class="p">{</code> <code class="lineno"> 64 </code> <code class="k">border</code><code class="p">:</code><code class="mi">8</code><code class="kt">px</code> <code class="kc">solid</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno"> 65 </code> <code class="p">}</code> <code class="lineno"> 66 </code> <code class="lineno"> 67 </code> <code class="p">.</code><code class="nc">shadowsample</code><code class="p">{</code> <code class="lineno"> 68 </code> <code class="k">text-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno"> 69 </code> <code class="k">box-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno"> 70 </code> <code class="p">}</code> <code class="lineno"> 71 </code> <code class="lineno"> 72 </code> <code class="p">.</code><code class="nc">shadowsample_alpha</code><code class="p">{</code> <code class="lineno"> 73 </code> <code class="k">text-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno"> 74 </code> <code class="k">box-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno"> 75 </code> <code class="p">}</code> <code class="lineno"> 76 </code> <code class="p">&lt;/</code><code class="nt">style</code><code class="p">&gt;</code> <code class="lineno"> 77 </code> <code class="p">&lt;/</code><code class="nt">head</code><code class="p">&gt;</code> <code class="lineno"> 78 </code> <code class="p">&lt;</code><code class="nt">body</code><code class="p">&gt;</code> <code class="lineno"> 79 </code> <code class="p">&lt;</code><code class="nt">div</code> <code class="na">class</code><code class="o">=</code><code class="s">"grid"</code><code class="p">&gt;</code> <code class="lineno"> 80 </code> <code class="p">&lt;</code><code class="nt">div</code><code class="p">&gt;</code> <code class="lineno"> 81 </code> <code class="p">&lt;</code><code class="nt">h2</code><code class="p">&gt;</code>Text<code class="p">&lt;/</code><code class="nt">h2</code><code class="p">&gt;</code> <code class="lineno"> 82 </code> <code class="p">&lt;</code><code class="nt">p</code> <code class="na">class</code><code class="o">=</code><code class="s">"textsample"</code><code class="p">&gt;</code>HOWCOLORS.WORK<code class="p">&lt;/</code><code class="nt">p</code><code class="p">&gt;</code> <code class="lineno"> 83 </code> <code class="p">&lt;</code><code class="nt">h3</code><code class="p">&gt;</code>Alpha<code class="p">&lt;/</code><code class="nt">h3</code><code class="p">&gt;</code> <code class="lineno"> 84 </code> <code class="p">&lt;</code><code class="nt">p</code> <code class="na">class</code><code class="o">=</code><code class="s">"textsample_alpha"</code><code class="p">&gt;</code>HOWCOLORS.WORK<code class="p">&lt;/</code><code class="nt">p</code><code class="p">&gt;</code> <code class="lineno"> 85 </code> <code class="p">&lt;/</code><code class="nt">div</code><code class="p">&gt;</code> <code class="lineno"> 86 </code> <code class="p">&lt;</code><code class="nt">div</code><code class="p">&gt;</code> <code class="lineno"> 87 </code> <code class="p">&lt;</code><code class="nt">h2</code><code class="p">&gt;</code>Background<code class="p">&lt;/</code><code class="nt">h2</code><code class="p">&gt;</code> <code class="lineno"> 88 </code> <code class="p">&lt;</code><code class="nt">p</code> <code class="na">class</code><code class="o">=</code><code class="s">"bgsample"</code><code class="p">&gt;</code>HOWCOLORS.WORK<code class="p">&lt;/</code><code class="nt">p</code><code class="p">&gt;</code> <code class="lineno"> 89 </code> <code class="p">&lt;</code><code class="nt">h3</code><code class="p">&gt;</code>Alpha<code class="p">&lt;/</code><code class="nt">h3</code><code class="p">&gt;</code> <code class="lineno"> 90 </code> <code class="p">&lt;</code><code class="nt">p</code> <code class="na">class</code><code class="o">=</code><code class="s">"bgsample_alpha"</code><code class="p">&gt;</code>HOWCOLORS.WORK<code class="p">&lt;/</code><code class="nt">p</code><code class="p">&gt;</code> <code class="lineno"> 91 </code> <code class="p">&lt;/</code><code class="nt">div</code><code class="p">&gt;</code> <code class="lineno"> 92 </code> <code class="p">&lt;</code><code class="nt">div</code><code class="p">&gt;</code> <code class="lineno"> 93 </code> <code class="p">&lt;</code><code class="nt">h2</code><code class="p">&gt;</code>Border<code class="p">&lt;/</code><code class="nt">h2</code><code class="p">&gt;</code> <code class="lineno"> 94 </code> <code class="p">&lt;</code><code class="nt">p</code> <code class="na">class</code><code class="o">=</code><code class="s">"bordersample"</code><code class="p">&gt;</code>HOWCOLORS.WORK<code class="p">&lt;/</code><code class="nt">p</code><code class="p">&gt;</code> <code class="lineno"> 95 </code> <code class="p">&lt;</code><code class="nt">h3</code><code class="p">&gt;</code>Alpha<code class="p">&lt;/</code><code class="nt">h3</code><code class="p">&gt;</code> <code class="lineno"> 96 </code> <code class="p">&lt;</code><code class="nt">p</code> <code class="na">class</code><code class="o">=</code><code class="s">"bordersample_alpha"</code><code class="p">&gt;</code>HOWCOLORS.WORK<code class="p">&lt;/</code><code class="nt">p</code><code class="p">&gt;</code> <code class="lineno"> 97 </code> <code class="p">&lt;/</code><code class="nt">div</code><code class="p">&gt;</code> <code class="lineno"> 98 </code> <code class="p">&lt;</code><code class="nt">div</code><code class="p">&gt;</code> <code class="lineno"> 99 </code> <code class="p">&lt;</code><code class="nt">h2</code><code class="p">&gt;</code>Shadow<code class="p">&lt;/</code><code class="nt">h2</code><code class="p">&gt;</code> <code class="lineno">100 </code> <code class="p">&lt;</code><code class="nt">p</code> <code class="na">class</code><code class="o">=</code><code class="s">"shadowsample"</code><code class="p">&gt;</code>HOWCOLORS.WORK<code class="p">&lt;/</code><code class="nt">p</code><code class="p">&gt;</code> <code class="lineno">101 </code> <code class="p">&lt;</code><code class="nt">h3</code><code class="p">&gt;</code>Alpha<code class="p">&lt;/</code><code class="nt">h3</code><code class="p">&gt;</code> <code class="lineno">102 </code> <code class="p">&lt;</code><code class="nt">p</code> <code class="na">class</code><code class="o">=</code><code class="s">"shadowsample_alpha"</code><code class="p">&gt;</code>HOWCOLORS.WORK<code class="p">&lt;/</code><code class="nt">p</code><code class="p">&gt;</code> <code class="lineno">103 </code> <code class="p">&lt;/</code><code class="nt">div</code><code class="p">&gt;</code> <code class="lineno">104 </code> <code class="p">&lt;/</code><code class="nt">div</code><code class="p">&gt;</code> <code class="lineno">105 </code> <code class="p">&lt;/</code><code class="nt">body</code><code class="p">&gt;</code> <code class="lineno">106 </code><code class="p">&lt;/</code><code class="nt">html</code><code class="p">&gt;</code> </pre> </div> </figure> <p>The result of this code will give you four boxes for the text, background, border, and shadow CSS examples.</p> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_sample.png" style="width: 100%;" /> <figcaption>The browser output of the above code</figcaption> </figure> </div> <p> In the following CSS examples, we will change the <code>--color</code> and <code>--color-alpha</code> variables. Instead of a variable as color <code>color:var(--color);</code> you could of course also pass the color value <code>color:#FF0000;</code>. </p> <h2 id="hex">Hex</h2> <p>The hex color notation allows you to define sRGB colors as hexadecimal numbers. It starts with a hash <code>#</code>, and then you have the three primary colors, red, green and last the blue color.</p> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/PrimaryColors.png" style="width: 100%;" /> <figcaption>The primary colors, red, green, and blue.</figcaption> </figure> </div> <p> The hex notation only allows ten numerals (0-9) and six letters (a-f). Where <code>00</code> would be <code>0</code> in the RGB functional notation, and <code>FF</code> would be <code>255</code>.<br /> The higher the value of a primary color is, the brighter that color is. This means that the hex color <code>#000000</code> has zero brightness in all three primary colors and is black. The color <code>#FFFFFF</code> is the opposite as all colors have the full light, which leads to white. </p> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/FFCCCCFF9999FF6666FF3333FF0000CC0000990000660000330000.png" style="width: 100%;" /> <figcaption>A example of brighter and darker versions of red <code>#FF0000</code></figcaption> </figure> </div> <aside class="tip blurb"> <p> If you use any RGB color format to express colors, you should consider writing them in this notation. This is true in case the file size is the most important to you and readability comes second. The hex notation gives you the shortest color strings. You can define some colors in the three-digit notation. That three-digit short-form reduces your color string (including <code>#</code>) to four or five characters. </p> </aside> <div class="keep-together"> <h3 id="syntax">Syntax</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_hex_long.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">#</td> <td style="text-align: center;">44</td> <td style="text-align: center;">2B</td> <td style="text-align: center;">82</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The <code>#</code> indicates that the following is a hex color notation.</p> </dd> <dt>2</dt> <dd>The red part of the color, two hexadecimal characters (0–9, A–F).</dd> <dt>3</dt> <dd>The green part of the color, two hexadecimal characters.</dd> <dt>4</dt> <dd>The blue part of the color, two hexadecimal characters.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_hex_long_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">#</td> <td style="text-align: center;">44</td> <td style="text-align: center;">2B</td> <td style="text-align: center;">82</td> <td style="text-align: center;">77</td> </tr> </tbody> </table> <dl> <dt>1 till 4</dt> <dd>These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.</dd> <dt>5</dt> <dd> <p>The opacity part of the color, two hexadecimal characters. Where <code>FF</code> = 100%, <code>CC</code> = 80%, <code>99</code> = 60%, <code>66</code> = 40%, <code>33</code> = 20%, and <code>00</code> = 0%.</p> </dd> </dl> </div> <div class="keep-together"> <h4 id="code-samples-1">Code Samples</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_hex_long.png" style="width: 100%;" /> <figcaption>Result with the color values #442B82 and #442B8277</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno">2 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="mh">#442B82</code><code class="p">;</code> <code class="lineno">3 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="mh">#442B82</code><code class="mi">77</code><code class="p">;</code> <code class="lineno">4 </code><code class="p">}</code> </pre> </div> </figure> </div> <h3 id="three-digit-notation">Three-digit notation</h3> <p> It is possible to use a three-digit or four-digit (including the alpha value) notation. In this short-form the single digits get doubled. So, for example, <code>#0FC</code> would be <code>#00FFCC</code> in the standard form. The downside is you only have 4096 colors available in the short-form. </p> <div class="keep-together"> <h4 id="three-digit-syntax">Three-digit Syntax</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_hex_short.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">#</td> <td style="text-align: center;">8</td> <td style="text-align: center;">4</td> <td style="text-align: center;">0</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The <code>#</code> indicates that the following is a hex color notation.</p> </dd> <dt>2</dt> <dd>The red part of the color, one hexadecimal character (0–9, A–F).</dd> <dt>3</dt> <dd>The green part of the color, one hexadecimal character.</dd> <dt>4</dt> <dd>The blue part of the color, one hexadecimal character.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha-1">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_hex_short_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">#</td> <td style="text-align: center;">8</td> <td style="text-align: center;">4</td> <td style="text-align: center;">0</td> <td style="text-align: center;">7</td> </tr> </tbody> </table> <dl> <dt>1 till 4</dt> <dd>These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.</dd> <dt>5</dt> <dd> <p>The opacity part of the color, one hexadecimal character. Where <code>F</code> = 100%, <code>C</code> = 80%, <code>9</code> = 60%, <code>6</code> = 40%, <code>3</code> = 20%, and <code>0</code> = 0%.</p> </dd> </dl> </div> <div class="keep-together"> <h4 id="code-samples-2">Code Samples</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_hex_short.png" style="width: 100%;" /> <figcaption>Result with the color values #840 and #8407</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno">2 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="mh">#840</code><code class="p">;</code> <code class="lineno">3 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="mh">#8407</code><code class="p">;</code> <code class="lineno">4 </code><code class="p">}</code> </pre> </div> </figure> </div> <h3 id="browser-support">Browser Support</h3> <p> The hex notation, is <a href="https://caniuse.com/#feat=mdn-css_types_color_rgb_hexadecimal_notation">supported in all browsers</a>. The four and eight-digit short-form has <a href="https://caniuse.com/#feat=css-rrggbbaa">support in all major browsers</a>. </p> <div id="hexexercise" class="quiz"> <h3 id="exercise">Exercise</h3> <ol class="quiz-questions"> <li> <p>How many characters can a hex color have (without <code>#</code>)?</p> <ol class="quiz-choices" type="a"> <li>4</li> <li>5</li> <li>2</li> </ol> </li> <li> <p>The hexadecimal alpha value <code>66</code> in percent?</p> </li> <li> <p>How many colors are available in the three-digit notation?</p> <ol class="quiz-choices" type="a"> <li>Same as in the long format</li> <li>16.777.216</li> <li>4096</li> </ol> </li> </ol> </div> <h2 id="rgb">RGB</h2> <p> The RGB functions build the colors from a combination of red, green, and blue. Each of these color values defines the intensity of the color as an integer value. The values range from <code>0</code> to <code>255</code> or from <code>0%</code> to <code>100%</code> percent. If you pass <code>0</code> to all three values you will get black, if you pass <code>255</code> to all you get white. </p> <p>The computed value of the following functions is a color in the sRGB color space.</p> <aside class="tip blurb"> <p>The functional RGB notation is longer than the hex, but it is easier to read as we have integer values.</p> </aside> <h3 id="the-primary-colors">The Primary Colors</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/PrimaryColors.png" style="width: 100%;" /> <figcaption>The primary colors, red, green, and blue.</figcaption> </figure> </div> <div class="keep-together"> <h4 id="red">Red</h4> <table style="width: 100%;"> <thead> <tr> <th style="text-align: center;">Red</th> <th style="text-align: center;">Green</th> <th style="text-align: center;">Blue</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;"><code>255</code></td> <td style="text-align: center;"><code>0</code></td> <td style="text-align: center;"><code>0</code></td> </tr> </tbody> </table> <p>If you only set the red value to the highest possible value <code>255</code>, it gives you the brightest red, which is possible.</p> <h4 id="green">Green</h4> <table style="width: 100%;"> <thead> <tr> <th style="text-align: center;">Red</th> <th style="text-align: center;">Green</th> <th style="text-align: center;">Blue</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;"><code>0%</code></td> <td style="text-align: center;"><code>100%</code></td> <td style="text-align: center;"><code>0%</code></td> </tr> </tbody> </table> <p>Here only the green value is set to <code>100%</code>, which gives you the brightest green possible.</p> <h4 id="blue">Blue</h4> <table style="width: 100%;"> <thead> <tr> <th style="text-align: center;">Red</th> <th style="text-align: center;">Green</th> <th style="text-align: center;">Blue</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;"><code>0</code></td> <td style="text-align: center;"><code>0</code></td> <td style="text-align: center;"><code>255</code></td> </tr> </tbody> </table> <p>The same logic applies for blue, so by setting the value to <code>255</code> and the other two values to <code>0</code>, you get the brightest blue.</p> </div> <div class="keep-together"> <h3 id="old-syntax">Old Syntax</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_old_rgb.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">rgb</td> <td style="text-align: center;">(</td> <td style="text-align: center;">15</td> <td style="text-align: center;">,</td> <td style="text-align: center;"></td> <td style="text-align: center;">64</td> <td style="text-align: center;">,</td> <td style="text-align: center;"></td> <td style="text-align: center;">174</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The function starts with an <code>rgb</code>.</p> </dd> <dt>2</dt> <dd>Following the function name, an opening bracket.</dd> <dt>3</dt> <dd> <p>The red value of the color can be a number or a percentage. The numbers are in the range of <code>0</code> - <code>255</code>, where <code>255</code> equals <code>100%</code>.</p> </dd> <dt>4</dt> <dd>A comma as the separator between the color values.</dd> <dt>5</dt> <dd>An optional space.</dd> <dt>6</dt> <dd>The green value of the color. Allowed are the same values as for red.</dd> <dt>7</dt> <dd>A comma as the separator between the color values.</dd> <dt>8</dt> <dd>An optional space.</dd> <dt>9</dt> <dd>The blue value of the color. Allowed are the same values as for red and green.</dd> <dt>10</dt> <dd>The functions closing bracket.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha-2">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_old_rgb_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> <th style="text-align: center;">11</th> <th style="text-align: center;">12</th> <th style="text-align: center;">13</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">rgba</td> <td style="text-align: center;">(</td> <td style="text-align: center;">15</td> <td style="text-align: center;">,</td> <td style="text-align: center;"></td> <td style="text-align: center;">64</td> <td style="text-align: center;">,</td> <td style="text-align: center;"></td> <td style="text-align: center;">174</td> <td style="text-align: center;">,</td> <td style="text-align: center;"></td> <td style="text-align: center;">80%</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>If you want to add the colors alpha value, the old syntax’s function needs to start with a <code>rgba</code>.</p> </dd> <dt>2 till 9</dt> <dd>These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.</dd> <dt>10</dt> <dd>A comma as the separator between the color values and the alpha value.</dd> <dt>11</dt> <dd>An optional space.</dd> <dt>12</dt> <dd> <p> You can define the alpha (opacity) value as a number between <code>0</code> and <code>1</code> or as a percentage. For example, <code>1</code> or <code>100%</code> means full opacity, while <code>0.5</code> or <code>50%</code> is means half opacity. </p> </dd> <dt>13</dt> <dd>The functions closing bracket.</dd> </dl> </div> <h4 id="browser-support-1">Browser Support</h4> <p>All major <a href="https://caniuse.com/#feat=mdn-css_types_color_rgb_functional_notation">browsers support</a> the RGB functional notation.</p> <div class="keep-together"> <h4 id="code-samples-3">Code Samples</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_rgb.png" style="width: 100%;" /> <figcaption>Result with the color values rgb(15, 64, 174) and rgba(15, 64, 174, 80%)</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno">2 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="nb">rgb</code><code class="p">(</code><code class="mi">15</code><code class="p">,</code> <code class="mi">64</code><code class="p">,</code> <code class="mi">174</code><code class="p">);</code> <code class="lineno">3 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="nb">rgba</code><code class="p">(</code><code class="mi">15</code><code class="p">,</code> <code class="mi">64</code><code class="p">,</code> <code class="mi">174</code><code class="p">,</code> <code class="mi">80</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">4 </code><code class="p">}</code> </pre> </div> </figure> </div> <div class="keep-together"> <h3 id="new-syntax">New Syntax</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_new_rgb.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">rgb</td> <td style="text-align: center;">(</td> <td style="text-align: center;">47</td> <td style="text-align: center;"></td> <td style="text-align: center;">27</td> <td style="text-align: center;"></td> <td style="text-align: center;">41</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>Same as the old syntax, the new one starts an <code>rgb</code>.</p> </dd> <dt>2</dt> <dd> <p>An opening bracket follows the <code>rgb</code>.</p> </dd> <dt>3</dt> <dd> <p>The red value of the color can be a number or a percentage. The numbers are in the range of <code>0</code> - <code>255</code>, where <code>255</code> equals <code>100%</code>.</p> </dd> <dt>4</dt> <dd>Space as the separator between the color values.</dd> <dt>5</dt> <dd>The green value of the color. Allowed are the same values as for the red (3) part.</dd> <dt>6</dt> <dd>Space as the separator between the color values.</dd> <dt>7</dt> <dd>The blue value of the color also can be a number or a percentage.</dd> <dt>8</dt> <dd>The functions closing bracket.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha-3">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_new_rgb_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> <th style="text-align: center;">11</th> <th style="text-align: center;">12</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">rgb</td> <td style="text-align: center;">(</td> <td style="text-align: center;">47</td> <td style="text-align: center;"></td> <td style="text-align: center;">27</td> <td style="text-align: center;"></td> <td style="text-align: center;">41</td> <td style="text-align: center;"></td> <td style="text-align: center;">/</td> <td style="text-align: center;"></td> <td style="text-align: center;">0.6</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>In the new syntax, the functional notation, including the alpha value, also starts with <code>rgb</code>.</p> </dd> <dt>2 till 7</dt> <dd>These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.</dd> <dt>8</dt> <dd>Space as the separator between the color values and the alpha value.</dd> <dt>9</dt> <dd> <p>A <code>/</code> as the separator between the color values and the alpha value.</p> </dd> <dt>10</dt> <dd>Space.</dd> <dt>11</dt> <dd> <p> You can define the alpha (opacity) value as a number between <code>0</code> and <code>1</code> or as a percentage. For example, <code>1</code> or <code>100%</code> means full opacity, while <code>0.5</code> or <code>50%</code> means half opacity. </p> </dd> <dt>12</dt> <dd>The functions closing bracket.</dd> </dl> </div> <h4 id="browser-support-2">Browser Support</h4> <p> The browser support for the space-separated functional color notations is excellent. All major browsers support it already. For details check <a href="https://caniuse.com/#feat=mdn-css_types_color_space_separated_functional_notation">caniuse.com</a>. </p> <div class="keep-together"> <h4 id="code-samples-4">Code Samples</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_rgb_new.png" style="width: 100%;" /> <figcaption>Result with the color values rgb(47 27 41) and rgb(47 27 41 / 0.6)</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno">2 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="nb">rgb</code><code class="p">(</code><code class="mi">47</code> <code class="mi">27</code> <code class="mi">41</code><code class="p">);</code> <code class="lineno">3 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="nb">rgb</code><code class="p">(</code><code class="mi">47</code> <code class="mi">27</code> <code class="mi">41</code> <code class="o">/</code> <code class="mf">0.6</code><code class="p">);</code> <code class="lineno">4 </code><code class="p">}</code> </pre> </div> </figure> </div> <div id="rgbexercise" class="quiz"> <h3 id="exercise-1">Exercise</h3> <ol class="quiz-questions"> <li> <p>Which notation is invalid?</p> <ol class="quiz-choices" type="a"> <li>rgb(55 10 0)</li> <li>rgba(200, 73, 12, .75)</li> <li>rgb(255 100 100, 100%)</li> <li>rgb(100% 10% 0%)</li> </ol> </li> <li> <p>The <code>G</code> in RGB stands for?</p> </li> <li> <p>You can pass a percentage from 0 - 100%, but what is the range for integer values?</p> <ol class="quiz-choices" type="a"> <li>0 - 255</li> <li>0 - 100</li> <li>0 - 360</li> </ol> </li> </ol> </div> <h2 id="hsl">HSL</h2> <p>The hexadecimal and functional RGB notations are quite tricky to read and alter. The HSL functional notation is easier to read and work with. It makes it easy to, for example, get a darker version of the same hue.</p> <p>The hue is an angle on the color wheel, where red equals <code>0</code> and <code>360</code> degree. Green equals <code>120</code> degree and blue <code>240</code> degree.</p> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/HSLColorWheel.png" style="width: 100%;" /> <figcaption>Color Wheel</figcaption> </figure> </div> <aside class="tip blurb"> <p>Changing the hue makes it easy to get complementing colors. All you need to do is add 180 degrees to get the complementary color.</p> </aside> <div class="keep-together"> <h3 id="old-syntax-1">Old Syntax</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_old_hsl.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">hsl</td> <td style="text-align: center;">(</td> <td style="text-align: center;">3</td> <td style="text-align: center;">,</td> <td style="text-align: center;"></td> <td style="text-align: center;">76%</td> <td style="text-align: center;">,</td> <td style="text-align: center;"></td> <td style="text-align: center;">27%</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The function starts with an <code>hsl</code>.</p> </dd> <dt>2</dt> <dd>An opening bracket follows the function name.</dd> <dt>3</dt> <dd>This part defines the hue, which is an angle on the color circle. You define it as a unitless number, which CSS takes as degrees.</dd> <dt>4</dt> <dd>A comma as the separator between the color values.</dd> <dt>5</dt> <dd>An optional space.</dd> <dt>6</dt> <dd> <p>The saturation of your color as a percentage. <code>100%</code> means completely saturated, and <code>0%</code> is completely unsaturated so gray.</p> </dd> <dt>7</dt> <dd>A comma as the separator between the color values.</dd> <dt>8</dt> <dd>An optional space.</dd> <dt>9</dt> <dd> <p>The lightness of your HSL color, where <code>100%</code> is white, and <code>0%</code> lightness is black.</p> </dd> <dt>10</dt> <dd>The functions closing bracket.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha-4">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_old_hsl_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> <th style="text-align: center;">11</th> <th style="text-align: center;">12</th> <th style="text-align: center;">13</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">hsla</td> <td style="text-align: center;">(</td> <td style="text-align: center;">3</td> <td style="text-align: center;">,</td> <td style="text-align: center;"></td> <td style="text-align: center;">76%</td> <td style="text-align: center;">,</td> <td style="text-align: center;"></td> <td style="text-align: center;">27%</td> <td style="text-align: center;">,</td> <td style="text-align: center;"></td> <td style="text-align: center;">50%</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The function starts with an <code>hsla</code>.</p> </dd> <dt>2 till 9</dt> <dd>These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.</dd> <dt>10</dt> <dd>A comma as the separator between the color values and the alpha value.</dd> <dt>11</dt> <dd>An optional space.</dd> <dt>12</dt> <dd> <p> You can define the alpha (opacity) value as a number between <code>0</code> and <code>1</code> or as a percentage. For example, <code>1</code> or <code>100%</code> means full opacity, while <code>0.5</code> or <code>50%</code> means half opacity. </p> </dd> <dt>13</dt> <dd>The functions closing bracket.</dd> </dl> </div> <h4 id="browser-support-3">Browser Support</h4> <p> The HSL notation is <a href="https://caniuse.com/#feat=mdn-css_types_color_hsl">supported in all browsers</a>. The alpha color values in the old HSLA syntax are also supported. Details you can find on <a href="https://caniuse.com/#feat=mdn-css_types_color_alpha">caniuse.com</a>. </p> <div class="keep-together"> <h4 id="code-samples-5">Code Samples</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_hsl.png" style="width: 100%;" /> <figcaption>Result with the color values hsl(3, 76%, 27%) and hsla(3, 76%, 27%, 50%)</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno">2 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="nb">hsl</code><code class="p">(</code><code class="mi">3</code><code class="p">,</code> <code class="mi">76</code><code class="kt">%</code><code class="p">,</code> <code class="mi">27</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">3 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="nb">hsla</code><code class="p">(</code><code class="mi">3</code><code class="p">,</code> <code class="mi">76</code><code class="kt">%</code><code class="p">,</code> <code class="mi">27</code><code class="kt">%</code><code class="p">,</code> <code class="mi">50</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">4 </code><code class="p">}</code> </pre> </div> </figure> </div> <div class="keep-together"> <h3 id="new-syntax-1">New Syntax</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_new_hsl.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">hsl</td> <td style="text-align: center;">(</td> <td style="text-align: center;">295</td> <td style="text-align: center;"></td> <td style="text-align: center;">85%</td> <td style="text-align: center;"></td> <td style="text-align: center;">28%</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The function starts with an <code>hsl</code>.</p> </dd> <dt>2</dt> <dd>An opening bracket follows the function name.</dd> <dt>3</dt> <dd> This part defines the hue, which is an angle on the color circle. You define it as a unitless number, which CSS takes as degrees.<br /> <p> Red = <code>0</code> and <code>360</code> degree.<br /> Green = <code>120</code> degree.<br /> Blue = <code>240</code> degree. </p> <p>In the new CSS Color Module Level 4, you could define the angle as degrees, rads, grads, or turns. For example, <code>1turn</code>.</p> </dd> <dt>4</dt> <dd>Space as the separator between the color values.</dd> <dt>5</dt> <dd> <p>The saturation of your color as a percentage. <code>100%</code> is completely saturated, and <code>0%</code> is completely unsaturated so gray.</p> </dd> <dt>6</dt> <dd>Space as the separator between the color values.</dd> <dt>7</dt> <dd> <p>The lightness of your HSL color, where <code>100%</code> is white, and <code>0%</code> lightness is black.</p> </dd> <dt>8</dt> <dd>The functions closing bracket.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha-5">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_new_hsl_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> <th style="text-align: center;">11</th> <th style="text-align: center;">12</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">hsl</td> <td style="text-align: center;">(</td> <td style="text-align: center;">295</td> <td style="text-align: center;"></td> <td style="text-align: center;">85%</td> <td style="text-align: center;"></td> <td style="text-align: center;">28%</td> <td style="text-align: center;"></td> <td style="text-align: center;">/</td> <td style="text-align: center;"></td> <td style="text-align: center;">.75</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The function starts with an <code>hsl</code>.</p> </dd> <dt>2 till 7</dt> <dd>These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.</dd> <dt>8</dt> <dd>Space as the separator between the color values and the alpha value.</dd> <dt>9</dt> <dd> <p>A <code>/</code> as the separator between the color values and the alpha value.</p> </dd> <dt>10</dt> <dd>Space.</dd> <dt>11</dt> <dd> <p> You can define the alpha (opacity) value as a number between <code>0</code> and <code>1</code> or as a percentage. For example, <code>1</code> or <code>100%</code> means full opacity, while <code>0.5</code> or <code>50%</code> means half opacity. </p> </dd> <dt>12</dt> <dd>The functions closing bracket.</dd> </dl> </div> <h4 id="browser-support-4">Browser Support</h4> <p> The browser support for the space-separated functional color notations is excellent. All major browsers support it already. For details check <a href="https://caniuse.com/#feat=mdn-css_types_color_space_separated_functional_notation">caniuse.com</a>. </p> <div class="keep-together"> <h4 id="code-samples-6">Code Samples</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_hsl_new.png" style="width: 100%;" /> <figcaption>Result with the color values hsl(295 85% 28%) and hsl(295 85% 28% / .75)</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno">2 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="nb">hsl</code><code class="p">(</code><code class="mi">295</code> <code class="mi">85</code><code class="kt">%</code> <code class="mi">28</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">3 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="nb">hsl</code><code class="p">(</code><code class="mi">295</code> <code class="mi">85</code><code class="kt">%</code> <code class="mi">28</code><code class="kt">%</code> <code class="o">/</code> <code class="mf">.75</code><code class="p">);</code> <code class="lineno">4 </code><code class="p">}</code> </pre> </div> </figure> </div> <div id="hslexercise" class="quiz"> <h3 id="exercise-2">Exercise</h3> <ol class="quiz-questions"> <li> <p>Which notation is invalid?</p> <ol class="quiz-choices" type="a"> <li>hsl(75deg 10% 70%)</li> <li>hsl(300 100 50)</li> <li>hsl(300 100% 50%)</li> </ol> </li> <li> <p>The <code>L</code> in HSL stands for?</p> </li> <li> <p>At which degree on the color wheel do you find blue?</p> <ol class="quiz-choices" type="a"> <li>20 degree</li> <li>120 degree</li> <li>240 degree</li> </ol> </li> </ol> </div> <div class="keep-together"> <h2 id="keywords">Keywords</h2> <p>The current chapter would not be complete without a mention of the color keywords. You can use these keywords besides the already covered notations.</p> <h3 id="transparent">Transparent</h3> <p>The <code>transparent</code> keyword gets computed to a transparent black, like <code>#000000</code> or <code>rgb(0, 0, 0, 0)</code>.</p> <h4 id="browser-support-5">Browser Support</h4> <p>All browsers support the <code>transparent</code> keyword. For details have a look at <a href="https://caniuse.com/#feat=mdn-css_types_color_transparent">caniuse.com</a>.</p> <h4 id="code-sample">Code Sample</h4> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="nt">div</code> <code class="p">{</code> <code class="lineno">2 </code> <code class="k">background-color</code><code class="p">:</code><code class="kc">transparent</code><code class="p">;</code> <code class="lineno">3 </code> <code class="k">color</code><code class="p">:</code><code class="kc">transparent</code><code class="p">;</code> <code class="lineno">4 </code><code class="p">}</code> </pre> </div> </figure> </div> <div class="keep-together"> <h3 id="current-color">Current Color</h3> <p> If you use the <code>currentcolor</code> keyword you get the value of the CSS <code>color:</code> property on the current element. For example, set the color of your element to yellow. Now use the <code>currentcolor</code> keyword as the background color. The browser output for this background color would also be yellow. </p> <h4 id="browser-support-6">Browser Support</h4> <p>This keyword is also <a href="https://caniuse.com/#feat=currentcolor">supported in all browsers</a>.</p> <h4 id="code-sample-1">Code Sample</h4> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="nt">div</code> <code class="p">{</code> <code class="lineno">2 </code> <code class="k">background-color</code><code class="p">:</code><code class="n">currentcolor</code><code class="p">;</code> <code class="lineno">3 </code> <code class="k">color</code><code class="p">:</code><code class="kc">yellow</code><code class="p">;</code> <code class="lineno">4 </code><code class="p">}</code> </pre> </div> </figure> </div> <div class="keep-together"> <h3 id="named-colors">Named Colors</h3> <p> CSS has taken over some named colors from HTML and extended the list of named colors a lot. You can find a list of all named colors in the <a href="https://www.w3.org/TR/css-color-4/#named-colors">CSS Color Module</a>. All these color names resolve to a color in the sRGB color space. </p> <aside class="tip blurb"> <p>If you look for the smallest CSS file possible. It is worth having a look at the named colors. Some names are even shorter than their hexadecimal notation.</p> </aside> <h4 id="browser-support-7">Browser Support</h4> <p>Color names are <a href="https://caniuse.com/#feat=mdn-css_types_color_keyword_color_values">supported in all browsers</a>.</p> <h4 id="code-sample-2">Code Sample</h4> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="nt">div</code> <code class="p">{</code> <code class="lineno">2 </code> <code class="k">background-color</code><code class="p">:</code><code class="kc">gold</code><code class="p">;</code> <code class="lineno">3 </code> <code class="k">color</code><code class="p">:</code><code class="kc">gold</code><code class="p">;</code> <code class="lineno">4 </code><code class="p">}</code> </pre> </div> </figure> </div> <img alt="" class="fullscreen" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/howcolors_work_book_new_section.png" style="width: 100%;" /> <h1 id="new-ways-to-express-colors">New Ways to Express Colors!</h1> <p>Have a look at the <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4 working draft</a>. You can see a lot of new ways to express colors in CSS.</p> <p>All these new notations only support the space-separated functional notation. So commas as separators are not allowed.</p> <aside class="information blurb"> <p>Unfortunately, no browser supports these notations yet. But you should prepare yourself for the future and learn them now!</p> </aside> <h2 id="code-samples-update">Code Samples Update</h2> <p>As these new formats are not supported yet, you should make a small change to the CSS. You can use the color variables as fallback colors and define the color in the new syntax in the selector.</p> <p>Unfortunately, you can not use a second CSS variable here. I tested this, and the invalid color notation is not detected when it comes from a variable.</p> <p>Still, in this way, you can already start defining colors with the new notations!</p> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno"> 1 </code><code class="p">&lt;</code><code class="nt">style</code><code class="p">&gt;</code> <code class="lineno"> 2 </code> <code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno"> 3 </code> <code class="c">/* Use these as fallbacks now */</code> <code class="lineno"> 4 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="mh">#808080</code><code class="p">;</code> <code class="lineno"> 5 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="mh">#808080</code><code class="n">FF</code><code class="p">;</code> <code class="lineno"> 6 </code> <code class="p">}</code> <code class="lineno"> 7 </code> <code class="lineno"> 8 </code> <code class="nt">body</code><code class="p">{</code> <code class="lineno"> 9 </code> <code class="k">font-size</code><code class="p">:</code><code class="mi">20</code><code class="kt">pt</code><code class="p">;</code> <code class="lineno">10 </code> <code class="k">font-family</code><code class="p">:</code><code class="kc">monospace</code><code class="p">;</code> <code class="lineno">11 </code> <code class="k">margin</code><code class="p">:</code><code class="mi">1</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno">12 </code> <code class="p">}</code> <code class="lineno">13 </code> <code class="lineno">14 </code> <code class="nt">h2</code><code class="p">{</code> <code class="lineno">15 </code> <code class="k">margin</code><code class="p">:</code><code class="mi">0</code><code class="p">;</code> <code class="lineno">16 </code> <code class="p">}</code> <code class="lineno">17 </code> <code class="lineno">18 </code> <code class="nt">h3</code><code class="p">{</code> <code class="lineno">19 </code> <code class="k">margin</code><code class="p">:</code><code class="mi">0</code><code class="p">;</code> <code class="lineno">20 </code> <code class="k">margin-top</code><code class="p">:</code><code class="mi">2</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno">21 </code> <code class="p">}</code> <code class="lineno">22 </code> <code class="lineno">23 </code> <code class="nt">p</code><code class="p">{</code> <code class="lineno">24 </code> <code class="k">padding</code><code class="p">:</code><code class="mi">2</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno">25 </code> <code class="k">font-weight</code><code class="p">:</code><code class="kc">bold</code><code class="p">;</code> <code class="lineno">26 </code> <code class="p">}</code> <code class="lineno">27 </code> <code class="lineno">28 </code> <code class="p">.</code><code class="nc">grid</code><code class="p">{</code> <code class="lineno">29 </code> <code class="k">display</code><code class="p">:</code> <code class="k">grid</code><code class="p">;</code> <code class="lineno">30 </code> <code class="k">grid-template-columns</code><code class="p">:</code> <code class="nf">repeat</code><code class="p">(</code><code class="kc">auto</code><code class="o">-</code><code class="kc">fill</code><code class="p">,</code><code class="nf">minmax</code><code class="p">(</code><code class="mi">640</code><code class="kt">px</code><code class="p">,</code><code class="mi">1</code><code class="n">fr</code><code class="p">));</code> <code class="lineno">31 </code> <code class="k">grid-gap</code><code class="p">:</code><code class="mi">2</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno">32 </code> <code class="p">}</code> <code class="lineno">33 </code> <code class="lineno">34 </code> <code class="p">.</code><code class="nc">grid</code> <code class="nt">div</code><code class="p">{</code> <code class="lineno">35 </code> <code class="k">border</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="kc">solid</code> <code class="mh">#128458</code><code class="p">;</code> <code class="lineno">36 </code> <code class="k">padding</code><code class="p">:</code><code class="mi">2</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno">37 </code> <code class="k">padding-top</code><code class="p">:</code><code class="mi">1</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno">38 </code> <code class="k">padding-bottom</code><code class="p">:</code><code class="mi">1</code><code class="kt">rem</code><code class="p">;</code> <code class="lineno">39 </code> <code class="p">}</code> <code class="lineno">40 </code> <code class="lineno">41 </code> <code class="p">.</code><code class="nc">textsample</code><code class="p">{</code> <code class="lineno">42 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">43 </code> <code class="k">color</code><code class="p">:</code><code class="nb">hwb</code><code class="p">(</code><code class="mi">300</code><code class="kt">deg</code> <code class="mi">50</code><code class="kt">%</code> <code class="mi">50</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">44 </code> <code class="p">}</code> <code class="lineno">45 </code> <code class="lineno">46 </code> <code class="p">.</code><code class="nc">textsample_alpha</code><code class="p">{</code> <code class="lineno">47 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno">48 </code> <code class="k">color</code><code class="p">:</code><code class="nb">hwb</code><code class="p">(</code><code class="mi">300</code><code class="kt">deg</code> <code class="mi">50</code><code class="kt">%</code> <code class="mi">50</code><code class="kt">%</code> <code class="o">/</code> <code class="mi">100</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">49 </code> <code class="p">}</code> <code class="lineno">50 </code> <code class="lineno">51 </code> <code class="p">.</code><code class="nc">bgsample</code><code class="p">{</code> <code class="lineno">52 </code> <code class="k">background-color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">53 </code> <code class="k">background-color</code><code class="p">:</code><code class="nb">hwb</code><code class="p">(</code><code class="mi">300</code><code class="kt">deg</code> <code class="mi">50</code><code class="kt">%</code> <code class="mi">50</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">54 </code> <code class="p">}</code> <code class="lineno">55 </code> <code class="lineno">56 </code> <code class="p">.</code><code class="nc">bgsample_alpha</code><code class="p">{</code> <code class="lineno">57 </code> <code class="k">background-color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno">58 </code> <code class="k">background-color</code><code class="p">:</code><code class="nb">hwb</code><code class="p">(</code><code class="mi">300</code><code class="kt">deg</code> <code class="mi">50</code><code class="kt">%</code> <code class="mi">50</code><code class="kt">%</code> <code class="o">/</code> <code class="mi">100</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">59 </code> <code class="p">}</code> <code class="lineno">60 </code> <code class="lineno">61 </code> <code class="p">.</code><code class="nc">bordersample</code><code class="p">{</code> <code class="lineno">62 </code> <code class="k">border</code><code class="p">:</code><code class="mi">8</code><code class="kt">px</code> <code class="kc">solid</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">63 </code> <code class="k">border</code><code class="p">:</code><code class="mi">8</code><code class="kt">px</code> <code class="kc">solid</code> <code class="nb">hwb</code><code class="p">(</code><code class="mi">300</code><code class="kt">deg</code> <code class="mi">50</code><code class="kt">%</code> <code class="mi">50</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">64 </code> <code class="p">}</code> <code class="lineno">65 </code> <code class="lineno">66 </code> <code class="p">.</code><code class="nc">bordersample_alpha</code><code class="p">{</code> <code class="lineno">67 </code> <code class="k">border</code><code class="p">:</code><code class="mi">8</code><code class="kt">px</code> <code class="kc">solid</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno">68 </code> <code class="k">border</code><code class="p">:</code><code class="mi">8</code><code class="kt">px</code> <code class="kc">solid</code> <code class="nb">hwb</code><code class="p">(</code><code class="mi">300</code><code class="kt">deg</code> <code class="mi">50</code><code class="kt">%</code> <code class="mi">50</code><code class="kt">%</code> <code class="o">/</code> <code class="mi">100</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">69 </code> <code class="p">}</code> <code class="lineno">70 </code> <code class="lineno">71 </code> <code class="p">.</code><code class="nc">shadowsample</code><code class="p">{</code> <code class="lineno">72 </code> <code class="k">text-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">73 </code> <code class="k">text-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nb">hwb</code><code class="p">(</code><code class="mi">300</code><code class="kt">deg</code> <code class="mi">50</code><code class="kt">%</code> <code class="mi">50</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">74 </code> <code class="k">box-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">75 </code> <code class="k">box-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nb">hwb</code><code class="p">(</code><code class="mi">300</code><code class="kt">deg</code> <code class="mi">50</code><code class="kt">%</code> <code class="mi">50</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">76 </code> <code class="p">}</code> <code class="lineno">77 </code> <code class="lineno">78 </code> <code class="p">.</code><code class="nc">shadowsample_alpha</code><code class="p">{</code> <code class="lineno">79 </code> <code class="k">text-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno">80 </code> <code class="k">text-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nb">hwb</code><code class="p">(</code><code class="mi">300</code><code class="kt">deg</code> <code class="mi">50</code><code class="kt">%</code> <code class="mi">50</code><code class="kt">%</code> <code class="o">/</code> <code class="mi">100</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">81 </code> <code class="k">box-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno">82 </code> <code class="k">box-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nb">hwb</code><code class="p">(</code><code class="mi">300</code><code class="kt">deg</code> <code class="mi">50</code><code class="kt">%</code> <code class="mi">50</code><code class="kt">%</code> <code class="o">/</code> <code class="mi">100</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">83 </code> <code class="p">}</code> <code class="lineno">84 </code><code class="p">&lt;/</code><code class="nt">style</code><code class="p">&gt;</code> </pre> </div> </figure> <p>This will give you the same result as the initial code sample. But in your developer tools, you can see a difference. The browser first tries to understand the new color syntax and after that goes to the fallback.</p> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/dev_console.png" style="width: 100%;" /> <figcaption>Developer Tools – Invalid property value</figcaption> </figure> </div> <p>In the CSS examples below, you will only see the text color example. You can check other cases, like the background, here as the color notation works the same.</p> <h2 id="hwb">HWB</h2> <p>HWB is another functional notation to define colors, similar to HSL. The hue is an angle of <code>0</code> - <code>360</code> degrees, and values of <code>0%</code> - <code>100%</code> for the whiteness and blackness.</p> <p>This new notation is even easier to understand then the HSL notation. That’s the reason why many color pickers, offer the possibility to select colors based on HWB.</p> <div class="figure-wrapper center"> <figure class="image block" style="width: 268px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/gimp_hwb_color_picker.png" style="width: 100%;" /> <figcaption>GIMP Color Picker</figcaption> </figure> </div> <div class="keep-together"> <h3 id="syntax-1">Syntax</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_hwb.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">hwb</td> <td style="text-align: center;">(</td> <td style="text-align: center;">193deg</td> <td style="text-align: center;"></td> <td style="text-align: center;">4%</td> <td style="text-align: center;"></td> <td style="text-align: center;">54%</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The function starts with an <code>hwb</code>.</p> </dd> <dt>2</dt> <dd>An opening bracket follows the function name.</dd> <dt>3</dt> <dd> This part defines the hue, which is an angle on the color circle.<br /> <p> Red = <code>0</code> and <code>360</code> degree.<br /> Green = <code>120</code> degree.<br /> Blue = <code>240</code> degree. </p> </dd> <dt>4</dt> <dd>Space as the separator between the color values.</dd> <dt>5</dt> <dd> <p>The whiteness of your color as a percentage. <code>100%</code> is full whiteness, and <code>0%</code> is no whiteness at all.</p> </dd> <dt>6</dt> <dd>Space as the separator between the color values.</dd> <dt>7</dt> <dd> <p>The blackness of your HWB color, where <code>100%</code> is full blackness, and <code>0%</code> no blackness at all.</p> </dd> <dt>8</dt> <dd>The functions closing bracket.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha-6">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_hwb_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> <th style="text-align: center;">11</th> <th style="text-align: center;">12</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">hwb</td> <td style="text-align: center;">(</td> <td style="text-align: center;">193deg</td> <td style="text-align: center;"></td> <td style="text-align: center;">4%</td> <td style="text-align: center;"></td> <td style="text-align: center;">54%</td> <td style="text-align: center;"></td> <td style="text-align: center;">/</td> <td style="text-align: center;"></td> <td style="text-align: center;">90%</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1 till 7</dt> <dd>These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.</dd> <dt>8</dt> <dd>Space as the separator between the color values and the alpha value.</dd> <dt>9</dt> <dd> <p>A <code>/</code> as the separator between the color values and the alpha value.</p> </dd> <dt>10</dt> <dd>Space.</dd> <dt>11</dt> <dd> <p> You can define the alpha (opacity) value as a number between <code>0</code> and <code>1</code> or as a percentage. For example, <code>1</code> or <code>100%</code> means full opacity, while <code>0.5</code> or <code>50%</code> means half opacity. </p> </dd> <dt>12</dt> <dd>The functions closing bracket.</dd> </dl> </div> <h3 id="browser-support-8">Browser Support</h3> <p>No browser supports this way of expressing colors yet.</p> <div class="keep-together"> <h3 id="code-samples-7">Code Samples</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_hwb.png" style="width: 100%;" /> <figcaption>Result using the fallback color values #0A5E75 and #0A5E75E6</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno"> 1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno"> 2 </code> <code class="c">/* Use these as fallbacks now */</code> <code class="lineno"> 3 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="mh">#0A5E75</code><code class="p">;</code> <code class="lineno"> 4 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="mh">#0A5E75</code><code class="n">E6</code><code class="p">;</code> <code class="lineno"> 5 </code><code class="p">}</code> <code class="lineno"> 6 </code> <code class="lineno"> 7 </code><code class="p">.</code><code class="nc">textsample</code><code class="p">{</code> <code class="lineno"> 8 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno"> 9 </code> <code class="k">color</code><code class="p">:</code><code class="nb">hwb</code><code class="p">(</code><code class="mi">193</code><code class="kt">deg</code> <code class="mi">4</code><code class="kt">%</code> <code class="mi">54</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">10 </code><code class="p">}</code> <code class="lineno">11 </code> <code class="lineno">12 </code><code class="p">.</code><code class="nc">textsample_alpha</code><code class="p">{</code> <code class="lineno">13 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno">14 </code> <code class="k">color</code><code class="p">:</code><code class="nb">hwb</code><code class="p">(</code><code class="mi">193</code><code class="kt">deg</code> <code class="mi">4</code><code class="kt">%</code> <code class="mi">54</code><code class="kt">%</code> <code class="o">/</code> <code class="mi">90</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">15 </code><code class="p">}</code> </pre> </div> </figure> </div> <div id="hwbexercise" class="quiz"> <h3 id="exercise-3">Exercise</h3> <ol class="quiz-questions"> <li> <p>Which notation is invalid?</p> <ol class="quiz-choices" type="a"> <li>hwb(75deg 30% 70%)</li> <li>hwb(300 25% 75% / 0.5)</li> <li>hwb(300deg, 50, 50)</li> </ol> </li> <li> <p>The <code>H</code> in HWB stands for?</p> </li> <li> <p>At which degree on the color wheel do you find green?</p> <ol class="quiz-choices" type="a"> <li>20 degree</li> <li>120 degree</li> <li>240 degree</li> </ol> </li> </ol> </div> <h2 id="lab">Lab</h2> <p>The CIELab color space represents the complete range of colors a human can see. Once major browsers support this notation it means way more colors for you!</p> <p> For the second and third function parameter we move along the a and b axes of the color space. There are positive and negative values allowed. Positive values along the a-axis give you a red while negative values are green. On the b-axis, positive values are yellow and negative values are blue. </p> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/lab_a_b_axis.png" style="width: 100%;" /> <figcaption>A visual of the CIELab a and b axes.</figcaption> </figure> </div> <div class="keep-together"> <h3 id="syntax-2">Syntax</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_lab.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">lab</td> <td style="text-align: center;">(</td> <td style="text-align: center;">36%</td> <td style="text-align: center;"></td> <td style="text-align: center;">54</td> <td style="text-align: center;"></td> <td style="text-align: center;">-6</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The function starts with a <code>lab</code>.</p> </dd> <dt>2</dt> <dd>An opening bracket follows the function name.</dd> <dt>3</dt> <dd> <p>The first value is the CIE lightness; usually, it is between <code>0%</code> (black) and <code>100%</code> (white). Still, it can exceed that range for extra bright whites up to <code>400%</code>.</p> </dd> <dt>4</dt> <dd>Space as the separator between the color values.</dd> <dt>5</dt> <dd>The second parameter is the distance along the a-axises in the Lab colorspace.</dd> <dt>6</dt> <dd>Space as the separator between the color values.</dd> <dt>7</dt> <dd>The third parameter is the distance along the b-axises in the Lab colorspace.</dd> <dt>8</dt> <dd>The functions closing bracket.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha-7">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_lab_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> <th style="text-align: center;">11</th> <th style="text-align: center;">12</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">lab</td> <td style="text-align: center;">(</td> <td style="text-align: center;">36%</td> <td style="text-align: center;"></td> <td style="text-align: center;">54</td> <td style="text-align: center;"></td> <td style="text-align: center;">-6</td> <td style="text-align: center;"></td> <td style="text-align: center;">/</td> <td style="text-align: center;"></td> <td style="text-align: center;">0.4</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1 till 7</dt> <dd>These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.</dd> <dt>8</dt> <dd>Space as the separator between the color values and the alpha value.</dd> <dt>9</dt> <dd> <p>A <code>/</code> as the separator between the color values and the alpha value.</p> </dd> <dt>10</dt> <dd>Space.</dd> <dt>11</dt> <dd> <p> You can define the alpha (opacity) value as a number between <code>0</code> and <code>1</code> or as a percentage. For example, <code>1</code> or <code>100%</code> means full opacity, while <code>0.5</code> or <code>50%</code> means half opacity. </p> </dd> <dt>12</dt> <dd>The functions closing bracket.</dd> </dl> </div> <h3 id="browser-support-9">Browser Support</h3> <p>No browser supports this way of expressing colors yet.</p> <div class="keep-together"> <h3 id="code-samples-8">Code Samples</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_lab.png" style="width: 100%;" /> <figcaption>Result using the fallback color values #9C2160 and #9C216066</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno"> 1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno"> 2 </code> <code class="c">/* Use these as fallbacks now */</code> <code class="lineno"> 3 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="mh">#9C2160</code><code class="p">;</code> <code class="lineno"> 4 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="mh">#9C2160</code><code class="mi">66</code><code class="p">;</code> <code class="lineno"> 5 </code><code class="p">}</code> <code class="lineno"> 6 </code> <code class="lineno"> 7 </code><code class="p">.</code><code class="nc">textsample</code><code class="p">{</code> <code class="lineno"> 8 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno"> 9 </code> <code class="k">color</code><code class="p">:</code><code class="nf">lab</code><code class="p">(</code><code class="mi">36</code><code class="kt">%</code> <code class="mi">54</code> <code class="mi">-6</code><code class="p">);</code> <code class="lineno">10 </code><code class="p">}</code> <code class="lineno">11 </code> <code class="lineno">12 </code><code class="p">.</code><code class="nc">textsample_alpha</code><code class="p">{</code> <code class="lineno">13 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno">14 </code> <code class="k">color</code><code class="p">:</code><code class="nf">lab</code><code class="p">(</code><code class="mi">36</code><code class="kt">%</code> <code class="mi">54</code> <code class="mi">-6</code> <code class="o">/</code> <code class="mf">0.4</code><code class="p">);</code> <code class="lineno">15 </code><code class="p">}</code> </pre> </div> </figure> </div> <div id="labexercise" class="quiz"> <h3 id="exercise-4">Exercise</h3> <ol class="quiz-questions"> <li> <p>Which notation is invalid?</p> <ol class="quiz-choices" type="a"> <li>lab(100%, 100, 160)</li> <li>lab(50% 50 -160)</li> <li>lab(350% 50 160)</li> </ol> </li> <li> <p>The <code>a</code> in Lab stands for?</p> </li> <li> <p>What range does the first parameter allow?</p> <ol class="quiz-choices" type="a"> <li>0 - 400%</li> <li>0 - 100%</li> <li>0 - 360 degree</li> </ol> </li> </ol> </div> <h2 id="lch">LCH</h2> <p>Another new way to express colors in the CSS 4 working draft is the <code>lch()</code> notation.</p> <div class="keep-together"> <h3 id="syntax-3">Syntax</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_lch.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">lch</td> <td style="text-align: center;">(</td> <td style="text-align: center;">12%</td> <td style="text-align: center;"></td> <td style="text-align: center;">8</td> <td style="text-align: center;"></td> <td style="text-align: center;">211</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The function starts with an <code>lch</code>.</p> </dd> <dt>2</dt> <dd>An opening bracket follows the function name.</dd> <dt>3</dt> <dd> <p>The first value is the lightness; usually, it is between <code>0%</code> (black) and <code>100%</code> (white). Still, it can exceed that range for extra bright whites up to <code>400%</code>.</p> </dd> <dt>4</dt> <dd>Space as the separator between the color values.</dd> <dt>5</dt> <dd> <p> The second value is the amount of color or chroma, usually between <code>0</code> and <code>230</code>. A value above <code>77</code> exceeds the boundaries of the sRGB color space which most of the CSS color notations use. </p> </dd> <dt>6</dt> <dd>Space as the separator between the color values.</dd> <dt>7</dt> <dd>This part defines the hue, which is an angle on the color circle (or wheel). See the HSL section for a visual of the color wheel.</dd> <dt>8</dt> <dd>The functions closing bracket.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha-8">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_lch_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> <th style="text-align: center;">11</th> <th style="text-align: center;">12</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">lch</td> <td style="text-align: center;">(</td> <td style="text-align: center;">12%</td> <td style="text-align: center;"></td> <td style="text-align: center;">8</td> <td style="text-align: center;"></td> <td style="text-align: center;">211</td> <td style="text-align: center;"></td> <td style="text-align: center;">/</td> <td style="text-align: center;"></td> <td style="text-align: center;">60%</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1 till 7</dt> <dd>These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.</dd> <dt>8</dt> <dd>Space as the separator between the color values and the alpha value.</dd> <dt>9</dt> <dd> <p>A <code>/</code> as the separator between the color values and the alpha value.</p> </dd> <dt>10</dt> <dd>Space.</dd> <dt>11</dt> <dd> <p> You can define the alpha (opacity) value as a number between <code>0</code> and <code>1</code> or as a percentage. For example, <code>1</code> or <code>100%</code> means full opacity, while <code>0.5</code> or <code>50%</code> means half opacity. </p> </dd> <dt>12</dt> <dd>The functions closing bracket.</dd> </dl> </div> <h3 id="browser-support-10">Browser Support</h3> <p>No browser supports this way of expressing colors yet.</p> <div class="keep-together"> <h3 id="code-samples-9">Code Samples</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_lch.png" style="width: 100%;" /> <figcaption>Result using the fallback color values #0F2225 and #0F222599</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno"> 1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno"> 2 </code> <code class="c">/* Use these as fallbacks now */</code> <code class="lineno"> 3 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="mh">#0F2225</code><code class="p">;</code> <code class="lineno"> 4 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="mh">#0F2225</code><code class="mi">99</code><code class="p">;</code> <code class="lineno"> 5 </code><code class="p">}</code> <code class="lineno"> 6 </code> <code class="lineno"> 7 </code><code class="p">.</code><code class="nc">textsample</code><code class="p">{</code> <code class="lineno"> 8 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno"> 9 </code> <code class="k">color</code><code class="p">:</code><code class="nf">lch</code><code class="p">(</code><code class="mi">12</code><code class="kt">%</code> <code class="mi">8</code> <code class="mi">211</code><code class="p">);</code> <code class="lineno">10 </code><code class="p">}</code> <code class="lineno">11 </code> <code class="lineno">12 </code><code class="p">.</code><code class="nc">textsample_alpha</code><code class="p">{</code> <code class="lineno">13 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno">14 </code> <code class="k">color</code><code class="p">:</code><code class="nf">lch</code><code class="p">(</code><code class="mi">12</code><code class="kt">%</code> <code class="mi">8</code> <code class="mi">211</code> <code class="o">/</code> <code class="mi">60</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">15 </code><code class="p">}</code> </pre> </div> </figure> </div> <div id="lchexercise" class="quiz"> <h3 id="exercise-5">Exercise</h3> <ol class="quiz-questions"> <li> <p>Which notation is invalid?</p> <ol class="quiz-choices" type="a"> <li>lch(100% 100 160deg)</li> <li>lch(50% 50 60deg)</li> <li>lch(50% 50 380deg)</li> </ol> </li> <li> <p>The <code>h</code> in Lab stands for?</p> </li> <li> <p>What range of values can you use for the second parameter?</p> <ol class="quiz-choices" type="a"> <li>0 - 100</li> <li>0 - 230</li> <li>0 - 360</li> </ol> </li> </ol> </div> <h2 id="color">Color</h2> <p> With the notation <code>color()</code>, CSS will allow you to specify colors in reference to a color profile. You can pass the color profile as the first parameter. You can pass one of the predefined color profiles (<code>srgb</code>, <code>prophoto-rgb</code>, <code>display-p3</code>, <code>rec-2020</code>, <code>a98-rgb</code>) or you define an own profile. </p> <p> If you want to add your own profile, you need to specify it first with a <code>@color-profile</code> rule. Then you can use it within the <code>color()</code> function, this works almost like defining new fonts via <code>@font-face</code>. </p> <div class="keep-together"> <h3 id="syntax-4">Syntax</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_color.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">color</td> <td style="text-align: center;">(</td> <td style="text-align: center;">display-p3</td> <td style="text-align: center;"></td> <td style="text-align: center;">0.4087</td> <td style="text-align: center;"></td> <td style="text-align: center;">0.1048</td> <td style="text-align: center;"></td> <td style="text-align: center;">0</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The function starts with a <code>color</code>.</p> </dd> <dt>2</dt> <dd>An opening bracket follows the function name.</dd> <dt>3</dt> <dd>This is an optional parameter defining the color space. Either you choose one of the predefined ones or one you created yourself.</dd> <dt>4</dt> <dd>Space as the separator between the color values.</dd> <dt>5 till 9</dt> <dd> Depending on the colorspace, you either pass a string or a set of numeric parameters here. If you provide fewer color values than the colorspace requires, CSS will take <code>0</code> for the remaining. This repeats with space as separator till the last value for the color space. <br /> <p>In our example, we pass 3 values between <code>0</code> and <code>1</code>, all separated by a space.</p> </dd> <dt>10</dt> <dd>The functions closing bracket.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha-9">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_color_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> <th style="text-align: center;">9</th> <th style="text-align: center;">10</th> <th style="text-align: center;">11</th> <th style="text-align: center;">12</th> <th style="text-align: center;">13</th> <th style="text-align: center;">14</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">color</td> <td style="text-align: center;">(</td> <td style="text-align: center;">display-p3</td> <td style="text-align: center;"></td> <td style="text-align: center;">0.4087</td> <td style="text-align: center;"></td> <td style="text-align: center;">0.1048</td> <td style="text-align: center;"></td> <td style="text-align: center;">0</td> <td style="text-align: center;"></td> <td style="text-align: center;">/</td> <td style="text-align: center;"></td> <td style="text-align: center;">.8</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1 till 9</dt> <dd>These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.</dd> <dt>10</dt> <dd>Space as the separator between the color values and the alpha value.</dd> <dt>11</dt> <dd> <p>A <code>/</code> as the separator between the color values and the alpha value.</p> </dd> <dt>12</dt> <dd>Space.</dd> <dt>13</dt> <dd> <p> You can define the alpha (opacity) value as a number between <code>0</code> and <code>1</code> or as a percentage. For example, <code>1</code> or <code>100%</code> means full opacity, while <code>0.5</code> or <code>50%</code> means half opacity. </p> </dd> <dt>14</dt> <dd>The functions closing bracket.</dd> </dl> </div> <h3 id="browser-support-11">Browser Support</h3> <p>No browser supports this way of expressing colors yet.</p> <div class="keep-together"> <h3 id="code-samples-10">Code Samples</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_color.png" style="width: 100%;" /> <figcaption>Result using the fallback color #780600</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno"> 1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno"> 2 </code> <code class="c">/* Use these as fallbacks now */</code> <code class="lineno"> 3 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="mh">#780600</code><code class="p">;</code> <code class="lineno"> 4 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="mh">#780600</code><code class="n">CC</code><code class="p">;</code> <code class="lineno"> 5 </code><code class="p">}</code> <code class="lineno"> 6 </code> <code class="lineno"> 7 </code><code class="c">/* Defining a new Profile */</code> <code class="lineno"> 8 </code><code class="p">@</code><code class="k">color-profile</code> <code class="nt">sample</code> <code class="p">{</code> <code class="lineno"> 9 </code> <code class="nt">src</code><code class="o">:</code> <code class="nt">url</code><code class="o">(</code><code class="s1">'https://howcolors.work/sample.icc'</code><code class="o">);</code> <code class="lineno">10 </code><code class="p">}</code> <code class="lineno">11 </code> <code class="lineno">12 </code><code class="c">/* Using the own Profile */</code> <code class="lineno">13 </code><code class="p">.</code><code class="nc">textsample</code> <code class="p">{</code> <code class="lineno">14 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">15 </code> <code class="k">color</code><code class="p">:</code><code class="nf">color</code><code class="p">(</code><code class="n">sample</code> <code class="mf">0.4087</code> <code class="mf">0.1048</code> <code class="mi">0</code><code class="p">);</code> <code class="lineno">16 </code><code class="p">}</code> <code class="lineno">17 </code> <code class="lineno">18 </code><code class="c">/* Using the predefined display-p3 Profile */</code> <code class="lineno">19 </code><code class="p">.</code><code class="nc">textsample</code><code class="p">{</code> <code class="lineno">20 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">21 </code> <code class="k">color</code><code class="p">:</code><code class="nf">color</code><code class="p">(</code><code class="n">display</code><code class="o">-</code><code class="n">p3</code> <code class="mf">0.4087</code> <code class="mf">0.1048</code> <code class="mi">0</code><code class="p">);</code> <code class="lineno">22 </code><code class="p">}</code> <code class="lineno">23 </code> <code class="lineno">24 </code><code class="p">.</code><code class="nc">textsample_alpha</code><code class="p">{</code> <code class="lineno">25 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno">26 </code> <code class="k">color</code><code class="p">:</code><code class="nf">color</code><code class="p">(</code><code class="n">display</code><code class="o">-</code><code class="n">p3</code> <code class="mf">0.4087</code> <code class="mf">0.1048</code> <code class="mi">0</code> <code class="o">/</code> <code class="mf">.8</code><code class="p">);</code> <code class="lineno">27 </code><code class="p">}</code> </pre> </div> </figure> </div> <div id="colorexercise" class="quiz"> <h3 id="exercise-6">Exercise</h3> <ol class="quiz-questions"> <li> <p>Which notation is invalid?</p> <ol class="quiz-choices" type="a"> <li>color(display-p3 0.5 0.5 0.2)</li> <li>color(display-p3, 0.5 0.5 0.2)</li> <li>color(a98-rgb 0.2 0.2 0.2)</li> </ol> </li> <li><p>What does the first parameter define?</p></li> <li><p>What range of values you can pass for the second and following parameters?</p></li> </ol> </div> <h2 id="gray">Gray</h2> <p> The <code>gray()</code> functional notation gives you completely desaturated colors. You only need to pass a single parameter, or two if you want to specify an alpha value. A value of <code>50</code>, so <code>gray(50)</code> would be right between black and white. </p> <div class="keep-together"> <h3 id="syntax-5">Syntax</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_gray.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">gray</td> <td style="text-align: center;">(</td> <td style="text-align: center;">35</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1</dt> <dd> <p>The function starts with a <code>gray</code>.</p> </dd> <dt>2</dt> <dd>An opening bracket follows the function name.</dd> <dt>3</dt> <dd>The value for gray <code>50</code> would be right between black and white.</dd> <dt>4</dt> <dd>The functions closing bracket.</dd> </dl> </div> <div class="keep-together"> <h4 id="alpha-10">Alpha</h4> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/syntax_gray_alpha.png" style="width: 100%;" /> </figure> </div> <table class="with-caption" style="width: 100%;"> <caption> Breakdown </caption> <thead> <tr> <th style="text-align: center;">1</th> <th style="text-align: center;">2</th> <th style="text-align: center;">3</th> <th style="text-align: center;">4</th> <th style="text-align: center;">5</th> <th style="text-align: center;">6</th> <th style="text-align: center;">7</th> <th style="text-align: center;">8</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">gray</td> <td style="text-align: center;">(</td> <td style="text-align: center;">35</td> <td style="text-align: center;"></td> <td style="text-align: center;">/</td> <td style="text-align: center;"></td> <td style="text-align: center;">50%</td> <td style="text-align: center;">)</td> </tr> </tbody> </table> <dl> <dt>1 till 3</dt> <dd>These parts are the same as for the color notation without an alpha value to get details have a look in the section above.</dd> <dt>4</dt> <dd>Space as the separator between the color values and the alpha value.</dd> <dt>5</dt> <dd> <p>A <code>/</code> as the separator between the color values and the alpha value.</p> </dd> <dt>6</dt> <dd>Space.</dd> <dt>7</dt> <dd> <p> You can define the alpha (opacity) value as a number between <code>0</code> and <code>1</code> or as a percentage. For example, <code>1</code> or <code>100%</code> means full opacity, while <code>0.5</code> or <code>50%</code> means half opacity. </p> </dd> <dt>8</dt> <dd>The functions closing bracket.</dd> </dl> </div> <h3 id="browser-support-12">Browser Support</h3> <p>No browser supports this way of expressing colors yet.</p> <div class="keep-together"> <h3 id="code-samples-11">Code Samples</h3> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_gray.png" style="width: 100%;" /> <figcaption>Result using the fallback color for gray(35)</figcaption> </figure> </div> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno"> 1 </code><code class="p">:</code><code class="nd">root</code><code class="p">{</code> <code class="lineno"> 2 </code> <code class="c">/* Use these as fallbacks now */</code> <code class="lineno"> 3 </code> <code class="err">--</code><code class="k">color</code><code class="p">:</code><code class="mh">#525252</code><code class="p">;</code> <code class="lineno"> 4 </code> <code class="err">--</code><code class="n">color-alpha</code><code class="p">:</code><code class="mh">#525252</code><code class="mi">80</code><code class="p">;</code> <code class="lineno"> 5 </code><code class="p">}</code> <code class="lineno"> 6 </code> <code class="lineno"> 7 </code><code class="p">.</code><code class="nc">textsample</code><code class="p">{</code> <code class="lineno"> 8 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno"> 9 </code> <code class="k">color</code><code class="p">:</code><code class="nb">gray</code><code class="p">(</code><code class="mi">35</code><code class="p">);</code> <code class="lineno">10 </code><code class="p">}</code> <code class="lineno">11 </code> <code class="lineno">12 </code><code class="p">.</code><code class="nc">textsample_alpha</code><code class="p">{</code> <code class="lineno">13 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="o">-</code><code class="kc">alpha</code><code class="p">);</code> <code class="lineno">14 </code> <code class="k">color</code><code class="p">:</code><code class="nb">gray</code><code class="p">(</code><code class="mi">35</code> <code class="o">/</code> <code class="mi">50</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">15 </code><code class="p">}</code> </pre> </div> </figure> </div> <div id="grayexercise" class="quiz"> <h3 id="exercise-7">Exercise</h3> <ol class="quiz-questions"> <li> <p>Which notation is invalid?</p> <ol class="quiz-choices" type="a"> <li>gray(60 / 60%)</li> <li>gray(70)</li> <li>gray(10, 100%)</li> </ol> </li> <li><p>What does the first parameter define?</p></li> <li> <p>What range of values can you pass for the second parameter?</p> <ol class="quiz-choices" type="a"> <li>0 - 100</li> <li>0 - 255</li> <li>0 - 360 degree</li> </ol> </li> </ol> </div> <img alt="" class="fullscreen" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/howcolors_work_book_new_section-1.png" style="width: 100%;" /> <h1 id="cool-ways-to-use-colors">Cool Ways to Use Colors!</h1> <p> In this chapter, I want to show you some cool ways to use colors in CSS. All following examples work with any of the above notations. Of course, you need to keep the notations browser support in mind, and if you use one of the new ways add a fallback color. </p> <h2 id="text-gradient">Text Gradient</h2> <p>The CSS property to change the foreground or text color is <code>color</code>. In the examples above I showed you how to set a normal color as text color with the following code.</p> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">.</code><code class="nc">textsample</code><code class="p">{</code> <code class="lineno">2 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">3 </code> <code class="c">/* or */</code> <code class="lineno">4 </code> <code class="k">color</code><code class="p">:</code><code class="mh">#FF0000</code><code class="p">;</code> <code class="lineno">5 </code><code class="p">}</code> </pre> </div> </figure> <p>Now the cool part! Did you know you can use a CSS gradient as your text background? To get an idea of what is possible in modern browsers have a look at the screenshot of my personal website.</p> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_azettl_net.png" style="width: 100%;" /> <figcaption>Screenshot of azettl.net</figcaption> </figure> </div> <p> The trick here is to use the CSS properties <code>background-clip</code> and <code>text-fill-color</code>. You can use this if you do not need to <a href="https://caniuse.com/#feat=mdn-css_properties_-webkit-text-fill-color">support Internet Explorer</a>. </p> <p>First, you will have to decide on a CSS gradient you want to use. If you are not sure how to create a gradient you can use any <a href="https://convertingcolors.com/css-gradient.html">online generator</a> to create one.</p> <p>Look at the example code from the previous chapters. If you want to use a gradient as text background you will have to change the <code>.textsample</code> class.</p> <p>Additionally to the <code>color</code>, you have to set a <code>background-image</code>. This is where you pass your gradient, in this example a <code>linear-gradient</code>.</p> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">.</code><code class="nc">textsample</code><code class="p">{</code> <code class="lineno">2 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">3 </code> <code class="k">background-image</code><code class="p">:</code><code class="nb">linear-gradient</code><code class="p">(</code><code class="mi">45</code><code class="kt">deg</code><code class="p">,</code><code class="mh">#00b131</code> <code class="mf">8.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f93753</code> <code class="mf">8.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f9</code><code class="err">\</code> <code class="lineno">4 </code><code class="mi">3753</code> <code class="mf">16.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f70</code> <code class="mf">16.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f70</code> <code class="mi">25</code><code class="kt">%</code><code class="p">,</code><code class="mh">#edeb00</code> <code class="mi">25</code><code class="kt">%</code><code class="p">,</code><code class="mh">#edeb00</code> <code class="mf">33.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#195584</code> <code class="mi">33</code><code class="err">.\</code> <code class="lineno">5 </code><code class="mi">33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#195584</code> <code class="mf">41.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#7b598f</code> <code class="mf">41.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#7b598f</code> <code class="mi">50</code><code class="kt">%</code><code class="p">,</code><code class="mh">#00b131</code> <code class="mi">50</code><code class="kt">%</code><code class="p">,</code><code class="mh">#00b131</code> <code class="mf">58.33</code><code class="err">\</code> <code class="lineno">6 </code><code class="err">%</code><code class="p">,</code><code class="mh">#f93753</code> <code class="mf">58.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f93753</code> <code class="mf">66.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f70</code> <code class="mf">66.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f70</code> <code class="mi">75</code><code class="kt">%</code><code class="p">,</code><code class="mh">#edeb00</code> <code class="mi">75</code><code class="kt">%</code><code class="p">,</code><code class="mh">#edeb0</code><code class="err">\</code> <code class="lineno">7 </code><code class="mi">0</code> <code class="mf">83.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#195584</code> <code class="mf">83.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#195584</code> <code class="mf">91.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#7b598f</code> <code class="mf">91.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#7b598f</code> <code class="mi">100</code><code class="kt">%</code><code class="p">);</code> <code class="lineno">8 </code><code class="p">}</code> </pre> </div> </figure> <div class="figure-wrapper center"> <figure class="image block" style="width: 395px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_text_gradient.png" style="width: 100%;" /> <figcaption>Current Result</figcaption> </figure> </div> <p> Until now you only set the gradient as a background of your element, but the text has still the same color as before. Now you need to add the <code>background-clip</code> and <code>text-fill-color</code> properties. The <code>text-fill-color</code> you have to set to <code>transparent</code> and the <code>background-clip</code> you set to <code>text</code>. With this parameters, the background gradient gets clipped to the text and the text gets a transparent filling. </p> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno"> 1 </code><code class="p">.</code><code class="nc">textsample</code><code class="p">{</code> <code class="lineno"> 2 </code> <code class="k">color</code><code class="p">:</code><code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno"> 3 </code> <code class="k">background-image</code><code class="p">:</code><code class="nb">linear-gradient</code><code class="p">(</code><code class="mi">45</code><code class="kt">deg</code><code class="p">,</code><code class="mh">#00b131</code> <code class="mf">8.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f93753</code> <code class="mf">8.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f9</code><code class="err">\</code> <code class="lineno"> 4 </code><code class="mi">3753</code> <code class="mf">16.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f70</code> <code class="mf">16.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f70</code> <code class="mi">25</code><code class="kt">%</code><code class="p">,</code><code class="mh">#edeb00</code> <code class="mi">25</code><code class="kt">%</code><code class="p">,</code><code class="mh">#edeb00</code> <code class="mf">33.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#195584</code> <code class="mi">33</code><code class="err">.\</code> <code class="lineno"> 5 </code><code class="mi">33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#195584</code> <code class="mf">41.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#7b598f</code> <code class="mf">41.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#7b598f</code> <code class="mi">50</code><code class="kt">%</code><code class="p">,</code><code class="mh">#00b131</code> <code class="mi">50</code><code class="kt">%</code><code class="p">,</code><code class="mh">#00b131</code> <code class="mf">58.33</code><code class="err">\</code> <code class="lineno"> 6 </code><code class="err">%</code><code class="p">,</code><code class="mh">#f93753</code> <code class="mf">58.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f93753</code> <code class="mf">66.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f70</code> <code class="mf">66.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#f70</code> <code class="mi">75</code><code class="kt">%</code><code class="p">,</code><code class="mh">#edeb00</code> <code class="mi">75</code><code class="kt">%</code><code class="p">,</code><code class="mh">#edeb0</code><code class="err">\</code> <code class="lineno"> 7 </code><code class="mi">0</code> <code class="mf">83.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#195584</code> <code class="mf">83.33</code><code class="kt">%</code><code class="p">,</code><code class="mh">#195584</code> <code class="mf">91.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#7b598f</code> <code class="mf">91.67</code><code class="kt">%</code><code class="p">,</code><code class="mh">#7b598f</code> <code class="mi">100</code><code class="kt">%</code><code class="p">);</code> <code class="lineno"> 8 </code> <code class="kp">-webkit-</code><code class="k">background-clip</code><code class="p">:</code><code class="kc">text</code><code class="p">;</code> <code class="lineno"> 9 </code> <code class="kp">-webkit-</code><code class="n">text-fill-color</code><code class="p">:</code><code class="kc">transparent</code><code class="p">;</code> <code class="lineno">10 </code> <code class="kp">-moz-</code><code class="k">background-clip</code><code class="p">:</code><code class="kc">text</code><code class="p">;</code> <code class="lineno">11 </code> <code class="kp">-moz-</code><code class="n">text-fill-color</code><code class="p">:</code><code class="kc">transparent</code><code class="p">;</code> <code class="lineno">12 </code><code class="p">}</code> </pre> </div> </figure> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_text_gradient_result.png" style="width: 100%;" /> <figcaption>The Final Result</figcaption> </figure> </div> <aside class="tip blurb"> <p>With the CSS property <code>border-image</code> you can use your gradient as border of an element!</p> </aside> <h2 id="box-shadows-as-borders">Box Shadows as Borders</h2> <p>Wanting more than one border on an element is one unusual but cool use case for box shadows. In this example, we will use the <code>.shadowsample</code> class of the code from the above chapters.</p> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">.</code><code class="nc">shadowsample</code><code class="p">{</code> <code class="lineno">2 </code> <code class="k">text-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">3 </code> <code class="c">/* offset-x | offset-y | blur-radius | spread-radius | color */</code> <code class="lineno">4 </code> <code class="k">box-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">5 </code><code class="p">}</code> </pre> </div> </figure> <p>Let’s get rid of the blur and spread-radius first.</p> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">.</code><code class="nc">shadowsample</code><code class="p">{</code> <code class="lineno">2 </code> <code class="k">text-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">3 </code> <code class="c">/* offset-x | offset-y | blur-radius | spread-radius | color */</code> <code class="lineno">4 </code> <code class="k">box-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">5 </code><code class="p">}</code> </pre> </div> </figure> <div class="figure-wrapper center"> <figure class="image block" style="width: 395px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_box_shadow.png" style="width: 100%;" /> <figcaption>The result without blur and spread-radius</figcaption> </figure> </div> <p>The <code>box-shadow</code> property allows you to pass multiple shadows by separating them with a comma. This you can use to create a basic border effect by adjusting the offset parameters.</p> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">.</code><code class="nc">shadowsample</code><code class="p">{</code> <code class="lineno">2 </code> <code class="k">text-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">3 </code> <code class="c">/* offset-x | offset-y | blur-radius | spread-radius | color */</code> <code class="lineno">4 </code> <code class="k">box-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">),</code> <code class="mi">-4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">),</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">-4</code><code class="err">\</code> <code class="lineno">5 </code><code class="n">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">),</code> <code class="mi">-4</code><code class="kt">px</code> <code class="mi">-4</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">6 </code><code class="p">}</code> </pre> </div> </figure> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_box_shadow_border_effect.png" style="width: 100%;" /> <figcaption>A single border via the box-shadow property</figcaption> </figure> </div> <p>To add a second border around the first, all you need to do is add another set of box shadows. I use 8 pixels as an offset to get the same border width and the hex color <code>#edeb00</code> as border color.</p> <figure class="code" dir="ltr"> <div class="highlight"> <pre><code></code><code class="lineno">1 </code><code class="p">.</code><code class="nc">shadowsample</code><code class="p">{</code> <code class="lineno">2 </code> <code class="k">text-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">);</code> <code class="lineno">3 </code> <code class="c">/* offset-x | offset-y | blur-radius | spread-radius | color */</code> <code class="lineno">4 </code> <code class="k">box-shadow</code><code class="p">:</code><code class="mi">4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">),</code> <code class="mi">-4</code><code class="kt">px</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">),</code> <code class="mi">4</code><code class="kt">px</code> <code class="mi">-4</code><code class="err">\</code> <code class="lineno">5 </code><code class="n">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">),</code> <code class="mi">-4</code><code class="kt">px</code> <code class="mi">-4</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="nf">var</code><code class="p">(</code><code class="o">--</code><code class="kc">color</code><code class="p">),</code> <code class="mi">8</code><code class="kt">px</code> <code class="mi">8</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="mh">#edeb00</code><code class="p">,</code> <code class="o">-</code><code class="err">\</code> <code class="lineno">6 </code><code class="mi">8</code><code class="kt">px</code> <code class="mi">8</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="mh">#edeb00</code><code class="p">,</code> <code class="mi">8</code><code class="kt">px</code> <code class="mi">-8</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="mh">#edeb00</code><code class="p">,</code> <code class="mi">-8</code><code class="kt">px</code> <code class="mi">-8</code><code class="kt">px</code> <code class="mi">0</code> <code class="mi">0</code> <code class="mh">#edeb00</code><code class="p">;</code> <code class="lineno">7 </code><code class="p">}</code> </pre> </div> </figure> <div class="figure-wrapper center"> <figure class="image block" style="width: 396px;"> <img alt="" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/screen_box_shadow_2_border_effect.png" style="width: 100%;" /> <figcaption>Two borders via the box-shadow property</figcaption> </figure> </div> <aside class="tip blurb"> <p>This way you can even add a third, fourth, or any amount of borders to your element.</p> </aside> <img alt="" class="fullscreen" src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Books%20and%20Magazines/howcolors.work/assets/howcolors_work_book_thanks.png" style="width: 100%;" /> <h1 id="answers">Answers to Exercises</h1> <div class="answers"> <h3 id="current-ways-to-express-colors-1">Current Ways to Express Colors!</h3> <ol class="question-list"> <li> 4 </li> <li> 40% </li> <li> 4096 </li> <li> rgb(255 100 100, 100%) </li> <li> Green </li> <li> 0 - 255 </li> <li> hsl(300 100 50) </li> <li> Lightness </li> <li> 240 degree </li> </ol> <h3 id="new-ways-to-express-colors-1">New Ways to Express Colors!</h3> <ol class="question-list"> <li> hwb(300deg, 50, 50) </li> <li> Hue </li> <li> 120 degree </li> <li> lab(100%, 100, 160) </li> <li> The distance along the a-axises in the Lab colorspace. </li> <li> 0 - 400% </li> <li> lch(50% 50 380deg) </li> <li> Hue </li> <li> 0 - 230 </li> <li> color(display-p3, 0.5 0.5 0.2) </li> <li> The ICC color profile </li> <li> Depends on the color space but usually 0 - 1. </li> <li> gray(10, 100%) </li> <li> The value for gray. </li> <li> 0 - 100 </li> </ol> </div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap'); @page{ size:14.8cm 21cm; /* A5 Format https://formaty.info/en/A5/ */ } @page:left{ margin:2cm 2cm 2cm 1.5cm; @top-center { font-size:10pt; content: string(heading, first); } @top-left{ font-size:10pt; content: counter(page); } } @page:right{ margin:2cm 1.5cm 2cm 2cm; @top-center { font-size:10pt; content: string(heading, first); } @top-right{ font-size:10pt; content: counter(page); } } @page pagewithoutheader{ @top-center { content: ""; } @top-left{ content: ""; } @top-right{ content: ""; } } @page fullscreenimage{ margin:0; background-color:#128458; @top-center { content: ""; } @top-left{ content: ""; } @top-right{ content: ""; } } body{ margin:0; padding:0; font-size:12pt; direction: ltr; font-family: 'Libre Caslon Text', serif; } h1, h2{ page-break-before: always; break-before: always; } h1 + h2{ page-break-before: avoid; break-before: avoid; } h1{ string-set: heading content(); } .quiz, .keep-together, figure.image{ break-inside: avoid; page-break-inside: avoid; } img.fullscreen{ page: fullscreenimage; max-width:100%; min-width:100%; } h2.toc{ page: pagewithoutheader; } ul.toc { margin: 0; padding: 0; overflow: hidden; list-style: none; } ul.toc li ul{ list-style: none; } ul.toc li:after { float: left; width: 0; white-space: nowrap; content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " } ul.toc a{ color:inherit; text-decoration: none; } ul.toc a:first-child { padding-right: 0.33em; background: white } ul.toc a + a::after { float: right; padding-left: 0.33em; background: white; position: relative; z-index: 1; content: target-counter(attr(href), page); } .code pre{ white-space: pre-wrap; } a{ color:inherit; text-decoration:none; } a:not([href^="#"])::after { float:footnote; content: " ("attr(href)")"; font-style: italic; } .note{ float:footnote; font-style: italic; } figure{ width:100%; margin:0 auto; } figcaption, caption{ font-size:10pt; text-align: center; } h1 { font-size: 1.5em; margin-top: 10%; margin-bottom: 1em; } h2 { font-size: 1.17em; margin-top: 1em; margin-bottom: 0.25em; } h3 { margin-top: 1em; font-size: 1.12em; margin-bottom: 0.25em; } h4 { margin-top: 1em; font-size: 1em; margin-bottom: 0.25em; } /* general text */ p { text-indent: 0em; margin-top: 0.5em; } blockquote { margin-left: 2em; } span.lineno, code.lineno { color: gray; font-size: 80%; } /* force some space before and after code blocks */ pre { margin-top: 0.5em; margin-bottom: 0.5em; font-family: monospace; } /* styles for inserted (uil) and deleted (udl) lines */ .udl { text-decoration: line-through; } .uil { font-weight: 900; } .err { color: #FF0000 } /* ============================================================================== */ /* everything below this line is generated by rake book_generator:pygments_styles */ .hll { background-color: #ffffcc } .c { color: #408080; font-style: italic } /* Comment */ .err { color: #FF0000 } /* Error */ .k { color: #008000; font-weight: bold } /* Keyword */ .o { color: #666666 } /* Operator */ .cm { color: #408080; font-style: italic } /* Comment.Multiline */ .cp { color: #BC7A00 } /* Comment.Preproc */ .c1 { color: #408080; font-style: italic } /* Comment.Single */ .cs { color: #408080; font-style: italic } /* Comment.Special */ .gd { color: #A00000 } /* Generic.Deleted */ .ge { font-style: italic } /* Generic.Emph */ .gr { color: #FF0000 } /* Generic.Error */ .gh { color: #000080; font-weight: bold } /* Generic.Heading */ .gi { color: #00A000 } /* Generic.Inserted */ .go { color: #808080 } /* Generic.Output */ .gp { color: #000080; font-weight: bold } /* Generic.Prompt */ .gs { font-weight: bold } /* Generic.Strong */ .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ .gt { color: #0040D0 } /* Generic.Traceback */ .kc { color: #008000; font-weight: bold } /* Keyword.Constant */ .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */ .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */ .kp { color: #008000 } /* Keyword.Pseudo */ .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */ .kt { color: #B00040 } /* Keyword.Type */ .m { color: #666666 } /* Literal.Number */ .s { color: #BA2121 } /* Literal.String */ .na { color: #7D9029 } /* Name.Attribute */ .nb { color: #008000 } /* Name.Builtin */ .nc { color: #0000FF; font-weight: bold } /* Name.Class */ .no { color: #880000 } /* Name.Constant */ .nd { color: #AA22FF } /* Name.Decorator */ .ni { color: #999999; font-weight: bold } /* Name.Entity */ .ne { color: #D2413A; font-weight: bold } /* Name.Exception */ .nf { color: #0000FF } /* Name.Function */ .nl { color: #A0A000 } /* Name.Label */ .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ .nt { color: #008000; font-weight: bold } /* Name.Tag */ .nv { color: #19177C } /* Name.Variable */ .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ .w { color: #bbbbbb } /* Text.Whitespace */ .mf { color: #666666 } /* Literal.Number.Float */ .mh { color: #666666 } /* Literal.Number.Hex */ .mi { color: #666666 } /* Literal.Number.Integer */ .mo { color: #666666 } /* Literal.Number.Oct */ .sb { color: #BA2121 } /* Literal.String.Backtick */ .sc { color: #BA2121 } /* Literal.String.Char */ .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */ .s2 { color: #BA2121 } /* Literal.String.Double */ .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ .sh { color: #BA2121 } /* Literal.String.Heredoc */ .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ .sx { color: #008000 } /* Literal.String.Other */ .sr { color: #BB6688 } /* Literal.String.Regex */ .s1 { color: #BA2121 } /* Literal.String.Single */ .ss { color: #19177C } /* Literal.String.Symbol */ .bp { color: #008000 } /* Name.Builtin.Pseudo */ .vc { color: #19177C } /* Name.Variable.Class */ .vg { color: #19177C } /* Name.Variable.Global */ .vi { color: #19177C } /* Name.Variable.Instance */ .il { color: #666666 } /* Literal.Number.Integer.Long */
JavaScript
/* Put your JavaScript here! But be aware that not all rendering tools are supporting JavaScript. */
Preview powered by paged.js
PDF rendered with  (https://weasyprint.org/)