Colour Schemes

Developer

Size

2,557 Kb

Views

38,456

Colour Schemes Previews
Colour Schemes HTML Codes
Colour Schemes CSS Codes

How do I make an colour schemes?

Illustrates 5 basic Colour Scheme concepts.. What is a colour schemes? How do you make a colour schemes? This script and codes were developed by Richard on 02 August 2022, Tuesday.

Colour Schemes Previews

Colour Schemes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colour Schemes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="colour-wheel"> <div class="colour-wheel-overlay"> <h2></h2> </div> <div class="swatch yellow in-scheme"><div class="colour"></div></div> <div class="swatch red in-scheme"><div class="colour"></div></div> <div class="swatch blue in-scheme"><div class="colour"></div></div> <div class="swatch green in-scheme"><div class="colour"></div></div> <div class="swatch violet in-scheme"><div class="colour"></div></div> <div class="swatch orange in-scheme"><div class="colour"></div></div> <div class="swatch green-yellow in-scheme"><div class="colour"></div></div> <div class="swatch blue-green in-scheme"><div class="colour"></div></div> <div class="swatch blue-violet in-scheme"><div class="colour"></div></div> <div class="swatch red-violet in-scheme"><div class="colour"></div></div> <div class="swatch red-orange in-scheme"><div class="colour"></div></div> <div class="swatch yellow-orange in-scheme"><div class="colour"></div></div>
</div>
<div class="colour-wheel"> <div class="colour-wheel-overlay"> <h2>Monochromatic</h2> </div> <div class="swatch yellow"><div class="colour"></div></div> <div class="swatch red "><div class="colour"></div></div> <div class="swatch blue"><div class="colour"></div></div> <div class="swatch green"><div class="colour"></div></div> <div class="swatch violet"><div class="colour"></div></div> <div class="swatch orange in-scheme"><div class="colour"></div></div> <div class="swatch green-yellow"><div class="colour"></div></div> <div class="swatch blue-green"><div class="colour"></div></div> <div class="swatch blue-violet"><div class="colour"></div></div> <div class="swatch red-violet"><div class="colour"></div></div> <div class="swatch red-orange"><div class="colour"></div></div> <div class="swatch yellow-orange"><div class="colour"></div></div>
</div>
<div class="colour-wheel"> <div class="colour-wheel-overlay"> <h2>Analogous</h2> </div> <div class="swatch yellow"><div class="colour"></div></div> <div class="swatch red in-scheme"><div class="colour"></div></div> <div class="swatch blue"><div class="colour"></div></div> <div class="swatch green "><div class="colour"></div></div> <div class="swatch violet in-scheme"><div class="colour"></div></div> <div class="swatch orange"><div class="colour"></div></div> <div class="swatch green-yellow "><div class="colour"></div></div> <div class="swatch blue-green"><div class="colour"></div></div> <div class="swatch blue-violet"><div class="colour"></div></div> <div class="swatch red-violet in-scheme"><div class="colour"></div></div> <div class="swatch red-orange"><div class="colour"></div></div> <div class="swatch yellow-orange"><div class="colour"></div></div>
</div>
<div class="colour-wheel"> <div class="colour-wheel-overlay"> <h2>Complementary</h2> </div> <div class="swatch yellow"><div class="colour"></div></div> <div class="swatch red"><div class="colour"></div></div> <div class="swatch blue"><div class="colour"></div></div> <div class="swatch green"><div class="colour"></div></div> <div class="swatch violet"><div class="colour"></div></div> <div class="swatch orange"><div class="colour"></div></div> <div class="swatch green-yellow"><div class="colour"></div></div> <div class="swatch blue-green"><div class="colour"></div></div> <div class="swatch blue-violet in-scheme"><div class="colour"></div></div> <div class="swatch red-violet"><div class="colour"></div></div> <div class="swatch red-orange"><div class="colour"></div></div> <div class="swatch yellow-orange in-scheme"><div class="colour"></div></div>
</div>
<div class="colour-wheel"> <div class="colour-wheel-overlay"> <h2 class="two-line">Split Complementary</h2> </div> <div class="swatch yellow"><div class="colour"></div></div> <div class="swatch red"><div class="colour"></div></div> <div class="swatch blue"><div class="colour"></div></div> <div class="swatch green in-scheme"><div class="colour"></div></div> <div class="swatch violet"><div class="colour"></div></div> <div class="swatch orange"><div class="colour"></div></div> <div class="swatch green-yellow"><div class="colour"></div></div> <div class="swatch blue-green"><div class="colour"></div></div> <div class="swatch blue-violet"><div class="colour"></div></div> <div class="swatch red-violet in-scheme"><div class="colour"></div></div> <div class="swatch red-orange in-scheme"><div class="colour"></div></div> <div class="swatch yellow-orange"><div class="colour"></div></div>
</div>
<div class="colour-wheel"> <div class="colour-wheel-overlay"> <h2>Triadic</h2> </div> <div class="swatch yellow"><div class="colour"></div></div> <div class="swatch red"><div class="colour"></div></div> <div class="swatch blue"><div class="colour"></div></div> <div class="swatch green"><div class="colour"></div></div> <div class="swatch violet"><div class="colour"></div></div> <div class="swatch orange"><div class="colour"></div></div> <div class="swatch green-yellow"><div class="colour"></div></div> <div class="swatch blue-green in-scheme"><div class="colour"></div></div> <div class="swatch blue-violet"><div class="colour"></div></div> <div class="swatch red-violet in-scheme"><div class="colour"></div></div> <div class="swatch red-orange"><div class="colour"></div></div> <div class="swatch yellow-orange in-scheme"><div class="colour"></div></div>
</div>
</body>
</html>

Colour Schemes - Script Codes CSS Codes

html {background-color:#99AB6D;} .colour-wheel { font-size: 2.5em; /*CHANGE TO SCALE*/ height: 5em; width: 5em; border-radius: 50%; position: relative; margin: 1em; display: inline-block; } .colour { position: absolute; width: 5em; height: 5em; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; clip: rect(0px, 2.5em, 5em, 0px); } .swatch { position: absolute; width: 5em; height: 5em; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; clip: rect(0px, 5em, 5em, 2.5em); }	/*Set size of Colour Wheel a slice*/ .swatch .colour { -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } /*Primary*/ .swatch.yellow { -webkit-transform:rotate(-15deg); -moz-transform:rotate(-15deg); -o-transform:rotate(-15deg); transform:rotate(-15deg); } .swatch.yellow .colour {background-color: rgb(240,240,0);} .swatch.red { -webkit-transform:rotate(105deg); -moz-transform:rotate(105deg); -o-transform:rotate(105deg); transform:rotate(105deg); } .swatch.red .colour {background-color: rgb(240,0,0);} .swatch.blue { -webkit-transform:rotate(225deg); -moz-transform:rotate(225deg); -o-transform:rotate(225deg); transform:rotate(225deg); } .swatch.blue .colour {background-color: rgb(0,0,240);} /*Secondry*/ .swatch.green { -webkit-transform:rotate(285deg); -moz-transform:rotate(285deg); -o-transform:rotate(285deg); transform:rotate(285deg); } .swatch.green .colour {background-color: rgb(0,240,0);} .swatch.violet { -webkit-transform:rotate(165deg); -moz-transform:rotate(165deg); -o-transform:rotate(165deg); transform:rotate(165deg); } .swatch.violet .colour {background-color: rgb(120,0,120);} .swatch.orange { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .swatch.orange .colour {background-color: rgb(240,120,0);} /*Tertiary*/ .swatch.green-yellow { -webkit-transform:rotate(315deg); -moz-transform:rotate(315deg); -o-transform:rotate(315deg); transform:rotate(315deg); } .swatch.green-yellow .colour {background-color: rgb(120,240,0);} .swatch.blue-green { -webkit-transform:rotate(255deg); -moz-transform:rotate(255deg); -o-transform:rotate(255deg); transform:rotate(255deg); } .swatch.blue-green .colour {background-color: rgb(0,120,120);} .swatch.blue-violet { -webkit-transform:rotate(195deg); -moz-transform:rotate(195deg); -o-transform:rotate(195deg); transform:rotate(195deg); } .swatch.blue-violet .colour {background-color: rgb(60,0,180);} .swatch.red-violet { -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg); } .swatch.red-violet .colour {background-color: rgb(180,0,60);} .swatch.red-orange { -webkit-transform:rotate(75deg); -moz-transform:rotate(75deg); -o-transform:rotate(75deg); transform:rotate(75deg); } .swatch.red-orange .colour {background-color: rgb(240,60,0);} .swatch.yellow-orange { -webkit-transform:rotate(15deg); -moz-transform:rotate(15deg); -o-transform:rotate(15deg); transform:rotate(15deg); } .swatch.yellow-orange .colour {background-color: rgb(240,180,0);}	.colour-wheel-overlay {	background-color: white;	width: 3.5em;	height: 3.5em;	z-index: 5;	border-radius: 50%;	position: absolute;	margin: auto;	right: 0;	left: 0;	top: 0;	bottom: 0;	}
h2 { font-family: "Verdana", sans-serif; width: 96%; text-align: center; font-size: 0.32em; margin: 5em 2%; line-height: 1em;
}
h2.two-line { margin: 4.55em 2%;
}
/* */
.swatch {opacity: 0.3;}
.swatch.in-scheme {opacity: 1;}
.colour-wheel {background-color: #000;}
.colour-wheel:hover {background-color: transparent;}

Home Page	Home
Developer	Richard
Username	Ketziel
Uploaded	August 02, 2022
Rating	3
Size	2,557 Kb
Views	38,456

Do you need developer help for Colour Schemes?

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!

Richard (Ketziel) Script Codes

Name	Size
Flex Box Tiles	3,468 Kb
Atomic	2,098 Kb
CSSman	1,821 Kb
CSS Styled Select Box	2,048 Kb
Responsive Image Grid with set Height	2,343 Kb
Animated Book	2,629 Kb
Moon Orbit	2,156 Kb
Simple Responsive Image Grid	2,397 Kb
CSS Icon Collection	2,538 Kb
CSS Plus Sign	1,891 Kb

Create amazing blog posts 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!

Similar Scripts & Codes

Name	Username	Size
Price	Catcode	2,623 Kb
Example SVGZ Data URI	Joeyhoer	2,981 Kb
React TODO	Enieste	3,320 Kb
Pure CSS Read More Arrow	Zephyr	1,747 Kb
Force Counter	Kenlauguico	2,732 Kb
Nested table email layout	Massimo-cassandro	2,355 Kb
Menubar compass mixin	Michaelparenteau	4,925 Kb
Jstam.com Home Page	Jstam	10,558 Kb
Starfield using KineticJS	Asp	3,512 Kb
Underlined form fields	Mitchdot	2,323 Kb

Do you want hide your ip address?

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!