COLOR PICKER

Developer
Ajala Comfort
Size
8,468 Kb
Views
6,072
  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?

Simple color picker built with reactjs. What is a color picker? How do you make a color picker? This script and codes were developed by Ajala Comfort on 11 January 2023, Wednesday.

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> <body>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

COLOR PICKER - Script Codes CSS Codes

@import "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css";
body{width:100%;height:720px;}
body > div{width:100%;height:720px;}
.colorSet{max-width:70%;min-height:100px;margin:auto;margin-top:50px;}
.colorSet > div{display:inline-block;}
.colors{min-width:50px;padding-top:1%;padding-left:10%;}
.colors > div{width:20px;height:20px;border-radius:50%;float:left;}
.selections{width:50px;height:20px;border-radius:10%;margin-left:10%;}
.helpers{width:100%;height:100px;margin-left:5%;}
.helpers p{}
.helpers > div{height:50px;width:50px;float:left;}
.tooltipped{width:100px !important;height:100px;position:absolute;}
.helpers span{ max-width:100px;position:absolute; background-color:white; margin-top:30px; border-radius:5px; padding:10px; font-weight:bolder;
}

COLOR PICKER - Script Codes JS Codes

"use strict";
var colors = { "aliceblue": "#F0F8FF", "antiquewhite": "#FAEBD7", "aquamarine": "#7FFFD4", "azure": "#F0FFFF", "beige": "#F5F5DC", "bisque": "#FFE4C4", "black": "#000000", "blanchedalmond": "#FFEBCD", "blue": "#0000FF", "blueviolet": "#8A2BE2", "brown": "#A52A2A", "burlywood": "#DEB887", "cadetblue": "#5F9EA0", "chartreuse": "#7FFF00", "chocolate": "#D2691E", "coral": "#FF7F50", "cornflowerblue": "#6495ED", "cornsilk": "#FFF8DC", "cyan": "#00FFFF", "darkgoldenrod": "#B8860B", "darkgreen": "#006400", "darkkhaki": "#BDB76B", "darkolivegreen": "#556B2F", "darkorange": "#FF8C00", "darkorchid": "#9932CC", "darksalmon": "#E9967A", "darkseagreen": "#8FBC8F", "darkslateblue": "#483D8B", "darkslategray": "#2F4F4F", "darkturquoise": "#00CED1", "darkviolet": "#9400D3", "deeppink": "#FF1493", "deepskyblue": "#00BFFF", "dimgray": "#696969", "dodgerblue": "#1E90FF", "firebrick": "#B22222", "floralwhite": "#FFFAF0", "forestgreen": "#228B22", "gainsboro": "#DCDCDC", "ghostwhite": "#F8F8FF", "gold": "#FFD700", "goldenrod": "#DAA520", "gray": "#808080", "green": "#008000", "greenyellow": "#ADFF2F", "honeydew": "#F0FFF0", "hotpink": "#FF69B4", "indianred": "#CD5C5C", "ivory": "#FFFFF0", "khaki": "#F0E68C", "lavender": "#E6E6FA", "lavenderblush": "#FFF0F5", "lawngreen": "#7CFC00", "lemonchiffon": "#FFFACD", "lightblue": "#ADD8E6", "lightcoral": "#F08080", "lightcyan": "#E0FFFF", "lightgoldenrod": "#EEDD82", "lightgoldenrodyellow": "#FAFAD2", "lightgray": "#D3D3D3", "lightpink": "#FFB6C1", "lightsalmon": "#FFA07A", "lightseagreen": "#20B2AA", "lightskyblue": "#87CEFA", "lightslate": "#8470FF", "lightslategray": "#778899", "lightsteelblue": "#B0C4DE", "lightyellow": "#FFFFE0", "limegreen": "#32CD32", "linen": "#FAF0E6", "magenta": "#FF00FF", "maroon": "#B03060", "mediumaquamarine": "#66CDAA", "mediumblue": "#0000CD", "mediumorchid": "#BA55D3", "mediumpurple": "#9370DB", "mediumseagreen": "#3CB371", "mediumslateblue": "#7B68EE", "mediumspringgreen": "#00FA9A", "mediumturquoise": "#48D1CC", "mediumviolet": "#C71585", "midnightblue": "#191970", "mintcream": "#F5FFFA", "mistyrose": "#FFE4E1", "moccasin": "#FFE4B5", "navajowhite": "#FFDEAD", "navy": "#000080", "oldlace": "#FDF5E6", "olivedrab": "#6B8E23", "orange": "#FFA500", "orangered": "#FF4500", "orchid": "#DA70D6", "palegoldenrod": "#EEE8AA", "palegreen": "#98FB98", "paleturquoise": "#AFEEEE", "palevioletred": "#DB7093", "papayawhip": "#FFEFD5", "peachpuff": "#FFDAB9", "peru": "#CD853F", "pink": "#FFC0CB", "plum": "#DDA0DD", "powderblue": "#B0E0E6", "purple": "#A020F0", "red": "#FF0000", "rosybrown": "#BC8F8F", "royalblue": "#4169E1", "saddlebrown": "#8B4513", "salmon": "#FA8072", "sandybrown": "#F4A460", "seagreen": "#2E8B57", "seashell": "#FFF5EE", "sienna": "#A0522D", "skyblue": "#87CEEB", "slateblue": "#6A5ACD", "slategray": "#708090", "snow": "#FFFAFA", "springgreen": "#00FF7F", "steelblue": "#4682B4", "tan": "#D2B48C", "thistle": "#D8BFD8", "tomato": "#FF6347", "turquoise": "#40E0D0", "violet": "#EE82EE", "violetred": "#D02090", "wheat": "#F5DEB3", "white": "#FFFFFF", "whitesmoke": "#F5F5F5", "yellow": "#FFFF00", "yellowgreen": "#9ACD32"
}; //source:https://gist.githubusercontent.com/azmfaridee/5995654/raw/6ade30cb7a6fbd9fd620e1235cf4c82196f9476b/colors.json
//JQUERY FOR HOVER EFFECT -->
$(document).ready(function () { $(".helpers span").hide(); //on hover $(".eachHelper").mouseover(function () { var spn = $(this).find("span"); var id = spn.attr("id"); $(spn).show(); }); $(".eachHelper").mouseout(function () { var spn = $(this).find("span"); var id = spn.attr("id"); $(spn).hide(); });
});
var Color = function Color(r, g, b) { this.r = r;this.g = g;this.b = b;
}; //ued to access the red g b values;
var ColorPickerProcessor = function ColorPickerProcessor() { this.getRGB = function (hex) { hex = hex.slice(1, hex.length); var expression = /.{1,2}/g; var splittingHEX = hex.match(expression); return new Color(parseInt(splittingHEX[0], 16), parseInt(splittingHEX[1], 16), parseInt(splittingHEX[2], 16)); //returns a color object }; var getGradient = function getGradient(color1, color2, percent) { var red = color1.r + parseInt(percent / 100 * (color2.r - color1.r)); var green = color1.g + parseInt(percent / 100 * (color2.g - color1.g)); var blue = color1.b + parseInt(percent / 100 * (color2.b - color1.b)); return toString(red, green, blue); }; // logic adapted from https://www.daniweb.com/digital-media/ui-ux-design/threads/161556/gradient-math-algorithm this.getArrayofGradient = function (color1, color2) { var percent = 0, gradient = []; function grady() { gradient.push(getGradient(color1, color2, percent)); return percent > 100 ? gradient : grady(percent += 10); } return grady(percent); }; this.shades = function (color) { var start = 1, shades = []; function shade() { shades.push(toString(parseInt(color.r * (1 - start)), parseInt(color.g * (1 - start)), parseInt(color.b * (1 - start)))); start -= 0.10; return start < 0 ? shades : shade(); } return shade(); }; var toString = function toString(red, green, blue) { return "rgb(" + red + "," + green + "," + blue + ")"; }; this.getHEX = function (rgb) { //adapted from http://stackoverflow.com/questions/13070054/convert-rgb-strings-to-hex-in-javascript //get array rgb = editRGBString(rgb); //change each value in the array var hexvalues = rgb.map(function (val) { val = parseInt(val).toString(16); return val.length <= 1 ? val + "0" : val; }); //join the values; return "0x" + hexvalues.join(""); }; var editRGBString = function editRGBString(str) { str = str.split("(")[1]; str = str.split(")")[0]; str = str.split(","); return str; };
};
var ColorPickers = React.createClass({ displayName: "ColorPickers", getInitialState: function getInitialState() { return { color1: "#9ACD32", color2: "#FFFFFF", processor: new ColorPickerProcessor(), gradient: [] }; }, sendColor: function sendColor(color, pick) { var st = this.state; if (pick == "color1") { st.color1 = colors[color]; } else { st.color2 = colors[color]; } st.gradient = this.gradientHelper(); st.shade1 = this.shadeHelper(st.color1); st.shade2 = this.shadeHelper(st.color2); return this.setState(st); }, gradientHelper: function gradientHelper() { var rgb1 = this.state.processor.getRGB(this.state.color1); var rgb2 = this.state.processor.getRGB(this.state.color2); return this.state.processor.getArrayofGradient(rgb1, rgb2); }, shadeHelper: function shadeHelper(color) { return this.state.processor.shades(this.state.processor.getRGB(color)); }, componentWillMount: function componentWillMount() { return this.setState({ gradient: this.gradientHelper(), shade1: this.shadeHelper(this.state.color1), shade2: this.shadeHelper(this.state.color2) }); }, render: function render() { var props = { sendColor: this.sendColor, color1: this.state.color1, color2: this.state.color2 }; return React.createElement( "div", null, React.createElement(ColorSets, props), React.createElement(Helper, { name: "Gradient", id: "gradientSpace", data: this.state.gradient, classes: "helpers", bubbleHex: this.state.processor.getHEX }), React.createElement(Helper, { name: "Shades: Color1", id: "shades", data: this.state.shade1, classes: "helpers", bubbleHex: this.state.processor.getHEX }), React.createElement(Helper, { name: "Shades: Color2", id: "shades", data: this.state.shade2, classes: "helpers", bubbleHex: this.state.processor.getHEX }) ); }
});
var ColorSets = React.createClass({ displayName: "ColorSets", render: function render() { return React.createElement( "div", { id: "colorSets" }, React.createElement( "div", { className: "colorSet card" }, React.createElement(ColorPicker, { colors: colors, id: "color1", sendColor: this.props.sendColor }), React.createElement(Selection, { id: "select1", color: this.props.color1 }) ), React.createElement( "div", { className: "colorSet card" }, React.createElement(ColorPicker, { colors: colors, id: "color2", sendColor: this.props.sendColor }), React.createElement(Selection, { id: "select2", color: this.props.color2 }) ) ); }
});
var ColorPicker = React.createClass({ displayName: "ColorPicker", render: function render() { var keys = Object.keys(this.props.colors); var colors = keys.map(function (colorName) { var style = { backgroundColor: this.props.colors[colorName] }; return React.createElement("div", { style: style, onClick: this.props.sendColor.bind(null, colorName, this.props.id) }); }.bind(this)); return React.createElement( "div", { id: this.props.id, className: "colors" }, colors ); }
});
var Selection = React.createClass({ displayName: "Selection", render: function render() { var style = { backgroundColor: this.props.color }; return React.createElement("div", { id: this.props.id, className: "selections", style: style }); }
});
var Helper = React.createClass({ displayName: "Helper", render: function render() { return React.createElement( "div", { id: this.props.id, className: this.props.classes }, React.createElement( "p", null, this.props.name ), this.props.data.map(function (color) { var style = { backgroundColor: color }; var hex = this.props.bubbleHex(color); return React.createElement( "div", { style: style, className: "eachHelper" }, React.createElement( "span", { id: hex }, hex ) ); }.bind(this)) ); }
});
ReactDOM.render(React.createElement(ColorPickers, null), document.body);
COLOR PICKER - Script Codes
COLOR PICKER - Script Codes
Home Page Home
Developer Ajala Comfort
Username AJALACOMFORT
Uploaded January 11, 2023
Rating 3
Size 8,468 Kb
Views 6,072
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!

Ajala Comfort (AJALACOMFORT) Script Codes
Name
Hashtables
My Porfolio
SVG Clock Practice
Palindrome Word
Recipe Book
Math using Stacks
Calender Update
Slide Show with ReactJs
Material Chat app Interface with ReactJS
Second Website
Create amazing web content 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!