Colour Swatches

Developer
Dave
Size
3,409 Kb
Views
20,240
  1. Colour Swatches Previews
  2. Colour Swatches HTML Codes
  3. Colour Swatches CSS Codes

How do I make an colour swatches?

What is a colour swatches? How do you make a colour swatches? This script and codes were developed by Dave on 17 September 2022, Saturday.

Colour Swatches Previews
IQ Test

Colour Swatches - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colour Swatches</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h3>Grey</h3>
<div class="l-flex"> <div class="block grey-900"> 900 </div> <div class="block grey-800"> 800 </div> <div class="block grey-700"> 700 </div> <div class="block grey-600"> 600 </div> <div class="block grey-500"> 500 </div> <div class="block grey-400"> 400 </div> <div class="block grey-300"> 300 </div> <div class="block grey-200"> 200 </div> <div class="block grey-100"> 100 </div> <div class="block grey-50"> 50 </div>
</div>
<h3>Turquoise</h3>
<div class="l-flex"> <div class="block turquoise-500"> 500 </div> <div class="block turquoise-400"> 400 </div> <div class="block turquoise-300"> 300 </div> <div class="block turquoise-200"> 200 </div>
</div>
<h3>Blue</h3>
<div class="l-flex"> <div class="block blue-700"> 700 </div> <div class="block blue-500"> 500 </div> <div class="block blue-300"> 300 </div>
</div>
<h3>Green</h3>
<div class="l-flex"> <div class="block green-700"> 700 </div> <div class="block green-500"> 500 </div> <div class="block green-300"> 300 </div>
</div>
<h3>Orange</h3>
<div class="l-flex"> <div class="block orange-700"> 700 </div> <div class="block orange-500"> 500 </div> <div class="block orange-300"> 300 </div>
</div>
<h3>Red</h3>
<div class="l-flex"> <div class="block red-700"> 700 </div> <div class="block red-500"> 500 </div> <div class="block red-300"> 300 </div>
</div>
<h3>Text Block</h3>
<div class="text-block"> <p>Primary text</p> <p class="secondary-text">Secondary text</p> <p class="disabled-text">Disabled text</p>
</div>
<h3>Light Text Block</h3>
<div class="text-block text-block--light"> <p class="light-primary-text">Primary text</p> <p class="light-secondary-text">Secondary text</p> <p class="light-disabled-text">Disabled text</p>
</div>
<h3>Notifications</h3>
<div class="alert alert--info"> <p>Advice Intelligence is a groundbreaking new advice platform</p>
</div>
<div class="alert alert--success"> <p>This is a success notification</p>
</div>
<div class="alert alert--warning"> <p>This is a warning notification</p>
</div>
<div class="alert alert--error"> <p>This is an error notification</p>
</div>
</body>
</html>

Colour Swatches - Script Codes CSS Codes

/* DEMO CODE BENEATH, NOT NEEDED FOR APP. */
body { font-family: sans-serif; color: #021825;
}
.text-block { background-color: #e6e8e9; padding: 10px; width: auto;
}
.text-block--light { background-color: #021825;
}
.secondary-text { color: rgba(2, 24, 37, 0.6);
}
.disabled-text { color: rgba(2, 24, 37, 0.35);
}
.light-primary-text { color: #fff;
}
.light-secondary-text { color: rgba(255, 255, 255, 0.7);
}
.light-disabled-text { color: rgba(255, 255, 255, 0.5);
}
.grey-900 { background-color: #021825; color: #fff;
}
.grey-800 { background-color: #1b2f3b; color: #fff;
}
.grey-700 { background-color: #354651; color: #fff;
}
.grey-600 { background-color: #4e5d66; color: #fff;
}
.grey-500 { background-color: #67747c; color: #fff;
}
.grey-400 { background-color: #818c92;
}
.grey-300 { background-color: #9aa3a8;
}
.grey-200 { background-color: #b3babe;
}
.grey-100 { background-color: #ccd1d3;
}
.grey-50 { background-color: #e6e8e9;
}
.blue-700 { background-color: #0a74ad;
}
.blue-500 { background-color: #0882b5;
}
.blue-300 { background-color: #058fbc;
}
.turquoise-500 { background-color: #0ac;
}
.turquoise-400 { background-color: #33bbd6;
}
.turquoise-300 { background-color: #4dc4db;
}
.turquoise-200 { background-color: #66cce0;
}
.green-700 { background-color: #a4b535;
}
.green-500 { background-color: #CDDC39;
}
.green-300 { background-color: #d7e361;
}
.red-700 { background-color: #c43a33;
}
.red-500 { background-color: #F44336;
}
.red-300 { background-color: #f6695e;
}
.orange-700 { background-color: #cc9f0d;
}
.orange-500 { background-color: #FFC107;
}
.orange-300 { background-color: #ffcd39;
}
.orange-700 { background-color: #cc9f0d;
}
.orange-500 { background-color: #FFC107;
}
.orange-300 { background-color: #ffcd39;
}
.l-flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px;
}
.block { text-align: center; line-height: 60px; height: 60px; width: 60px;
}
.alert { color: #021825; margin-bottom: 10px; padding: 5px 10px;
}
.alert--info { background-color: #058fbc;
}
.alert--success { background-color: #CDDC39;
}
.alert--warning { background-color: #FFC107;
}
.alert--error { background-color: #F44336;
}
Colour Swatches - Script Codes
Colour Swatches - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded September 17, 2022
Rating 3
Size 3,409 Kb
Views 20,240
Do you need developer help for Colour Swatches?

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!

Dave (DaveOrDead) Script Codes
Name
Cors
Flexbox Grid
Closures
React Calculator
Callbacks 2 - Passing arguments
React Tic Tac Toe
A Pen by Dave
Shell CSS lib
Character Gen - React
Scrollable tables
Create amazing Facebook ads 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!