toolgarden.xyz
中文

Color Converter

Free online color format converter between HEX, RGB, HSL, HSV, CMYK with a live swatch preview

Color preview

Color formats

HEX#5a67d8
RGBrgb(90, 103, 216)
HSLhsl(234, 62%, 60%)
HSVhsv(234, 58%, 85%)
CMYKcmyk(58%, 52%, 0%, 15%)

About this tool

The same screen color can be described with HEX, RGB, or HSL. HEX is convenient in CSS, RGB exposes the red, green, and blue channels, and HSL makes coordinated hue, saturation, and lightness changes easier. Conversion changes the notation, not the intended color.

The tool parses a supported color value and produces equivalent formats for checking values across design files, stylesheets, and code tokens. Color conversion includes rounding, so a round trip may change a channel by one unit without producing a meaningful visual difference.

How to use it

  1. Enter a color

    Paste a supported HEX, RGB, or HSL value and confirm that the preview matches the intended color.

  2. Read an equivalent value

    Choose the target notation and check channel ranges, percentages, and whether alpha is retained.

  3. Use it in context

    Copy the result into CSS, a design token, or documentation and recheck contrast on the real background.

Input and output example

One colour in five notations. Note that HSL's L and HSV's V differ numerically, because they are defined differently.

HEX
#2563EB
Other formats
RGB   37, 99, 235
HSL   221, 83%, 53%
HSV   221, 84%, 92%
CMYK  84, 58, 0, 8

Supported range and limits

Supported formats
HEX, RGB, HSL, HSV and CMYK, with a live swatch preview
HSL vs HSV
The third component differs: L in HSL is lightness (100% is white), V in HSV is value (100% is the pure hue)
CMYK's limits
CMYK is a print space with no exact mapping to screen RGB. The result is a mathematical approximation, not a substitute for a proof
Alpha
The 8-digit HEX form carries an alpha channel, matching rgba and hsla
Colour gamut
Calculations assume sRGB; wide-gamut (P3) colours are compressed into the sRGB range
Common use
Reconciling colour values across design files, CSS, drawing software and print specifications

When you would use it

  • Design handoff

    Convert RGB values from a design application into the HEX or HSL notation used by the frontend.

  • Building a theme palette

    Adjust related shades in HSL, then export each color in the notation required by the project.

  • Generating tonal variants by lightness

    Convert a brand colour to HSL and change only the lightness to get a consistent set of lighter and darker variants for hover and disabled states.

What to know before you start

  • Numeric conversion does not determine whether text and background colors meet accessibility contrast requirements.
  • For transparent colors, confirm that both the target notation and the destination support an alpha channel.
  • A short HEX value is equivalent to six-digit HEX only when each channel digit can be doubled.

Related concepts

RGB
An additive model that combines red, green, and blue light channels.
HSL
A model organized by hue, saturation, and lightness, useful for constructing systematic shade ramps.

Frequently asked questions

Which color formats can it convert between?
It converts between HEX, RGB, HSL, HSV and CMYK; enter any one and the others update instantly.
Can I preview the color live?
Yes. A swatch preview updates as you convert so you can confirm the final color at a glance.
Is the CMYK conversion accurate?
CMYK uses a common approximate formula that is fine for previews; for exact print values rely on professional color management.
HSL or HSV?
Use HSL for adjusting shade and building same-hue variants; its L reaching 100% gives white, which matches the intuition of "lighter". Use HSV when reading from a picker or building a colour-selection UI; its V reaching 100% gives the pure hue, matching "brighter".
Can I send the converted CMYK straight to a printer?
Not directly. There is no exact mathematical mapping between CMYK and screen RGB, and the real result depends on the paper, ink and device colour profile. Use the numbers as a starting point for the conversation and defer to a physical proof.

Related tools