<h1>Colors</h1> <code>--black: hsla(0, 0%, 7%, 1);</code> <div class="demo-square" style="background-color: var(--black); height:100px; width:100px;"></div> <br> <code>--white: hsla(0, 0%, 100%, 1);</code> <div class="demo-square" style="background-color: var(--white); height:100px; width:100px; border:1px solid black;"></div> <br> <code>--grey: hsla(0, 0%, 93%, 1); </code> <div class="demo-square" style="background-color: var(--grey); height:100px; width:100px;"></div> <code>--grey-dark: hsla(0, 0%, 67%, 1);</code> <div class="demo-square" style="background-color: var(--grey-dark); height:100px; width:100px;"></div> <code>--grey-darker: hsla(0, 0%, 33%, 1);</code> <div class="demo-square" style="background-color: var(--grey-darker); height:100px; width:100px;"></div> <code>--grey-pitchblack: hsla(0, 0%, 13%, 1);</code> <div class="demo-square" style="background-color: var(--grey-pitchblack); height:100px; width:100px;"></div> <br> <code>--yellow: hsla(50, 88%, 58%, 1);</code> <div class="demo-square" style="background-color: var(--yellow); height:100px; width:100px;"></div> <code>--yellow-dark: hsla(50, 73%, 53%, 1);</code> <div class="demo-square" style="background-color: var(--yellow-dark); height:100px; width:100px;"></div> <code> --yellow-darker: hsl(50,66%,36%, 1);</code> <div class="demo-square" style="background-color: var(--yellow-darker); height:100px; width:100px;"></div> <br> <code>--teal: hsla(50, 100%, 50%, 1);</code> <div class="demo-square" style="background-color: var(--teal); height:100px; width:100px;"></div> <code>--teal-dark: hsla(147, 49%, 58%, 1)</code> <div class="demo-square" style="background-color: var(--teal-dark); height:100px; width:100px;"></div> <code> --teal-darker: hsl(146,38%,45%, 1);</code> <div class="demo-square" style="background-color: var(--teal-darker); height:100px; width:100px;"></div> <br> <code>--pink: hsla(340, 100%, 84%, 1);</code> <div class="demo-square" style="background-color: var(--pink); height:100px; width:100px;"></div> <code>--pink-dark: hshsla(340, 100%, 76%, 1);</code> <div class="demo-square" style="background-color: var(--pink-dark); height:100px; width:100px;"></div> <code> --pink-darker: hsla(340, 71%, 49%, 1);</code> <div class="demo-square" style="background-color: var(--pink-darker); height:100px; width:100px;"></div> <br> <code>--blue: hsla(14, 88%, 62%, 1);</code> <div class="demo-square" style="background-color: var(--blue); height:100px; width:100px;"></div> <code>--blue-dark: hsla(14, 71%, 54%, 1);</code> <div class="demo-square" style="background-color: var(--blue-dark); height:100px; width:100px;"></div> <code> --blue-darker: hsla(14, 83%, 43%, 1);</code> <div class="demo-square" style="background-color: var(--blue-darker); height:100px; width:100px;"></div> <br> <code>--red: hsla(238, 98%, 78%, 1);</code> <div class="demo-square" style="background-color: var(--red); height:100px; width:100px;"></div> <code>--red-dark: hsla(238, 79%, 70%, 1);</code> <div class="demo-square" style="background-color: var(--red-dark); height:100px; width:100px;"></div> <code> --red-darker: hsla(237, 63%, 60%, 1);</code> <div class="demo-square" style="background-color: var(--red-darker); height:100px; width:100px;"></div> <br>

:root { --black: #000000; --white: #ffffff; --grey: #eeeeee; --grey-dark: #aaaaaa; --grey-darker: #555555; --grey-pitchblack: #222222; --focus: #666666; --yellow: #f2d336; --yellow-dark: #dfc130; --yellow-darker: #98841f; --teal: #70eba7; --teal-dark: #5fc88f; --teal-darker: #479e6d; --pink: #ffadc9; --pink-dark: #ff85ad; --pink-darker: #d6245f; --red: #f37149; --red-dark: #dd5d36; --red-darker: #c93d13; --blue:#9094fe; --blue-dark: #767aef; --blue-darker: #595fd9; }

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.

List of colors: https://accessiblepalette.com/?lightness=97,93,85,79,63,54,48,32,14,8&db3000=0,-8&ffd500=0,-6&86d5a9=0,0&4b3bde=0,0&ffadc9=0,0&808080=0,0

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.