handyman
Hazuu Tools

Color Converter

Convert colors between HEX, RGB, HSL, HSV, and CMYK

paletteColor Converter

#FF5733

tag

HEX

Hex Code
#
circle

RGB

R (0-255)
G (0-255)
B (0-255)
contrast

HSL

H (0-360)
S (0-100)
L (0-100)
brightness_6

HSV

H (0-360)
S (0-100)
V (0-100)
print

CMYK

C (0-100)
M (0-100)
Y (0-100)
K (0-100)
info

About Color Converter

Color Converter is a free online tool that translates a single color value across five formats simultaneously: HEX, RGB, HSL, HSV, and CMYK. Type or paste a value in any one field and every other format updates in real time. A large color swatch and a native browser color picker let you work visually without having to memorise any notation.

Unlike the sibling tools on this site — Hex to RGB, Hex to CMYK, and Hex to HSV — which each convert in one fixed direction from a single source format, Color Converter accepts any of the five formats as input. You can start from a CMYK value your printer gave you, an HSL function already in a CSS file, or an HSV reading from Photoshop, and immediately read all the other representations at once. That bidirectional, all-formats-at-once approach is what makes it the right choice when you are bridging multiple tools or contexts in the same session.

Every calculation runs entirely inside your browser. No color value is uploaded, logged, or transmitted to a server, which matters when you are working with proprietary brand palettes or client-provided hex codes. There is no account to create, no limit on how many conversions you run, and no cost.

star

Key Features

check_circle

Bidirectional input on all five formats

Edit any field — HEX, RGB, HSL, HSV, or CMYK — and the remaining four update instantly. You are never locked into a single source format.

check_circle

Visual color picker

The native browser color picker lets you point-and-click to choose a color. The swatch preview updates in sync so you always see the actual rendered color before you copy a value.

check_circle

Per-format copy buttons

Each section has its own copy button. Click once to put the correctly formatted string — such as hsl(214, 82%, 51%) or rgb(26, 115, 232) — straight on your clipboard.

check_circle

CMYK for print workflows

The CMYK section converts to and from screen color spaces, giving print designers a quick way to check approximate ink percentages without leaving the browser.

check_circle

HSL and HSV side by side

Both perceptual models are shown at the same time, making it easy to compare how a color looks under lightness-based (HSL, used in CSS) and value-based (HSV, used in design apps) representations.

check_circle

100% client-side and private

Conversion logic runs in JavaScript inside your browser. Brand hex codes, client palette values, and proprietary color tokens never leave your machine.

help

How to Use

01

Enter a Color Value

Type a color in any format — HEX, RGB, HSL, HSV, or CMYK — or use the visual color picker to select a color.

02

View All Formats

All color formats update instantly in real-time. See the color preview and equivalent values across all formats simultaneously.

03

Copy the Value You Need

Click the copy button next to any format to copy it to your clipboard, ready to paste into your code or design tool.

code_blocks

Example

Enter a HEX value and all other formats compute immediately. Here, Google Blue (#1A73E8) resolves across every color space at once.

HEX input
#1A73E8
All formats output
RGB:  rgb(26, 115, 232)
HSL:  hsl(214, 82%, 51%)
HSV:  hsv(214, 89%, 91%)
CMYK: cmyk(89%, 50%, 0%, 9%)
lightbulb

Common Use Cases

  • arrow_circle_right

    Translating a design-tool color to CSS

    Figma and Sketch often show HSB/HSV or hex values. Paste the hex from your design file and immediately read the hsl() or rgb() function you need in a CSS custom property or Tailwind config.

  • arrow_circle_right

    Converting a printer CMYK spec to a web color

    Print vendors supply CMYK ink percentages. Enter those values in the CMYK fields to find the closest on-screen hex or RGB equivalent for brand consistency across web and print.

  • arrow_circle_right

    Checking brand palette consistency across tools

    Different tools report the same color in different formats. Use this converter to verify that a Photoshop HSV reading, a CSS hsl() declaration, and an InDesign CMYK swatch all resolve to the same underlying color.

  • arrow_circle_right

    Building or auditing a design token file

    When documenting a design system, you may need every color expressed in multiple notations. Convert each brand color once and record all five values for your tokens JSON, SCSS variables, or style dictionary.

  • arrow_circle_right

    Learning how color models relate

    Students and developers exploring color theory can type a value, adjust individual channels, and watch how the same perceptual shift appears differently across HEX, HSL, HSV, and CMYK — all in one view.

quiz

Frequently Asked Questions

What is Color Converter? expand_more
Color Converter is a free online tool that converts colors between HEX, RGB, HSL, HSV, and CMYK formats. Enter a color in any format and instantly see the equivalent values in all other formats.
What color formats are supported? expand_more
The tool supports five color formats: HEX (e.g., #FF5733), RGB (Red, Green, Blue values 0-255), HSL (Hue, Saturation, Lightness), HSV (Hue, Saturation, Value), and CMYK (Cyan, Magenta, Yellow, Key/Black) for print.
What is the difference between HSL and HSV? expand_more
Both use Hue, but differ in how they describe brightness. HSL uses Lightness (0% is black, 100% is white, 50% is pure color). HSV uses Value (0% is black, 100% is the brightest version of the color). HSL is common in CSS, while HSV is used in many design tools.
Is this tool accurate for print colors (CMYK)? expand_more
The CMYK conversion provides a mathematical approximation. For professional print work, always verify colors with your printer, as screen-to-print color accuracy depends on many factors including color profiles and paper type.
How is Color Converter different from Hex to RGB, Hex to CMYK, or Hex to HSV? expand_more
The sibling tools each convert in one fixed direction starting from a HEX value. Color Converter accepts any of the five formats as input and outputs all five formats at once, so you can start from CMYK, HSL, HSV, or RGB just as easily as from HEX. Use the dedicated one-direction tools when you only need a single conversion and prefer a minimal UI; use Color Converter when you need to translate across multiple spaces in one session.
Can I input an RGB value instead of a HEX code? expand_more
Yes. Each format section has its own editable fields. Type directly into the R, G, and B number inputs and every other format — including HEX, HSL, HSV, and CMYK — recalculates immediately.
Does the color picker affect all the format fields? expand_more
Yes. When you choose a color with the native browser color picker, the RGB values are extracted from the result and every format is recomputed at once. The large swatch preview also updates to show the selected color.
Is my data sent to a server? expand_more
No. All conversion calculations run in JavaScript inside your browser tab. No color values, brand tokens, or palette data are uploaded or logged anywhere.