nwork

Color Converter

Convert colors between HEX, RGB, HSL, and CMYK instantly. Visual color picker included. Copy any format with one click.

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
CMYKcmyk(76%, 47%, 0%, 4%)

Adjust RGB

R59
G130
B246

Adjust HSL

H217°
S91%
L60%

How to Use

  1. 1

    Pick a color

    Use the color picker or type a HEX code directly into the input.

  2. 2

    View all formats

    HEX, RGB, HSL, and CMYK values are shown and updated instantly.

  3. 3

    Copy your format

    Click Copy next to any format to copy it to your clipboard.

How It Works

This tool converts a color between HEX, RGB, HSL, and CMYK simultaneously, with a visual picker — useful whenever a design tool or codebase needs a color in a specific format different from the one you have.

What each format is actually for

HEX (#RRGGBB) and RGB (red, green, blue values 0-255) are the two most common formats in web design and CSS. HSL (hue, saturation, lightness) is a more human-intuitive way to describe color — easier to reason about "a bit lighter" or "more saturated" than adjusting raw RGB values. CMYK (cyan, magenta, yellow, key/black) is used specifically for print — printers mix physical ink rather than emitting light, so print design software works in CMYK, not RGB-based formats.

Why RGB-to-CMYK conversion is approximate

RGB describes light (as emitted by a screen) while CMYK describes ink (as absorbed on paper) — these are different color models covering different physical ranges, so converting between them is always an approximation rather than an exact one-to-one mapping. For color-critical print work, always confirm final CMYK values with your printer rather than relying solely on a screen-based conversion.

Examples

Getting a CSS-ready HEX code

Picking a color visually and reading off its HEX value (e.g. #3B82F6) for direct use in a CSS stylesheet or design tool.

Preparing a color for print

Converting a brand's RGB/HEX color to its approximate CMYK equivalent before sending a print design file to a printer, understanding the final printed color may need minor adjustment.

Common Use Cases

  • Converting a design tool's color format to whatever format a codebase or CSS file requires
  • Getting an approximate CMYK equivalent before sending a design to print
  • Understanding or adjusting a color using HSL's more intuitive hue/saturation/lightness sliders

Tips

  • For anything web/screen-based (websites, apps, digital designs), stick to HEX or RGB — CMYK is only relevant once you're specifically preparing something for physical printing.
  • If exact color matching for print is important (e.g. matching a specific brand color), get a Pantone or CMYK value directly from your brand guidelines rather than relying purely on an RGB-to-CMYK conversion, since the conversion is approximate.

Frequently Asked Questions

Related Tools