Flat design color chart
How do I make an flat design color chart?
What is a flat design color chart? How do you make a flat design color chart? This script and codes were developed by Damien Pereira Morberto on 14 December 2022, Wednesday.
Flat design color chart - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat design color chart</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul title="Click to know the color hexadecimal code !"> <li data-color="d95f49"></li> <li data-color="b44b37"></li> <li data-color="db8438"></li> <li data-color="c76026"></li> <li data-color="ea9f34"></li> <li data-color="edc233"></li> <li data-color="54b59a"></li> <li data-color="479a83"></li> <li data-color="64c271"></li> <li data-color="55a660"></li> <li data-color="489ad8"></li> <li data-color="3b82b6"></li> <li data-color="9168b5"></li> <li data-color="8357ac"></li> <li data-color="374a5d"></li> <li data-color="2e3e4f"></li> <li data-color="98a4a6"></li> <li data-color="818b8d"></li> <li data-color="bec3c7"></li> <li data-color="edf0f1"></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flat design color chart - Script Codes CSS Codes
html { height:100%;
}
body { margin:0; padding:0; height:100%;
}
ul { list-style:none; height:100%; position:relative; padding:0; margin:0;
}
ul li { float:left; width:20%; height:25%; display:inline-block; cursor:pointer;
}
ul li:nth-child(1) { background-color:#d95f49;
}
ul li:nth-child(2) { background-color:#b44b37;
}
ul li:nth-child(3) { background-color:#db8438;
}
ul li:nth-child(4) { background-color:#c76026;
}
ul li:nth-child(5) { background-color:#ea9f34;
}
ul li:nth-child(6) { background-color:#edc233;
}
ul li:nth-child(7) { background-color:#54b59a;
}
ul li:nth-child(8) { background-color:#479a83;
}
ul li:nth-child(9) { background-color:#64c271;
}
ul li:nth-child(10) { background-color:#55a660;
}
ul li:nth-child(11) { background-color:#489ad8;
}
ul li:nth-child(12) { background-color:#3b82b6;
}
ul li:nth-child(13) { background-color:#9168b5;
}
ul li:nth-child(14) { background-color:#8357ac;
}
ul li:nth-child(15) { background-color:#374a5d;
}
ul li:nth-child(16) { background-color:#2e3e4f;
}
ul li:nth-child(17) { background-color:#98a4a6;
}
ul li:nth-child(18) { background-color:#818b8d;
}
ul li:nth-child(19) { background-color:#bec3c7;
}
ul li:nth-child(20) { background-color:#edf0f1;
}
Flat design color chart - Script Codes JS Codes
$(function(){ $('li').click(function(){ alert('#'+$(this).attr('data-color')); });
});
Developer | Damien Pereira Morberto |
Username | damienpm |
Uploaded | December 14, 2022 |
Rating | 3.5 |
Size | 2,074 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Xaoweb Logo | 2,010 Kb |
Flat design camera with CSS animation | 2,913 Kb |
Batman CSS | 2,095 Kb |
Flat design iframe | 1,819 Kb |
Custom checkboxes | 1,698 Kb |
Traveler CSS | 2,909 Kb |
A Pen by Damien Pereira Morberto | 1,928 Kb |
One div gear | 1,809 Kb |
Captain America CSS | 1,893 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Simple checkbox style | Vncnz | 2,628 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
AngularJS Skills | Supro | 3,312 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!