PK Systems
EN PT ES
Color tools

Color Converter

Convert between HEX, RGB, HSL, HSV and CMYK in real time. Pick a color or paste any value — every format updates as you type.

Color Converter

Tints and shades

About color models

Every format on this page describes the same color in a different language. HEX and RGB address the red, green and blue light channels of your screen directly — they are interchangeable. HSL and HSV reorganise that information into hue, saturation and a lightness or value axis, which feels more intuitive when you want to lighten, darken or rotate a hue. CMYK is the print model: cyan, magenta, yellow and key (black) inks subtract light from white paper, so the on-screen preview is only an approximation of how the color will print.

How to use this converter

Pick a color from the native picker, or type a value into any field — HEX accepts #RGB and #RRGGBB, RGB accepts rgb(r, g, b), and HSL accepts hsl(h, s%, l%). The other rows refresh instantly. Use the Copy button next to each format to send the value to your clipboard. The five swatches below the form preview the same hue at 10%, 30%, 50%, 70% and 90% lightness — click any of them to load that variant into the form.

Quick format reference

Use HEX in CSS, design tools and brand guidelines — it's the most compact written form. Use RGB when you need a transparent variant: switch to rgba(r, g, b, a) with an alpha between 0 and 1. Use HSL when building palettes by hand — keeping hue and saturation fixed and only changing lightness produces tints and shades that read as a coherent family. Use CMYK only when sending art to a print shop, and ask the printer for an exact spec — every printer profile shifts colors slightly.

Frequently asked questions

Is this conversion exact?
HEX, RGB, HSL and HSV all describe screen colors and round-trip without loss aside from the small rounding inherent to working in 8-bit channels. CMYK is an approximation: real print output depends on the printer's color profile, the paper, and the ink set, so use the CMYK output as a starting point and confirm with a proof.
What is the difference between HSL and HSV?
Both share the same hue and saturation axes, but the third axis differs. In HSL, lightness 0% is black and 100% is white, with the pure hue at 50%. In HSV, value 100% is the pure hue and 0% is black — there is no built-in path to white. HSL feels more natural for picking tints and shades; HSV feels more natural for picking how bright a hue should burn.
Why does my HEX look different in print?
Screens emit light additively (RGB), printers absorb light subtractively (CMYK). Vibrant blues, greens and oranges that exist easily on screen often fall outside the CMYK gamut. Always check a printed proof before signing off, and ask your printer whether they want CMYK or, ideally, a Pantone reference for brand colors.
Can I paste any CSS color string?
The HEX, RGB and HSL fields accept the most common CSS forms — #RGB, #RRGGBB, rgb(...), rgba(...), hsl(...), hsla(...). Named colors like tomato and modern oklch() values are not parsed yet — convert them in your browser's devtools first.
Are the converted values stored anywhere?
No. Conversion runs entirely in your browser; nothing is sent to a server, and the values are not saved between visits. Bookmark or copy any palette you want to keep.
Why are the tints based on HSL lightness?
Holding hue and saturation steady while sweeping HSL lightness produces a tonal scale that feels visually consistent — the kind of ramp you would build by hand for a UI palette. The five samples at 10%, 30%, 50%, 70% and 90% give you a quick spread from a deep shade to a near-white tint of the same color family.
CSS Gradient Generator Password Generator Age Calculator Earth Letters Text List Transformer Rule of Three Calculator