Color Picker

This tool lets you pick a color via the native color input, a hex field, RGB sliders, or HSL sliders, and shows six ready-to-copy formats. A 23-swatch quick palette (Tailwind-derived reds, oranges, greens, blues, violets, pinks, and a grayscale ramp) gives fast starting points. All conversions between HEX, RGB, and HSL are computed locally.

1. Use the native color picker, type a hex, or click a palette swatch to set the base color. 2. Fine-tune with the R/G/B sliders (0-255) and numeric inputs. 3. Or adjust H (0-360), S, and L (0-100) sliders; values recompute the hex. 4. Copy any format from the Color Formats card: HEX, RGB, RGBA, HSL, raw RGB triple, or a CSS custom property line.

HEX is shown as typed (e.g. #3b82f6). RGB is `rgb(r, g, b)`; RGBA is always emitted with alpha 1 (`rgba(r, g, b, 1)`). HSL is `hsl(h, s%, l%)`. Raw RGB is the comma-separated triple. The CSS format is `--color: #hex;`. RGB-to-HSL and HSL-to-RGB conversions use the standard formulas; an invalid hex falls back to black for the derived values.