The Visible Color Spectrum & Chromatic Wheel Guide: Wavelengths (nm), RGB vs. CMYK & Hex Chart

Every color you see on a digital display—and every geometric relationship on modern chromatic wheels—originates from the continuous electromagnetic color spectrum between 380 nm (violet) and 750 nm (red). Understanding how physicists measure light wavelengths and how designers wrap that linear spectrum into a 360° color wheel unlocks mathematical precision in UI branding and gradients.

Visible Light Color Spectrum Chart (Wavelengths, Frequency & HEX Codes)

Note that pure monochromatic laser wavelengths lie slightly outside the standard digital sRGB gamut on the edges of cyan and deep violet. The chart below maps each classical spectral band to its nearest standard web HEX code:

How Chromatic Wheels Evolved from the Linear Color Spectrum

In 1704, Sir Isaac Newton observed in Opticks that passing sunlight through a glass prism splits white light into a straight ribbon—from high-frequency violet to low-frequency red. To help painters and scientists mix pigments, Newton took that straight line and bent it into the world's first closed chromatic wheel.

Why Purple and Magenta Do Not Appear as Single Wavelengths

Look closely at a physical rainbow or diffraction spectrum: you will never see a single laser wavelength for pure magenta (#FF00FF) or vibrant rose-purple. Those are extra-spectral (non-spectral) chromatic colors created purely by the human brain when both short-wavelength (blue) and long-wavelength (red) retinal cones fire simultaneously without green cone activation. Closing the linear spectrum into a 360° wheel stitches red (0°) to violet (270°) right through the magenta bridge (300°–330°).

Chromatic vs. Achromatic vs. Monochromatic Colors on the Color Wheel

• Chromatic Colors: Any hue on the chromatic wheel carrying non-zero chroma/saturation (e.g., Cobalt Blue, Crimson Red, Sun Yellow).
• Achromatic Colors: Colors with zero chromatic hue—pure white, pure black, and neutral grays. Explore all CSS grayscale definitions in our Gray vs. Grey & Shades of Gray Guide.
• Monochromatic Colors on the Color Wheel: A harmonic scheme derived from a single radial angle on the wheel by mixing pure white (tints), gray (tones), and black (shades). Build balanced 11-step monochromatic scales instantly in our Tint & Shade Generator or Tailwind Color Generator.

Spotlight: The Green Color Spectrum (495–570 nm)

Human daytime vision (photopic sensitivity) peaks sharply at 555 nm right in the middle of the green color spectrum, allowing our eyes to distinguish more shades of green than almost any other spectral region:

CSS Rainbow Gradient & Pastel Rainbow Color Palettes

Need a smooth full-spectrum rainbow gradient background or a soft pastel rainbow color palette for charts, SaaS banners, or pride visuals? Modern CSS Color 4 lets you sweep across the entire chromatic wheel in one line using hsl or perceptual oklch polar interpolation:

/* 1. Vibrant Full-Spectrum Rainbow CSS Gradient */
.rainbow-gradient {
  background: linear-gradient(90deg in oklch longer hue, #FF2A5F, #FF2A5F);
}

/* 2. Soft Pastel Rainbow Gradient Palette */
.pastel-rainbow {
  background: linear-gradient(90deg, #FFB3BA, #FFDFBA, #FFFFBA, #BAFFC9, #BAE1FF, #E0BBE4);
}

Explore Chromatic Tools & Color Science Guides

• Interactive Wheel & Pickers: Test complementary, triadic, and split-complementary angles live in Pikka's Interactive 360° Color Wheel Picker, or sample spectral hues in the Google Color Picker Studio.
• Chromatic Harmony Guides: Mastering Color Harmonies (10 Wheel Schemes) and Color Mixing Guide (RGB Additive vs. RYB Subtractive).
• Key Spectral Profiles: Crimson Red, Sun Yellow, Emerald Green, Cyan, Cobalt Blue, Indigo, and Magenta.