Color Picker & Palette Generator

• HSL Lightness is wrong. HSL says `hsl(60deg, 100%, 50%)` (yellow) and `hsl(240deg, 100%, 50%)` (blue) are both "L=50". They look nothing alike — yellow is bright, blue is dark. HSL's lightness is the average of RGB, not actual perceived brightness.
• OKLCH lightness is right. `oklch(60% 0.2 60)` (yellow) and `oklch(60% 0.2 240)` (blue) look equally light. Generating a 5-step "light to dark" scale in OKLCH produces evenly spaced perceptual steps; in HSL you get bunching and gaps.
• OKLCH hue is rotation-invariant. Rotating hue by 90° in OKLCH gives a usable, similarly-saturated color. In HSL, rotating from blue 240° to teal 180° gives a color with very different perceived saturation despite identical "S" value.
• OKLCH chroma is real saturation. The C value is how far from gray. In HSL, a "saturation=100%" yellow looks more "saturated" than a "saturation=100%" blue because of the perceptual mismatch.

• Complementary — base + hue rotated 180°. Maximum contrast. Used for accents, call-to-action buttons against neutral backgrounds.
• Analogous — base + two neighboring hues (±30°). Low contrast, harmonious. Used for gradients, calm backgrounds.
• Triadic — three hues equally spaced (120° apart). Vibrant, balanced. Used for illustrative palettes.
• Split-complementary — base + two hues flanking the complement (180° ± 30°). Softer than full complementary; vibrant but less harsh.
• Tetradic / square — four hues equally spaced (90°). Maximum variety; hard to balance — usually one hue dominates and the others are accents.
• Monochromatic — one hue, different lightness/chroma. Safe choice; can be visually flat without careful contrast steps.

sRGB (1996) is the historical standard color space — all modern monitors support it. Display P3 (Apple, 2015) covers ~25% more of the visible color gamut, supported by most iPhones, MacBooks, and modern non-budget displays. CSS `color(display-p3 r g b)` lets you specify a P3 color that gracefully clamps to sRGB on older displays.

When to use P3: for vivid reds and greens that look "muted" in sRGB. For brand colors that look fine in sRGB: stay with sRGB. The differences are subtle and easy to over-engineer.

• You are building a design system and need a perceptually-uniform color scale (50, 100, 200, ... 900) for each brand and neutral color.
• You inherited a palette in HEX and want to see OKLCH equivalents to spot the perceptual problems in the scale.
• You are picking accent colors for a new feature and want to compare options against your existing brand palette for harmony.
• You are checking that a color combination meets WCAG AA contrast for text — see the contrast value alongside the colors.

• It will not pick "the right brand colors" for you. Color choice is a brand and aesthetic decision. The tool helps you execute and verify; it does not decide the direction.
• It will not simulate every display calibration. Two monitors show the same OKLCH(60% 0.2 240) slightly differently. For color-critical work (print, photography), calibrate your monitor and proof on the target medium.
• It will not match Pantone or other print color systems exactly. RGB-to-CMYK conversion is involved and printer-specific; print designers use dedicated tools (Adobe, Pantone Connect).