Color Code Converter

How to Use

Use the color picker panel to visually select a color by clicking or dragging. The horizontal axis controls saturation and the vertical axis controls brightness. Use the hue bar to change the base color and the alpha bar to control transparency. You can also type values directly into the HEX, RGB, or HSL input fields, or adjust individual channels with the sliders. All inputs are bidirectional — changing any value updates all other formats in real time.

Color Formats

• HEX (#ff0000): Hexadecimal notation, the most common format in CSS. 6 digits represent red, green, and blue (2 digits each, 00-ff). HEXA adds 2 digits for alpha transparency.
• RGB (rgb(255, 0, 0)): Defines colors by mixing red, green, and blue light. Each channel ranges from 0 to 255. RGBA adds an alpha value from 0 (transparent) to 1 (opaque).
• HSL (hsl(0, 100%, 50%)): Specifies colors using hue (0-360°), saturation (0-100%), and lightness (0-100%). More intuitive for color adjustment — changing hue rotates through the color wheel, while saturation and lightness control vividness and brightness.

Alpha Channel (Transparency)

The alpha channel controls how transparent a color is. A value of 1 means fully opaque, and 0 means fully transparent. When alpha is set, the tool shows HEXA, RGBA, and HSLA formats alongside the standard formats. The checkerboard pattern in the preview indicates transparency.

Common Use Cases

• CSS styling: Copy HEX or RGB values directly into your stylesheets
• Design handoff: Convert between formats used by different design tools (Figma uses HEX, some tools prefer HSL)
• Accessibility: Adjust lightness in HSL to ensure sufficient contrast ratios
• Branding: Fine-tune exact brand colors with slider precision

Privacy

All conversion happens entirely in your browser. No data is sent to any server.