Random Colors Generator

Generate beautiful random colors, explore harmonies, and build custom palettes. Learn color theory, accessibility, and psychology.

#4A6FA5
#4A6FA5
rgb(74, 111, 165)
hsl(216, 38%, 47%)
HEX RGB HSL

Palette Builder (click on swatch to copy HEX)

Contrast Checker

Black text (WCAG AA: ≥4.5, AAA: ≥7) ---
White text (WCAG AA: ≥4.5, AAA: ≥7) ---
Black text
White text

Understanding Color: Science, Models & Psychology

Color is the perception of different wavelengths of light by the human eye. In digital design, colors are represented using various models, each with its own strengths. Understanding these foundations helps you create harmonious, accessible, and emotionally resonant designs.

? The Visible Spectrum – Human eyes perceive wavelengths from ~380nm (violet) to ~700nm (red). Combinations of these wavelengths create the millions of colors we see.

Color Models & Spaces

RGB (Red, Green, Blue)

Additive model used in screens. Each channel ranges 0‑255. Combining all gives white.

CMYK (Cyan, Magenta, Yellow, Black)

Subtractive model for printing. Colors are subtracted from white light.

HSL (Hue, Saturation, Lightness)

Hue (0‑360°), Saturation (0‑100%), Lightness (0‑100%). Intuitive for designers.

HSV (Hue, Saturation, Value)

Similar to HSL but Value represents brightness without mixing with white.

Color Spaces define the gamut (range) of colors. Common spaces: sRGB (standard for web), Adobe RGB (wider gamut for print), and ProPhoto RGB (very wide for photography). Monitors can only display a subset of all visible colors.

Color Harmonies (Color Wheel)

  • Complementary: Opposite on wheel – high contrast (e.g., red & cyan).
  • Analogous: Adjacent colors – serene and cohesive (e.g., blue, blue‑green, green).
  • Triadic: Three evenly spaced – vibrant even with low saturation (e.g., red, yellow, blue).
  • Split‑Complementary: Base + two adjacent to complement – versatile.
  • Double Complementary (Tetradic): Two complementary pairs – rich but hard to balance.
  • Monochromatic: Variations of one hue – elegant and minimal.

Color Psychology & Emotion

Colors evoke emotional responses, often influenced by culture and context. Common associations in Western cultures:

❤️ Red – passion, energy, danger
? Blue – trust, calm, professionalism
? Green – nature, growth, health
? Yellow – optimism, warmth, caution
? Purple – royalty, luxury, spirituality
? Orange – creativity, enthusiasm
? Black – power, elegance, mystery
? White – purity, simplicity, cleanliness

Accessibility & Color Blindness

Approximately 8% of men and 0.5% of women have some form of color vision deficiency (CVD). The main types:

  • Protanopia: Reduced sensitivity to red light.
  • Deuteranopia: Reduced sensitivity to green light (most common).
  • Tritanopia: Reduced sensitivity to blue light (rare).

To ensure accessibility, never rely solely on color to convey information. Use patterns, labels, and sufficient contrast. Our contrast checker below follows WCAG 2.1 guidelines:

  • Normal text: contrast ratio ≥ 4.5:1 (AA) or 7:1 (AAA)
  • Large text: contrast ratio ≥ 3:1 (AA) or 4.5:1 (AAA)

The formula for luminance (Y) is defined by the ITU-R BT.709 standard, and contrast ratio = (L1 + 0.05) / (L2 + 0.05).

Frequently Asked Questions

We generate random integers for red, green, and blue (0‑255) using JavaScript's Math.random(). This yields any of the 16,777,216 possible colors in the sRGB space.

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) both describe colors based on hue. The key difference: in HSL, lightness ranges from black (0%) to white (100%); in HSV, value ranges from black (0%) to full brightness (100%) without mixing with white. HSV is often used in color pickers.

Monitors vary in calibration, gamut (color range), and panel technology (IPS, TN, OLED). For consistent design, use color‑managed workflows and target the sRGB color space, which is the web standard.

Browser developer tools often include a color vision deficiency simulator (e.g., Chrome DevTools -> Rendering -> Emulate vision deficiencies). You can also use online tools like Coblis or Color Oracle.

References:
- "Color Theory for Designers", Interaction Design Foundation.
- WCAG 2.1, W3C.
- MDN Web Docs: CSS <color> values.
- "Color Spaces" by Cambridge in Colour.