A Developer's Guide to the Color Picker & Converter

The Color Picker is an all-in-one utility for anyone working with colors on the web. It's more than just a picker; it's a complete color workshop that helps you choose, convert, and test colors for your projects.

Features

Interactive Color Picker: Visually select a color from a hue and saturation map.
Multi-Format Conversion: Instantly see the selected color in HEX, RGB, and HSL formats. You can also type a value in any format to convert it to the others.
Copy-to-Clipboard: Each color format has a dedicated copy button for quick and easy use.
Color Harmonies: Automatically generate color palettes based on established harmony rules:
- Analogous: Colors that are next to each other on the color wheel.
- Complementary: Colors on opposite sides of the color wheel.
- Triadic: Three colors evenly spaced around the color wheel.
- And more!
CSS Palette Export: Copy an entire generated harmony palette as CSS custom properties with a single click.
WCAG Contrast Checker: Ensure your color choices are accessible. The built-in checker analyzes the contrast ratio between any two colors and tells you if they pass WCAG AA and AAA standards for normal and large text.

How to Use

Select a Base Color: Use the visual color picker or type a color value into any of the input fields (HEX, RGB, or HSL).
Get Conversions: The other input fields will update automatically with the converted values.
Generate Harmonies: Scroll down to the "Harmonies" section to see palettes based on your selected color. Click the "Copy CSS" button to grab the code for a palette.
Check Accessibility: Use the "WCAG Contrast Checker" at the bottom. Input your desired foreground (text) and background colors to see a live preview and a detailed report on their contrast ratio and compliance level.