HTML5 Flat Design Color Palette

HTML5 Flat Design Color Palette
Code Snippet:Flat Design Color Palette
Author: Lucas Cobb
Published: January 29, 2024
Last Updated: February 3, 2024
Downloads: 54
License: MIT
Edit Code online: CodeHim
Read More

The code effortlessly showcases a color palette of HTML5 flat colors, each assigned a unique name and hexadecimal code. Organized in a visually appealing manner, the colors are presented in a clean, structured layout. This code is a quick reference, helping you easily incorporate trendy flat design color schemes into your web projects.

How to Create HTML5 Flat Design Color Palette

1. First of all, incorporate the flat design color palette into your HTML file by copying the provided HTML code. Ensure that you include the entire <div> structure within the <body> tag of your HTML document.

<div class="span4">
  <div class="todo mrm">
    <div class="todo-header">
      <h3 class="demo-panel-title">Flat Colors</h3>
    </div>
      <ul>
        <li class="todo-wrap one">
          <div class="todo-content">
            <h4 class="todo-name">
              GREEN SEA
            </h4>
              #16A085
          </div>
        </li>

        <li class="todo-wrap two">
          <div class="todo-content">
            <h4 class="todo-name">
              EMERLAND
            </h4>
              #2ECC71
          </div>
        </li>

        <li class="todo-wrap three">
          <div class="todo-content">
            <h4 class="todo-name">
              NEPHRITIS
            </h4>
              #27AE60
          </div>
        </li>
        
        <li class="todo-wrap four">
          <div class="todo-content">
            <h4 class="todo-name">
              PETER RIVER
            </h4>
              #3498DB
          </div>
        </li>
        
        <li class="todo-wrap five">
          <div class="todo-content">
            <h4 class="todo-name">
              BELIZE HOLE
            </h4>
              #2980B9
          </div>
        </li>
        
        <li class="todo-wrap six">
          <div class="todo-content">
            <h4 class="todo-name">
              AMETHYST
            </h4>
              #9B59B6
          </div>
        </li>
        
        <li class="todo-wrap seven">
          <div class="todo-content">
            <h4 class="todo-name">
              WISTERIA
            </h4>
              #8E44AD
          </div>
        </li>
        
        <li class="todo-wrap eight">
          <div class="todo-content">
            <h4 class="todo-name">
              WET ASPHALT
            </h4>
              #34495E
          </div>
        </li>
        
        <li class="todo-wrap nine">
          <div class="todo-content">
            <h4 class="todo-name">
              MIDNIGHT BLUE
            </h4>
              #2C3E50
          </div>
        </li>

        <li class="todo-wrap ten">
          <div class="todo-content">
            <h4 class="todo-name">
              NIGHT SHADE
            </h4>
              #2C3E50
          </div>
        </li>
        
        <li class="todo-wrap elleven">
          <div class="todo-content">
            <h4 class="todo-name">
              SUN FLOWER
            </h4>
              #F1C40F
          </div>
        </li>
        
        <li class="todo-wrap twelve">
          <div class="todo-content">
            <h4 class="todo-name">
              ORANGE
            </h4>
              #F39C12
          </div>
        </li>
        
        <li class="todo-wrap thirteen">
          <div class="todo-content">
            <h4 class="todo-name">
              CARROT
            </h4>
              #E67E22
          </div>
        </li>
        
        <li class="todo-wrap fourteen">
          <div class="todo-content">
            <h4 class="todo-name">
              PUMPKIN
            </h4>
              #D35400
          </div>
        </li>
        
        <li class="todo-wrap fifteen">
          <div class="todo-content">
            <h4 class="todo-name">
              ALIZARIN
            </h4>
              #E74C3C
          </div>
        </li>
        
        <li class="todo-wrap sixteen">
          <div class="todo-content">
            <h4 class="todo-name">
              POMEGRANATE
            </h4>
              #C0392B
          </div>
        </li>
        
        <li class="todo-wrap seventeen clouds">
          <div class="todo-content">
            <h4 class="todo-name clouds">
              CLOUDS
            </h4>
              #ECF0F1
          </div>
        </li>
        
        <li class="todo-wrap eighteen">
          <div class="todo-content">
            <h4 class="todo-name">
              SILVER
            </h4>
              #BDC3C7
          </div>
        </li>
        
        <li class="todo-wrap nineteen">
          <div class="todo-content">
            <h4 class="todo-name">
              CONCRETE
            </h4>
              #95A5A6
          </div>
        </li>
        
        <li class="todo-wrap twenty">
          <div class="todo-content">
            <h4 class="todo-name">
              ASBESTOS
            </h4>
              #7F8C8D
          </div>
        </li>
      </ul>
  </div>
</div>

2. Now, add the necessary styles to your project by copying the following CSS code. This code includes styles for the color palette’s layout, headers, and individual color blocks.

@import url(https://fonts.googleapis.com/css?family=Lato:700);

body {
color: #34495e;
font: 14px/1.231 "Lato", sans-serif; }

h3 {
font-size: 19px;
font-weight: 700;
line-height: 23px; 
margin: 0;
padding: 10px 0;
text-rendering: optimizelegibility;}

h4 {
font-size: 18px;
font-weight: 500;
margin-top: 4px;
line-height: 20px;
text-rendering: optimizelegibility;}

.span4 {
width: 250px; }

[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px; }

.mrm, .mhm, .mam {
margin-right: 10px; }

.todo {
background-color: #2c3e50;
border-radius: 8px 8px 6px 6px;
color: #fff;
margin-bottom: 20px; }

.todo-header {
background: #1ABC9C 92% center no-repeat;
background-size: 16px 16px;
border-radius: 6px 6px 0 0;
color: #34495e;
padding: 10px 20px; }

.todo ul {
margin: 0;
list-style-type: none;
padding: 0;
display: block; }

.todo-name {
color: #FFF;
font-size: 17px;
margin: 1px 0 3px; }

.todo-name.clouds {
color: #BDC3C7; }

.todo li.todo-done {
background: transparent 92% center no-repeat;
background-size: 20px 20px;
color: #1abc9c; }

.todo li:first-child {
margin-top: 0; }

.todo li:last-child {
border-radius: 0 0 6px 6px;
padding-bottom: 18px; }

.todo-wrap {
background-size: 20px 20px;
cursor: pointer;
padding: 10px 18px;
position: relative;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }

.one {
background: #16A085; }

.two {
background: #2ECC71; }

.three {
background: #27AE60; }

.four {
background: #3498DB; }

.five {
background: #2980B9; }

.six {
background: #9B59B6; }

.seven {
background: #8E44AD; }

.eight {
background: #34495E; }

.nine {
background: #2C3E50; }

.ten {
background: #22313f; }

.elleven {
background: #F1C40F; }

.twelve {
background: #F39C12; }

.thirteen {
background: #E67E22; }

.fourteen {
background: #D35400; }

.fifteen {
background: #E74C3C; }

.sixteen {
background: #C0392B; }

.seventeen {
background: #ECF0F1; }

.seventeen.clouds {
color: #BDC3C7; }

.eighteen {
background: #BDC3C7; }

.nineteen {
background: #95A5A6; }

.twenty {
background: #7F8C8D; }

Modify the color names, hex codes, or styling properties to suit your project’s requirements. Each color block is represented by a <li> element with a unique class (e.g., one, two). Adjust the content inside these blocks to change color names and hex codes.

Furthermore, you can integrate the flat colors into your project by referencing the appropriate class within your HTML elements. For instance, apply the color represented by the class one to a specific element.

That’s all! hopefully, you have successfully created an HTML5 Flat Design Color Palette. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...