For browsers 980px or wider:
To see how it looks in desktop browsers, check this site from a regular computer.
Accepts HEX, RGB, HSL, HSV, HSVA, and names, thanks to Brian Grinstead's amazing Tiny Color.
Saves up to 16 recently used colors. Colors are stored in localStorage or cookies.
Easy-to-use preset colors that can be lightened and darkened.
Let users manipulate saturation, spectrum, and hue to get any color.
Tested in Chrome (Mac/PC/iOS), Safari (Mac/iOS), IE 8+, Firefox (Mac/PC), and Opera (Mac/PC).
Anonymous JavasScript function and namespaced CSS won't mess up your code.
As little as three lines of HTML and one line of JavaScript.
You didn't have to write your own color picker. 'Nuff said.
I'm Lauren. I originally wrote Pick-a-Color for my friends at Broadstreet Ads because they needed a color picker that was easy for people at online publishing companies to use.
If you have any bugs to report in Pick-a-Color, let me know by making a ticket.
Pick-a-Color is available under the MIT License.
OK! Let's do this color picking thing!
bower install pick-a-color
<head>:
<link rel="stylesheet" href="css/bootstrap-3.0.0.min.css"> <link rel="stylesheet" href="css/pick-a-color-1.2.3.min.css">Before the ending
</body>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/tinycolor-0.9.14.min.js"></script> <script src="js/pick-a-color-1.2.3.min.js"></script>For Bootstrap 2, use Pick-a-Color 1.1.8:
<head>:
<link rel="stylesheet" href="css/bootstrap-2.2.2.min.css"> <link rel="stylesheet" href="css/pick-a-color-1.1.8.min.css">Before the ending
</body>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/tinycolor-0.9.14.min.js"></script> <script src="js/pick-a-color-1.1.8.min.js"></script>
<input type="text" value="YOUR-DEFAULT" name="YOUR-NAME" class="pick-a-color form-control">Replace
YOUR-NAME with your unique identifier for the color picker (e.g. "border-color" or "background-color") and YOUR-DEFAULT with the default color you'd like to show in the color picker. For instance, yours might look like this:
<input type="text" value="000" name="border-color" class="pick-a-color form-control">Notes:
name attribute, one will be added in the pattern "pick-a-color-INT."input, but make sure to match it in your JavaScript in the next step and be aware that the class "pick-color" will be added regardless.$(".pick-a-color").pickAColor();
<head>:
<meta http-equiv="x-ua-compatible" content="IE=10"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Ta-da! You have a color picker! You might even have several!
src/less/pick-a-color.less to your LESS folder.@import "bootstrap-src/variables.less"; @import "bootstrap-src/mixins.less";To:
@import "PATH/TO/YOUR/variables.less"; @import "PATH/TO/YOUR/mixins.less";
pick-a-color.less using your customized variables.Ta-da! You have a color picker! You might even have several!
Here's an example of how a simple HTML page using Pick-a-Color might look:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=10">
<link rel="stylesheet" href="css/bootstrap-2.2.2.min.css">
<link rel="stylesheet" href="css/pick-a-color-1.1.5.min.css">
</head>
<body>
<input type="text" value="222" name="border-color" class="pick-a-color form-control">
<input type="text" value="aaa" name="font-color" class="pick-a-color form-control">
<input type="text" value="551033" name="highlight-color" class="pick-a-color form-control">
<input type="text" value="eee" name="contrast-color" class="pick-a-color form-control">
<input type="text" class="pick-a-color form-control">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/tinycolor-0.9.14.min.js"></script>
<script src="js/pick-a-color-1.1.5.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".pick-a-color").pickAColor();
});
</script>
</body>
</html>
Each time a user chooses a new color (or enters one manually), there will be a change event on the input field.
Here's sample code for accessing the new color from a Pick-a-Color initialized with the ID border-color and the class pick-a-color:
$("#border-color input").on("change", function () {
console.log($(this).val());
});
If you'd like to change any of Pick-a-Color's options, specify your preferred settings like this:
$(".pick-a-color").pickAColor({
showSpectrum : true,
showSavedColors : true,
saveColorsPerElement : false,
fadeMenuToggle : true,
showHexInput : true,
showBasicColors : true,
allowBlank : false,
inlineDropdown : false
});
I've tested Pick-a-Color in these browsers:
Minor issues in these browsers are documented here.
The only major platform I haven't been able to test yet is Android. I'm working on it.
I highly recommend using the X-UA-COMPATIBLE tag in your html `
` to ensure that Internet Explorer 8 and higher use their own "Browser Mode" instead of switching to the Browser Mode of a previous version. It works like this:<meta http-equiv="x-ua-compatible" content="IE=10">
You must use a viewport tag in your html <head> for content to be displayed at the correct size in a mobile browser. It works like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dang.