Colour Palette From Material Design

Developer
Keith Light
Size
5,592 Kb
Views
14,168
  1. Colour Palette From Material Design Previews
  2. Colour Palette From Material Design HTML Codes
  3. Colour Palette From Material Design CSS Codes
  4. Colour Palette From Material Design JS Codes

How do I make an colour palette from material design?

For my own reference reallywanted to try and get into SCSS so thought a good way to start would be with some colour variables, now includes media queries and nesting. What is a colour palette from material design? How do you make a colour palette from material design? This script and codes were developed by Keith Light on 18 November 2022, Friday.

Colour Palette From Material Design Previews
IQ Test

Colour Palette From Material Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colour Palette From Material Design</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Vars */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
/* Resets/Layout */
* { box-sizing: border-box;
}
.container { max-width: 600px; position: relative; margin: 0 auto; padding: 0; overflow: hidden;
}
.container:before, .container:after { content: ""; display: table;
}
.container:after { clear: both;
}
/* Main Styles */
html { font-size: 16px;
}
body { font-family: 'Lato'; background: #2e2e2e; color: #fff; line-height: 1.4;
}
h1 { color: #90A4AE; text-align: center; font-size: 2rem; letter-spacing: 2px; margin: 10px 0;
}
h2 { color: #90A4AE; font-size: 1.5rem; text-align: center;
}
div.color { width: 100px; height: 100px; display: inline-block; margin-left: -4px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s; transform: scale(0); opacity: 0; animation: 1s load forwards;
}
div.color:first-child, div.color:nth-child(7), div.color:nth-child(13) { margin: 0;
}
div.color:hover span { opacity: 1; transform: translate(0);
}
span { background: #90A4AE; position: absolute; padding: 10px 0; left: 0; bottom: 0; width: 100%; opacity: 0; text-align: center; transform: translate(0, 100%); transition: all 0.5s;
}
/* Colours */
.red { background: #F44336;
}
.pink { background: #E91E63;
}
.purple { background: #9C27B0;
}
.deepPurple { background: #673AB7;
}
.indigo { background: #3F51B5;
}
.blue { background: #2196F3;
}
.lightBlue { background: #03A9F4;
}
.cyan { background: #00BCD4;
}
.teal { background: #009688;
}
.green { background: #4CAF50;
}
.lightGreen { background: #8BC34A;
}
.lime { background: #CDDC39;
}
.yellow { background: #FFEB3B;
}
.orange { background: #FF9800;
}
.deepOrange { background: #FF5722;
}
.brown { background: #795548;
}
.grey { background: #9E9E9E;
}
.blueGrey { background: #607D8B;
}
div.color:nth-child(1) { animation-delay: 0.1s;
}
div.color:nth-child(2) { animation-delay: 0.2s;
}
div.color:nth-child(3) { animation-delay: 0.3s;
}
div.color:nth-child(4) { animation-delay: 0.4s;
}
div.color:nth-child(5) { animation-delay: 0.5s;
}
div.color:nth-child(6) { animation-delay: 0.6s;
}
div.color:nth-child(7) { animation-delay: 0.7s;
}
div.color:nth-child(8) { animation-delay: 0.8s;
}
div.color:nth-child(9) { animation-delay: 0.9s;
}
div.color:nth-child(10) { animation-delay: 1s;
}
div.color:nth-child(11) { animation-delay: 1.1s;
}
div.color:nth-child(12) { animation-delay: 1.2s;
}
div.color:nth-child(13) { animation-delay: 1.3s;
}
div.color:nth-child(14) { animation-delay: 1.4s;
}
div.color:nth-child(15) { animation-delay: 1.5s;
}
div.color:nth-child(16) { animation-delay: 1.6s;
}
div.color:nth-child(17) { animation-delay: 1.7s;
}
div.color:nth-child(18) { animation-delay: 1.8s;
}
/* Make it responsive */
@media (max-width: 620px) { div.color { width: 50%; margin: 5px -4px; } div.color:nth-child(odd) { margin: 5px 0; } span { transform: translate(0); opacity: 1; }
}
@media (max-width: 320px) { div.color { display: block; width: 100%; margin: 5px 0; } span { transform: translate(0); opacity: 1; }
}
/* Keyframes */
@keyframes load { 100% { transform: scale(1); opacity: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Colour Palette From Material Design</h1>
<section class="container"> <div class="row"> <div class="red color"><span>#F44336</span></div> <div class="pink color"><span>#E91E63</span></div> <div class="purple color"><span>#9C27B0</span></div> <div class="deepPurple color"><span>#673AB7</span></div> <div class="indigo color"><span>#3F51B5</span></div> <div class="blue color"><span>#2196F3</span></div> <div class="lightBlue color"><span>#03A9F4</span></div> <div class="cyan color"><span>#00BCD4</span></div> <div class="teal color"><span>#009688</span></div> <div class="green color"><span>#4CAF50</span></div> <div class="lightGreen color"><span>#8BC34A</span></div> <div class="lime color"><span>#CDDC39</span></div> <div class="yellow color"><span>#FFEB3B</span></div> <div class="orange color"><span>#FFC107</span></div> <div class="deepOrange color"><span>#FF5722</span></div> <div class="brown color"><span>#795548</span></div> <div class="grey color"><span>#9E9E9E</span></div> <div class="blueGrey color"><span>#607D8B</span></div> </div>
</section>
<h2>Click color to copy to clipboard</h2> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Colour Palette From Material Design - Script Codes CSS Codes

/* Vars */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
/* Resets/Layout */
* { box-sizing: border-box;
}
.container { max-width: 600px; position: relative; margin: 0 auto; padding: 0; overflow: hidden;
}
.container:before, .container:after { content: ""; display: table;
}
.container:after { clear: both;
}
/* Main Styles */
html { font-size: 16px;
}
body { font-family: 'Lato'; background: #2e2e2e; color: #fff; line-height: 1.4;
}
h1 { color: #90A4AE; text-align: center; font-size: 2rem; letter-spacing: 2px; margin: 10px 0;
}
h2 { color: #90A4AE; font-size: 1.5rem; text-align: center;
}
div.color { width: 100px; height: 100px; display: inline-block; margin-left: -4px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s; transform: scale(0); opacity: 0; animation: 1s load forwards;
}
div.color:first-child, div.color:nth-child(7), div.color:nth-child(13) { margin: 0;
}
div.color:hover span { opacity: 1; transform: translate(0);
}
span { background: #90A4AE; position: absolute; padding: 10px 0; left: 0; bottom: 0; width: 100%; opacity: 0; text-align: center; transform: translate(0, 100%); transition: all 0.5s;
}
/* Colours */
.red { background: #F44336;
}
.pink { background: #E91E63;
}
.purple { background: #9C27B0;
}
.deepPurple { background: #673AB7;
}
.indigo { background: #3F51B5;
}
.blue { background: #2196F3;
}
.lightBlue { background: #03A9F4;
}
.cyan { background: #00BCD4;
}
.teal { background: #009688;
}
.green { background: #4CAF50;
}
.lightGreen { background: #8BC34A;
}
.lime { background: #CDDC39;
}
.yellow { background: #FFEB3B;
}
.orange { background: #FF9800;
}
.deepOrange { background: #FF5722;
}
.brown { background: #795548;
}
.grey { background: #9E9E9E;
}
.blueGrey { background: #607D8B;
}
div.color:nth-child(1) { animation-delay: 0.1s;
}
div.color:nth-child(2) { animation-delay: 0.2s;
}
div.color:nth-child(3) { animation-delay: 0.3s;
}
div.color:nth-child(4) { animation-delay: 0.4s;
}
div.color:nth-child(5) { animation-delay: 0.5s;
}
div.color:nth-child(6) { animation-delay: 0.6s;
}
div.color:nth-child(7) { animation-delay: 0.7s;
}
div.color:nth-child(8) { animation-delay: 0.8s;
}
div.color:nth-child(9) { animation-delay: 0.9s;
}
div.color:nth-child(10) { animation-delay: 1s;
}
div.color:nth-child(11) { animation-delay: 1.1s;
}
div.color:nth-child(12) { animation-delay: 1.2s;
}
div.color:nth-child(13) { animation-delay: 1.3s;
}
div.color:nth-child(14) { animation-delay: 1.4s;
}
div.color:nth-child(15) { animation-delay: 1.5s;
}
div.color:nth-child(16) { animation-delay: 1.6s;
}
div.color:nth-child(17) { animation-delay: 1.7s;
}
div.color:nth-child(18) { animation-delay: 1.8s;
}
/* Make it responsive */
@media (max-width: 620px) { div.color { width: 50%; margin: 5px -4px; } div.color:nth-child(odd) { margin: 5px 0; } span { transform: translate(0); opacity: 1; }
}
@media (max-width: 320px) { div.color { display: block; width: 100%; margin: 5px 0; } span { transform: translate(0); opacity: 1; }
}
/* Keyframes */
@keyframes load { 100% { transform: scale(1); opacity: 1; }
}

Colour Palette From Material Design - Script Codes JS Codes

function copyToClipboard() { var x = $(this).children('span').text(); window.prompt("Copy to clipboard: Ctrl+C, Enter", x);
}
$(".color").click(copyToClipboard);
Colour Palette From Material Design - Script Codes
Colour Palette From Material Design - Script Codes
Home Page Home
Developer Keith Light
Username keefyboooo
Uploaded November 18, 2022
Rating 3
Size 5,592 Kb
Views 14,168
Do you need developer help for Colour Palette From Material Design?

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!

Keith Light (keefyboooo) Script Codes
Name
Skills Display, using jQuery
Angled Menu
Soundbar Loading Animation
Material Design Colour Palette
Weather App Concept
SlideToggle Menu
Material Design Buttons
Tron Light Cycle Loader
JQuery Responsive Tabs
Overlay Menu Concept
Create amazing video scripts with AI!

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!