Color Wheel

Developer

Size

5,512 Kb

Views

6,072

Color Wheel Previews
Color Wheel HTML Codes
Color Wheel CSS Codes
Color Wheel JS Codes

How do I make an color wheel?

Working on: http://dribbble.com/shots/1298243-Color-picker and learning Less. What is a color wheel? How do you make a color wheel? This script and codes were developed by Barbara Laird on 16 January 2023, Monday.

Color Wheel Previews

Color Wheel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Color Wheel</title> <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! */ .container { height: 300px; position: absolute;
}
.wheel { position: absolute; width: 272px; left: 136px; top: 0px; transform-origin: 50% 50%;
}
.row { width: 50px; height: 150px; position: absolute; transform-origin: 50% 100%;
}
.row:nth-child(1) { transform: rotate(0deg);
}
.row:nth-child(1) div:nth-child(1) { background-color: #f7042b; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(1) div:nth-child(2) { background-color: #fc4c68; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(1) div:nth-child(3) { background-color: #fd97a7; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(2) { transform: rotate(30deg);
}
.row:nth-child(2) div:nth-child(1) { background-color: #e85c02; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(2) div:nth-child(2) { background-color: #fd863a; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(2) div:nth-child(3) { background-color: #feb586; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(3) { transform: rotate(60deg);
}
.row:nth-child(3) div:nth-child(1) { background-color: #c78e01; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(3) div:nth-child(2) { background-color: #febb16; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(3) div:nth-child(3) { background-color: #fed162; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(4) { transform: rotate(90deg);
}
.row:nth-child(4) div:nth-child(1) { background-color: #d3a700; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(4) div:nth-child(2) { background-color: #ffd120; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(4) div:nth-child(3) { background-color: #ffe16d; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(5) { transform: rotate(120deg);
}
.row:nth-child(5) div:nth-child(1) { background-color: #e1c900; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(5) div:nth-child(2) { background-color: #ffe92e; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(5) div:nth-child(3) { background-color: #fff17b; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(6) { transform: rotate(150deg);
}
.row:nth-child(6) div:nth-child(1) { background-color: #a8d610; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(6) div:nth-child(2) { background-color: #c8f141; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(6) div:nth-child(3) { background-color: #ddf688; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(7) { transform: rotate(180deg);
}
.row:nth-child(7) div:nth-child(1) { background-color: #20f50c; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(7) div:nth-child(2) { background-color: #63f855; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(7) div:nth-child(3) { background-color: #a6fb9e; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(8) { transform: rotate(210deg);
}
.row:nth-child(8) div:nth-child(1) { background-color: #2edde4; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(8) div:nth-child(2) { background-color: #72e8ed; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(8) div:nth-child(3) { background-color: #b6f3f6; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(9) { transform: rotate(240deg);
}
.row:nth-child(9) div:nth-child(1) { background-color: #0799cd; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(9) div:nth-child(2) { background-color: #28c2f8; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(9) div:nth-child(3) { background-color: #72d7fa; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(10) { transform: rotate(270deg);
}
.row:nth-child(10) div:nth-child(1) { background-color: #7454e9; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(10) div:nth-child(2) { background-color: #ab98f2; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(10) div:nth-child(3) { background-color: #e2dcfb; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(11) { transform: rotate(300deg);
}
.row:nth-child(11) div:nth-child(1) { background-color: #cd1ad1; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(11) div:nth-child(2) { background-color: #e64ee9; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(11) div:nth-child(3) { background-color: #f092f1; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(12) { transform: rotate(330deg);
}
.row:nth-child(12) div:nth-child(1) { background-color: #df10a0; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(12) div:nth-child(2) { background-color: #f24abf; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(12) div:nth-child(3) { background-color: #f791d8; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
#info { width: 322px; display: block; position: absolute; background-color: #fc4c68; opacity: 0.8; left: 0; bottom: 0;
}
.prev,
.next,
.disk { display: inline-block; border-radius: 50%; width: 16px; height: 16px; border: 2px solid white; color: white; margin: 5px 42px; opacity: .6;
}
.disk { opacity: 1; position: relative;
}
.disk:before { content: ''; width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; display: block; position: absolute; top: 2px; left: 2px;
}
.disk:after { content: ''; width: 2px; height: 2px; border: 1px solid white; border-radius: 50%; background: white; display: block; position: absolute; top: 6px; left: 6px;
}
#disk1 { float: left;
}
#disk1:before { border: 2px solid #ccc;
}
#disk1:after { border: 1px solid #ccc; background: #ccc;
}
#disk2 { border: 2px solid #ccc; float: left;
}
#disk2:after { border: 1px solid #ccc; background: #ccc;
}
#disk3 { border: 2px solid #ccc; float: left;
}
#disk3:before { border: 2px solid #ccc;
}
.colorinfo { display: block; height: 100px; width: 180px; display: none; background: transparent; color: white;
}
.color { float: left; clear: right;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='container'> <div class='wheel'> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> <div class='row'> <div class='chip'></div> <div class='chip'></div> <div class='chip'></div> </div> </div> <div id='info'> <div class='prev'></div> <div class='disk' id='close'></div> <div class='next'></div> <div class='colorinfo'> <div class='disk' id='disk1'></div> <div class='color' id='color1'>#F7042B</div> <div class='disk' id='disk2'></div> <div class='color' id='color2'>#FC4C68</div> <div class='disk' id='disk3'></div> <div class='color' id='color3'>#FD97A7</div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Color Wheel - Script Codes CSS Codes

.container { height: 300px; position: absolute;
}
.wheel { position: absolute; width: 272px; left: 136px; top: 0px; transform-origin: 50% 50%;
}
.row { width: 50px; height: 150px; position: absolute; transform-origin: 50% 100%;
}
.row:nth-child(1) { transform: rotate(0deg);
}
.row:nth-child(1) div:nth-child(1) { background-color: #f7042b; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(1) div:nth-child(2) { background-color: #fc4c68; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(1) div:nth-child(3) { background-color: #fd97a7; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(2) { transform: rotate(30deg);
}
.row:nth-child(2) div:nth-child(1) { background-color: #e85c02; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(2) div:nth-child(2) { background-color: #fd863a; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(2) div:nth-child(3) { background-color: #feb586; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(3) { transform: rotate(60deg);
}
.row:nth-child(3) div:nth-child(1) { background-color: #c78e01; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(3) div:nth-child(2) { background-color: #febb16; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(3) div:nth-child(3) { background-color: #fed162; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(4) { transform: rotate(90deg);
}
.row:nth-child(4) div:nth-child(1) { background-color: #d3a700; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(4) div:nth-child(2) { background-color: #ffd120; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(4) div:nth-child(3) { background-color: #ffe16d; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(5) { transform: rotate(120deg);
}
.row:nth-child(5) div:nth-child(1) { background-color: #e1c900; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(5) div:nth-child(2) { background-color: #ffe92e; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(5) div:nth-child(3) { background-color: #fff17b; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(6) { transform: rotate(150deg);
}
.row:nth-child(6) div:nth-child(1) { background-color: #a8d610; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(6) div:nth-child(2) { background-color: #c8f141; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(6) div:nth-child(3) { background-color: #ddf688; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(7) { transform: rotate(180deg);
}
.row:nth-child(7) div:nth-child(1) { background-color: #20f50c; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(7) div:nth-child(2) { background-color: #63f855; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(7) div:nth-child(3) { background-color: #a6fb9e; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(8) { transform: rotate(210deg);
}
.row:nth-child(8) div:nth-child(1) { background-color: #2edde4; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(8) div:nth-child(2) { background-color: #72e8ed; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(8) div:nth-child(3) { background-color: #b6f3f6; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(9) { transform: rotate(240deg);
}
.row:nth-child(9) div:nth-child(1) { background-color: #0799cd; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(9) div:nth-child(2) { background-color: #28c2f8; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(9) div:nth-child(3) { background-color: #72d7fa; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(10) { transform: rotate(270deg);
}
.row:nth-child(10) div:nth-child(1) { background-color: #7454e9; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(10) div:nth-child(2) { background-color: #ab98f2; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(10) div:nth-child(3) { background-color: #e2dcfb; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(11) { transform: rotate(300deg);
}
.row:nth-child(11) div:nth-child(1) { background-color: #cd1ad1; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(11) div:nth-child(2) { background-color: #e64ee9; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(11) div:nth-child(3) { background-color: #f092f1; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
.row:nth-child(12) { transform: rotate(330deg);
}
.row:nth-child(12) div:nth-child(1) { background-color: #df10a0; display: block; border-radius: 50%; margin: 5px auto; width: 40px; height: 40px;
}
.row:nth-child(12) div:nth-child(2) { background-color: #f24abf; display: block; border-radius: 50%; margin: 5px auto; width: 30px; height: 30px;
}
.row:nth-child(12) div:nth-child(3) { background-color: #f791d8; display: block; border-radius: 50%; margin: 5px auto; width: 20px; height: 20px;
}
#info { width: 322px; display: block; position: absolute; background-color: #fc4c68; opacity: 0.8; left: 0; bottom: 0;
}
.prev,
.next,
.disk { display: inline-block; border-radius: 50%; width: 16px; height: 16px; border: 2px solid white; color: white; margin: 5px 42px; opacity: .6;
}
.disk { opacity: 1; position: relative;
}
.disk:before { content: ''; width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; display: block; position: absolute; top: 2px; left: 2px;
}
.disk:after { content: ''; width: 2px; height: 2px; border: 1px solid white; border-radius: 50%; background: white; display: block; position: absolute; top: 6px; left: 6px;
}
#disk1 { float: left;
}
#disk1:before { border: 2px solid #ccc;
}
#disk1:after { border: 1px solid #ccc; background: #ccc;
}
#disk2 { border: 2px solid #ccc; float: left;
}
#disk2:after { border: 1px solid #ccc; background: #ccc;
}
#disk3 { border: 2px solid #ccc; float: left;
}
#disk3:before { border: 2px solid #ccc;
}
.colorinfo { display: block; height: 100px; width: 180px; display: none; background: transparent; color: white;
}
.color { float: left; clear: right;
}

Color Wheel - Script Codes JS Codes

/* http://dribbble.com/shots/1298243-Color-picker */
var hexDigits = new Array ("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
//Function to convert hex format to a rgb color
function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function hex(x) { return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16]; }
$( document ).ready( function() { $('#close').on('click',function(){ $('.colorinfo').toggle(); }); $('.wheel').on('click','.chip', function() { $('#info').css("background-color", $( this ).css( "background-color" )); $('.colorinfo').show(); $(this).parent().children().each( function(index) { $('#color' + (index+1)).html(rgb2hex($(this).css( "background-color" ))); }); }); var rotation = 0; jQuery.fn.rotate = function(degrees) { $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)', '-moz-transform' : 'rotate('+ degrees +'deg)', '-ms-transform' : 'rotate('+ degrees +'deg)', 'transform' : 'rotate('+ degrees +'deg)'}); }; $('.prev').on('click', function() { rotation--; $('.row').each( function(index) { $(this).rotate((index + rotation) * 30); }); }); $('.next').on('click', function() { rotation++; $('.row').each( function(index) { $(this).rotate((index + rotation) * 30); }); });
});

Home Page	Home
Developer	Barbara Laird
Username	bhlaird
Uploaded	January 16, 2023
Rating	3
Size	5,512 Kb
Views	6,072

Do you need developer help for Color Wheel?

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!

Barbara Laird (bhlaird) Script Codes

Name	Size
Barber Shop	6,270 Kb
Sketch heart	2,202 Kb
Codrops animated text	1,970 Kb
Playing with colors	9,310 Kb
TIme Since	3,111 Kb
Smile More	3,720 Kb
Man Up	3,309 Kb
SVG Shape Hover Effect	4,672 Kb
Terry Hover Effect from Codrops	2,941 Kb
Coming Soon	3,075 Kb

Create amazing art & images 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
Konami Code Easter Egg	Teolitto	3,051 Kb
Scrolling Horizontal Isotope	Bramus	2,017 Kb
After America	Jonathangarner	2,686 Kb
Feedback Page	TessDiNapoli	2,836 Kb
Disable JavaScript execution from console	Ludviglindblom	2,534 Kb
Iron Man SVG Loading Animation	Andythayer	3,069 Kb
A Pen by Mohomed Anees	Mohomedanees	12,597 Kb
700 Synapses Per Second	Silentkrange	2,138 Kb
Fading text with CSS blend modes	Giana	3,305 Kb
A Pen by Mike Otis	Mikeotis	3,185 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!