Color Converter Guide: HEX, RGB, HSL, HSB & CMYK Explained

Why Different Color Models Exist

Colors are represented differently depending on the medium:

• Screen/light: Additive color mixing (RGB) — red + green + blue = white
• Print/ink: Subtractive color mixing (CMYK) — inks absorb light
• Human intuition: HSL/HSB — describes colors by hue, saturation, lightness in terms we naturally think in

A color that looks perfect on screen may print completely differently — screens emit light while print reflects it.

HEX — Web Standard

Six-character hex strings representing RGB values:

#3b82f6 = R:59, G:130, B:246

color: #3b82f6;          /* Standard 6-character */
color: #38f;             /* 3-character shorthand (#3388ff) */
color: #3b82f6cc;        /* 8-character with alpha (CC = 80% opacity) */

HEX is the most common format in CSS and design tools. Compact, copy-paste friendly, and universally understood.

RGB — Additive Color Model

color: rgb(59, 130, 246);           /* 0–255 per channel */
color: rgba(59, 130, 246, 0.8);     /* With 0–1 alpha */

rgb(0, 0, 0) = black, rgb(255, 255, 255) = white.

Use RGB for: JavaScript color manipulation (canvas, WebGL, Three.js), CSS when computing dynamic values, color interpolation in animations.

HSL — Human-Friendly

color: hsl(217, 91%, 60%);
/* Hue: 217° (blue), Saturation: 91%, Lightness: 60% */

Why HSL is powerful for design systems:

/* Generate a full tonal scale by only changing lightness */
--primary-900: hsl(217, 91%, 20%);
--primary-700: hsl(217, 91%, 40%);
--primary-500: hsl(217, 91%, 60%);  /* Base */
--primary-300: hsl(217, 91%, 75%);
--primary-100: hsl(217, 91%, 92%);

Same hue and saturation, only lightness changes — coherent palette automatically. This is how Tailwind, Radix, and shadcn generate their color scales.

HSB / HSV — Design Tool Model

Used in Adobe Photoshop, Illustrator, Figma, Sketch:

HSB differs from HSL in how lightness and saturation interact. When you pick a color in Figma's color picker, you're using HSB. Our converter lets you copy those values and translate to CSS-compatible HSL or HEX for your code.

CMYK — Print Model

cmyk(16%, 49%, 4%, 4%)  ≈  rgb(59, 130, 246)

Cyan, Magenta, Yellow, Key (Black) — each 0–100%. Subtractive: inks absorb light.

Web vs print gap: RGB screens can display more saturated colors than CMYK printing produces. Bright blues, greens, and neons on screen often appear dull when printed. Use CMYK-verified color profiles for print work.

CSS doesn't support CMYK — convert to HEX/RGB for web use.

Converting for Different Contexts

After converting, verify color pairs meet accessibility standards with our Contrast Checker. Use our CSS Formatter to organize custom property declarations after building your palette, and our Gradient Generator to build smooth transitions between your converted colors.