Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Generate a random color with its hex, RGB, and HSL values.
Click Generate to create a random color.
This tool generates a random color and displays it in all 3 common CSS color formats -- hex, RGB, and HSL -- side by side with a visual swatch preview, useful for design inspiration or generating test/placeholder colors.
Click Generate for a new random color. The swatch, hex code, RGB values, and HSL values all update together.
Hex and RGB both describe the exact same color as red/green/blue channel intensities (hex in base-16, RGB in base-10, 0-255 each). HSL re-expresses the identical color as hue (0-360°), saturation, and lightness percentages -- often more intuitive for adjusting a color's shade or vibrancy directly.
For converting a specific color you already have between formats, most color-picker tools (like the existing image color picker) provide the reverse lookup.
Each click produces one color with three representations. The hex value is a hash sign followed by six lowercase digits, two each for red, green, and blue. The RGB tile shows those same three channels as decimal numbers from 0 to 255. The HSL tile converts the identical color into hue in degrees, saturation as a percentage, and lightness as a percentage, each rounded to a whole number. Because of that rounding, converting the HSL text back to a color may differ from the original by a hair; the hex and RGB values are the exact ones.
Imagine the generator produces the hypothetical value #3a7bd5. Its red channel is hex 3a, which is 58, green is 7b, which is 123, and blue is d5, which is 213, giving rgb(58, 123, 213). Blue is the largest channel and red the smallest, so the hue falls in the blue range of the wheel, roughly 215 degrees. Lightness is the average of the largest and smallest channels as a fraction, about 53 percent, and the saturation is fairly high at around 65 percent. Reading HSL this way tells you at a glance that the color is a mid-brightness, fairly vivid blue before you even see the swatch.
Copying places only the hex code on your clipboard, not the RGB or HSL text. If you need the other formats, select and copy them from the tiles directly.
It suits quick placeholder colors for mockups, seed data for a charting demo, or breaking out of a creative rut. When you need a specific color rather than a surprise, use a color picker instead.
Yes exactly -- hex is simply RGB's three 0-255 channel values written in base-16 instead of base-10, concatenated into one 6-digit code; both represent the identical color.
HSL makes it easy to adjust a color's lightness or saturation independently while keeping its hue constant -- something that's much harder to do intuitively by tweaking individual RGB channel values.
No -- each RGB channel is drawn uniformly and independently at random, so every one of the 16.7 million possible hex colors has an equal chance of appearing.
It can, but with about 16.7 million possibilities a repeat in normal use is very unlikely.
The tool rounds hue, saturation, and lightness to whole numbers, so converting back can be off by a small amount. The hex and RGB values are exact.
No. The generator outputs opaque colors only, so add an alpha value in your own CSS if you need it.
Reference: MDN Web Docs