I would always find myself wondering how to make a color lighter/darker so I made this to help me wrap my head around hex codes.
A Pen by HARUN PEHLİVAN on CodePen.
Created
May 30, 2021 17:10
-
-
Save harunpehlivan/2cc2002b42e479b65068b6efd67b95ef to your computer and use it in GitHub Desktop.
what the hex?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wrapper"> | |
| <h1>What The Hex?</h1> | |
| <div class="inner"> | |
| <p>A hex code is a 6-digit number used to represent colors on the web.</p> | |
| <p>Made up of red, green, and blue, the hex code uses 16 digits from 0 to F where 00 represents no color and FF represents full color.<br/><br/><strong>Change the digits below to see how it affects the background color.</strong></p> | |
| <form class="form-inline"> | |
| <span class="hashtag">#</span> | |
| <div class="form-group red"> | |
| <span>Red</span> | |
| <select class="form-control" id="red1"> | |
| <option>0</option> | |
| <option>1</option> | |
| <option>2</option> | |
| <option>3</option> | |
| <option>4</option> | |
| <option>5</option> | |
| <option>6</option> | |
| <option>7</option> | |
| <option>8</option> | |
| <option>9</option> | |
| <option>A</option> | |
| <option>B</option> | |
| <option>C</option> | |
| <option>D</option> | |
| <option>E</option> | |
| <option>F</option> | |
| </select> | |
| <select class="form-control" id="red2"> | |
| <option>0</option> | |
| <option>1</option> | |
| <option>2</option> | |
| <option>3</option> | |
| <option>4</option> | |
| <option>5</option> | |
| <option>6</option> | |
| <option>7</option> | |
| <option>8</option> | |
| <option>9</option> | |
| <option>A</option> | |
| <option>B</option> | |
| <option>C</option> | |
| <option>D</option> | |
| <option>E</option> | |
| <option>F</option> | |
| </select> | |
| </div> | |
| <div class="form-group green"> | |
| <span>Green</span> | |
| <select class="form-control" id="green1"> | |
| <option>0</option> | |
| <option>1</option> | |
| <option>2</option> | |
| <option>3</option> | |
| <option>4</option> | |
| <option>5</option> | |
| <option>6</option> | |
| <option>7</option> | |
| <option>8</option> | |
| <option>9</option> | |
| <option>A</option> | |
| <option>B</option> | |
| <option>C</option> | |
| <option>D</option> | |
| <option>E</option> | |
| <option>F</option> | |
| </select> | |
| <select class="form-control" id="green2"> | |
| <option>0</option> | |
| <option>1</option> | |
| <option>2</option> | |
| <option>3</option> | |
| <option>4</option> | |
| <option>5</option> | |
| <option>6</option> | |
| <option>7</option> | |
| <option>8</option> | |
| <option>9</option> | |
| <option>A</option> | |
| <option>B</option> | |
| <option>C</option> | |
| <option>D</option> | |
| <option>E</option> | |
| <option>F</option> | |
| </select> | |
| </div> | |
| <div class="form-group blue"> | |
| <span>Blue</span> | |
| <select class="form-control" id="blue1"> | |
| <option>0</option> | |
| <option>1</option> | |
| <option>2</option> | |
| <option>3</option> | |
| <option>4</option> | |
| <option>5</option> | |
| <option>6</option> | |
| <option>7</option> | |
| <option>8</option> | |
| <option>9</option> | |
| <option>A</option> | |
| <option>B</option> | |
| <option>C</option> | |
| <option>D</option> | |
| <option>E</option> | |
| <option>F</option> | |
| </select> | |
| <select class="form-control" id="blue2"> | |
| <option>0</option> | |
| <option>1</option> | |
| <option>2</option> | |
| <option>3</option> | |
| <option>4</option> | |
| <option>5</option> | |
| <option>6</option> | |
| <option>7</option> | |
| <option>8</option> | |
| <option>9</option> | |
| <option>A</option> | |
| <option>B</option> | |
| <option>C</option> | |
| <option>D</option> | |
| <option>E</option> | |
| <option>F</option> | |
| </select> | |
| </div> | |
| </form> | |
| <p id="copy">#000000</p> | |
| </div> | |
| </div> | |
| <div class="site-credit"> | |
| <p>A tool by <a href="https://hpitgroup.glitch.me/">HARUN PEHLİVAN </a></p> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(".form-control").change(function() { | |
| var r1 = document.getElementById("red1"); | |
| var red1 = r1.options[r1.selectedIndex].text; | |
| var r2 = document.getElementById("red2"); | |
| var red2 = r2.options[r2.selectedIndex].text; | |
| var g1 = document.getElementById("green1"); | |
| var green1 = g1.options[g1.selectedIndex].text; | |
| var g2 = document.getElementById("green2"); | |
| var green2 = g2.options[g2.selectedIndex].text; | |
| var b1 = document.getElementById("blue1"); | |
| var blue1 = b1.options[b1.selectedIndex].text; | |
| var b2 = document.getElementById("blue2"); | |
| var blue2 = b2.options[b2.selectedIndex].text; | |
| var hex = "#" + red1 + red2 + green1 + green2 + blue1 + blue2; | |
| console.log(hex); | |
| document.body.style.backgroundColor = hex; | |
| document.getElementById('copy').innerHTML = hex; | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background: #000000; | |
| font-family: "Open Sans"; | |
| margin-top: 1.5rem; | |
| border: 10px solid; | |
| border-image: | |
| linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; | |
| } | |
| .wrapper { | |
| background: rgba(#fff, 1); | |
| box-shadow: 1px 1px 3px 0px rgba( 2, 2, 2, 0.23 ); | |
| margin: 0 auto; | |
| width: 400px; | |
| border-radius: 10px; | |
| } | |
| .inner { | |
| padding: 0 10px 5px;; | |
| text-align: center; | |
| } | |
| h1 { | |
| background: linear-gradient(to right, | |
| #ff0d00 0%, rgba(255, 166, 0, 1) 13%, | |
| rgba(255, 234, 0, 1) 30%, | |
| rgba(0, 255, 13, 1) 45%, | |
| rgba(0, 242, 255, 1) 61%, | |
| rgba(13, 0, 255, 1) 83%, | |
| rgba(255, 0, 234, 1) 98%, rgba(255,0,255,1) 100%); | |
| margin-top: 0; | |
| letter-spacing: -0.04em; | |
| text-align: left; | |
| padding: 5px 10px; | |
| color: white; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); | |
| border-top-left-radius: 10px; | |
| border-top-right-radius: 10px; | |
| margin-bottom: 0; | |
| } | |
| p { font-size: 0.9rem; color: #333;text-align: left;} | |
| #copy { color: #999; font-size: 0.75rem; text-align: right; } | |
| form { margin: 20px auto 20px auto; } | |
| .subhead { font-size: 20px; } | |
| label.control-label { | |
| text-align: center; | |
| } | |
| .hashtag { vertical-align: bottom; margin-bottom: 7px; display: inline-block; } | |
| .form-control { | |
| display: block; | |
| width: 100%; | |
| height: 34px; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| line-height: 1.42857143; | |
| color: #555; | |
| background-color: #fff; | |
| background-image: none; | |
| border: 1px solid #ccc; | |
| // border-radius: 4px; | |
| -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); | |
| box-shadow: inset 0 1px 1px rgba(0,0,0,.075); | |
| -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; | |
| -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; | |
| transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; | |
| } | |
| .form-inline .form-group { | |
| display: inline-block; | |
| margin-bottom: 0; | |
| vertical-align: middle; | |
| } | |
| .form-inline .form-control { | |
| display: inline-block; | |
| width: auto; | |
| vertical-align: middle; | |
| } | |
| .form-group span { | |
| display: block; | |
| text-align: center; | |
| margin-bottom: 5px; | |
| color: #333; | |
| //text-transform: uppercase; | |
| padding: 4px; | |
| font-weight: 800; | |
| font-size: 0.8em; | |
| letter-spacing: 0.01em; | |
| //text-shadow: 0 2px 0 rgba(#000, 1); | |
| } | |
| .form-group.red span { | |
| border-bottom: 10px solid #ff0000; | |
| //background: #ff0000; | |
| } | |
| .form-group.green span { | |
| border-bottom: 10px solid #00ff00; | |
| } | |
| .form-group.blue span { | |
| border-bottom: 10px solid #0000ff; | |
| } | |
| .site-credit { | |
| background: #333; | |
| position: fixed; | |
| bottom: 0; | |
| right: 0; | |
| padding: 5px; | |
| p { | |
| font-size: 0.7rem; | |
| margin: 0; | |
| color: white; | |
| } | |
| a { color: #76D4FF; } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment