Color Swatch

Developer
Nathan Gregg
Size
1,691 Kb
Views
8,096
  1. Color Swatch Previews
  2. Color Swatch HTML Codes
  3. Color Swatch CSS Codes

How do I make an color swatch?

What is a color swatch? How do you make a color swatch? This script and codes were developed by Nathan Gregg on 25 December 2022, Sunday.

Color Swatch Previews
IQ Test

Color Swatch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Color Swatch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="color1">Neither is there anyone who loves grief itself since it is grief and thus wants to obtain it</div> <div class="color2"></div> <div class="color3"></div> <div class="color4"></div> <div class="color5"></div> <div class="color6"></div> <div class="color7"></div>
</div>
</body>
</html>

Color Swatch - Script Codes CSS Codes

* { margin: 0; padding: 0; font-size: 22pt;
}
.container { display: flex; flex-flow: row nowrap; width: 100%; height: 100vh; background-color: #090909; justify-content: space-around;
}
.container > div { height: 100%; width: 50px;
}
.panel { border: 1px solid grey; height: 100%;
}
.color1 { background-color: #090909; color: #FDF4CD; overflow: hidden;
}
.color2 { background-color: #C63D3D; color: #FDF4CD;
}
.color3 { background-color: #FF8A00; color: #FF6164;
}
.color4 { background-color: #FFD162; color: #FF6164;
}
.color5 { background-color: #49FF30; color: #FF6164;
}
.color6 { background-color: #10A0DE; color: #FF6164;
}
.color7 { background-color: #E497DC; color: #FF6164;
}
Color Swatch - Script Codes
Color Swatch - Script Codes
Home Page Home
Developer Nathan Gregg
Username nathansonic
Uploaded December 25, 2022
Rating 3
Size 1,691 Kb
Views 8,096
Do you need developer help for Color Swatch?

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!

Nathan Gregg (nathansonic) Script Codes
Name
CWB Table v4, Bootstrap-Table
HTML5 Playlist
Sort Isotope
Flexbox filter V2 from array
Matching 2 Arrays
Artist Page Styling v5
Artist Page Styling v7 Isotope
Logo Skews etc
Pure CSS popup graph
Form and Validation V1
Create amazing web content 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!