Color Picker

Developer
Dave Alger
Size
3,410 Kb
Views
52,624
  1. Color Picker Previews
  2. Color Picker HTML Codes
  3. Color Picker CSS Codes
  4. Color Picker JS Codes

How do I make an color picker?

Added lock / unlock ability to this awesome codepen -- http://codepen.io/NobodyRocks/pen/KiCfa -- by NobodyRocks. What is a color picker? How do you make a color picker? This script and codes were developed by Dave Alger on 11 August 2022, Thursday.

Color Picker Previews
IQ Test

Color Picker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Color Picker</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='page'>
<div id='container'> <div id='hov' class='main'> <div class='sup'> <div class='sub'> <div class='point'></div><a href='#983b3b' class="ccard">Red</a></div> </div> <div class='sup'> <div class='sub'> <div class='point'></div><a href='#98593b' class="ccard">Orange</a></div> </div> <div class='sup'> <div class='sub'> <div class='point'></div><a href='#98983b' class="ccard">Yellow</a></div> </div> <div class='sup'> <div class='sub'> <div class='point'></div><a href='#3b9859' class="ccard">Green</a></div> </div> <div class='sup'> <div class='sub'> <div class='point'></div><a href='#3b5998' class="ccard">Blue</a></div> </div> <div class='sup'> <div class='sub'> <div class='point'></div><a href='#593b98' class="ccard">Purple</a></div> </div> <div class='sup'> <div class='sub'> <div class='point'></div><a href='#404040' class="ccard">Gray</a></div> </div> <div class='sup'> <div id='topcard' class='sub'> <div class='point'></div><a href='#'>@DaveAlger</a></div> </div> </div> <ul class="lock-toggle" style="float: right;padding-top:14px;"> <li id="color-locked" class="lock" style="display:none;"><a href="#" title="click to allow color changes"></a></li> <li id="color-unlocked" class="unlock" title="lock the current color"><a href="#"></a></li> </ul>
</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 Picker - Script Codes CSS Codes

body { background-color: #333333;
}
#page { width: 510px;
}
#container { margin: 20px auto;
}
#hov { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg);
}
.sup { position: absolute; left: 20%; top: 20%; width: 50px; height: 50px; pointer-events: initial; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
#hov.colorHover:hover .sup:nth-child(2) { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg);
}
#hov.colorHover:hover .sup:nth-child(3) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg);
}
#hov.colorHover:hover .sup:nth-child(4) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);
}
#hov.colorHover:hover .sup:nth-child(5) { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg);
}
#hov.colorHover:hover .sup:nth-child(6) { -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); transform: rotate(75deg);
}
#hov.colorHover:hover .sup:nth-child(7) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg);
}
#hov.colorHover:hover .sup:nth-child(8) { -webkit-transform: rotate(105deg); -moz-transform: rotate(105deg); transform: rotate(105deg);
}
.sub { border-radius: 4px; left: 0; top: 0; width: 325px; height: 50px; background-color: #eee; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; transition: all 0.25s;
}
/* red */
.sup:nth-child(1) .sub { background-color: #983b3b;
}
/* orange */
.sup:nth-child(2) .sub { background-color: #98593b;
}
/* yellow */
.sup:nth-child(3) .sub { background-color: #98983b;
}
/* green */
.sup:nth-child(4) .sub { background-color: #3b9859;
}
/* blue */
.sup:nth-child(5) .sub { background-color: #3b5998;
}
/* purple */
.sup:nth-child(6) .sub { background-color: #593b98;
}
/* grayscale */
.sup:nth-child(7) .sub { background-color: #404040;
}
/* top */
.sup:nth-child(8) .sub { background-color: #fff;
}
.sub:hover { border: 3px #fff solid;
}
.sup:nth-child(8) .sub:hover { border: 3px solid transparent;
}
.sub > a { text-decoration: none; color: #ffffff; padding-top: 7px; padding-left: 200px; padding-right: 12px; padding-bottom: 6px; float: right; font-size: 32px; font-family: sans-serif;
}
#topcard { text-align: center;
}
#topcard > a { float: none; padding: 0; line-height: 50px;
}
.sup:nth-child(1n+8) a { color: #3b5998; cursor: default !important;
}
.point { position: absolute; left: 17.5px; top: 17.5px; border-radius: 15px; height: 10px; width: 10px; background-color: #333333; border: 3px #777777 solid;
}
.sub { border: 3px solid transparent;
}
/* lock toggle */
.lock-toggle { padding:0; margin:0;
}
.lock-toggle li { position:relative; z-index:1; overflow:hidden; list-style:none; padding: 0px 20px 20px 20px; margin: -4px 6px; width: 20px; height: 24px; cursor: pointer;
}
.lock-toggle li a:link,
.lock-toggle li a:visited { display:block; border:0; padding-left:56px; color:#ccc;
}
.lock-toggle li a:hover,
.lock-toggle li a:focus,
.lock-toggle li a:active { color:#fff; background:transparent;
}
li:before,
li:after,
li a:before,
li a:after { content:""; position:absolute; top:50%; left:0;
}
li a:before,
li a:after { margin:-16px 0 0; background:#ccc;
}
li a:hover:before,
li a:focus:before,
li a:active:before { background:#fff;
}
.lock:before,
.lock:after,
.unlock:before,
.unlock:after { z-index:10; left:16px; width:6px; height:6px; margin-top:-4px; background: #333; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;
}
.lock:before,
.unlock:before { left:18px; width:2px; height:8px; margin-top:0px;
}
.lock a:before,
.unlock a:before { left:6px; width:26px; height:20px; margin-top:-8px;
}
.lock a:after,
.unlock a:after { left:10px; width:10px; height:10px; border:4px solid #ccc; border-bottom:0; margin-top:-22px; background:transparent; -webkit-border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0;
}
.unlock a:after { left:24px;
}
.lock a:hover:after,
.lock a:focus:after,
.lock a:active:after,
.unlock a:hover:after,
.unlock a:focus:after,
.unlock a:active:after { border-color:#fff;
}

Color Picker - Script Codes JS Codes

$(".ccard").on("click", function () { globals.colorSelected = $(this).attr("href"); $("#topcard > a").css("color",globals.colorSelected);
});
$("#topcard").click(function () { $( "#color-locked" ).animate({ opacity: 1.0 }, 40, function() { // Animation complete. $( "#color-locked" ).animate({ opacity: 0.2 },600, function() {}); });
});
$("#color-locked,#color-unlocked").on("click", function () { var lid = $(this).attr("id"); if (lid==='color-locked') { $("#color-locked").hide(); $("#color-unlocked").show(); globals.colorUnlocked = true; $("#topcard > a").css("color",globals.colorSelected); $("#topcard").css("background-color","#fff"); } else { $("#color-locked").show(); $("#color-unlocked").hide(); globals.colorUnlocked = false; $("#topcard > a").css("color","#fff"); $("#topcard").css("background-color",globals.colorSelected); }
});
$("#hov").hover( function() { if (globals.colorUnlocked) { $( this ).addClass( "colorHover" ); } }, function() { if (globals.colorUnlocked) { $( this ).removeClass( "colorHover" ); } }
);
var globals = {};
globals.colorSelected = "#3b5998";
globals.colorUnlocked = true;
$( "#color-unlocked,#color-locked" ).css("opacity","0.2");
Color Picker - Script Codes
Color Picker - Script Codes
Home Page Home
Developer Dave Alger
Username run-time
Uploaded August 11, 2022
Rating 3
Size 3,410 Kb
Views 52,624
Do you need developer help for Color Picker?

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 Alger (run-time) Script Codes
Name
Catapult Game
Editable Fire Text
Download Speed Calculator
Easy to understand paginator
Simple Yin Yang
Chat Room Demo
Rainbow Spider
Pink Slime
The Ultimate Canvas Compression
Fireflies
Create amazing captions 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!