HTML5 Flat Design Color Palette

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.

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Code Snippet:	Flat Design Color Palette
Author:	Lucas Cobb
Published:	January 29, 2024
Last Updated:	February 3, 2024
Downloads:	661

License:	MIT
Edit Code online:	CodeHim

How to Create HTML5 Flat Design Color Palette

Similar Code Snippets:

Leave a Comment Cancel reply