Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Guide to Color Schemes \| Voldemort × PT × LvP
ID	5089217069662208
Created	4 years ago, 1623772803831
Updated	4 years ago, 1624552341533
Code	<!DOCTYPE html> <html> <!-- Voldemort × PT × Lucy van Pelt Collab for Primavera Grand Finale Guide to Color Schemes Started: June 8 '21 Finished: June 15 '21 --> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway:400,500,600\|DM+Serif+Display'> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Guide to Color Schemes \| Voldemort × PT × LvP</title> <style> :root { --green-color: #34bf49; --red-color: #ff4c4c; --blue-color: #0099e5; --white-color: #f1f2f3; --black-color: #303030; --rotation-angle: 300deg; } html, body { margin: 0px; padding: 0px; background: linear-gradient(var(--rotation-angle), #34bf4911, #ff4c4c11, #0099e511); background-attachment: fixed; color: var(--black-color); font-family: 'Raleway'; font-size: 1em; scroll-behavior: smooth; overflow-x: hidden; transition: 0.5s; font-weight: 500; } h1, h2, h3, h4, h5, h6 { font-family: 'DM Serif Display'; } ::selection { background-color: #0099e5aa; color: var(--white-color); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--white-color); } ::-webkit-scrollbar-thumb { background: var(--blue-color); } ::-webkit-scrollbar-thumb:hover { background: #0079c5; } .page-content { padding: 5%; } .flex-container { display: flex; flex-direction: row; flex-wrap: wrap; align-content: stretch; } .flex-item { padding: 3%; margin: 1%; transition: 0.5s; font-weight: 500; color: #686868; } .flex-item h1 { text-align: center; } .custom-hr { width: 100%; height: 5px; background: linear-gradient(var(--rotation-angle), #34bf4933, #0099e533, #ff4c4c33); margin: -15px 0 5% 0; border-radius: 10px; } .page-images { float: right; width: 30vw; margin: 5% 0% 5% 5%; } .page { animation: fade-in 0.5s ease-in-out; } button { cursor: pointer; } </style> <!-- General --> <style> .js-scroll { opacity: 0; transition: opacity 0.5s; } .js-scroll.scrolled { opacity: 1; } .scrolled.fade-in { animation: fade-in 0.5s ease-in-out both; } .scrolled.fade-in-bottom { animation: fade-in-bottom 0.5s ease-in-out both; } .scrolled.slide-left { animation: slide-in-left 0.5s ease-in-out both; } .scrolled.slide-right { animation: slide-in-right 0.5s ease-in-out both; } @keyframes slide-in-left { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-bottom { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } </style> <!-- On-scroll animations --> <style> /* Page headers / header { width: 100vw; height: 70vh; background: url("https://upload.wikimedia.org/wikipedia/commons/9/94/Wave-100s-1000px_%281%29.svg"); background-position: left top 60%; background-repeat: no-repeat; background-size: cover; margin: auto; padding: 1%; text-align: center; color: var(--white-color); position: relative; } header h5 { font-size: 1.5em; margin-bottom: -4%; } header h1 { font-size: 8vw; } .page-subheader { width: 100vw; height: 70vh; background: url("https://upload.wikimedia.org/wikipedia/commons/c/ca/Valley-100s-1000px.svg"); background-position: left top 50%; margin: auto; background-repeat: no-repeat; background-size: cover; } .page-subheader-text { padding: 10%; padding-top: 15%; text-align: center; } .page-subheader-text h5 { color: var(--white-color); font-size: 1.2em; margin-bottom: -6%; } .page-subheader-text h1 { color: var(--white-color); font-size: 7vw; } @media (max-width: 950px) { .page-subheader-text { padding-top: 15%; } } @media (max-width: 800px) { .page-subheader-text { padding-top: 20%; } } @media (max-width: 650px) { .page-subheader-text { padding: 0%; padding-top: 15%; } .page-subheader-text h1 { font-size: 10vw; } } @media (max-width: 500px) { .page-subheader-text { padding: 0%; padding-top: 20%; } .page-subheader-text h1 { font-size: 10vw; } } / Buttons in headers & subheaders / .to-and-fro-buttons { border: none; outline: none; background: linear-gradient(to bottom right, #0099e5aa, #ff4c4caa); color: var(--white-color); width: 80px; height: 80px; border-radius: 50%; padding: 11px; position: absolute; transition: 0.5s; } .up-button, .prev-button { left: 10%; } .down-button, .next-button { right: 10%; } .prev-button, .next-button { bottom: 20%; } .prev-button:hover { transform: translateX(-20%); box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2); } .next-button:hover { transform: translateX(20%); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); } .up-button:hover { transform: translateY(-20%) !important; box-shadow: 5px -5px 5px rgba(0, 0, 0, 0.2); } .down-button:hover { transform: translateY(20%); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); } </style> <!-- General headers, header buttons --> <style> / Special homepage header & scroll down button / #home-page header { background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/ef/Foam_bg.svg"); height: 100vh; background-position: top left 100%; background-repeat: no-repeat; background-size: cover; } #home-page .header-text { text-align: left; position: absolute; top: 50%; left: 35%; transform: translate(-50%, -50%); color: var(--white-color); } #home-page .header-text p { text-indent: 15%; font-size: 2vw; } #home-page .header-text h1 { margin-top: -3vw; font-size: 8vw; font-weight: 600; font-family: 'DM Serif Display'; } #home-page .header-text svg { width: 9vw; position: absolute; top: -10%; left: 100%; } @media (max-width: 550px) { #home-page .header { background-position: top left 50%; } #home-page .header-text p { font-size: 1em; } } / Homepage header scroll down button/ #home-page .header-button { bottom: 10%; right: 5%; width: 80px; height: 80px; } #home-page .header-button:hover { transform: translateY(20%) rotate(30deg); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); } #intro-text { width: 100%; font-family: 'DM Serif Display'; font-size: 1.5em; color: #686868; text-align: center; } #color-guide-tour, #scheme-silo-tour { width: 42%; } #quiz-tour { width: 100%; } .tour-button { width: 100%; border: none; outline: none; background: linear-gradient(var(--rotation-angle), #0099e566, #ff4c4c66); padding: 3% 5%; color: var(--white-color); font-family: 'DM Serif Display'; font-size: 1.3em; border-radius: 10px; transition: 0.5s; } .tour-button:hover { transform: translateY(20%) rotate(2deg); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); } @media (max-width: 600px) { #color-guide-tour, #scheme-silo-tour { width: 100%; } } </style> <!-- Home --> <style> #color-impression-stats { list-style: inside url("https://upload.wikimedia.org/wikipedia/commons/8/8a/Kuni_kuni.png"); margin-left: 10vw; } #color-categories-container { width: 100%; margin: 5% 0px; } #color-categories-container>div { width: 25%; } .color-categories-examples { width: 100%; height: 50px; border-radius: 10px; } #warm-example { background: linear-gradient(to bottom right, #FF9F7E, #FFE26C, #FFBC6C); } #cool-example { background: linear-gradient(to bottom right, #6CFF9D, #6CE4FF, #CEBAFF); } #neutral-example { background: linear-gradient(to bottom right, #909090, #EECBB0, #E7E7E7); } @media (max-width: 900px) { #warm-colors, #cool-colors { width: 42% !important; } #neutral-colors { width: 100% !important; } } @media (max-width: 550px) { #warm-colors, #cool-colors, #neutral-colors { width: 100% !important; } } .color-meaning-item { width: 100%; } .color-display { width: 150px; height: 150px; float: right; border-radius: 50%; margin: 5%; } / Alternating left/right color explanations / .color-meaning-item:nth-child(odd) { text-align: right; } .color-meaning-item:nth-child(odd) .color-display { float: left; } .color-meaning-item:nth-child(even) { text-align: left; } .color-meaning-item:nth-child(even) .color-display { float: right; } #red-color h1 { border-bottom: 5px double #FF8888; } #red-display { background-color: #FF8888; } #pink-color h1 { border-bottom: 5px double #F888FF; } #pink-display { background-color: #F888FF; } #orange-color h1 { border-bottom: 5px double #FFBA88; } #orange-display { background-color: #FFBA88; } #yellow-color h1 { border-bottom: 5px double #FFE988; } #yellow-display { background-color: #FFE988; } #green-color h1 { border-bottom: 5px double #AEEFB7; } #green-display { background-color: #AEEFB7; } #blue-color h1 { border-bottom: 5px double #7FC7FF; } #blue-display { background-color: #7FC7FF; } #purple-color h1 { border-bottom: 5px double #C0AEEF; } #purple-display { background-color: #C0AEEF; } #brown-color h1 { border-bottom: 5px double #B6A5A5; } #brown-display { background-color: #B6A5A5; } #white-color h1 { border-bottom: 5px double #FFFFFF; } #white-display { background-color: #FFFFFF; } #black-color h1 { border-bottom: 5px double #767676; } #black-display { background-color: #767676; } #multi-color h1 { border-bottom: 5px double #FFC397; } #multicolor-display { background: linear-gradient(#FF9494, #FFE594, #A1E7B7, #B0DBFF); } #tl-dr-list { list-style: inside url("https://upload.wikimedia.org/wikipedia/commons/8/8a/Kuni_kuni.png"); margin-left: 10vw; color: #686868; font-size: 1.3em; } .color-name-for-the-couch-potatoes { font-family: 'DM Serif Display'; } .tips-item { width: 100%; } .tip-number { font-size: 10vw; font-family: 'DM Serif Display'; float: left; margin: 0px; padding: 0px; margin-right: 5%; } #tip-1 .tip-number { color: var(--blue-color); } #tip-2 .tip-number { color: var(--green-color); } #tip-3 .tip-number { color: var(--red-color); } .first-sentence { color: #686868; font-family: 'DM Serif Display'; font-size: 2em; } </style> <!-- Tutorial --> <style> .warning { font-size: 1.1em; color: var(--red-color); font-family: 'DM Serif Display'; text-align: center; } .color-scheme-item { width: 42%; } @media (max-width: 950px) { .color-scheme-item { width: 100%; } } .color-scheme-name { font-family: 'Raleway'; } .color-scheme-display { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; margin: 0px; padding: 0px; width: 100%; height: 100px; margin-bottom: 5%; } .color-scheme-display-item { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; height: 100%; } .color-code { cursor: pointer; font-family: 'Raleway'; color: var(--white-color); font-weight: 600; } </style> <!-- Silo --> <style> #go-to-quiz { width: 100%; border: none; outline: none; background: linear-gradient(var(--rotation-angle), #0099e566, #ff4c4c66); margin-top: 5%; padding: 3% 5%; color: var(--white-color); font-family: 'DM Serif Display'; font-size: 2em; border-radius: 10px; transition: 0.5s; } #go-to-quiz:hover { transform: translateY(-10%); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); } #complete-quiz { width: 100%; border: none; outline: none; background: linear-gradient(var(--rotation-angle), #0099e566, #ff4c4c66); margin-top: 5%; padding: 3% 5%; color: var(--white-color); font-family: 'DM Serif Display'; font-size: 2em; border-radius: 10px; transition: 0.5s; } #complete-quiz:hover { transform: translateY(-10%); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); } .question-container { padding: 3%; transition: 0.5s; font-weight: 500; color: #686868; border-radius: 20px; border: 5px solid transparent; margin: 5% 0%; background: linear-gradient(var(--rotation-angle), #0099e533, #ff4c4c33); } .question { font-weight: 600; font-size: 1.2em; margin-bottom: 3%; font-family: 'DM Serif Display'; } .answer { line-height: 1.5em; font-weight: 600; font-family: 'Raleway'; } .answer label { display: block; } .correct-answer { border: 5px solid var(--green-color); background: #34bf4933; } .incorrect-answer { border: 5px solid var(--red-color); background: #ff4c4c33; } #quiz { font-size: 1.5em; } #quiz-submit { width: 100%; border: none; outline: none; background: linear-gradient(30deg, #0099e566, #ff4c4c66); padding: 3% 5%; color: #f1f2f3; font-family: 'DM Serif Display'; font-size: 1.3em; border-radius: 10px; transition: 0.5s; } #quiz-submit:hover { transform: translateY(20%) rotate(2deg); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); } .answer { display: block; position: relative; padding-left: 38px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #quiz-results h1 { font-size: 7vw; text-align: center; color: var(--white-color); border-bottom: 5px double #00000022; background: linear-gradient(var(--rotation-angle), #ff4c4c66, #0099e566); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .answer-radio { position: absolute; opacity: 0; } .checkmark { position: absolute; top: 5px; left: 0; transition: 0.33s; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } .answer:hover input~.checkmark { background-color: #ffffff; } input:checked~.checkmark { background: linear-gradient(var(--rotation-angle), #0099e5aa, #ff4c4caa); } .checkmark:after { content: ""; position: absolute; display: none; top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; } input:checked~.checkmark:after { display: block; } #quiz-results { display: none; padding: 5% 3%; } #result-text { width: 100%; text-align: center; font-family: 'DM Serif Display'; font-size: 1.7em; color: #686868; } #number-correct { font-size: 3em; font-weight: 600; color: var(--green-color); } #total-questions { font-size: 3em; font-weight: 600; color: var(--blue-color); } #result-feedback { font-size: 0.5em; } .quiz-answer-item { padding: 3%; transition: 0.5s; font-weight: 500; color: #686868; border-radius: 20px; border: 5px solid transparent; margin: 5% 0%; background: linear-gradient(var(--rotation-angle), #0099e533, #ff4c4c33); font-size: 1.1em; font-family: 'DM Serif Display'; } #score-bar { margin: auto; width: 250px; user-select: none; height: 250px; } #score-bar .progressbar-text { font-size: 2em; } .the-right-answer { color: var(--green-color); font-size: 1.3em; font-family: 'DM Serif Display'; font-weight: 600; } </style> <!-- Quiz --> <style> footer { margin: 0px; padding: 0px; margin-top: 10%; box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.3); } .footer-container { background: linear-gradient(to bottom right, #0099e5aa, #ff4c4caa), rgba(0, 0, 0, 0.1); background-attachment: fixed; color: var(--white-color); } .footer-about { width: 40%; color: var(--white-color); font-family: 'DM Serif Display'; font-size: 1em; } .footer-icon-container { user-select: none; } .footer-nav { width: 16%; } .footer-nav-head { font-family: 'Raleway'; font-weight: 600; color: var(--white-color); } .footer-nav ul li { margin-left: -35%; list-style-type: none; } .footer-links { font-family: 'DM Serif Display'; color: var(--white-color); font-size: 0.9em; transition: 0.5s; text-decoration: none; } .footer-links:hover { color: #FFFFFF; padding-left: 10px; } .footer-private-info { width: 20%; color: var(--white-color); } .footer-footer { margin-top: 20px; width: 100%; border-top: 3px solid var(--white-color); border-radius: 0px; font-size: 0.7em; color: var(--white-color); font-family: 'DM Serif Display'; text-align: center; } .footer-button { background-color: transparent; float: right; outline: none; border: none; } .footer-button i { color: var(--white-color); } @media (max-width: 840px) { .footer-about { width: 30%; } .footer-nav { width: 16%; } .footer-private-info { width: 30%; } } @media (max-width: 570px) { .footer-about { width: 100%; } .footer-nav { width: 30%; } .footer-private-info { width: 46%; } .footer-icon-container { width: 100%; } .footer-icons { text-align: center; } } </style> <!-- Footer --> </head> <body> <svg display="none"> <defs> <path fill="var(--white-color)" stroke="var(--white-color)" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" transform="translate(1)" id="right-arrow" /> <use href="#right-arrow" transform="translate(16) rotate(90)" id="down-arrow" /> <use href="#down-arrow" transform="translate(16) rotate(90)" id="left-arrow" /> <use href="#left-arrow" transform="translate(16) rotate(90)" id="up-arrow" /> <path fill="currentColor" id="paintbrush" d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04z" /> </defs> </svg> <!-- SVG definitions --> <section class='page' id="home-page"> <header> <div class="header-text"> <p>A noob's guide to</p> <h1>Color Schemes</h1> <svg viewBox="0 0 16 16"> <use href="#paintbrush" /> </svg> </div> <button class='header-button to-and-fro-buttons' onclick='slightScroll()'> <svg viewBox="0 0 16 16"> <use href="#down-arrow" /> </svg> </button> </header> <br> <div class='page-content'> <div class='flex-container'> <div class='flex-item js-scroll fade-in-bottom' id='intro-text'> Tired of spending days for the perfect match of colors for your website? Hopefully, this tutorial can help you out! </div> <div class='flex-item js-scroll slide-left' id='color-guide-tour'> <h1>Color Guide</h1> <div class='custom-hr'></div> Need assistance with choosing just the right colors? Have you gone mad before for not getting the color of that CTA button <em>just</em> right? Well, off you click the button below! <br><br><br> <button class='tour-button' onclick='showPage("tutorial");' id='guide-button'>Visit the Guide</button> </div> <div class='flex-item js-scroll slide-right' id='scheme-silo-tour'> <h1>Scheme Silo</h1> <div class='custom-hr'></div> Too lazy to read a 1000-page essay on choosing color schemes? Want to imitate the colors used by big brands and companies? The button's waiting for you! <br><br><br> <button class='tour-button' onclick='showPage("silo");' id='repo-button'>Explore the Silo</button> </div> <div class='flex-item js-scroll fade-in-bottom' id='quiz-tour'> <h1>Test Yourself</h1> <div class='custom-hr'></div> Think you know much already? Have already gone through all sections of the webpage and want to know how much you've gotten into your cranium? Here you go! <br><br><br> <button class='tour-button' onclick='showPage("quiz-intro");' id='quiz-button'>Think you got it?</button> </div> </div> </div> </section> <!-- Home --> <section class='page' id="tutorial-page"> <header> <h5>Section 1:</h5> <h1>The Tutorial</h1> <button class='to-and-fro-buttons prev-button' onclick='showPage("home");'> <svg viewBox="0 0 16 16"> <use href="#left-arrow" /> </svg> </button> <button class='to-and-fro-buttons next-button' onclick='showPage("silo");'> <svg viewBox="0 0 16 16"> <use href="#right-arrow" /> </svg> </button> </header> <div class='page-content'> <p> Well, if you've reached here, chances are that you've struggled to pick a definite color scheme before. Let me start with the ultimate gesture of sympathy: you're not alone lol, I've been in that situation many times, just months ago. </p> <p><em> (Actually, I was bothered to such an extent that I once used a red-green-blue color scheme in one of my projects and well you can sure guess how eww it turned out). </em></p> <p> Anyway, this webpage is here to help, and it is more of a tips-for-better-colors thing than a 10-hour free-for-all course on colors. So, uh, let me start off the ted talk by stressing on the importance of color schemes. </p> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/RGB_color_wheel_72.svg/1200px-RGB_color_wheel_72.svg.png' class='page-images js-scroll fade-in-bottom'> <p> Making a website starts with understanding the theory behind color schemes. Color schemes begin by examining the color wheel, where we find three color groupings: primary colors, secondary colors, and tertiary colors. Using this wheel, the color theory then stratifies the colors. Primary colors are red, yellow, and blue; they cannot be created by mixing other color combinations. However, the primary colors themselves can be mixed to form new colors, which are called secondary colors (hence the name). Tertiary colors are created from mixing secondary colors. </p> <br> <p> The importance of color design stems from the significance of color to the human mind. Color creates ideas, expresses messages, sparks interest, and generates certain emotions. Some colors hold a universal significance- for example, it is commonly understood that red is a color for warning and green is means go. But, put together, most people would associate the color combination of red and green as Christmas. </p> <p> Bright colors tend to set a happy and positive mood, whereas dark colors tend to project the opposite. Within the psychology of colors, warm colors show excitement, optimism, and creativity; cool colors symbolize peace, calmness, and harmony. <em>Well, we'll get back to that later.</em> </p> <p>Now, starting with the first step to pick an ideal color scheme for your website.</p> </div> <div class='page-subheader' id='step-1'> <div class='page-subheader-text'> <h5>Part 1:</h5> <h1>Pick a Brand Theme</h1> <button class='to-and-fro-buttons up-button' onclick='backToTop()'> <svg viewBox="0 0 16 16"> <use href="#up-arrow" /> </svg> </button> <button class='to-and-fro-buttons down-button' onclick='document.location = "#step-2"'> <svg viewBox="0 0 16 16"> <use href="#down-arrow" /> </svg> </button> </div> </div> <div class='page-content'> <p><em>No, this isn't for you, mr. whatever-i-make-why-do-you-care. Feel free to get to the next section.</em></p> <p> A brand’s logo and visual identity will comprise a number of visual cues, such as shapes, symbols, numbers, and words. But the number one visual component that people remember most is color.<br> Get this right: </p> <ul class='js-scroll slide-right' id='color-impression-stats'> <li>Color influences 85% of shoppers' purchase decisions.</li> <li>About 62‐90% of the product assessment is based on colors alone.</li> <li>Colors increase brand awareness by 80%.</li> </ul> <p> When it comes to branding, the power of color is both emotional and practical. On an emotional level, color can affect how consumers feel when they look at a brand, while on a practical level it can help a brand stand out in the crowd. </p> <p> Whether you're a designer or a business owner, it's helpful to know color meanings and symbolism so you can make informed decisions. If you choose a color meaning 'tranquility' (for example, blue-purple) for your extreme sports brand, you might be sending the wrong message. </p> <p>So let’s take a look at how to choose the right color for your brand.</p> </div> <div class='page-subheader' id='step-2'> <div class='page-subheader-text'> <h5>Part 2:</h5> <h1>Color Psychology</h1> <button class='to-and-fro-buttons up-button' onclick='document.location = "#step-1"'> <svg viewBox="0 0 16 16"> <use href="#up-arrow" /> </svg> </button> <button class='to-and-fro-buttons down-button' onclick='document.location = "#step-3"'> <svg viewBox="0 0 16 16"> <use href="#down-arrow" /> </svg> </button> </div> </div> <div class='page-content'> <p> Before we get into specific colors, let’s look at the three categories that define color: Warm, cool, and neutral, with each group conveying a different feeling. </p> <div class='flex-container' id='color-categories-container'> <div class='flex-item js-scroll slide-left' id='warm-colors'> <div class='color-categories-examples' id='warm-example'></div> <h1>Warm Colors</h1> <div class='custom-hr'></div> <p> This includes red, yellow and orange, and variations like pink. These colors evoke warmth due to their brightness and link to the sun. In general, they convey optimism, enthusiasm, and passion. </p> </div> <div class='flex-item js-scroll fade-in-bottom' id='cool-colors'> <div class='color-categories-examples' id='cool-example'></div> <h1>Cool Colors</h1> <div class='custom-hr'></div> <p> These include green, blue, purple, and their variations like violet. These colors are considered cool as they are colors commonly found in nature and are known for their calming effect. These colors are calming, relaxing, and subdued. </p> </div> <div class='flex-item js-scroll slide-right' id='neutral-colors'> <div class='color-categories-examples' id='neutral-example'></div> <h1>Neutral Colors</h1> <div class='custom-hr'></div> <p> These include brown, black and white, as well as variations like gray. They’re often paired with warm or cool colors but are sophisticated on their own. They can be powerful and pure and are sometimes referred to as the earth tones. </p> </div> </div> <p>Now you understand the color categories, let’s get into specific colors.</p> <div class='flex-container' id='color-meanings-container'> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='red-color'> <div class='color-display' id='red-display'></div> <h1>Red</h1> <p> Red is considered to be a color of intense emotions, including anger, sacrifice, danger, heat, and passion. Used in branding, it can deliver an impactful punch with the ability to increase desire. Not surprising when it’s the color of fire and blood, as well as being associated with love. It is a bold, energetic, and lively color that can symbolize strength, confidence, and power. </p> <p> Tips for use: In many Asian countries such as India and China, red is regarded as the color of happiness, wellbeing, and good fortune, so always consider the context. </p> </div> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='pink-color'> <div class='color-display' id='pink-display'></div> <h1>Pink</h1> <p> Pink is regarded widely in the western world as the color of femininity. Because of this, it is used to bring awareness to breast cancer and women’s products. However, like all colors, pink is quite diverse and the level of intensity can impact its meaning. Pale pink is often aimed at little girls, dusty pink is more sentimental or romantic, while hot pink indicates youthfulness. </p> <p> Tips for use: Identify the mood and feeling you want to muster, and choose your pink accordingly. Don’t shy away from using pink for genderless brands (like T-Mobile does) as you may be targeting personality or Gen Y rather than gender. </p> </div> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='orange-color'> <div class='color-display' id='orange-display'></div> <h1>Orange</h1> <p> Blending the warmth of red and the optimism of yellow, orange communicates activity and energy. And of course, it’s hard not to associate it with its namesake, immediately making it feel fresh and healthy. </p> <p> Orange has different tones and shades, each with different meanings and effects. For example, light pastel peach tones are seen as sweet, conversational, and affable, whereas more intense, vibrant oranges are seen as representative of vitality, energy, and encouragement. </p> <p> Tips for use: Because orange is associated with fun and vibrancy is well suited to youthful, energetic brands and best avoided for luxury, traditional or serious brands. </p> </div> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='yellow-color'> <div class='color-display' id='yellow-display'></div> <h1>Yellow</h1> <p> Being the color of sunshine, yellow puts a smile on the dial. It is the most visible color from a distance (which is why it’s used for street signs) and communicates cheerfulness, friendliness, joy, and energy. It can also be associated with mental clarity and intellect. However, yellow is also a cautionary color used in life vests, police cordoning tape, and hazardous areas. </p> <p> Tips for use: Some shades of yellow can look cheap—although this may suit your brand image. So yellow is a great example of when to research consumer reaction to color appropriateness and make sure it is the right color for your product. </p> </div> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='green-color'> <div class='color-display' id='green-display'></div> <h1>Green</h1> <p> Named after the Anglo-Saxon word grene meaning “grass” and “grow” but today it has two common associations that are paradoxical. One being nature and the environment, and the other being finance and wealth. When it comes to nature, green represents plant life and growth and is consequently used to convey being ‘green’ in the environmental, sustainable, organic, natural sense of the word. And of course, green is, as the saying goes, ‘the color of money’ (US money, that is) and therefore associated with wealth and stability. </p> <p> Tips for use: Pick your shade of green carefully as brighter, lighter greens indicate growth, vitality, and renewal; while darker, richer greens represent prestige, wealth, and abundance. </p> </div> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='blue-color'> <div class='color-display' id='blue-display'></div> <h1>Blue</h1> <p> Blue is a color that has long been associated with royalty, art, military, business, and nature, making it a color with a lot of applications. It is a favorite color for companies that wish to convey reliability, trustworthiness, and communication (think Facebook, Twitter, and Samsung) and for expressing the authority of organizations like the police. It is also appreciated for its calming and harmonious qualities being associated with the sea and sky. On the flip side, it's also used to express sadness or depression, or as we say, feeling ‘blue’. </p> <p> Tips for use: Blue runs the gamut from corporate and dependable, to calming and tranquil, to feeling down in the dumps. So choose your shade wisely. </p> </div> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='purple-color'> <div class='color-display' id='purple-display'></div> <h1>Purple</h1> <p> Purple is considered a low arousal color. It is traditionally associated with royalty, majesty, or nobility as well as having a spiritual or mysterious quality. Darker shades often represent luxury or opulence while lighter lavender shades are quite feminine, sentimental, and even nostalgic. </p> <p> Tips for use: Purple is best used for targeting a female audience as research suggests women list purple as a top-tier color while it doesn’t even rank for men. Overall, purple is not a common color for branding and in fact, Cadbury is the only purple brand in the Forbes list of the 100 most valuable brands from 2014. </p> </div> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='brown-color'> <div class='color-display' id='brown-display'></div> <h1>Brown</h1> <p> Brown gets a lot of use in this era of organic and natural food, beauty, and products. Nature-inspired it represents a feeling of wholesomeness, orderliness, and being grounded. It is simple, strong, durable, and honest and may express that your brand has better things to care about than superfluous color when really, there are so many beautiful shades of brown to elevate any product. </p> <p> Tips: Use caution with brown as it can remind people of dirt. On the other hand, it’s also great to cover up dirt if the product you’re branding has anything to do with soil, dirt, or mud. </p> </div> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='white-color'> <div class='color-display' id='white-display'></div> <h1>White</h1> <p> White represents simplicity, purity, innocence, and perfection. And if you had to identify one brand that has used white to convey its brand message to perfection it would have to be Apple – white represents the simplicity of the products in both their form and function. White also comes with a starkness or sterility about it, which is often used by designers to convey a minimalist aesthetic and clean, modern quality. </p> <p> Tips for use: It’s difficult to inject personality into your brand when using white, so make sure your brand is about simplicity, purity, and transparency. </p> </div> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='black-color'> <div class='color-display' id='black-display'></div> <h1>Black</h1> <p> Black is to be taken seriously. It represents power, luxury, sophistication, and exclusivity on one hand; and death, evil, and mystery on the other. From formality to mourning to power, black is bold, classic, and not to be fooled with. While color is more likely to increase brand recognition there’s no reason black — when used appropriately — can’t be just as distinctive, memorable, and communicative of a brand’s attributes. </p> <p> Tips for use: Contrast a bright color against black; use gold foil for a touch of luxe, or combine it with white for a bold and simple statement. Think about texture and how matte or glossy black might change the message of your brand. </p> </div> <div class='flex-item color-meaning-item js-scroll fade-in-bottom' id='multi-color'> <div class='color-display' id='multicolor-display'></div> <h1>Multicolor</h1> <p> Of course, what about mixing multiple colors in one logo, such as Google, the Olympics, and NBC (well, NBC has turned blue now)? Diverse color generally indicates variety – be it representative of people, countries, or offerings. </p> <p> Tips for use: Pay attention to how your choice of colors work together both printed and digitally as the end result may vary with different screens and different printers. </p> </div> </div> <p> Uhh this webpage is intended to only help you choose a color scheme (because I have seen yellow paired with black for too long ahhh i just can't take it anymore) but anyway, the next step is here to help you properly implement it: you don't wanna choose five colors and end up not using four of them. </p> </div> <div class='page-subheader' id='step-3'> <div class='page-subheader-text'> <h5>Part 3:</h5> <h1>Use It Properly</h1> <button class='to-and-fro-buttons up-button' onclick='document.location = "#step-2"'> <svg viewBox="0 0 16 16"> <use href="#up-arrow" /> </svg> </button> </div> </div> <div class='page-content'> <p> Well, for starters, don't choose like 10 colors for it. Just <em>don't</em>. Choose 2 or 3 colors, and 4 at the max. <em>(Well, if you think you're a pro at using ten colors in a webpage, give it a second thought.)</em> </p> <p> In case you were just lazy and completely skipped the last step, I won't blame you: you got company in that situation. But here's what is <em>absolutely</em> necessary for you to know: </p> <br> <ul id='tl-dr-list' class='js-scroll slide-left'> <li> <span class='color-name-for-the-couch-potatoes'>Red — </span> danger, passion, excitement, energy </li> <li> <span class='color-name-for-the-couch-potatoes'>Pink — </span> feminine, sentimental, romantic, exciting </li> <li> <span class='color-name-for-the-couch-potatoes'>Orange — </span> fresh, youthful, creative, adventurous </li> <li> <span class='color-name-for-the-couch-potatoes'>Yellow — </span> optimistic, cheerful, playful, happy </li> <li> <span class='color-name-for-the-couch-potatoes'>Green — </span> natural, vitality, prestige, wealth </li> <li> <span class='color-name-for-the-couch-potatoes'>Blue — </span> communicative, trustworthy, calming, depressed </li> <li> <span class='color-name-for-the-couch-potatoes'>Purple — </span> royalty, majesty, spiritual, mysterious </li> <li> <span class='color-name-for-the-couch-potatoes'>Brown — </span> organic, wholesome, simple, honest </li> <li> <span class='color-name-for-the-couch-potatoes'>White — </span> purity, simplicity, innocence, minimalism </li> <li> <span class='color-name-for-the-couch-potatoes'>Black — </span> sophisticated, formal, luxurious, sorrowful </li> <li> <span class='color-name-for-the-couch-potatoes'>Multicolor — </span> united, open, diversity </li> </ul> <div class='flex-container' id='tips-container'> <div class='flex-item tips-item js-scroll slide-left' id='tip-1'> <span class='tip-number'>#1</span> <p> <span class='first-sentence'>Start with greyscale. </span>By drafting your designs in greyscale first, you’re ensuring a focus on usability and clear navigation more than getting the color of that CTA button just right. Force yourself to focus on laying out elements and optimizing white space. A clean hierarchy of type and elements will go a long way towards generating the best user experience. </p> </div> <div class='flex-item tips-item js-scroll slide-left' id='tip-2'> <span class='tip-number'>#2</span> <p> <span class='first-sentence'>Use the 60-30-10 rule. </span>Use your colors in a 60% + 30% + 10% proportion. This old interior design rule is meant to give balance to your colors. The formula works because it allows the eye to move comfortably from one focal point to the next. It’s also incredibly simple to use: 60% is your dominant hue, 30% is your secondary color, and 10% is for an accent color. Even if your palette has more than three colors (but please, no more than five), keeping things in balance will be cleaner to the eye and more comfortable for your users’ brains. </p> </div> <div class='flex-item tips-item js-scroll slide-left' id='tip-3'> <span class='tip-number'>#3</span> <p> <span class='first-sentence'>The best colors come from nature. </span>They will always look natural. The best thing about looking to the environment for design solutions is that the palette is always changing. Sunrises, sunsets, beach scenes… these all have unique palettes that can be adapted to suit your needs. Use an app like Adobe Capture to isolate a color palette from a photo for use in other applications. </p> </div> </div> <br> <p> To conclude, a color scheme is a powerful tool in building a successful website. Off to a new webpage! <em>(Or, if you're still not satisfied, try the Scheme Silo.)</em> </p> </div> </section> <!-- Tutorial --> <section class='page' id="silo-page"> <header> <h5>Section 2:</h5> <h1>Scheme Silo</h1> <button class='to-and-fro-buttons prev-button' onclick='showPage("tutorial");'> <svg viewBox="0 0 16 16"> <use href="#left-arrow" /> </svg> </button> <button class='to-and-fro-buttons next-button' onclick='showPage("quiz-intro");'> <svg viewBox="0 0 16 16"> <use href="#right-arrow" /> </svg> </button> </header> <div class='page-content'> <div class='warning'>WARNING: This part of the webpage is for the lazy and the lost, and those who want to "just see what's going on".</div> <p> So, you've finally made it out of the dungeon named "The Tutorial" to this Silo. Just scroll down to find many amazing and disgusting color schemes, and who knows, you may find one you'll want to use next! </p> </div> <div class='page-subheader' id='silo-1'> <div class='page-subheader-text'> <h5>Silo 1:</h5> <h1>User-made Palettes</h1> <button class='to-and-fro-buttons up-button' onclick='backToTop()'> <svg viewBox="0 0 16 16"> <use href="#up-arrow" /> </svg> </button> <button class='to-and-fro-buttons down-button' onclick='document.location = "#silo-2"'> <svg viewBox="0 0 16 16"> <use href="#down-arrow" /> </svg> </button> </div> </div> <div class='page-content'> <div class='flex-container'> <div class='flex-item color-scheme-item js-scroll fade-in'> <h1 class='color-scheme-name'>Fun and Professional</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#4ABDAC</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#FC4A1A</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#F7B733</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#DFDCE3</span> </div> </div> <p> This clean, vibrant palette perfectly combines warm accent colors with a clean blue background to create a crisp and professional, but very welcoming palette. Try using colors that have a high contrast against each other to achieve the same clean-yet-striking effect. </p> </div> <div class='flex-item color-scheme-item js-scroll fade-in'> <h1 class='color-scheme-name'>Neon tones</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#0E0B16</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#A239CA</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#4717F6</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#E7DFDD</span> </div> </div> <p> This color scheme takes a bold, high-contrast approach by combining a strong dark background with striking neon accent colors. By contrasting black against purples, blues, and pinks, you can create an equally striking effect. </p> </div> <div class='flex-item color-scheme-item js-scroll fade-in'> <h1 class='color-scheme-name'>Warm and bold</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#000000</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#062F4F</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#813772</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#B82601</span> </div> </div> <p> Fancy mixing warm and cooler colors to create a unique vibe? Take a design cue from here by pairing vibrant reds and blues with darker indigos and purples. It creates a dreamy and bold effect. </p> </div> <div class='flex-item color-scheme-item js-scroll fade-in'> <h1 class='color-scheme-name'>Clean and highlighted</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#CAEBF2</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#A9A9A9</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#FF3B3F</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#EFEFEF</span> </div> </div> <p> This color palette is clean and professional, thanks to the soft blues, greys, and whites. However, this palette also draws attention and highlights focal elements by throwing a vibrant feature color into the mix. Break up your lighter, gentler colors with a punchier tone for a nice contrast. </p> </div> <div class='flex-item color-scheme-item js-scroll fade-in'> <h1 class='color-scheme-name'>Warm tones</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#D7CEC7</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#565656</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#76323F</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#C09F80</span> </div> </div> <p> This palette keeps things clean and minimal, but does it with a warmer touch. By using warm, very light brown tones as the neutral background color and offsetting them with the warm tones in the imagery and type, this palette keeps things inviting and clean. </p> </div> <div class='flex-item color-scheme-item js-scroll fade-in'> <h1 class='color-scheme-name'>Tints and tones</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#94618E</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#49274A</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#76323F</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#C09F80</span> </div> </div> <p> A great way to add dimension to your palette while keeping things minimal is to use varying tints of one color. This clean, elegant color scheme does just that by using slightly different tints of a neutral peach color that complement the focal purple color. </p> </div> <div class='flex-item color-scheme-item js-scroll fade-in'> <h1 class='color-scheme-name'>Splash of color</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#4484CE</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#D9D9D9</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#F9CF00</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#F19F40</span> </div> </div> <p> This palette injects bright bursts of color into the mix to create a playful but sleek effect. The contrast of blues, oranges, and yellows against the neutral grey makes for a professional but vibrant effect. </p> </div> <div class='flex-item color-scheme-item js-scroll fade-in'> <h1 class='color-scheme-name'>Bright Accent Colors</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#242582</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#553D67</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#F64C72</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#99738E</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#2F2FA2</span> </div> </div> <p> Shades of blue and violet are combined with some eye-popping red and orange accents in this combination. Notice how the contrast between the vivid blue background and red-orange accents has the potential to immediately draw the eyes to just the right places. </p> </div> </div> </div> <div class='page-subheader' id='silo-2'> <div class='page-subheader-text'> <h5>Silo 2:</h5> <h1>Brand Palettes</h1> <button class='to-and-fro-buttons up-button' onclick='document.location = "#silo-1"'> <svg viewBox="0 0 16 16"> <use href="#up-arrow" /> </svg> </button> </div> </div> <div class='page-content'> <p> At the brand new Brand Silo, you can take a look at the color schemes used by some popular companies around. If you use any of this, you'll have your task cut short — cause companies usually spend over a week of brainstorming for the right color palette; and you can just steal it from them. As easy as clicking on the color displayed. </p> <div class='flex-container'> <div class='flex-item color-scheme-item js-scroll slide-left'> <h1 class='color-scheme-name'>FedEx</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#250C77</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#ED642B</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#FFFFFF</span> </div> </div> <p> FedEx is an iconic logo, all the way from the hidden arrow to its bright and in-your-face orange, purple and white color scheme. </p> <p> Not many people would put orange and purple together in a design, but the combination of a bright orange and a deep purple works perfectly for this recognizable brand. </p> </div> <div class='flex-item color-scheme-item js-scroll slide-right'> <h1 class='color-scheme-name'>Dunkin'</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#FF6E0C</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#F20C90</span> </div> </div> <p> You can’t go wrong with a brightly colored logo like Dunkin’ when you’re trying to grab your audience’s attention. This bright orange and pink color scheme is sure to wake you up in the mornings, just like their coffee and donuts. </p> </div> <div class='flex-item color-scheme-item js-scroll fade-in-bottom'> <h1 class='color-scheme-name'>Lego</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#D01012</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#F6EC36</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#FFFFFF</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#000000</span> </div> </div> <p>Classic Lego bricks. Nothing much left to say.</p> </div> <div class='flex-item color-scheme-item js-scroll slide-left'> <h1 class='color-scheme-name'>Google</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#4285F4</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#DB4437</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#F4B400</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#0F9D58</span> </div> </div> <p> The colors chosen for the iconic Google logo had a meaning behind them, because they were the primary colors. Google intentionally used a secondary color on the L to show that Google does not always follow the rules. </p> </div> <div class='flex-item color-scheme-item js-scroll slide-right'> <h1 class='color-scheme-name'>Microsoft</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#00A4EF</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#F25022</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#FFB900</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#7FBA00</span> </div> </div> <p>Google's rival? Or vice-versa? You decide.</p> </div> <div class='flex-item color-scheme-item js-scroll slide-left'> <h1 class='color-scheme-name'>Pampers</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#00A9A4</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#F9B117</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#F6911B</span> </div> </div> <p> Pampers is another great example of a logo mixing together warm and cool colors. This aqua and yellow-orange pairing is a great way to grab your audience’s attention. </p> </div> <div class='flex-item color-scheme-item js-scroll slide-right'> <h1 class='color-scheme-name'>Harley-Davidson</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#FF6600</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#000000</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#FFFFFF</span> </div> </div> <p> Harley-Davidson is another well-known brand with a recognizable logo shape and color scheme. It’s so recognizable, in fact, that many loyal customers and fans have even gotten tattoos of the logo. </p> </div> <div class='flex-item color-scheme-item js-scroll slide-left'> <h1 class='color-scheme-name'>Monday.com</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#FF3D57</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#FFCA00</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#00D748</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#434343</span> </div> </div> <p> Monday.com is a project management software, and its traffic light logo color scheme is very relevant to the idea of moving things along. </p> <p> Figure out if you can create a color scheme for your brand that abstractly relates to your website and what it does in a similar way. </p> </div> <div class='flex-item color-scheme-item js-scroll slide-right'> <h1 class='color-scheme-name'>Clarity Money</h1> <div class='custom-hr'></div> <div class='color-scheme-display'> <div class='color-scheme-display-item'> <span class='color-code'>#1DCDFE</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#21D0B2</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#34F5C5</span> </div> <div class='color-scheme-display-item'> <span class='color-code'>#2F455C</span> </div> </div> <p> Remember what I said about financial organizations? They tend to lean towards blue and green color palettes in their branding, and money management app Clarity Money is no different. </p> <p> The main thing to notice here is the brightness of the greens and blues used. Clarity Money has taken a trustworthy color palette but made it fun. </p> </div> </div> </div> </section> <!-- Scheme Silo --> <section class='page' id="quiz-intro-page"> <header> <h5>Section 3:</h5> <h1>The Quiz</h1> <button class='to-and-fro-buttons prev-button' onclick='showPage("silo");'> <svg viewBox="0 0 16 16"> <use href="#left-arrow" /> </svg> </button> </header> <div class='page-content'> <p>This quiz will test you in how much you've learnt over the course of reading this webpage. So, before attempting this, make sure to go through all the sections thoroughly, as the back button won't be there in the quiz (haha, gotchu guys).</p> <br> <button id='go-to-quiz' onclick='showPage("quiz")'>Go to Quiz</button> </div> </section> <!-- Quiz Intro --> <section class='page' id="quiz-page"> <header> <h1>All the Best!</h1> </header> <div class='page-content'> <div id="quiz"></div> <template id="question-template"> <div class="flex-container question-container"> <div class="question">question text</div> <br> <div class="answers-container"></div> </div> </template> <template id="answer-template"> <label class="answer"> <span class="answer-text">a: Answer A</span> <input class="answer-radio" type="radio" name="answer0" value="a"> <span class="checkmark"></span> </label> </template> <button id="quiz-submit">Submit Quiz</button> <br> <div id="quiz-results"> <h1 class='js-scroll fade-in-bottom'>Results</h1> <div id='score-bar'></div> <br><br> <div class='js-scroll fade-in' id="result-text"> You scored <span class='js-scroll slide-left' id="number-correct"></span> out of <span id="total-questions" class='js-scroll slide-right'></span>! <br> <div id='result-feedback'></div> </div> <br><br><br> <div class='flex-container' id='quiz-answers'> <div class='flex-item quiz-answer-item js-scroll slide-left'> Primary colors <span class='the-right-answer js-scroll fade-in-bottom'>cannot be created by mixing other colors</span>. </div> <div class='flex-item quiz-answer-item js-scroll slide-left'> Warm colors generate a feeling of <span class='the-right-answer js-scroll fade-in-bottom'>excitement and creativity</span>. </div> <div class='flex-item quiz-answer-item js-scroll slide-left'> Luxury brands would use colors more associated with royalty and luxury, like <span class='the-right-answer js-scroll fade-in-bottom'>black and purple</span>. </div> <div class='flex-item quiz-answer-item js-scroll slide-left'> The <span class='the-right-answer js-scroll fade-in-bottom'>60 - 30 - 10</span> ratio should be kept in mind while using color schemes. </div> <div class='flex-item quiz-answer-item js-scroll slide-left'> Organic brands are likely to use colors linked to nature, with variants of <span class='the-right-answer js-scroll fade-in-bottom'>green and brown</span>. </div> <div class='flex-item quiz-answer-item js-scroll slide-left'> Financial organisations <span class='the-right-answer'>tend to use blue and green more often</span>. </div> <div class='flex-item quiz-answer-item js-scroll slide-left'> <span class='the-right-answer js-scroll fade-in-bottom'>Green and blue</span> and variants of it make the cool colors. </div> <div class='flex-item quiz-answer-item js-scroll slide-left'> <span class='the-right-answer js-scroll fade-in-bottom'>Neutral colors</span> are more often known as the earth tones. </div> <div class='flex-item quiz-answer-item js-scroll slide-left'> Hot pink carries a message of <span class='the-right-answer js-scroll fade-in-bottom'>youthfulness</span> with it. </div> <div class='flex-item quiz-answer-item js-scroll slide-left'> Vibrant oranges denote <span class='the-right-answer js-scroll fade-in-bottom'>vitality and encouragement</span>. </div> </div> <br><br> <p style="text-align: center;">Let me know down in the comments about how much you scored!</p> <br> <button id="complete-quiz" onclick="showPage('home')">Return to Home</button> </div> </div> </section> <!-- Quiz --> <footer id="footer"> <div class='flex-container footer-container'> <div class='flex-item footer-about'> This program was made out of frustration because one of the creators was allegedly "tired of looking at webpages that pierce her eyes". She wishes that people make good use of it. </div> <div class='flex-item footer-nav'> <span class='footer-nav-head'>Links</span> <ul> <li><a href='javascript:showPage("home")' class='footer-links'>Home</a></li> <li><a href='javascript:showPage("tutorial")' class='footer-links'>Tutorial</a></li> <li><a href='javascript:showPage("silo")' class='footer-links'>Silo</a></li> <li><a href='javascript:showPage("quiz-intro")' class='footer-links'>Quiz</a></li> </ul> </div> <div class='flex-item footer-private-info'> <i class="fa fa-map-marker fa-2x footer-icons"></i> Colorhattan, USC <br> <i class="fa fa-phone fa-2x footer-icons"></i> rgb(255-255-255) <br> <i class="fa fa-envelope fa-2x footer-icons"></i> colors@fake.com </div> <div class='flex-item footer-footer'> © PT × Voldemort × Lucy van Pelt, 2021. <br> All rights reserved under no definite license, but please ask before stealing code. <br> <button class='go-to-top-footer-button footer-button' onclick='backToTop();'> <i class="fa fa-chevron-circle-up fa-2x"></i> </button> </div> </div> </footer> <!-- Footer --> <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/0.8.1/progressbar.min.js" integrity="sha512-G5qxfv+acMMyg4vfELDAdO6eF6E9kS7EMYxtsdI1V0pXBG4arqRJgeVAdJnRJKzFlO30tli0IUJH6mdde3m9Ng==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> <!-- Progress bar --> <script type> function slightScroll() { window.scrollTo({ top: 300, behavior: "smooth" }); }; function backToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }; </script> <!-- Scrolling --> <script type> (function() { const scenes = document.getElementsByClassName('page'); window.showPage = function(name) { for (let i = 0; i < scenes.length; i++) { scenes[i].style.display = 'none'; } document.getElementById(name + "-page").style.display = 'block'; backToTop(); }; showPage("home"); })(); </script> <!-- Pages --> <script type> (function() { const colorCodes = document.getElementsByClassName("color-code"); for (let i = 0; i < colorCodes.length; ++i) { const codeEl = colorCodes[i]; const colorContainer = codeEl.parentNode; colorContainer.style.backgroundColor = codeEl.textContent; colorContainer.style.width = 100 / colorContainer.parentNode.children.length + "%"; // copy code on click codeEl.addEventListener("click", function() { const code = this.textContent; if (code === "Copied!") return; if (document.body.createTextRange) { const range = document.body.createTextRange(); range.moveToElementText(codeEl); range.select(); document.execCommand("Copy"); } else if (window.getSelection) { const selection = window.getSelection(); const range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); document.execCommand("Copy"); } this.textContent = 'Copied!'; setTimeout(() => this.textContent = code, 1500); }); } })(); </script> <!-- Silo --> <script type> (function() { // remove footer on quiz page document.getElementById("go-to-quiz").addEventListener("click", () => { document.getElementById("footer").style.display = "none"; }); document.getElementById("complete-quiz").addEventListener("click", () => { document.getElementById("footer").style.display = "block"; }); const quizContainer = document.getElementById("quiz"); const questions = [ { question: "Which property defines the primary colors?", answers: { a: "They are the most abundant colors", b: "They cannot be created by mixing other colors", c: "They studied in primary school", d: "None of the above" }, correctAnswer: "b" }, { question: "What feelings and emotions do warm colors generate?", answers: { a: "Peace and calmness", b: "Excitement and creativity", c: "That Christmas vibe", d: "All of the above" }, correctAnswer: "b" }, { question: "What colors would you use for a luxury soap brand?", answers: { a: "Red, blue", b: "Green, yellow", c: "Purple, black", d: "I'll use whatever I want" }, correctAnswer: "c" }, { question: "What proportion should you keep in mind while using your colors?", answers: { a: "10% — 70% — 20%", b: "60% — 20% — 20%", c: "60% — 30% — 10%", d: "0% — 0% — 0%" }, correctAnswer: "c" }, { question: "What color are you likely to use for an organic brand?", answers: { a: "Blue, orange", b: "Green, brown", c: "Black, white", d: "Red, yellow" }, correctAnswer: "b" }, { question: "What is so characteristic about financial organisations?", answers: { a: "They tend to use high-risk colors like red and orange", b: "They lean more towards blue and green", c: "They go all random while picking colors", d: "IDRK, I don't have any clue" }, correctAnswer: "b" }, { question: "Which of the following can be included in the list of cool colors?", answers: { a: "Pink, red", b: "Green, blue", c: "Orange, mauve", d: "Black, white" }, correctAnswer: "b" }, { question: "Which class of colors are more commonly known as the earth tones?", answers: { a: "Warm colors", b: "Cool colors", c: "Neutral colors", d: "Every color on earth" }, correctAnswer: "c" }, { question: "It is widely thought of pink as the color of feminity; however, it does have some diversity. What does hot pink denote?", answers: { a: "Little kids", b: "Romance", c: "Youthfulness", d: "Energy" }, correctAnswer: "c" }, { question: "What are the vibrant orange colors indicative of?", answers: { a: "Warmth and optimism", b: "Energy and risk", c: "Calmness or depression", d: "Vitality and encouragement" }, correctAnswer: "d" } ]; const feedback = [ [ "Man, you gotta do a better job smh", "Uh, I think the webpage didn't wish you luck. Soz mate", "Ah, no, go through the webpage again.", "shakes head", "Nah, nah, I think you know what I mean.", ], [ "Nice job ig.", "That was borderline okay.", "I seriously feel you can do better. IDK why.", "Uh.... okay?", "Care to re-attempt it?", ], [ "Noice!", "Just like your marks in math class.", "Just grazed perfection. Keep it up!", "Your brain is very colorful lol", "Woohoo!" ], [ "Smoked it! Wow!" ] ]; const thresholds = [0.35, 0.60, 1]; buildQuizQuestions(); const scoreBar = new ProgressBar.Circle('#score-bar', { color: '#ff4c4c', trailColor: '#00000022', trailWidth: 1, duration: 1200, easing: 'easeInOut', strokeWidth: 10, text: { value: " " }, from: { color: '#CB6238', a: 0 }, to: { color: '#63CB38', a: 1 }, step: function(state, circle) { circle.path.setAttribute('stroke', state.color); circle.text.style.color = state.color; circle.setText(Math.round(circle.value() * 100) + "%"); } }); // reset quiz when going back to home document.getElementById("complete-quiz").addEventListener("click", () => { // remove question correct/incorrect markings const qContainers = document.querySelectorAll(".question-container"); qContainers.forEach(qEl => { qEl.classList.remove("correct-answer"); qEl.classList.remove("incorrect-answer"); }); // deselect answer radios const radios = document.querySelectorAll(".answer-radio"); radios.forEach(radio => radio.checked = false); // bring back submit button and hide quiz results & answer key document.getElementById("quiz-submit").style.display = 'block'; document.getElementById("quiz-results").style.display = "none"; document.getElementById("quiz-answers").style.display = 'none'; // reset result bar scoreBar.set(0); }); // Show results on submit document.getElementById("quiz-submit").addEventListener("click", function showResults() { document.getElementById("quiz-submit").style.display = 'none'; document.getElementById("quiz-results").style.display = "block"; document.getElementById("quiz-answers").style.display = 'block'; const numCorrect = markAnswerCorrectness(); const accuracy = numCorrect / questions.length; showFeedback(accuracy); scoreBar.animate(accuracy); document.getElementById("number-correct").textContent = numCorrect; document.getElementById("total-questions").textContent = questions.length; }); function buildQuizQuestions() { while (quizContainer.lastChild) quizContainer.lastChild.remove(); const qTemplate = document.getElementById("question-template").content; const aTemplate = document.getElementById("answer-template").content; questions.forEach((q, i) => { const ques = qTemplate.cloneNode(true); ques.querySelector(".question").textContent = q.question; const answers = ques.querySelector(".answers-container"); for (char in q.answers) { const ans = aTemplate.cloneNode(true); const text = ans.querySelector(".answer-text"), radio = ans.querySelector(".answer-radio"); text.textContent = `${char}: ${q.answers[char]}`; radio.name = `answer${i}`; radio.value = char; answers.appendChild(ans); } quizContainer.appendChild(ques); }); } function markAnswerCorrectness(qEl, i) { const qContainers = quizContainer.querySelectorAll(".question-container"); let numCorrect = 0; qContainers.forEach((qEl, i) => { // undefined if no answer was checked for this question const userAnswer = qEl.querySelector(".answer-radio:checked")?.value; if (userAnswer === questions[i].correctAnswer) { numCorrect++; qEl.classList.remove("incorrect-answer"); qEl.classList.add("correct-answer"); } else { qEl.classList.remove("correct-answer"); qEl.classList.add("incorrect-answer"); } }); return numCorrect; } function showFeedback(accuracy) { const feedbackEl = document.getElementById('result-feedback'); let possibleFeedbacks = feedback[feedback.length - 1]; for (let i = 0; i < thresholds.length; ++i) { if (accuracy < thresholds[i]) { possibleFeedbacks = feedback[i]; break; } } // if accuracy >= all of the thresholds, keep // possibleFeedbacks as the last (best) one in feedback feedbackEl.textContent = possibleFeedbacks[Math.floor(Math.random() * possibleFeedbacks.length)]; } })(); </script> <!-- Quiz script --> <script type> (function() { const scrollElements = document.querySelectorAll(".js-scroll"); function elementIsInView(el, divisor = 1) { const elementTop = el.getBoundingClientRect().top; return elementTop <= window.innerHeight / divisor; } function handleScrollAnimation() { scrollElements.forEach((el) => { if (elementIsInView(el, 1.25)) { el.classList.add("scrolled"); } else if (!elementIsInView(el)) { el.classList.remove("scrolled"); } }); } window.addEventListener("scroll", handleScrollAnimation); })(); </script> <!-- Scrolling animations --> </body> </html>
Folds	21,122,123,201,202,339,340,445,446,659,660,711,712,934,935,1051,1055,1064,1066,1114,1116,1572,1574,2057,2059,2077,2079,2157,2159,2191,2193,2195,2196,2211,2212,2227,2228,2264,2265,2530,2531,2554
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgP382pOFCQw
Votes	255
Spin-Offs	19
Type
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Voldemort
Author Name	Voldemort271
Author ID	kaid_109088529962766375028969
Author Profile Access	PUBLIC

Archive Data

Added	1 years ago, 1707881050122
Updated	4 months ago, 1746110109316
Source Deleted	unknown