HEX ⇄ RGB ⇄ HSL Color Converter with Picker
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.
FAQ
When should I use HEX, RGB, or HSL?
HEX is the most compact format and is widely used in CSS and design tools. RGB specifies the amount of red, green, and blue light directly, making it convenient for programming and image processing, while HSL expresses color as hue, saturation, and lightness, which is more intuitive for manual adjustment. The tool shows the same color in all three formats so you can copy whichever fits.
Are the colors I enter sent to a server?
No. All HEX/RGB/HSL conversion happens in your browser, and the colors you enter are never sent to a server or stored. You can safely work with unreleased brand colors.
Does it support alpha (transparency)?
Yes. When you set transparency with the alpha bar or slider, HEXA, RGBA, and HSLA formats appear alongside the standard formats. An alpha of 1 is fully opaque and 0 is fully transparent.
Can I type values directly into the fields?
Yes. You can type values straight into the HEX, RGB, or HSL inputs, and changing any one updates all other formats and the color picker in real time. You can also fine-tune individual channels with the sliders.
How do I control saturation and lightness in HSL?
In the picker panel the horizontal axis controls saturation and the vertical axis controls lightness; click or drag to adjust. Moving the hue bar changes only the hue, rotating through the color wheel while keeping saturation and lightness.