Color Converter

Paste any color

Type or paste a color the way you have it: a hex code like #4a90d9, rgb(), hsl(), oklch(), a Display P3 value, or simply a name like "coral" or "sunflower". huebic works out what it is.

The little labels underneath tell you about the color at a glance: whether every screen can show it, how bright it is, and how readable it is against white and black. Hover over one (or tap it on a phone) for a short explanation.

One color, many languages

Each card is the same color written in a different system, a bit like the same sentence in different languages. Change any number on any card and all the others update straight away.

Click a card's title to get that format as ready-made code in the Code panel.

Which one do I need?

• HEX and RGB: the everyday web formats. Every tool understands them.
• HSL, HSB and HWB: easy to tweak by hand, for example "a bit lighter" or "less saturated".
• OKLCH and OKLab: the modern choice for CSS. Changing one number does what you expect, which makes them great for building palettes.
• CIELAB and LCh: what Photoshop and print workflows use.
• CMYK: for print (see below).
• XYZ and xyY: the scientific base the others are built on, used in lighting and color measurement.
• YCbCr: how video and JPEG photos store color, as brightness (Y) plus two color differences (Cb, Cr). Pick the standard (BT.601 for SD video and JPEG, BT.709 for HD, BT.2020 for 4K and HDR) and the range: video uses 16–235, JPEG the full 0–255.

Printing in CMYK

A screen makes color with light; a printer makes it with ink on paper, so not every screen color can be printed. huebic converts through a real printing profile, the same kind your print shop uses. Pick the one that matches your paper and press; the current standards are listed first, older ones at the bottom of the menu.

Your print shop sent its own profile? Choose Load your own .icc profile… at the end of the menu. huebic reads it in your browser (it's never uploaded), keeps it there under Your profiles, and every tool can use it: Convert, the Picker, Color Compare, the 3D and Chromaticity gamuts and Print Preview. Remove it with the × next to the menu.

The second menu chooses how colors the press can't reach are handled:

• Relative colorimetric keeps every color the press can print exactly as it is, and moves the ones it can't to the closest printable color. Use it for logos, brand colors and single colors you want to match. huebic adds black point compensation (BPC), as Photoshop does by default, so dark shadows don't turn into a flat black.
• Perceptual gently squeezes all colors together so they fit the press, keeping the differences between them. In-gamut colors shift a little too, but gradients and photos keep their detail instead of clumping at the edge of what the press can do.

For a color that prints fine, both give nearly the same numbers. The difference shows with bright, saturated screen colors, such as a vivid blue or green.

Got a brand or spot color as Lab values? Type it as lab(50 74 49). Colors outside what a screen can show go to CMYK straight from their Lab values, without being clipped to the screen first (the card says from Lab, not clipped). For spot inks the CMYK is always an approximation: a premixed ink can't always be matched with four.

Ink is the total amount of ink, which presses limit (often to around 300%). If you see Out of print gamut, the press can't reach that color; click the label to switch to the closest color it can print.

Code you can copy

The Code panel gives you a small, self-contained snippet for CSS, JavaScript or Python that turns sRGB into the chosen format. No libraries needed, and it's free to use in any project.

Show your work

Curious how the numbers are made, or checking your own code? The last panel walks through every step from screen color to CIELAB, with the actual numbers for your color and the standards each step comes from.