root@generate-random:~/colors/javascript$ _

Generate Random Colors in JavaScript - Hex, RGB & HSL

Complete code tutorial with examples and best practices

PHP

JavaScript

[ Code Example - Quick Summary ]

Language: JavaScript

What: Generate random colors in JavaScript using hex, RGB, and HSL formats for web applications, canvas drawing, and dynamic UI elements.

Try it: Use our interactive Colors generator or integrate this code into your JavaScript application.

Generate random colors in JavaScript using hex, RGB, and HSL formats for web applications, canvas drawing, and dynamic UI elements. Looking for other languages? Check our code examples in PHP , Python , Java , C# , C++ , Ruby and Go or use our interactive web generator.

JavaScript Code Example

// Generate Random Hex Color
function randomHexColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}

console.log('Hex Color:', randomHexColor());

// Generate Random RGB Color
function randomRgbColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r}, ${g}, ${b})`;
}

console.log('RGB Color:', randomRgbColor());

// Generate Random HSL Color
function randomHslColor() {
    const h = Math.floor(Math.random() * 361);  // 0-360
    const s = Math.floor(Math.random() * 101);  // 0-100
    const l = Math.floor(Math.random() * 101);  // 0-100
    return `hsl(${h}, ${s}%, ${l}%)`;
}

console.log('HSL Color:', randomHslColor());

// Generate Pastel Color
function randomPastelColor() {
    const h = Math.floor(Math.random() * 361);
    const s = Math.floor(Math.random() * 76) + 25;  // 25-100
    const l = Math.floor(Math.random() * 21) + 70;  // 70-90
    return `hsl(${h}, ${s}%, ${l}%)`;
}

console.log('Pastel Color:', randomPastelColor());

// Generate Array of Random Colors
function generateColorPalette(count) {
    return Array.from({ length: count }, () => randomHexColor());
}

console.log('Color Palette:', generateColorPalette(5));

// RGB to Hex Conversion
function rgbToHex(r, g, b) {
    return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
}

console.log('RGB to Hex:', rgbToHex(255, 99, 71));

[EXPLANATION]

JavaScript generates random colors using Math.random(). For hex colors, generate a random number up to 16777215 (0xFFFFFF), convert to base-16 with toString(16), and pad to 6 digits. RGB uses Math.floor(Math.random() * 256) for each channel (0-255). HSL uses hue (0-360), saturation (0-100%), and lightness (0-100%). The padStart() method ensures proper formatting with leading zeros. For pastel colors, restrict lightness to 70-90% range for softer tones.

Expected Output

Hex Color: #7b3f9e
RGB Color: rgb(189, 78, 42)
HSL Color: hsl(204, 67%, 53%)
Pastel Color: hsl(89, 56%, 81%)
Color Palette: [ '#2a9d8f', '#e76f51', '#f4a261', '#e9c46a', '#264653' ]
RGB to Hex: #ff6347