<link href="https://fonts.googleapis.com/css2?family=Alegreya&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">

<title>Color Codes and Math</title>

<main id="main-doc">
  
    <nav id="navbar"><center>

      <header><h1>Color Codes</h1></header>

      <a href="#About" class="nav-link">About</a>
      <a href="#Color_Codes" class="nav-link">Color Codes</a>
      <a href="#Decimal_Codes" class="nav-link">Decimal Codes</a>
      <a href="#Hexidecimal_Codes" class="nav-link">Hexidecimal Codes</a>
      <a href="#Shorthand_Hex_Codes" class="nav-link">Shorthand Hex Codes</a>
      <a href="#HSL_Color_Codes" class="nav-link">HSL Color Codes</a>
      <a href="#Summary" class="nav-link">Summary</a>
      <a href="#Opacity" class="nav-link">Opacity</a>
      <a href="#JavaScript_and_Java" class="nav-link">JavaScript and Java</a>
      
      </nav>

  <header><h1>Understanding Color Codes</h1></header>
  
  <section class="main-section" id="About">

    <header><h2>About</h2></header>


    <p> Rekindling the art of coding, I found many high school math applications. Here I wanted to couple my love for relevant teaching with what I have learned about programming color.</p>

    <p>On this document, an asterisk (*) will be used to indicate high school math applications.</p>

  </section>

  <section class="main-section" id="Color_Codes">
    
    <header><h2>Color Codes</h2></header>
    
    <p>There are <a href="https://www.wikiwand.com/en/List_of_color_spaces_and_their_uses" target="_blank">different ways to organize color</a>. Below, you will learn about 4 different ways to code color. This is one of the foundational skills to programming. </p>
    
  </section>
  
  <section class="main-section" id="Decimal_Codes">

      <header><h3>Decimal Codes</h3></header>

    <img src="http://gdurl.com/rRoD" width=250px alt="Red Green and Blue Mixing Visual" style="float: left; padding:5px;">

      <p>A color can be made by mixing <b>R</b>ed, <b>G</b>reen and <b>B</b>lue, so it is called the "<b>RGB</b> Color System". In coding, it is written in what we call a Decimal Code <code>(R, G, B)</code>.</p>

    <p>It is also called an "Additive" color system, because it starts at black, and then color is added.</p>
    <p>Each of the 3 colors can be represented on a sliding scale from 0 to 255 and mixed together.</p>

    <button class="accordion">Q: What color is a result of mixing the least of all 3 colors?</button>
    
    <div class="panel">
      <p><code>(0, 0, 0)</code> results in black.</p>
    </div>
    <button class="accordion">Q: What color is a result of mixing the most of all 3 colors?</button>
    
    <div class="panel">
      <p><code>(255, 255, 255)</code> results in white.</p>
    </div>

    <button class="accordion">Q: What colors are a result of mixing the most of only 2 colors?</button>
    
    <div class="panel">
      <p>Mixing only Red and Green <code>(255,255,0)</code> results in Yellow<br>Mixing only Red and Blue <code>(255,0,255)</code> results in Magenta.<br>Mixing only Green and Blue <code>(0,255,255)</code> results in Cyan.<br></p>
    </div>
    
    <div>
      <p>Here is a table to see the decimal <code>(R, G, B)</code> colors (and preview hexidecimal colors).</p>

      <table border="0" align="center" cellpadding="5" id="color-table">
        <tr class="larger">
          <td><br />
            <b>Color</b></td>
          <td>
            <b>Decimal</b><br />
            (Red, Green, Blue)
          </td>
          <td><b>Hexadecimal</b><br />
            (#RRGGBB)
          </td>
        </tr>
        <tr>
          <td bgcolor=black><font color=white>Black</font></td>
          <td>(0, 0, 0)</td>
          <td>#000000</td>
        </tr>
        <tr>
          <td>White</td>
          <td>(255, 255, 255)</td>
          <td>#FFFFFF</td>
        </tr>
        <tr>
          <td bgcolor=red>Red</td>
          <td>(255, 0, 0)</td>
          <td>#FF0000</td>
        </tr>
        <tr>
          <td bgcolor=green><font color=white>Green</font></td>
          <td>(0, 255, 0)</td>
          <td>#00FF00</td>
        </tr>
        <tr>
          <td bgcolor=blue><font color=white>Blue</font></td>
          <td>(0, 0, 255)</td>
          <td>#0000FF</td>
        </tr>
        <tr>
          <td bgcolor=yellow>Yellow</td>
          <td>(255, 255, 0)</td>
          <td>#FFFF00</td>
        </tr>
        <tr>
          <td bgcolor=cyan>Cyan</td>
          <td>(0, 255, 255)</td>
          <td>#00FFFF</td>
        </tr>
        <tr>
          <td bgcolor=magenta>Magenta</td>
          <td>(255, 0, 255)</td>
          <td>#FF00FF</td>
        </tr>
      </table>
    </div>

    <button class="accordion">Q:  Why would colors only be represented by numbers 0-255?</button>

    <div class="panel">
      <p>In coding, we use <b>binary numbers</b>, a system that only has 2 options, to code literally everything. Having 256 color variations (2*2*2*2*2*2*2*2) of red is made up of 8 pieces of 2 options, or 8 bits. 8 bits make up 1 byte, so red actually represented by 1 byte of data. From 0 to 255 is technically 266 colors of red represented by 1 byte. Along with the green byte and blue byte, RGB is 3 bytes. (*Algebra: Multiples of 2)</p>
    </div>

    <button class="accordion">Q:  How can I remember R then G then B?</button>

    <div class="panel">
      <img src="http://gdurl.com/3J3Z" target="_blank" alt="RGB RBG" width="100px" style="float: left; padding:5px;">
      <p>I like to think it's <b>NOT RBG</b> (<b>R</b>uth <b>B</b>ader <b>G</b>insburg), the late Supreme Court Justice. It's R G B instead. These <a href="https://www.raygunsite.com/products/rgb-rbg-sticker" target="_blank" alt="RBG RGB Stickers">RBG RGB stickers</a> sold by RAYGUN might help.</p>
    </div>

    <button class="accordion">Q:  How many coding colors are there total? (*Advanced Algebra: Permutations)</button>

    <div class="panel">
      <p>Imagine only mixing red and green. Each of the 256 shades of red can be matched with 256 shades of green! That's 256*256 = <b>65,536 variations</b>. We call this a permutation (often learned in Algebra 2 or Math 3)<br>But we forgot to mix with the 256 blue. </p>
      <p>So to find the total variations would be 256*256*256!</p>
      <p>There are <b>16, 777, 216 variations of coding colors</b>.</p>
      <p>You can easily visualize all 16 million colors on a color picker like <a href="https://www.google.com/search?q=html+color+picker" target="_blank" alt="google color picker">Google Color Picker</a></p> 
    </div>

  </section>
  
  <section class="main-section" id="Hexidecimal_Codes">
    
    <header><h3>Hexidecimal Codes</h3></header>

    <p>Now that we know that color code is made up of 256 colors of red, 256 colors of green and 256 colors of blue, we should have a shorter way to represent colors.</p>

    <p><b>Hexidecimal colors</b> represent colors only using <b>6 digits</b>! It is called hexidecimal (hexi meaning 6 and decimal meaning 10) because each digit has 16 options.
   </p><p>Instead of representing colors as <code>(R, G, B)</code>, hexidecimal code represents colors as two digits of each Red, Green, and Blue <code>#RRGGBB</code>. </p>

    <p>If we only use two digits 00 through 99 for RR, that only represents 100 reds. To make 256 reds we would need to do a permutation of 16*16. So we will use 16 characters: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (phew 16 characters). So from 00, 01, 02... to 98, 99, A0, A1, to ...FD, FE, FF we now can represent 256 reds.</p>

    <p>Red is represented by <code>#FF0000</code> meaning it is full red (FF), no green (00), and no blue (00).</p>

    <button class="accordion">Q:  How can you represent Green or Blue using Hexidecimal?</button>

    <div class="panel">
      <p>Follow the hexidecimal code #RRGGBB.</p><p><b>Green must be <code>#00FF00</code></b>. <p>
      <p><b>Blue must be <code>#0000FF</code></b>.</p>
    </div>

    <button class="accordion">Q:  How can you represent Magenta, Cyan, or Yellow using Hexidecimal?</button>
    <div class="panel">
      <p>Follow the hexidecimal code #RRGGBB.</p>
      <p><b>Magenta, a mix of red and blue must be <code>#FF00FF</code></b>. </p>
      <p><b>Yellow, a mix of red and green must be <code>#FFFF00</code></b>.</p>
      <p><b>Cyan, a mix of blue and green must be <code>#00FFFF</code></b>.</p>
    </div>

    <button class="accordion">Q:  How can you calculate the number of coding colors using Hexidecimal code? (*Advanced Algebra: Permutations)</button>

    <div class="panel">
      <p>Because each of the 6 digits in #RRGGBB can be represented by 16 characters, the number of variations is 16*16*16*16*16*16.</p>
     <p>This also multiplies to <b>16, 777, 216 variations of coding colors</b>!</p>
    </div>

    <p>To help see the difference between decimal colors and hexidecimal colors, refer back to the <a href="#color-table">table</a> in Introduction to Color Codes.</p>
    <p><b>Related links:</b> For more learning approaches on Hexidecimal colors, visit <a href="https://www.mathsisfun.com/hexadecimal-decimal-colors.html" target="_blank">MathisFun.com</a>.</p>

  </section>

  <section class="main-section" id="Shorthand_Hex_Codes">

    <header><h3>Shorthand Hex Codes</h3></header>
    <p>Hex codes are usually represented by <code>#RRGGBB</code> because it represents all 16,777,216 variations of color. Shorthand hex codes reduce the number of each color to 16, represented by <code>#RGB</code>.</p><p> If I only wanted to represent red, instead of <code>#FF0000</code>, I could write shorthand <code>#F00</code>.</p>

    <button class="accordion">Q:  How can you write shorthand hex code for Green, Blue, Black, or White?</button>

    <div class="panel">
      <code>#0F0</code> is Green.<br>
      <code>#00F</code> is Blue.<br>
      <code>#000</code> is Black.<br>
      <code>#FFF</code> is White.<br>
    </div>

    <button class="accordion">Q:  How can you write shorthand hex code for Magenta, Cyan, or Yellow?</button>

    <div class="panel">
      <code>#F0F</code> is Magenta (mix of red and blue).<br>
      <code>#0FF</code> is Cyan (mix of green and blue).<br>
      <code>#FF0</code> is Yellow (mix of red and green).<br>
    </div>

    <button class="accordion">Q:  How many color variations can be represented by shorthand hexidecimal #RBG? (*Advanced Algebra: Permutations)</button>

    <div class="panel">
      <p>With 16 reds, 16 greens, and 16 blues in shorthand hexidecimal, there are 16*16*16 = <b>4,096 color variations in shorthand hexidecimal</b>.</p>
    </div>

    <p>What's neat is when <code>R=G=B</code>, it will result in a shade of grey.</p>

    <table border="0" align="center" cellpadding="5" id="color-table">
      <tr class="larger">
        <td><br />
          <b>Color</b></td>
        <td>
          <b>Decimal</b><br />
          (Red, Green, Blue)
        </td>
        <td><b>Hexadecimal</b><br />
          (#RRGGBB)
        </td>
        <td><b>Shorthand Hex</b><br />
          (#RGB)
        </td>
      </tr>
      <tr>
        <td bgcolor=black><font color=white>Black</font></td>
        <td>(0, 0, 0)</td>
        <td>#000000</td>
        <td>#000</td>
      </tr>
      <tr>
        <td bgcolor=#ccc>Very Light Grey</td>
        <td>(204, 204, 204)</td>
        <td>#CCCCCC</td>
        <td>#CCC</td>
      </tr>
      <tr>
        <td bgcolor=darkgrey><font color=white>Dark Grey</font></td>
        <td>(169, 169, 169)</td>
        <td>#A9A9A9</td>
        <td>NONE</td>
      </tr>
      <tr>
        <td>White</td>
        <td>(255, 255, 255)</td>
        <td>#FFFFFF</td>
        <td>#FFF</td>
      </tr>
    </table>
    
  </section>
  
  <section class="main-section" id="HSL_Color_Codes">
    
  <header><h3>HSL Color Codes</h3></header>
    
  <img src="http://gdurl.com/kP_R" size="400px"  width=400px alt="HSL Color Wheel" style="float: left; padding:5px;"><i>HSL Color Wheel by <a href="https://erinsowards.com/articles/2011/01/colors.php" target="_blank">Erin Sowards</a></i><br><p>Lastly, a color can be specified using hue, saturation, and lightness (HSL) in the form: <code>hsl(hue, saturation, lightness)</code></p>

    <p><b>Hue</b> is a angle measured in degrees on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.</p>

    <p><b>Saturation</b> is a percentage value, 0% means a shade of gray, and 100% is the full color.</p>

    <p><b>Lightness</b> is also a percentage value, 0% is black, and 100% is white.</p>
    <p>Red would be represented by <code>hsl(0, 100%, 50%)</code> with 0 representing red, 100% representing full saturation, and 50% representing a shade that is neither light nor dark. Notice Red is also located around the circle 1 full turn.  We can also represent red with the angle 360 as <code>hsl(360, 100%, 50%)</code>.</p>
    
    <button class="accordion">Q:  How can you write HSL code for Green, Blue, Black, or White?</button>

    <div class="panel">
      <code>hsl(120, 100%, 50%)</code> is Green.<br>
      <code>hsl(240, 100%, 50%)</code> is Blue.<br>
      <code>hsl(0, 0, 0%)</code> is Black. Any code that ends in 0% lightness is black.<br>
      <code>hsl(0, 0, 100%)</code> is White. Any code that ends in 100% lightness is white.
    </div>
    
    <button class="accordion">Q:  How can you write HSL code for Magenta, Cyan, or Yellow? (*Advance Algebra: Coterminal Angles)</button>
    
    <div class="panel">
      <code>hsl(300, 100%, 50%</code> is Magenta (halfway between red and blue). Magenta is located halfway between blue hue 240 and red hue 0. Since that creates and a full circle back to red at 360, half way between the two hues of 240 and 360 is 300. <br>
      <code>hsl(180, 100%, 50%)</code> is Cyan (halfway between green and blue).<br>
      <code>hsl(60, 100%, 50%)</code> is Yellow (halfway between of red 0 and green 120).
    </div>
    
    <button class="accordion">Q:  How can you write HSL code for Blue or Magenta using a negative degree? (*Advance Algebra: Coterminal Angles)</button>
    
    <div class="panel">
      <p><code>hsl(-120, 100%, 50%)</p> is Blue using a negative angle because you can move 120 degrees the other way on the color wheel 120 degrees to get to Blue.</p>
      <p>Recall <code>hsl(300, 100%, 50%</code> is Magenta (halfway between red and blue). This can also be written as <code>hsl(-60, 100%, 50%)</code> because its halfway between red at 0 degrees and blue at -120 degrees.</p>
    </div>
    <p>When coding HSL, the percentage units are implied.</p>
    <p>For example Yellow could be written as: <code>hsl(60, 100, 50)</code> or <code>hsl(60, 100%, 50%)</code>.</p>
    </div>
 
  </section> 

  <section class="main-section" id="Summary">
    
  <header><h1>Summary</h1></header>
  <p>The four types of color codes we learned about are:
  <ul>
    <li>Decimal</li>
    <li> Hexidecimal</li>
    <li>Shorthand Hex</li>
    <li>HSL</li>
  </ul>
  <p>Here's a table summarizing the limited colors we learned about:</p>
  <table border="0" align="center" cellpadding="5" id="color-table">
     <tr class="larger">
       <td><br />
         <b>Color</b></td>
       <td>
         <b>Decimal</b><br />
         (Red, Green, Blue)
       </td>
       <td><b>Hexadecimal</b><br />
         (#RRGGBB)
       </td>
       <td><b>Shorthand Hex</b><br />
         (#RGB)
       </td>
       <td><b>HSL</b><br />
         (hsl(h, s, l))
       </td>
     </tr>
     <tr>
       <td bgcolor=black><font color=white>Black</font></td>
       <td>(0, 0, 0)</td>
       <td>#000000</td>
       <td>#000</td>
       <td>hsl(0, 0, 0)</td>
     </tr>
     <tr>
       <td bgcolor=darkgrey><font color=white>Dark Grey</font></td>
       <td>(169, 169, 169)</td>
       <td>#A9A9A9</td>
       <td>NONE</td>
       <td>hsl(0, 0, 66.27)</td>
     </tr>
     <tr>
       <td bgcolor=#ccc>Very Light Grey</td>
       <td>(204, 204, 204)</td>
       <td>#CCCCCC</td>
       <td>#CCC</td>
       <td>hsl(0, 0, 80)
     </tr>
     <tr>
       <td>White</td>
       <td>(255, 255, 255)</td>
       <td>#FFFFFF</td>
       <td>#FFF</td>
       <td>hsl(0, 0, 100)</td>
     </tr>
     <tr>
       <td bgcolor=red>Red</td>
       <td>(255, 0, 0)</td>
       <td>#FF0000</td>
       <td>#F00</td>
       <td>hsl(0, 100, 50)</td>
     </tr>
     <tr>
       <td bgcolor=yellow>Yellow</td>
       <td>(255, 255, 0)</td>
       <td>#FFFF00</td>
       <td>#FF0</td>
       <td>hsl(60, 100, 50)</td>
     </tr>
     <tr>
       <td bgcolor=green><font color=white>Green</font></td>
       <td>(0, 255, 0)</td>
       <td>#00FF00</td>
       <td>#0F0</td>
       <td>hsl(120, 100, 50)</td>
     </tr>	
     <tr>
       <td bgcolor=cyan>Cyan</td>
       <td>(0, 255, 255)</td>
       <td>#00FFFF</td>
       <td>#0FF</td>
       <td>hsl(180, 100, 50)</td>
     </tr>
     <tr>
       <td bgcolor=blue><font color=white>Blue</font></td>
       <td>(0, 0, 255)</td>
       <td>#0000FF</td>
       <td>#00F</td>
       <td>hsl(240, 100, 50)</td>
     </tr>
     <tr>
       <td bgcolor=magenta>Magenta</td>
       <td>(255, 0, 255)</td>
       <td>#FF00FF</td>
       <td>#F0F</td>
       <td>hsl(300, 100, 50)</td>
     </tr>
   </table>
   <img src="http://gdurl.com/MIog" width="250px" alt="Complimentary Colors" style="float: right; padding:5px;">
   <p>Now with all our newfound knowledge on colors, we can create websites and apps using color schemes we like. </p>
   <p>A quick search on google will show you popular design color trends and inspire you to notice and create well-thought out color schemes.  Here are a few of my favorite color finds:</p>
   <ul>
     <li><a href="https://99designs.com/blog/trends/color-trends/" target="_blank" alt="99designs.com">99designs.com</a> is a great website to find trending color schemes!</li>
     <li><a href="https://www.crazyegg.com/blog/website-color-palettes/" target="_blank" alt="crazyegg.com">crazyegg.com</a> is the perfect resource to delve into all you need to know about web color!</li>
    </ul>
    
  </section>

  <section class="main-section" id="Opacity">

    <header><h1>Opacity</h1></header>

    <p>To take colors one step further, we can also opacity or transparency.With HSL and RGB, we can add an alpha value to create a HSLA or RGBA color.</p>
    
    <p>The alpha value is represented by a number 0 to 1. Using an alpha value of 0 will make the color completely transparent. A color's alpha level is defaulted at 1, complete color, unless you state otherwise with an alpha value.</p>

  </section>

  <section class="main-section" id="JavaScript_and_Java">

    <header><h1>JavaScript and Java</h1></header>

    <p>This section is only here because a section titled "JavaScript and Java" witha matching id was a required User Story for my HTML and CSS course project.</p>
    
  </section>
  
  <p><i>Made with 💜 by Rachel Elysia Perkins</i></p>

</main>



<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  font-family: 'Raleway', opensans;
  font-size: 14px;
  background-color: #e5eaf5;
  color: #000;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #d0bdf4;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}
    body {
  font-family: 'Raleway', opensans;
  font-size: 12pt;
  }
      h1 {
  font-family: 'Alegreya', opensans;
  color: #e5eaf5;
  background-color: #494d5f;
  padding: 3px;
  }
      h2 {
  font-family: 'Alegreya', opensans;
  color: #d0bdf4;
  background-color: #494d5f;
  padding: 3px;
  }
      h3 {
  font-family: 'Alegreya', opensans;
  color: #494d5f;
  background-color: #d0bdf4;
  padding: 3px;
  }
    p {
  font-family: 'Raleway', opensans;
  font-size: 12pt;

  }
  ul {
  list-style-type: none;
  margin: 5px;
  padding: 5px;
}
  li {
  padding: 5px;
}
   a {
  background: #494d4f;
  color: #a0d2eb;
  text-align: center;
  text-decoration: none;
  font-family: 'Raleway', opensans;
  font-weight: bold;
 }
  a:hover {
  background: #494d4f;
  color: #E5EAF5;
  font-family: 'Raleway', opensans;
  font-weight: bold;
  }
/* The sidebar menu */
nav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 200px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #494d5f; /* Dark Grey */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
nav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 14px;
  color: #A0D2EB;
  background-color: #494d5f;
  display: block;
}

/* When you mouse over the navigation links, change their color */
nav a:hover {
  color: #E5EAF5;
  background-color: #494d5f;
}

/* Style page content */
main {
  margin-left: 200px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* Style page content */
#main-doc {
  margin-left: 200px; /* Same as the width of the sidebar */
  margin-right: 10%;
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  nav {padding-top: 15px;}
  nav a {font-size: 12px;}
}
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.