Color Picker & Converter — HEX, RGB, HSL

Pick a color visually or convert between HEX, RGB, and HSL formats.

How It Works

  1. 1Pick a color using the swatch or enter a HEX, RGB, or HSL value.
  2. 2The other formats update automatically.
  3. 3Click any value to copy it to your clipboard.

About Color Picker & Converter

Working with colors in CSS, design tools, or brand guidelines? This tool provides a visual color picker with a gradient canvas where you can select any color by clicking or dragging, plus precise input fields for HEX, RGB, and HSL formats. All three formats update in real time as you adjust any value, making it easy to convert between color systems. Need the HEX code for an RGB color your designer specified? Just enter the RGB values and copy the HEX output. Working in HSL and need the RGB equivalent? Adjust the hue, saturation, and lightness sliders and read the RGB values instantly. Copy any format to your clipboard with one click, ready to paste into your CSS, design tool, or style guide. The tool includes a palette of recently used colors so you can quickly reference and reuse colors from your current session. Whether you are fine-tuning a website color scheme, converting colors between formats for documentation, or exploring color options for a design project, this tool handles it all.

From the blog

Frequently Asked Questions

What color formats are supported?

HEX (#RRGGBB), RGB (0-255 per channel), and HSL (hue 0-360°, saturation 0-100%, lightness 0-100%). All formats update in sync.

Why use HSL instead of HEX or RGB?

HSL separates hue from saturation and lightness, so you can dial in a tint or shade without re-mixing the entire color. Designers prefer it for building palettes, hover states, and accessible contrast pairs.

Can I copy the color in CSS-ready form?

Yes. Click any value to copy it to your clipboard exactly as it should appear in CSS — for example #56b8e6, rgb(86 184 230), or hsl(202 75% 62%).

Is my file uploaded to a server?

No. Transmute processes everything locally in your browser using JavaScript and the Canvas API. Your files never leave your device — there is no server, no upload, no cloud processing.

Related Tools

CSS Gradient Generator

Build CSS gradients visually — linear, radial, and conic. Drag color stops, fine-tune angles, and copy production-ready CSS in one click.

Box Shadow Generator

Build CSS box shadows visually with multiple stacked layers, inset toggle, and live preview. Copy production-ready CSS in one click.

Image Color Palette

Extract the dominant colors from any image using median-cut quantization. Get hex codes and download a palette for design or branding work.

QR Code Generator

Generate QR codes for URLs, Wi-Fi credentials, contact cards, and plain text. Customize colors and download as PNG or scalable SVG.