Color Converter

Instructions on Use

This tool provides multiple ways to select and convert colors. All outputs update in real-time as you make changes.

1. Pick a Color: Use the color wheel to visually select a color. The color swatch below it will show the selected color with its current transparency.
2. Enter a Color Value: Type or paste any valid CSS color format (e.g., #ff8800, rgb(255, 100, 50), or hsl(30, 100%, 50%)) into the text field.
3. Adjust Transparency: Use the "Transparency (Alpha)" slider to change the opacity of the current color.

The converted values for HEX, RGB(A), and HSL(A) will be displayed in the output boxes. Click on any output box to copy its value to your clipboard.

See CSS Color Values for an overview of the various color value formats that can be used in CSS to define a color.