Color Converter

Convert any color between hex, RGB, HSL, HSV, and CMYK formats instantly.

color converter hex
Free Client-Side Private
🔒 This tool runs entirely in your browser — your files are never uploaded to any server.

Color Converter translates a single color into every common format at once. Type a value in hex, rgb(), hsl(), hsv(), or cmyk() — or pick a color visually — and all seven output fields update immediately. No Convert button, no page reload.

Tool interface

  • Color input — a color picker for visual selection and a text field that accepts any recognized format. Both stay in sync.
  • Opacity slider — adjusts the alpha channel (0–100%). The RGBA and HSLA outputs reflect the current opacity.
  • Output fields — seven read-only rows: Hex, RGB, RGBA, HSL, HSLA, HSV, and CMYK. Each has its own Copy button.
  • Copy all — copies every format at once as plain text, one per line, ready to paste into notes or a design file.
  • Clear resets everything to the default blue.

Tool description

Different contexts call for different color notations. CSS stylesheets typically use #hex or hsl(). Design tools like Figma and Sketch often display HSB (same as HSV). Print workflows use CMYK. Switching between them by hand means looking up formulas or juggling several single-purpose tools.

Color Converter handles all of it in one place. The text input is flexible: you can type #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), or cmyk(76%, 47%, 0%, 4%) and the tool will detect the format automatically and fill in all the others.

The opacity slider is independent of the input — it applies an alpha value on top of the parsed color. This lets you quickly explore how a color looks at different transparency levels without typing rgba() or hsla() by hand.

HSV (also called HSB) is not a standard CSS format but is widely used in design software. The converter includes it because it is often the starting point when picking colors in Figma, Photoshop, or similar tools.

How to use

  1. Type a color value into the text field in any supported format, or click the color swatch to use the visual picker.
  2. Adjust the Opacity slider if you need RGBA or HSLA values with transparency.
  3. Copy any individual format using its Copy button.
  4. Use Copy all to capture every format at once as a plain-text list.

FAQ

What formats can I type into the input field?

Hex (#rrggbb, #rgb, #rrggbbaa), rgb(), rgba(), hsl(), hsla(), hsv(), hsb(), and cmyk(). The # prefix is optional for hex values.

Why does the color picker not reflect opacity?

Browser native color inputs do not support an alpha channel. Opacity is controlled separately with the slider, and the alpha value appears only in the RGBA and HSLA output fields.

Is HSV the same as HSB?

Yes. HSV (Hue, Saturation, Value) and HSB (Hue, Saturation, Brightness) are two names for the same color model. Both are accepted as input.

How accurate is the CMYK output?

The CMYK values are converted mathematically from RGB. They represent a device-independent approximation and are suitable for reference and digital workflows. For physical print production, always verify colors through your printer's color profile.

Does this tool send data to a server?

No. All conversion happens locally in your browser using JavaScript. No color data is sent anywhere.

Report an issue