Random Color Generator
Generate a random HEX color, keep the palette swatches you like, and copy a two-color CSS linear gradient. Values are chosen in your browser after the page loads.
Press Space to regenerate the color, unlocked palette swatches, and the gradient.
Random color
Random palette
Five colors. Lock a swatch to keep it, then generate the rest again.
Random linear gradient
Two colors and one angle. Copy the CSS, or open it in the gradient generator to add stops.
Color tools
More free color tools
Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.
- Color Palette Generator
Generate harmonious palettes from one color — complementary, triadic, analogous, and more. CMYK values and print gamut warnings included.
- CSS Gradient Generator
Build linear, radial, and conic CSS gradients with live preview. Copy production-ready code instantly.
- WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA. Includes palette matrix mode and auto-fix suggestions.
- Tint & Shade Generator
Turn one brand color into a Tailwind-compatible 50–950 scale with WCAG contrast badges on every swatch.
- Palette from Image
Extract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
- Color Blindness Simulator
Preview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.
- Interactive Color Wheel
Drag to pick a hue and see complementary, triadic, and analogous harmonies live — with HEX, RGB, and CMYK values.
- Print Gamut Checker
See exactly how a screen color shifts when printed in CMYK. Side-by-side press preview with shift warnings.
- Compare Colors (Delta E)
Measure the perceptual difference between two colors with ΔE2000 — plus HEX, RGB, CMYK, and HSL values for both.
What to do with a random color
A random color is a starting point. Read the HEX, RGB, HSL, and CMYK values on this page, then decide whether the color is a button, a surface, or something you should discard. For the reasoning behind that review, read how to use random colors, palettes, and gradients.
Harmony rules live in the palette generator. A Tailwind-style ramp lives in the tint and shade generator. Screen notations are compared in HEX vs RGB vs HSL, and the difference between paint, light, and ink primaries is in primary colors.
FAQ
Frequently asked questions
Questions about this random color generator.
- What is a random color generator?
- A random color generator picks red, green, and blue channel values and shows them as a HEX code. This page also shows the same color as RGB, HSL, and CMYK, using the same conversion used by the other Color Mapper tools.
- Can I generate a palette instead of one color?
- Yes. The palette section shows five random colors. Lock a swatch to keep it, then generate again to replace only the unlocked colors. You can copy the five HEX values or a small CSS custom-property block.
- How do I copy the CSS gradient?
- The gradient section builds a two-color
linear-gradientand a copy button for thebackgrounddeclaration. For radial or conic gradients, or more than two stops, open the CSS gradient generator. - Does the space bar generate a new color?
- Yes. Press space to regenerate the single color, the unlocked palette swatches, and the gradient. Space is ignored while you are typing in a field.
- Why do only some colors link to a color page?
- Pages at
/color/HEXexist for colors in the named color index. When a result matches one of those colors, its HEX links there. Every result can still be copied as HEX, RGB, HSL, and CMYK.