HEX, RGB, HSL, HSV, CMYK, LAB and XYZ on one screen.
Many people search this topic to understand the difference between HEX and RGB, when to use HSL, or why the same color appears in different notations across CSS, design tools and image editing software. This tool takes a color in any of those formats, HEX, RGB(A), HSL(A), HSV(A), CMYK, LAB, XYZ or a CSS name, and shows all the other representations synchronized at once, including the alpha transparency channel. Under the hood everything passes through RGB and uses reference formulas (EasyRGB and CSS Color 4), with LAB and XYZ adopting the standard D65 illuminant. HEX and RGB describe color through the red, green and blue channels; HSL and HSV reorganize that into hue and brightness; CMYK thinks in ink; and LAB/XYZ are perceptual, device-independent spaces. Knowing which format to use in each context avoids rework and explains why the same color can 'look' different between screen and print.
HEX and RGB describe color by the intensity of the red, green and blue channels, HEX in hexadecimal (#RRGGBB) and RGB in numbers from 0 to 255; they are the same information in different notations. HSL and HSV reorganize those channels into hue (0–360°) plus two measures: in HSL the third is lightness (the midpoint between the lightest and darkest), in HSV it is value (the channel's maximum brightness). That is why 'saturation 100%' means slightly different things in each model.
CMYK flips the logic for ink: cyan, magenta, yellow and black (key), with black computed as k = 1 − max(R,G,B). LAB and XYZ are device-independent spaces: XYZ is the CIE perceptual basis and LAB (here using the D65 illuminant) separates lightness (L) from two color axes (a and b), which makes it useful for measuring color difference closer to the human eye.
The blue #0EA5E9 becomes rgb(14, 165, 233), hsl(199, 89%, 48%) and hsv(199, 94%, 91%), the same tone in three arrangements. Notice that saturation differs between HSL (89%) and HSV (94%): that is not an error, it is each model's definition. The alpha channel shows up in the 'a' variants, like rgba(14, 165, 233, 0.5) for 50% opacity.
A HEX → HSL conversion step by step: for #0EA5E9 the normalized channels are R≈0.055, G≈0.647, B≈0.914; the largest is B and the smallest is R, so the hue sits around blue (~199°), lightness is the average of max and min (~48%), and saturation comes from the difference between them. That is exactly the calculation the tool runs and syncs across every field at once.
Use HEX for code and handoff (compact), HSL to generate themes and states by rotating hue and lightness, CMYK as a print reference and LAB when you need to compare colors perceptually. The alpha channel comes into play in overlays, shadows and interface states that need to let the background partly show through.
Not every conversion is perfect: RGB and CMYK cover different color gamuts, so a vibrant screen color may have no exact ink equivalent, and the rounding at each step (HEX is 8 bits per channel) can introduce small differences in a round trip. For high fidelity, treat converted values as a reference and validate on the final medium, a calibrated screen or a print proof.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/color-converter"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Color Converter"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
Yes. The idea is to show equivalent representations of the same color in different notations, making it easier to use the value across CSS, design systems, visual documentation and design-to-code workflows. You type in one format and get all the others synchronized at once, including HSV, CMYK, LAB and XYZ.
#0ea5e9#0ea5e9ffrgb(14, 165, 233)rgba(14, 165, 233, 1)hsl(199, 89%, 48%)hsla(199, 89%, 48%, 1)hsv(199, 94%, 91%)hsva(199, 94%, 91%, 1)cmyk(94%, 29%, 0%, 9%)lab(64.07, -11.09, -43.86)xyz(28.338, 32.883, 81.928)Conversion is purely mathematical and local. Nothing is sent to any server.