Analogous Colors
How do I make an analogous colors?
What is a analogous colors? How do you make a analogous colors? This script and codes were developed by Mackdoyle on 26 December 2022, Monday.
Analogous Colors - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Analogous Colors</title> <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! */ .cullaz { display: table; width: 100%; height: 100%;
}
.cullaz div:nth-child(1) { background: #ff0a6c;
}
.cullaz div:nth-child(2) { background: #ff0a74;
}
.cullaz div:nth-child(3) { background: #ff0a7d;
}
.cullaz div:nth-child(4) { background: #ff0a85;
}
.cullaz div:nth-child(5) { background: #ff0a8d;
}
.cullaz div:nth-child(6) { background: #ff0a95;
}
.cullaz div:nth-child(7) { background: #ff0a9d;
}
.cullaz div:nth-child(8) { background: #ff0aa5;
}
.cullaz div:nth-child(9) { background: #ff0aae;
}
.cullaz div:nth-child(10) { background: #ff0ab6;
}
.cullaz div:nth-child(11) { background: #ff0abe;
}
.cullaz div:nth-child(12) { background: #ff0ac6;
}
.cullaz div:nth-child(13) { background: #ff0ace;
}
.cullaz div:nth-child(14) { background: #ff0ad6;
}
.cullaz div:nth-child(15) { background: #ff0adf;
}
.cullaz div:nth-child(16) { background: #ff0ae7;
}
.cullaz div:nth-child(17) { background: #ff0aef;
}
.cullaz div:nth-child(18) { background: #ff0af7;
}
.cullaz div:nth-child(19) { background: #ff0aff;
}
.cullaz div:nth-child(20) { background: #f70aff;
}
.cullaz div:nth-child(21) { background: #ef0aff;
}
.cullaz div:nth-child(22) { background: #e60aff;
}
.cullaz div:nth-child(23) { background: #de0aff;
}
.cullaz div:nth-child(24) { background: #d60aff;
}
.cullaz div:nth-child(25) { background: #ce0aff;
}
.cullaz div:nth-child(26) { background: #c60aff;
}
.cullaz div:nth-child(27) { background: #be0aff;
}
.cullaz div:nth-child(28) { background: #b50aff;
}
.cullaz div:nth-child(29) { background: #ad0aff;
}
.cullaz div:nth-child(30) { background: #a50aff;
}
.cullaz div:nth-child(31) { background: #9d0aff;
}
.cullaz div:nth-child(32) { background: #950aff;
}
.cullaz div:nth-child(33) { background: #8d0aff;
}
.cullaz div:nth-child(34) { background: #840aff;
}
.cullaz div:nth-child(35) { background: #7c0aff;
}
.cullaz div:nth-child(36) { background: #740aff;
}
.cullaz div:nth-child(37) { background: #6c0aff;
}
.cullaz div:nth-child(38) { background: #640aff;
}
.cullaz div:nth-child(39) { background: #5c0aff;
}
.cullaz div:nth-child(40) { background: #530aff;
}
.cullaz div:nth-child(41) { background: #4b0aff;
}
.cullaz div:nth-child(42) { background: #430aff;
}
.cullaz div:nth-child(43) { background: #3b0aff;
}
.cullaz div:nth-child(44) { background: #330aff;
}
.cullaz div:nth-child(45) { background: #2b0aff;
}
.cullaz div:nth-child(46) { background: #220aff;
}
.cullaz div:nth-child(47) { background: #1a0aff;
}
.cullaz div:nth-child(48) { background: #120aff;
}
div[class*=swatch] { display: table-cell; width: 2.08333%; height: 100%;
}
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html, body { background: #232323; margin: 0 auto; height: 100%;
}
.abs-center { display: table; width: 100%; position: fixed; margin: auto; top: 0; bottom: 0;
}
.label { display: table-cell; text-align: center; font-family: sans-serif; font-weight: 600; color: rgba(255, 255, 255, 0.3); font-size: 3rem;
}
@media screen and (max-width: 640px) { .label { font-size: 1rem; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="cullaz"> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div> <div class="swatch"></div>
</div>
<div class="abs-center"><div class="label">Analogous Colors - Mixin</div></div> <script src="js/index.js"></script>
</body>
</html>
Analogous Colors - Script Codes CSS Codes
.cullaz { display: table; width: 100%; height: 100%;
}
.cullaz div:nth-child(1) { background: #ff0a6c;
}
.cullaz div:nth-child(2) { background: #ff0a74;
}
.cullaz div:nth-child(3) { background: #ff0a7d;
}
.cullaz div:nth-child(4) { background: #ff0a85;
}
.cullaz div:nth-child(5) { background: #ff0a8d;
}
.cullaz div:nth-child(6) { background: #ff0a95;
}
.cullaz div:nth-child(7) { background: #ff0a9d;
}
.cullaz div:nth-child(8) { background: #ff0aa5;
}
.cullaz div:nth-child(9) { background: #ff0aae;
}
.cullaz div:nth-child(10) { background: #ff0ab6;
}
.cullaz div:nth-child(11) { background: #ff0abe;
}
.cullaz div:nth-child(12) { background: #ff0ac6;
}
.cullaz div:nth-child(13) { background: #ff0ace;
}
.cullaz div:nth-child(14) { background: #ff0ad6;
}
.cullaz div:nth-child(15) { background: #ff0adf;
}
.cullaz div:nth-child(16) { background: #ff0ae7;
}
.cullaz div:nth-child(17) { background: #ff0aef;
}
.cullaz div:nth-child(18) { background: #ff0af7;
}
.cullaz div:nth-child(19) { background: #ff0aff;
}
.cullaz div:nth-child(20) { background: #f70aff;
}
.cullaz div:nth-child(21) { background: #ef0aff;
}
.cullaz div:nth-child(22) { background: #e60aff;
}
.cullaz div:nth-child(23) { background: #de0aff;
}
.cullaz div:nth-child(24) { background: #d60aff;
}
.cullaz div:nth-child(25) { background: #ce0aff;
}
.cullaz div:nth-child(26) { background: #c60aff;
}
.cullaz div:nth-child(27) { background: #be0aff;
}
.cullaz div:nth-child(28) { background: #b50aff;
}
.cullaz div:nth-child(29) { background: #ad0aff;
}
.cullaz div:nth-child(30) { background: #a50aff;
}
.cullaz div:nth-child(31) { background: #9d0aff;
}
.cullaz div:nth-child(32) { background: #950aff;
}
.cullaz div:nth-child(33) { background: #8d0aff;
}
.cullaz div:nth-child(34) { background: #840aff;
}
.cullaz div:nth-child(35) { background: #7c0aff;
}
.cullaz div:nth-child(36) { background: #740aff;
}
.cullaz div:nth-child(37) { background: #6c0aff;
}
.cullaz div:nth-child(38) { background: #640aff;
}
.cullaz div:nth-child(39) { background: #5c0aff;
}
.cullaz div:nth-child(40) { background: #530aff;
}
.cullaz div:nth-child(41) { background: #4b0aff;
}
.cullaz div:nth-child(42) { background: #430aff;
}
.cullaz div:nth-child(43) { background: #3b0aff;
}
.cullaz div:nth-child(44) { background: #330aff;
}
.cullaz div:nth-child(45) { background: #2b0aff;
}
.cullaz div:nth-child(46) { background: #220aff;
}
.cullaz div:nth-child(47) { background: #1a0aff;
}
.cullaz div:nth-child(48) { background: #120aff;
}
div[class*=swatch] { display: table-cell; width: 2.08333%; height: 100%;
}
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html, body { background: #232323; margin: 0 auto; height: 100%;
}
.abs-center { display: table; width: 100%; position: fixed; margin: auto; top: 0; bottom: 0;
}
.label { display: table-cell; text-align: center; font-family: sans-serif; font-weight: 600; color: rgba(255, 255, 255, 0.3); font-size: 3rem;
}
@media screen and (max-width: 640px) { .label { font-size: 1rem; }
}
Analogous Colors - Script Codes JS Codes
//Create an N number of analogous colors. Quick and dirty rgb version.
Developer | Mackdoyle |
Username | mackdoyle |
Uploaded | December 26, 2022 |
Rating | 3 |
Size | 3,998 Kb |
Views | 4,048 |
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 |
A Pen by mackdoyle | 15,493 Kb |
Smooth Color Fade | 2,463 Kb |
Fluid-like Responsive Display Ads | 6,902 Kb |
Social Awesome | 2,136 Kb |
Hard-Stop Gradients | 2,288 Kb |
Landing lights next arrow | 3,110 Kb |
Text Long Shadow Mixin | 3,550 Kb |
Web Font Readability Test | 4,985 Kb |
CSS Color-Shift-In | 2,697 Kb |
Bootstrap css theme - Matter Dark | 12,929 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 |
Gears | Synvox | 3,278 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
TimelineMax Circular loader | Nicolund | 2,649 Kb |
Tab Menus | Zephyr | 3,180 Kb |
GLSL Hills | Ykob | 6,991 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Layout 11 | Altynai | 1,690 Kb |
AngularJS Skills | Supro | 3,312 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!