Colors

<h1>Colors</h1>

<code>--black: hsla(0, 0%, 7%, 1);</code>
<div class="demo-square" style="background-color: hsla(0, 0%, 7%, 1); height:100px; width:100px;"></div>
<br>

<code>--white: hsla(0, 0%, 100%, 1);</code>
<div class="demo-square" style="background-color: hsla(0, 0%, 100%, 1); height:100px; width:100px; border:1px solid black;"></div>
<br>

<code>--yellow: hsla(50, 100%, 50%, 1);</code>
<div class="demo-square" style="background-color: hsla(50, 100%, 50%, 1); height:100px; width:100px;"></div>
<br>

<code>--teal: hsla(147, 48%, 68%, 1);</code>
<div class="demo-square" style="background-color: hsla(147, 48%, 68%, 1); height:100px; width:100px;"></div>
<br>

<code>--purple: hsla(263, 20%, 20%, 1);</code>
<div class="demo-square" style="background-color: hsla(263, 20%, 20%, 1); height:100px; width:100px;"></div>
<br>

<code>--pink: hsla(340, 80%, 90%, 1);</code>
<div class="demo-square" style="background-color: hsla(340, 80%, 90%, 1); height:100px; width:100px;"></div>
<br>

<code>--blue: hsla(246, 71%, 55%, 1);</code>
<div class="demo-square" style="background-color: hsla(246, 71%, 55%, 1); height:100px; width:100px;"></div>
<br>

<code>--red: hsla(13, 100%, 43%, 1);</code>
<div class="demo-square" style="background-color: hsla(13, 100%, 43%, 1); height:100px; width:100px;"></div>
<br>
<h1>Colors</h1>

<code>--black: hsla(0, 0%, 7%, 1);</code>
<div class="demo-square" style="background-color: hsla(0, 0%, 7%, 1); height:100px; width:100px;"></div>
<br>

<code>--white: hsla(0, 0%, 100%, 1);</code>
<div class="demo-square" style="background-color: hsla(0, 0%, 100%, 1); height:100px; width:100px; border:1px solid black;"></div>
<br>

<code>--yellow: hsla(50, 100%, 50%, 1);</code>
<div class="demo-square" style="background-color: hsla(50, 100%, 50%, 1); height:100px; width:100px;"></div>
<br>

<code>--teal: hsla(147, 48%, 68%, 1);</code>
<div class="demo-square" style="background-color: hsla(147, 48%, 68%, 1); height:100px; width:100px;"></div>
<br>
 
<code>--purple: hsla(263, 20%, 20%, 1);</code>
<div class="demo-square" style="background-color: hsla(263, 20%, 20%, 1); height:100px; width:100px;"></div>
<br>

<code>--pink: hsla(340, 80%, 90%, 1);</code>
<div class="demo-square" style="background-color: hsla(340, 80%, 90%, 1); height:100px; width:100px;"></div>
<br>

<code>--blue: hsla(246, 71%, 55%, 1);</code>
<div class="demo-square" style="background-color: hsla(246, 71%, 55%, 1); height:100px; width:100px;"></div>
<br>

<code>--red: hsla(13, 100%, 43%, 1);</code>
<div class="demo-square" style="background-color: hsla(13, 100%, 43%, 1); height:100px; width:100px;"></div>
<br>
/* No context defined. */
  • Content:
    :root {
        --black: hsla(0, 0%, 7%, 1);
        --white: hsla(0, 0%, 100%, 1);
        --yellow: hsla(50, 100%, 50%, 1);
        --teal: hsla(147, 48%, 68%, 1);
        --purple: hsla(263, 20%, 20%, 1);
        --pink: hsla(340, 80%, 90%, 1);
        --blue: hsla(246, 71%, 55%, 1);
        --red: hsla(13, 100%, 43%, 1);
    }
    
  • URL: /components/raw/colors/colors.demo.css
  • Filesystem Path: src/components/design-tokens/colors/colors.demo.css
  • Size: 298 Bytes

Colors

Colors are used for specific content of pages in correlation with black and white.

  • Teal is for projects
  • Yellow is for journal
  • Red is for the portfolio
  • Blue is for knowledge
  • Purple and pink are for personal

Color values

Colors are defined as custom elements in CSS.

    --black: hsla(0, 0%, 7%, 1);
    --white: hsla(0, 0%, 100%, 1);
    --yellow: hsla(50, 100%, 50%, 1);
    --teal: hsla(147, 48%, 68%, 1);
    --purple: hsla(263, 20%, 20%, 1);
    --pink: hsla(340, 80%, 90%, 1);
    --blue: hsla(246, 71%, 55%, 1);
    --red: hsla(13, 100%, 43%, 1);

Do

Use colors extensively.

Don’t

Mix colors in categories that are not related. Ex don’t put teal inside a personal page. Only the home page is allowed to use different colors.