Free 100% In-Browser Tool

Random Color Generator: Hex, RGB, HSL & Palettes

Generate random colors and 5-swatch palettes with HEX, RGB, and HSL codes, with color-locking capabilities.

Quick Answer:Click 'New Palette' to randomize 5 color swatches. Click the lock icon on any color to keep it while generating new colors.

Initializing tool...

Privacy First: 100% Client-Side Processing

Processed in your browser. Files are never uploaded.

How to Use the Random Color Generator & Palette Builder

HEX = #RRGGBB | RGB = (r, g, b) | HSL = (h°, s%, l%)

Randomizes 24-bit sRGB color space (#000000 to #FFFFFF) and computes exact Hue, Saturation, and Lightness values.

Input: Random generation with 1 locked teal

Explanation: Preserves the locked teal while randomizing matching vibrant accents.

Result: Swatches: #2563EB, #0D9488 (locked), #F59E0B, #10B981, #6366F1

Input: #3B82F6

Explanation: Converts hex values into CSS-ready RGB and HSL formats.

Result: RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%)

Input: Generating new swatches

Explanation: Provides instant visual feedback for web design.

Result: Five randomized aesthetic tones with immediate contrast inspection

How do I lock a color?▼

Click the lock icon on the upper right of any color swatch. When locked, that color remains unchanged while the other swatches randomize.

How many possible HEX colors are there?▼

A 24-bit sRGB color space can generate 16,777,216 unique colors (256 × 256 × 256).

Can I copy the RGB and HSL values?▼

Yes, clicking the HEX code copies the color code, and the corresponding RGB and HSL formulas are displayed on each swatch.

What is the difference between tint, shade, and tone?▼

A tint is a color with white added. A shade is a color with black added. A tone is a color with gray added.

Is this tool free?▼

Yes, 100% free with instant client-side color generation.

Color Name	HEX Code	RGB Format	HSL Format
Toolzy Blue	#2563EB	rgb(37, 99, 235)	hsl(221, 83%, 53%)
Emerald Green	#10B981	rgb(16, 185, 129)	hsl(160, 84%, 39%)
Amber Gold	#F59E0B	rgb(245, 158, 11)	hsl(38, 92%, 50%)
Rose Red	#F43F5E	rgb(244, 63, 94)	hsl(350, 89%, 60%)
Slate Charcoal	#1E293B	rgb(30, 41, 59)	hsl(217, 33%, 17%)

•Choosing colors without testing text contrast ratios against WCAG accessibility standards.
•Forgetting to lock primary brand colors before generating new palette variations.
•Mixing too many competing saturated hues without neutral background tones.

✓HEX (#RRGGBB) is the compact 6-character hexadecimal format standard in web development.
✓RGB defines colors through Red, Green, and Blue light intensities from 0 to 255.
✓HSL represents Hue (angle 0–360°), Saturation (0–100%), and Lightness (0–100%), making it the most intuitive format for humans to adjust.

Last reviewed & updated: 2026-11-01

Free & Open Access

Related Utilities

Explore complementary calculators and converters with instant client-side execution