Color Palette Extractor

Paste any hex codes into the input field — comma-separated, space-separated, or raw text. The tool parses all #rrggbb and #rgb values, converts each to RGB and HSL, identifies approximate color names, and builds your palette. Click any swatch to copy its hex code instantly.

HSL (Hue, Saturation, Lightness) is a perceptual color model. Hue (0–360°) is the color family (red=0, green=120, blue=240). Saturation (0–100%) controls color intensity — 0% is gray, 100% is vivid. Lightness (0–100%) controls brightness — 0% is black, 50% is pure color, 100% is white. HSL is more intuitive for designers because you can adjust brightness and vibrancy independently.

Complementary colors are opposite on the color wheel (hue +180°) — high contrast, vibrant pairings ideal for CTAs and emphasis. Triadic colors are evenly spaced at 120° intervals — a balanced, vibrant trio used for playful, energetic designs. Analogous colors (adjacent, 30° apart) create harmonious, calm palettes common in nature-inspired designs.

Shades are generated by fixing the hue and saturation from your base color and cycling through lightness values (roughly 10%, 20%, 35%, 50%, 65%, 75%, 85%, 92%). This mirrors how design systems like Tailwind CSS create their color scales. The result gives you a full range from near-black to near-white using your brand's hue.

The CSS output generates a :root block with custom properties (CSS variables) for each color: --color-1, --color-2, etc. Copy it into your stylesheet and reference colors anywhere with var(--color-1). This makes it easy to build a consistent design token system from any palette.

Color names are approximations based on HSL ranges — useful as labels rather than exact matches. Black/white are detected by lightness, grays by low saturation, and named hue ranges identify reds, oranges, yellows, greens, cyans, blues, purples, and pinks. For precise color naming (e.g., 'Cobalt' vs 'Cerulean'), you would need a full color dictionary lookup.