Utilities
Random color
Color and palette for a layout, wallpaper, or mood — with one click.
Aa On this background, white text is readable — contrast 5.7:1.
How to choose a color
A random color is not just inspiration. Sometimes you need a 'just different' shade to distinguish test data from live data, choose a background for a card, or see how a combination looks on a real layout. The generator produces an evenly random color from 16.7 million options and immediately shows it in three models.
Next comes the design: the same shade works differently as a background, an accent, and text. That’s why contrast is shown next to the color — you can immediately understand whether it is suitable for a caption.
HEX, RGB, and HSL — what is the difference
HEX and RGB describe the same thing: three channels — red, green, blue — each with 256 values. The only difference is in the notation: #7C3AED or rgb(124, 58, 237). This notation is convenient for code, but inconvenient for humans: it is not clear how to “shift” the hue without changing the brightness.
HSL breaks down color into hue (hue in a circle, 0–360°), saturation (saturation, 0–100%) and lightness (lightness, 0–100%). You can see the logic here: to get a complementary color, just rotate the hue 180°. This is why harmonies are considered in HSL and not RGB.
Harmonies and when to apply them
| Scheme | Hue shift | Where it fits |
|---|---|---|
| Complementary | 180° | button in the background, accent in a calm layout |
| Similar | ±30° | gradients, illustrations, smooth transitions |
| Triad | 120°, 240° | three categories of equal weight |
| Tetrad | 90°, 180°, 270° | rich diagrams, infographics |
The 60-30-10 rule helps prevent overloading a layout: sixty percent of the area is the main color, thirty is the supporting color, ten is the accent. Harmony comes from a set from which it is easy to choose these three roles.
Contrast and readability
Color brightness is calculated according to the WCAG formula: channels are converted to linear space, then summed with weights of 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The contrast of two colors is the ratio (L1 + 0,05) / (L2 + 0,05), where L1 is the brightness of the lighter one.
Threshold for regular text — 4,5 : 1 (level AA), for large text — 3:1. The generator immediately selects which text reads better: white or black, and shows the resulting ratio. If the value is below 4.5, the color is suitable for the background of the card, but not for a caption.
A separate nuance: contrast does not take into account color blindness and does not replace testing in the real interface. For important states, duplicate the color with an icon or text.
What to do with the finished palette
- copy the HEX values and paste them into the theme variables;
- Check the text contrast against each background, not just the main one;
- Do not use more than two saturated colors in one block;
- Save the successful set — it cannot be assembled again.