Loading Please Wait...
Colors play an important role in UX/UI, website design and development. This guide helps you to create color generator tool that generate colors in RGB, RGBA, HEX, HEXA, HSL, HSLA randomly and you can also generate by mixing values.
You can view and download source code from GitHub repository lynxsiaitsolutions/Color-Generator-in-HTML-CSS-JavaScript
Color Generator Output
Before proceeding further to code, let's understand some basic of these colors.
RGB colors represent Red, Blue, and Green colors whereas RGBA colors represent RGB with Alpha (Opacity).
Here red, green, and blue represent the intensity of the color ranging from 0 to 255.
Alpha ranges from 0.0 (fully transparent) to 1.0 (Not transparent at all).
Hence for RGB and RGBA colors, we need to generate a random number between 0 and 255. For Alpha, we need to generate a number between 0 and 1.0
0
0
0
0
0
0
1.0
HEX colors are represented by #rrggbb and HEXA colors are represented by #rrggbbaa. where rr = Red, gg = Green, bb = Blue, and aa = Alpha.
Here The value for rr, gg, and bb ranges from 00 to ff which hexadecimal representation of numbers from 0 to 255 (just like RGB colors).
Hence for HEX and HEXA colors, we need to generate a random number between 0 and 255. Then convert the generated number into hexadecimal number.
aa ranges from 00 = 0% (fully transparent) to ff = 100% (Not transparent at all). We define an array containing alpha values for HEXA.
0
0
0
0
0
0
1.0
HSL colors represent Hue, Saturation, and Lightness whereas HSLA represent Hue, Saturation, Lightness, and Alpha (opacity).
Hue is the degree of the color wheel ranges from 0 to 360. Where 0 is red, 120 is green, and 240 is blue.
Saturation is the percentage value (normally shade of gray) where 0% means shades of gray and 100% means full color.
Lightness is the percentage value of light given to color where 0% means black and 100% means white.
Alpha ranges from 0.0 (fully transparent) to 1.0 (Not transparent at all).
So we to generate a number from 0 to 359 for hue, 1 to 100 for saturation & lightness and 0 to 1 for alpha.
0
0
0
0
0
0
1.0
<!--
Theme: Color Generator (HTML5, CSS3, JavaScript)
Author: Lynxsia IT Solutions
Website: www.lynxsia.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Color Generator HTML5, CSS3, JavaScript - Lynxsia IT Solutions</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Style -->
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- RGB Color -->
<div class="container">
<h2 class="mb-1">RGB Color</h2>
<div class="wrapper">
<div class="result" id="rgbColor">rgb(0, 0, 0)</div>
</div>
<div class="wrapper mb-1">
<div class="content text-center">
<label for="rgbRed">Red</label>
<input class="form-range red rgbInput" type="range" id="rgbRed" min="0" max="255" value="0">
<p id="rgbRedValue">0</p>
</div>
<div class="content text-center">
<label for="rgbGreen">Green</label>
<input class="form-range green rgbInput" type="range" id="rgbGreen" min="0" max="255" value="0">
<p id="rgbGreenValue">0</p>
</div>
<div class="content text-center">
<label for="rgbBlue">Blue</label>
<input class="form-range rgbInput" type="range" id="rgbBlue" min="0" max="255" value="0">
<p id="rgbBlueValue">0</p>
</div>
</div>
<div class="wrapper">
<button type="button" class="btn" id="randomRGBBtn">Random RGB</button>
</div>
</div>
<!-- RGBA Color -->
<div class="container">
<h2 class="mb-1">RGBA Color</h2>
<div class="wrapper">
<div class="result" id="rgbaColor">rgba(0, 0, 0, 1.0)</div>
</div>
<div class="wrapper mb-1">
<div class="content text-center">
<label for="rgbaRed">Red</label>
<input class="form-range red rgbaInput" type="range" id="rgbaRed" min="0" max="255" value="0">
<p id="rgbaRedValue">0</p>
</div>
<div class="content text-center">
<label for="rgbaGreen">Green</label>
<input class="form-range green rgbaInput" type="range" id="rgbaGreen" min="0" max="255" value="0">
<p id="rgbaGreenValue">0</p>
</div>
<div class="content text-center">
<label for="rgbaBlue">Blue</label>
<input class="form-range rgbaInput" type="range" id="rgbaBlue" min="0" max="255" value="0">
<p id="rgbaBlueValue">0</p>
</div>
<div class="content text-center">
<label for="rgbaAlpha">Alpha</label>
<input class="form-range rgbaInput" type="range" id="rgbaAlpha" min="0" max="10" value="10">
<p id="rgbaAlphaValue">1.0</p>
</div>
</div>
<div class="wrapper">
<button type="button" class="btn" id="randomRGBABtn">Random RGBA</button>
</div>
</div>
<!-- Hex Color -->
<div class="container">
<h2 class="mb-1">HEX Color</h2>
<div class="wrapper">
<div class="result" id="hexColor">#000000</div>
</div>
<div class="wrapper mb-1">
<div class="content text-center">
<label for="hexRed">Red</label>
<input class="form-range red hexInput" type="range" id="hexRed" min="0" max="255" value="0">
<p id="hexRedValue">00</p>
</div>
<div class="content text-center">
<label for="hexGreen">Green</label>
<input class="form-range green hexInput" type="range" id="hexGreen" min="0" max="255" value="0">
<p id="hexGreenValue">00</p>
</div>
<div class="content text-center">
<label for="hexBlue">Blue</label>
<input class="form-range hexInput" type="range" id="hexBlue" min="0" max="255" value="0">
<p id="hexBlueValue">00</p>
</div>
</div>
<div class="wrapper">
<button type="button" class="btn" id="randomHEXBtn">Random HEX</button>
</div>
</div>
<!-- Hex Alpha Color -->
<div class="container">
<h2 class="mb-1">HEXA Color</h2>
<div class="wrapper">
<div class="result" id="hexaColor">#00000000</div>
</div>
<div class="wrapper mb-1">
<div class="content text-center">
<label for="hexaRed">Red</label>
<input class="form-range red hexaInput" type="range" id="hexaRed" min="0" max="255" value="0">
<p id="hexaRedValue">00</p>
</div>
<div class="content text-center">
<label for="hexaGreen">Green</label>
<input class="form-range green hexaInput" type="range" id="hexaGreen" min="0" max="255" value="0">
<p id="hexaGreenValue">00</p>
</div>
<div class="content text-center">
<label for="hexaBlue">Blue</label>
<input class="form-range hexaInput" type="range" id="hexaBlue" min="0" max="255" value="0">
<p id="hexaBlueValue">00</p>
</div>
<div class="content text-center">
<label for="hexaAlpha">Alpha</label>
<input class="form-range hexaInput" type="range" id="hexaAlpha" min="0" max="100" value="100">
<p id="hexaAlphaValue">ff</p>
</div>
</div>
<div class="wrapper">
<button type="button" class="btn" id="randomHEXABtn">Random HEXA</button>
</div>
</div>
<!-- HSL Color -->
<div class="container">
<h2 class="mb-1">HSL Color</h2>
<div class="wrapper">
<div class="result" id="hslColor">hsl(0, 0%, 0%)</div>
</div>
<div class="wrapper mb-1">
<div class="content text-center">
<label for="hslHue">Hue</label>
<input class="form-range hslInput" type="range" id="hslHue" min="0" max="359" value="0">
<p id="hslHueValue">0</p>
</div>
<div class="content text-center">
<label for="hslSaturation">Saturation</label>
<input class="form-range hslInput" type="range" id="hslSaturation" min="0" max="100" value="0">
<p id="hslSaturationValue">0</p>
</div>
<div class="content text-center">
<label for="hslLightness">Lightness</label>
<input class="form-range hslInput" type="range" id="hslLightness" min="0" max="100" value="0">
<p id="hslLightnessValue">0</p>
</div>
</div>
<div class="wrapper">
<button type="button" class="btn" id="randomHSLBtn">Random HSL</button>
</div>
</div>
<!-- HSLA Color -->
<div class="container">
<h2 class="mb-1">HSLA Color</h2>
<div class="wrapper">
<div class="result" id="hslaColor">hsla(0, 0%, 0%, 1.0)</div>
</div>
<div class="wrapper mb-1">
<div class="content text-center">
<label for="hslaHue">Hue</label>
<input class="form-range hslaInput" type="range" id="hslaHue" min="0" max="359" value="0">
<p id="hslaHueValue">0</p>
</div>
<div class="content text-center">
<label for="hslaSaturation">Saturation</label>
<input class="form-range hslaInput" type="range" id="hslaSaturation" min="0" max="100" value="0">
<p id="hslaSaturationValue">0</p>
</div>
<div class="content text-center">
<label for="hslaLightness">Lightness</label>
<input class="form-range hslaInput" type="range" id="hslaLightness" min="0" max="100" value="0">
<p id="hslaLightnessValue">0</p>
</div>
<div class="content text-center">
<label for="hslaAlpha">Alpha</label>
<input class="form-range hslaInput" type="range" id="hslaAlpha" min="0" max="10" value="10">
<p id="hslaAlphaValue">1.0</p>
</div>
</div>
<div class="wrapper">
<button type="button" class="btn" id="randomHSLABtn">Random HSLA</button>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
/*
Theme: Color Generator (HTML5, CSS3, JavaScript)
Author: Lynxsia IT Solutions
Website: www.lynxsia.com
*/
/* Basic settings */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #ecf1f9;
color: #1a1e49;
overflow-x: hidden;
font-family: monospace, sans-serif;
}
/* main container style */
.container {
padding: 0.5rem;
width: 100%;
margin-bottom: 5rem;
}
/* main wrapper style for each block rgb, hex, hsl etc. */
/* We use flex layout */
.wrapper {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: space-evenly;
}
/* main content style like range */
.content {
flex: 1;
min-width: 150px;
width: 100%;
max-width: 300px;
}
/* Output Div style */
.result {
padding: 2rem 3rem;
margin-bottom: 1rem;
text-align: center;
background-color: rgb(0, 0, 0);
color: #ffffff;
width: 100%;
max-width: 400px;
border-radius: 0.25rem;
}
.text-center {
text-align: center;
}
.mb-1 {
margin-bottom: 1rem;
}
.btn {
padding: 0.5rem 1rem;
outline: none;
min-width: 10rem;
background-color: #2a317d;
color: #ecf1f9;
border: 0.12rem solid #2a317d;
box-shadow: 0 0 20px 0 rgba(26, 30, 73, 0.35);
border-radius: 0.25rem;
user-select: none;
cursor: pointer;
transition: 0.2s ease-in-out;
}
.btn:hover {
background-color: #1a1e49;
border-color: #1a1e49;
box-shadow: none;
transition: 0.2s ease-in-out;
}
.text-red {
color: #ec4f4f;
}
/* Form Range Custom design (You can ignore this if do not want custom range) */
/* Form Range sltyle for default(All) */
.form-range {
height: 20px;
-webkit-appearance: none; /* Hide/Remove default range input style */
margin: 1rem 0;
width: 100%;
background-color: transparent;
}
.form-range:focus {
outline: none;
}
/* Range Slide track style chrome */
.form-range::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
background: rgba(62, 153, 232, 0.3);
border-radius: 5px;
}
/* Range Slide track style when sliding chrome */
.form-range:focus::-webkit-slider-runnable-track {
background: rgba(62, 153, 232, 0.5);
}
/* Range Slide thumb style chrome */
.form-range::-webkit-slider-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: #3e99e8;
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
/* Range Slide thumb style when sliding chrome */
.form-range:focus::-webkit-slider-thumb {
background: #2b83cf;
box-shadow: 0 0 0 2px rgba(62, 153, 232, 0.8);
}
/* Range Slide track style firefox */
.form-range::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
background: rgba(62, 153, 232, 0.3);
border-radius: 5px;
}
/* Range Slide track style when sliding firefox */
.form-range:focus::-moz-range-track {
background: rgba(62, 153, 232, 0.5);
}
/* Range Slide thumb style firefox */
.form-range::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: #3e99e8;
cursor: pointer;
}
/* Range Slide thumb style when sliding firefox */
.form-range:focus::-moz-range-thumb {
background: #2b83cf;
box-shadow: 0 0 0 2px rgba(62, 153, 232, 0.8);
}
/* Range Slide track style explorer/Edge */
.form-range::-ms-track {
width: 100%;
height: 8px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
border-radius: 5px;
}
/* Range Slide track style explorer/Edge */
.form-range::-ms-fill-lower {
background: rgba(62, 153, 232, 0.3);
border-radius: 50%;
}
/* Range Slide track style explorer/Edge */
.form-range::-ms-fill-upper {
background: rgba(62, 153, 232, 0.3);
border-radius: 50%;
}
/* Range Slide thumb style explorer/Edge */
.form-range::-ms-thumb {
margin-top: 1px;
height: 16px;
width: 16px;
border-radius: 50%;
background: #3e99e8;
cursor: pointer;
}
/* Range Slide thumb style when sliding explorer/Edge */
.form-range:focus:-ms-thumb {
background: #2b83cf;
box-shadow: 0 0 0 2px rgba(62, 153, 232, 0.8);
}
/* Range Slide track style when sliding explorer/Edge */
.form-range:focus::-ms-fill-lower {
background: rgba(62, 153, 232, 0.5);
}
/* Range Slide track style when sliding explorer/Edge */
.form-range:focus::-ms-fill-upper {
background: rgba(62, 153, 232, 0.5);
}
/* Form Range sltyle for red range */
.form-range.red::-webkit-slider-runnable-track {
background: rgba(255, 80, 113, 0.3);
}
.form-range.red:focus::-webkit-slider-runnable-track {
background: rgba(255, 80, 113, 0.5);
}
.form-range.red::-webkit-slider-thumb {
background: #ff5071;
}
.form-range.red:focus::-webkit-slider-thumb {
background: #f6385b;
box-shadow: 0 0 0 2px rgba(255, 80, 113, 0.8);
}
.form-range.red::-moz-range-track {
background: rgba(255, 80, 113, 0.3);
}
.form-range.red:focus::-moz-range-track {
background: rgba(255, 80, 113, 0.5);
}
.form-range.red::-moz-range-thumb {
background: #ff5071;
}
.form-range.red:focus::-moz-range-thumb {
background: #f6385b;
box-shadow: 0 0 0 2px rgba(255, 80, 113, 0.8);
}
.form-range.red::-ms-fill-lower {
background: rgba(255, 80, 113, 0.3);
}
.form-range.red::-ms-fill-upper {
background: rgba(255, 80, 113, 0.3);
}
.form-range.red::-ms-thumb {
background: #ff5071;
}
.form-range.red:focus:-ms-thumb {
background: #f6385b;
box-shadow: 0 0 0 2px rgba(255, 80, 113, 0.8);
}
.form-range.red:focus::-ms-fill-lower {
background: rgba(255, 80, 113, 0.5);
}
.form-range.red:focus::-ms-fill-upper {
background: rgba(255, 80, 113, 0.5);
}
/* Form Range sltyle for green range */
.form-range.green::-webkit-slider-runnable-track {
background: rgba(30, 217, 170, 0.3);
}
.form-range.green:focus::-webkit-slider-runnable-track {
background: rgba(30, 217, 170, 0.5);
}
.form-range.green::-webkit-slider-thumb {
background: #1ed9aa;
}
.form-range.green:focus::-webkit-slider-thumb {
background: #0faa83;
box-shadow: 0 0 0 2px rgba(30, 217, 170, 0.8);
}
.form-range.green::-moz-range-track {
background: rgba(30, 217, 170, 0.3);
}
.form-range.green:focus::-moz-range-track {
background: rgba(30, 217, 170, 0.5);
}
.form-range.green::-moz-range-thumb {
background: #1ed9aa;
}
.form-range.green:focus::-moz-range-thumb {
background: #0faa83;
box-shadow: 0 0 0 2px rgba(30, 217, 170, 0.8);
}
.form-range.green::-ms-fill-lower {
background: rgba(30, 217, 170, 0.3);
}
.form-range.green::-ms-fill-upper {
background: rgba(30, 217, 170, 0.3);
}
.form-range.green::-ms-thumb {
background: #1ed9aa;
}
.form-range.green:focus:-ms-thumb {
background: #0faa83;
box-shadow: 0 0 0 2px rgba(30, 217, 170, 0.8);
}
.form-range.green:focus::-ms-fill-lower {
background: rgba(30, 217, 170, 0.5);
}
.form-range.green:focus::-ms-fill-upper {
background: rgba(30, 217, 170, 0.5);
}
/*
Theme: Color Generator (HTML5, CSS3, JavaScript)
Author: Lynxsia IT Solutions
Website: www.lynxsia.com
*/
// Global variable declaration
var round = Math.round, //Rounding numbers
random = Math.random, // Generating random numbers
colors = {}; // colors array
// Hex code for alpha transparency
const hexAlpha = {
100: "FF",
99: "FC",
98: "FA",
97: "F7",
96: "F5",
95: "F2",
94: "F0",
93: "ED",
92: "EB",
91: "E8",
90: "E6",
89: "E3",
88: "E0",
87: "DE",
86: "DB",
85: "D9",
84: "D6",
83: "D4",
82: "D1",
81: "CF",
80: "CC",
79: "C9",
78: "C7",
77: "C4",
76: "C2",
75: "BF",
74: "BD",
73: "BA",
72: "B8",
71: "B5",
70: "B3",
69: "B0",
68: "AD",
67: "AB",
66: "A8",
65: "A6",
64: "A3",
63: "A1",
62: "9E",
61: "9C",
60: "99",
59: "96",
58: "94",
57: "91",
56: "8F",
55: "8C",
54: "8A",
53: "87",
52: "85",
51: "82",
50: "80",
49: "7D",
48: "7A",
47: "78",
46: "75",
45: "73",
44: "70",
43: "6E",
42: "6B",
41: "69",
40: "66",
39: "63",
38: "61",
37: "5E",
36: "5C",
35: "59",
34: "57",
33: "54",
32: "52",
31: "4F",
30: "4D",
29: "4A",
28: "47",
27: "45",
26: "42",
25: "40",
24: "3D",
23: "3B",
22: "38",
21: "36",
20: "33",
19: "30",
18: "2E",
17: "2B",
16: "29",
15: "26",
14: "24",
13: "21",
12: "1F",
11: "1C",
10: "1A",
9: "17",
8: "14",
7: "12",
6: "0F",
5: "0D",
4: "0A",
3: "08",
2: "05",
1: "03",
0: "00",
};
//Generate red, green, blue, alpha values
function generateColor(type = null) {
// Check if HSL/HSLA color or not.
if (type === "hsl" || type == "hsla") {
colors = {
hue: round(random() * 359),
saturation: round(random() * 100),
lightness: round(random() * 100),
alpha: random().toFixed(1),
};
} else {
var alpha =
type === "hex" ? round(random() * 100) : random().toFixed(1);
colors = {
red: round(random() * 255),
green: round(random() * 255),
blue: round(random() * 255),
alpha: alpha,
};
}
return colors;
}
// Generate Contrast value for generated color so that text color can match the contrast of background color
function contrastColor(colors) {
return (colors.red * 299 + colors.green * 587 + colors.blue * 114) / 1000;
}
/*
====================================
====================================
============ RGB Color ============
====================================
====================================
*/
// Set the values for rgb color variables
function setRGBValues(colors) {
var color = `rgb(${colors.red}, ${colors.green}, ${colors.blue})`;
document.querySelector("#rgbColor").textContent = color;
document.querySelector("#rgbColor").style.backgroundColor = color;
document.querySelector("#rgbRed").value = colors.red;
document.querySelector("#rgbGreen").value = colors.green;
document.querySelector("#rgbBlue").value = colors.blue;
document.querySelector("#rgbRedValue").textContent = colors.red;
document.querySelector("#rgbGreenValue").textContent = colors.green;
document.querySelector("#rgbBlueValue").textContent = colors.blue;
var textColor = contrastColor(colors) >= 128 ? "#000" : "#fff";
document.querySelector("#rgbColor").style.color = textColor;
}
// Random RGB Button Click Event
document.querySelector("#randomRGBBtn").addEventListener("click", function () {
var colors = generateColor("rgb");
setRGBValues(colors);
});
// Red, Green, Blue Range Slider Change Event
document.querySelectorAll(".rgbInput").forEach(function (element) {
element.addEventListener("change", function () {
var colors = {
red: document.querySelector("#rgbRed").value,
green: document.querySelector("#rgbGreen").value,
blue: document.querySelector("#rgbBlue").value,
alpha: 1,
};
setRGBValues(colors);
});
});
/*
====================================
====================================
============ RGBA Color ============
====================================
====================================
*/
// Set the values for rgb color variables
function setRGBAValues(colors) {
var color = `rgba(${colors.red}, ${colors.green}, ${colors.blue}, ${colors.alpha})`;
document.querySelector("#rgbaColor").textContent = color;
document.querySelector("#rgbaColor").style.backgroundColor = color;
document.querySelector("#rgbaRed").value = colors.red;
document.querySelector("#rgbaGreen").value = colors.green;
document.querySelector("#rgbaBlue").value = colors.blue;
document.querySelector("#rgbaAlpha").value = colors.alpha * 10;
document.querySelector("#rgbaRedValue").textContent = colors.red;
document.querySelector("#rgbaGreenValue").textContent = colors.green;
document.querySelector("#rgbaBlueValue").textContent = colors.blue;
document.querySelector("#rgbaAlphaValue").textContent = colors.alpha;
var textColor = contrastColor(colors) >= 128 ? "#000" : "#fff";
document.querySelector("#rgbaColor").style.color = textColor;
}
// Random RGBA Button Click Event
document.querySelector("#randomRGBABtn").addEventListener("click", function () {
var colors = generateColor("rgb");
setRGBAValues(colors);
});
// RGBA Red, Green, Blue, Alpha Range Slider Change Event
document.querySelectorAll(".rgbaInput").forEach(function (element) {
element.addEventListener("change", function () {
var alpha = parseFloat(
document.querySelector("#rgbaAlpha").value / 10
).toFixed(1);
var colors = {
red: document.querySelector("#rgbaRed").value,
green: document.querySelector("#rgbaGreen").value,
blue: document.querySelector("#rgbaBlue").value,
alpha: alpha,
};
setRGBAValues(colors);
});
});
/*
====================================
====================================
============ HEX Color ============
====================================
====================================
*/
// Set the values for hex color variables
function setHEXValues(colors) {
var textColor = contrastColor(colors) >= 128 ? "#000" : "#fff";
document.querySelector("#hexRed").value = colors.red;
document.querySelector("#hexGreen").value = colors.green;
document.querySelector("#hexBlue").value = colors.blue;
colors.red = colors.red.toString(16);
colors.green = colors.green.toString(16);
colors.blue = colors.blue.toString(16);
colors.red = colors.red.length == 1 ? `0${colors.red}` : colors.red;
colors.green = colors.green.length == 1 ? `0${colors.green}` : colors.green;
colors.blue = colors.blue.length == 1 ? `0${colors.blue}` : colors.blue;
var color = `#${colors.red}${colors.green}${colors.blue}`;
document.querySelector("#hexColor").textContent = color;
document.querySelector("#hexColor").style.backgroundColor = color;
document.querySelector("#hexRedValue").textContent = colors.red;
document.querySelector("#hexGreenValue").textContent = colors.green;
document.querySelector("#hexBlueValue").textContent = colors.blue;
document.querySelector("#hexColor").style.color = textColor;
}
// Random HEX Button Click Event
document.querySelector("#randomHEXBtn").addEventListener("click", function () {
var colors = generateColor("hex");
setHEXValues(colors);
});
// HEX Red, Green, Blue Range Slider Change Event
document.querySelectorAll(".hexInput").forEach(function (element) {
element.addEventListener("change", function () {
var colors = {
red: parseInt(document.querySelector("#hexRed").value),
green: parseInt(document.querySelector("#hexGreen").value),
blue: parseInt(document.querySelector("#hexBlue").value),
alpha: 1,
};
setHEXValues(colors);
});
});
/*
====================================
====================================
============ HEX Alpha Color ============
====================================
====================================
*/
// Set the values for hex color variables
function setHEXAValues(colors) {
var textColor = contrastColor(colors) >= 128 ? "#000" : "#fff";
document.querySelector("#hexaRed").value = colors.red;
document.querySelector("#hexaGreen").value = colors.green;
document.querySelector("#hexaBlue").value = colors.blue;
document.querySelector("#hexaAlpha").value = colors.alpha;
colors.red = colors.red.toString(16);
colors.green = colors.green.toString(16);
colors.blue = colors.blue.toString(16);
colors.alpha = hexAlpha[colors.alpha];
colors.red = colors.red.length == 1 ? `0${colors.red}` : colors.red;
colors.green = colors.green.length == 1 ? `0${colors.green}` : colors.green;
colors.blue = colors.blue.length == 1 ? `0${colors.blue}` : colors.blue;
var color = `#${colors.red}${colors.green}${colors.blue}${colors.alpha}`;
document.querySelector("#hexaColor").textContent = color;
document.querySelector("#hexaColor").style.backgroundColor = color;
document.querySelector("#hexaRedValue").textContent = colors.red;
document.querySelector("#hexaGreenValue").textContent = colors.green;
document.querySelector("#hexaBlueValue").textContent = colors.blue;
document.querySelector("#hexaAlphaValue").textContent = colors.alpha;
document.querySelector("#hexaColor").style.color = textColor;
}
// Random HEX Button Click Event
document.querySelector("#randomHEXABtn").addEventListener("click", function () {
var colors = generateColor("hex");
setHEXAValues(colors);
});
// HEX Red, Green, Blue Range Slider Change Event
document.querySelectorAll(".hexaInput").forEach(function (element) {
element.addEventListener("change", function () {
var colors = {
red: parseInt(document.querySelector("#hexaRed").value),
green: parseInt(document.querySelector("#hexaGreen").value),
blue: parseInt(document.querySelector("#hexaBlue").value),
alpha: parseInt(document.querySelector("#hexaAlpha").value),
};
setHEXAValues(colors);
});
});
/*
====================================
====================================
============ HSL Color ============
====================================
====================================
*/
// Set the values for hsl color variables
function setHSLValues(colors) {
var color = `hsl(${colors.hue}, ${colors.saturation}%, ${colors.lightness}%)`;
document.querySelector("#hslColor").textContent = color;
document.querySelector("#hslColor").style.backgroundColor = color;
document.querySelector("#hslHue").value = colors.hue;
document.querySelector("#hslSaturation").value = colors.saturation;
document.querySelector("#hslLightness").value = colors.lightness;
document.querySelector("#hslHueValue").textContent = colors.hue;
document.querySelector("#hslSaturationValue").textContent =
colors.saturation;
document.querySelector("#hslLightnessValue").textContent = colors.lightness;
var textColor = contrastColor(colors) >= 128 ? "#000" : "#fff";
document.querySelector("#hslColor").style.color = textColor;
}
// Random HSL Button Click Event
document.querySelector("#randomHSLBtn").addEventListener("click", function () {
var colors = generateColor("hsl");
setHSLValues(colors);
});
// Hue, Saturation, Lightness Range Slider Change Event
document.querySelectorAll(".hslInput").forEach(function (element) {
element.addEventListener("change", function () {
var colors = {
hue: document.querySelector("#hslHue").value,
saturation: document.querySelector("#hslSaturation").value,
lightness: document.querySelector("#hslLightness").value,
alpha: 1,
};
setHSLValues(colors);
});
});
/*
====================================
====================================
============ HSLA Color ============
====================================
====================================
*/
// Set the values for hsl color variables
function hslaSetValues(colors) {
var color = `hsla(${colors.hue}, ${colors.saturation}%, ${colors.lightness}%, ${colors.alpha})`;
document.querySelector("#hslaColor").textContent = color;
document.querySelector("#hslaColor").style.backgroundColor = color;
document.querySelector("#hslaHue").value = colors.hue;
document.querySelector("#hslaSaturation").value = colors.saturation;
document.querySelector("#hslaLightness").value = colors.lightness;
document.querySelector("#hslaAlpha").value = colors.alpha * 10;
document.querySelector("#hslaHueValue").textContent = colors.hue;
document.querySelector("#hslaSaturationValue").textContent =
colors.saturation;
document.querySelector("#hslaLightnessValue").textContent =
colors.lightness;
document.querySelector("#hslaAlphaValue").textContent = colors.alpha;
var textColor = contrastColor(colors) >= 128 ? "#000" : "#fff";
document.querySelector("#hslaColor").style.color = textColor;
}
// Random HSL Button Click Event
document.querySelector("#randomHSLABtn").addEventListener("click", function () {
var colors = generateColor("hsl");
hslaSetValues(colors);
});
// Hue, Saturation, Lightness Range Slider Change Event
document.querySelectorAll(".hslaInput").forEach(function (element) {
element.addEventListener("change", function () {
var alpha = parseFloat(
document.querySelector("#hslaAlpha").value / 10
).toFixed(1);
var colors = {
hue: document.querySelector("#hslaHue").value,
saturation: document.querySelector("#hslaSaturation").value,
lightness: document.querySelector("#hslaLightness").value,
alpha: alpha,
};
hslaSetValues(colors);
});
});
You can view and download source code from GitHub repository lynxsiaitsolutions/Color-Generator-in-HTML-CSS-JavaScript
How you feel about this blog:
Share this blog on:
If you find any error in the projects, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved