Random HEX Color Generator
Discover new colors instantly. Perfect for designers and developers seeking inspiration.
Advertisement
CSS Color Formats
CSS supports multiple color notations — HEX, RGB, HSL, and modern OKLCH. Each has strengths for different use cases: HEX for copying, HSL for human-readable adjustments, OKLCH for perceptually uniform color manipulation.
Format Comparison
- HEX —
#FF5733— 3 channels in base-16, most common in web - RGB —
rgb(255, 87, 51)— red/green/blue 0–255 - HSL —
hsl(11, 100%, 60%)— hue (0–360°), saturation, lightness - HWB —
hwb(11 0% 0%)— hue, whiteness, blackness - OKLCH —
oklch(0.65 0.2 24)— perceptually uniform, modern
Color Harmony Types
- Complementary — colors opposite on the wheel (high contrast)
- Analogous — adjacent colors (harmonious, low contrast)
- Triadic — three equally-spaced colors (vibrant)
- Split-complementary — safer alternative to complementary
Why use HSL instead of HEX for CSS variables?
HSL is much easier to adjust programmatically. To lighten a color: increase L. To desaturate: decrease S. With HEX, you'd need to recalculate all three channels. HSL variables like --brand-hue: 220 let you generate a full accessible palette by changing just one value.
What is WCAG color contrast ratio?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA). Large text needs 3:1. The contrast ratio compares the relative luminance of two colors. Many random color pairs will fail — always check contrast before using a color in text.
How do I generate a monochromatic palette?
Pick a base hue and saturation, then vary only the lightness. For example, with hsl(220, 70%, L): L=15% (darkest), 30%, 50% (base), 70%, 90% (lightest). This creates five harmonious tints and shades from a single color for use in design systems.