Toolsfluent

Color Code Converter (HEX, RGB, HSL, HSV, CMYK)

Convert between HEX, RGB, HSL, HSV, and CMYK colour codes with live preview and one-click copy. Built for developers and designers, not image extraction.

Ad placeholder (ad-slot-header), replace with AdSense ins tag

The Toolsfluent Color Code Converter is a free, browser-based colour-format conversion utility for developers and designers who need to translate a colour between HEX, RGB, HSL, HSV, and CMYK formats. This is NOT an image-based colour picker (use Figma or a Chrome extension for that); it is a pure code-conversion tool for translating brand colours between systems. Type a HEX value directly, use the native colour swatch input, or drag the RGB sliders to dial in the exact shade. The tool instantly displays all five output formats — HEX (#RRGGBB), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)), HSV (hsv(h, s%, v%)), and CMYK (cmyk(c%, m%, y%, k%)) — each with a one-click copy button so you can paste straight into your CSS, design system tokens, print spec, or developer console. Useful for converting a brand HEX to RGB for a CSS variable, mapping an HSL value to its RGB equivalent for a Canvas API call, generating CMYK values for print collateral, or normalising colours from one design tool's format to another. All conversions run client-side; no upload, no signup, no data leaving your browser.

Color Picker
r59
g130
b246
HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSVhsv(217, 76%, 96%)
CMYKcmyk(76%, 47%, 0%, 4%)
Share:
Ad placeholder (ad-slot-content-bottom), replace with AdSense ins tag

How to use the Color Code Converter (HEX, RGB, HSL, HSV, CMYK)

  1. Pick a starting colour using the native colour swatch (click the colour-input box) or type a HEX value (#RRGGBB or shorthand #RGB) directly into the HEX input field.
  2. Fine-tune with the RGB sliders — drag the Red, Green, and Blue channels to dial in the exact shade. The live preview updates instantly.
  3. Read all five colour formats — HEX, RGB, HSL, HSV, CMYK — each shown with its standard CSS-syntax representation.
  4. Click the copy icon next to any format to copy that value to your clipboard. Paste directly into CSS, your design tool, or print spec.
  5. Iterate without losing your work — refining one channel does not reset the others; the tool keeps your colour state until you change it again.

Frequently Asked Questions

Discover more free tools

Toolsfluent has dozens of fast, privacy-friendly tools that work right in your browser. Explore by category to find what you need.

Browse all tools →