Loading...
Generate random colors in hex, RGB, or HSL format
Random color generator creates random colors for design exploration, data visualization, testing, and placeholder content. Colors can be generated in various formats (HEX, RGB, HSL) with optional constraints like saturation and brightness ranges.
The generator produces random values for color components. Simple approach: random RGB 0-255 each. Better approach: random HSL with constrained S and L for more pleasing colors. Output in multiple formats for different use cases.
Pure random RGB often produces muddy colors. HSL-based generation gives better results: random H (0-360), S in pleasant range (50-90%), L in visible range (40-70%). Golden ratio hue spacing creates harmonious sequences.
Generate color palettes for inspiration.
Explore color options for a new brandAssign distinct colors to chart categories.
Fill UI mockups with varied colors.
Create algorithmic art with random colors.
// Simple random HEX
function randomHex() {
return '#' + Math.floor(Math.random() * 16777215)
.toString(16).padStart(6, '0');
}
// Better: constrained HSL for pleasant colors
function randomPleasantColor() {
const h = Math.floor(Math.random() * 360);
const s = Math.floor(Math.random() * 30) + 60; // 60-90%
const l = Math.floor(Math.random() * 30) + 40; // 40-70%
return `hsl(${h}, ${s}%, ${l}%)`;
}
// Distinct colors using golden angle
function distinctColors(count) {
const golden = 137.508;
return Array.from({length: count}, (_, i) => {
const h = (i * golden) % 360;
return `hsl(${h}, 70%, 55%)`;
});
}HSL-based generation gives better results. Golden angle spacing creates visually distinct sequences.
Use random color generation for design exploration, data visualization, testing, and generative art. Apply constraints for more usable results.
Pure random RGB creates uncoordinated colors. For palettes, use HSL: fix saturation and lightness, only vary hue. Or use golden ratio spacing for hue distribution.