Color Picker & Converter

The tool converts between HEX (#RRGGBB), RGB, HSL, RGBA, and HSLA formats. Use the alpha slider to adjust transparency (0-100%), and the RGBA/HSLA outputs update automatically. You can input any format or use the visual color picker.

Yes. Paste or type a HEX code (with or without #), an RGB value, or an HSL value into the input field and all other formats update instantly.

Yes. Everything runs in your browser with no server dependencies.

RGB defines color by its red, green, and blue components -- natural for screens and code. HSL (Hue, Saturation, Lightness) is perceptually intuitive: hue is the color wheel angle, saturation is intensity, and lightness is brightness. HSL is better for creating color palettes and making systematic adjustments (e.g., "same color, 20% lighter").

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against its background. After picking your foreground and background colors, use a contrast checker (like WebAIM's tool) with the HEX or RGB values from this converter. Aim for AA or AAA compliance.

This tool converts between formats rather than generating palettes. To build a palette, take your base color in HSL, keep the hue fixed, and vary the lightness (e.g., 10%, 30%, 50%, 70%, 90%) for a monochromatic scale. Tools like Tailwind's color generator or Coolors.co can automate this process.

Yes. The visual color picker, alpha slider, and all input fields are responsive. You can pick colors and copy HEX, RGB, or HSL values on any phone or tablet.

Yes. All color conversions run entirely in your browser. No data is transmitted to any server — the tool works even offline.

Tailwind color classes (e.g., bg-blue-500) map to specific HEX values defined in the Tailwind config. Look up the color in the Tailwind docs, then paste the HEX value here to get RGB, HSL, and other formats. This tool does not parse Tailwind class names directly.

Alpha (opacity) ranges from 0 (fully transparent) to 1 (fully opaque). RGBA and HSLA formats include an alpha channel for transparency effects — useful for overlays, glass effects, shadows, and layered UI elements. Use the alpha slider to preview how your color looks at different opacity levels.

This tool does not extract colors from images. For that, use browser DevTools (eyedropper in Chrome/Firefox), macOS Digital Color Meter, or online tools like Coolors image picker. Once you have the HEX value, paste it here to convert to other formats.

The <a href="/ai/dev/regex">Regex Tester</a> helps validate color format patterns. The <a href="/ai/dev/json">JSON Formatter</a> is useful when working with design token files. The <a href="/ai/dev/case-converter">Case Converter</a> can transform CSS property names between camelCase and kebab-case.