Nice Random Colors

Developer
Lukejacksonn
Size
3,005 Kb
Views
10,120
  1. Nice Random Colors Previews
  2. Nice Random Colors HTML Codes
  3. Nice Random Colors CSS Codes
  4. Nice Random Colors JS Codes

How do I make an nice random colors?

Generates a random hex color based on some min/max hsl values. Color generatror code from http://codepen.io/giana/pen/BoWoQR . What is a nice random colors? How do you make a nice random colors? This script and codes were developed by Lukejacksonn on 30 November 2022, Wednesday.

Nice Random Colors Previews
IQ Test

Nice Random Colors - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nice Random Colors</title> <link href='https://fonts.googleapis.com/css?family=Raleway:900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1></h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Nice Random Colors - Script Codes CSS Codes

html { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-family: 'Raleway', sans-serif; font-size: calc(30px + 5vw); text-shadow: 0.5vw 0.5vh rgba(0,0,0,0.25); width: 100%; height: 100%; color: #fff; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: background 1s; transition: background 1s;
}
h1 { display: block; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text;
}
button { position: absolute; bottom: 0; right: 0; border: 0; font-size: 16px; padding: 8px 12px; background: #fff; text-transform: uppercase; font-weight: bold; outline: none; cursor: pointer;
}

Nice Random Colors - Script Codes JS Codes

var config = { maxHue: 360, minSat: 50, maxSat: 85, minLight: 50, maxLight: 85, scaleLight: 15
};
var randomNum = function(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;
};
var Color = function(hue, sat, light) { this.hue = hue || randomNum(0, config.maxHue); // Remove ugly magenta hues if (this.hue > 288 && this.hue < 310) { this.hue = randomNum(310, 360); } else if (this.hue > 280 && this.hue < 288) { this.hue = randomNum(260, 280); } // Increase ranges for reds if (this.hue > 0 && this.hue < 90) { config.minSat = 75, config.minLight = 70, config.maxSat = 100, config.maxLight = 80 } this.sat = sat || randomNum(config.minSat, config.maxSat); this.light = light || randomNum(config.minLight, config.maxLight);
};
Color.prototype.hsl = function() { return 'hsl(' + this.hue + ', ' + this.sat + '%, ' + this.light + '%)';
};
Color.prototype.rgb = function() { var rgb = hsl2rgb(this.hue, this.sat, this.light); return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
};
Color.prototype.hex = function() { var rgb = hsl2rgb(this.hue, this.sat, this.light); var hex = rgbToHex([rgb.r, rgb.g, rgb.b]); return hex;
};
function hsl2rgb(h, s, l) { var m1, m2, hue; var r, g, b s /= 100; l /= 100; if (s == 0) r = g = b = (l * 255); else { if (l <= 0.5) m2 = l * (s + 1); else m2 = l + s - l * s; m1 = l * 2 - m2; hue = h / 360; r = Math.round(HueToRgb(m1, m2, hue + 1 / 3)); g = Math.round(HueToRgb(m1, m2, hue)); b = Math.round(HueToRgb(m1, m2, hue - 1 / 3)); } return { r: r, g: g, b: b };
}
function HueToRgb(m1, m2, hue) { var v; if (hue < 0) hue += 1; else if (hue > 1) hue -= 1; if (6 * hue < 1) v = m1 + (m2 - m1) * hue * 6; else if (2 * hue < 1) v = m2; else if (3 * hue < 2) v = m1 + (m2 - m1) * (2 / 3 - hue) * 6; else v = m1; return 255 * v;
}
var rgbToHex = function(rgb) { var hex = []; for (var j = 0; j < rgb.length; j++) { hex[j] = rgb[j].toString(16); if (hex[j].length < 2) { hex[j] = '0' + hex[j]; } } return '#' + hex.join('');
};
$('h1').click(function(e) { clearInterval(t); e.stopPropagation();
})
var randomizeColor = function () { var c = new Color();
$('body').css('background', c.hsl()) .find('h1').text(c.hex());
}
randomizeColor();
var t = setInterval(randomizeColor, 1000);
$('body').click(function() { clearInterval(t); randomizeColor();
});
Nice Random Colors - Script Codes
Nice Random Colors - Script Codes
Home Page Home
Developer Lukejacksonn
Username lukejacksonn
Uploaded November 30, 2022
Rating 3
Size 3,005 Kb
Views 10,120
Do you need developer help for Nice Random Colors?

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!

Lukejacksonn (lukejacksonn) Script Codes
Name
Responsive Slider
Inline Radio Buttons
Peeky Password
Favorite Heart
Actuate.js
Flex Gallery
Flex Fix
Flexbox Masonry
GreedyNav Update
Sliding Drawers
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!