Free Color Converter — Hex, RGB & HSL

Convert color codes between Hex, RGB, and HSL with an inline color preview. Useful for web design, CSS, brand assets, and accessibility-contrast checks.

Enter your details

3-digit (#FFF) or 6-digit (#FFFFFF) hex codes.

Result
Enter your details on the left, then press Calculate.

What is this calculator for?

Your client gave you a brand color in Pantone (PMS 2935), and you need it in hex for the website CSS, RGB for an Instagram post, and CMYK for the printer's quote. Or you're picking colors in Figma in RGB but your CSS wants hex. The color converter handles all major color systems: hex, RGB, HSL, HSV, CMYK, Pantone, and named colors. Use it for design work, branding consistency, and translating between print and screen.

Color systems. Hex: web standard, six digits (RR GG BB) representing 0-255 for each of red, green, blue. #FF0000 = pure red. RGB: same channels, decimal 0-255 each. rgb(255, 0, 0) = red. HSL: hue (0-360 degrees on color wheel), saturation (0-100%), lightness (0-100%). HSV: same hue, saturation, "value" (brightness). CMYK: cyan, magenta, yellow, black; subtractive (for print); 0-100% each. Pantone: proprietary system of pre-mixed inks; ~1,900 standard colors used in printing for guaranteed match across runs.

This calculator handles all conversions between systems. Note: Pantone is proprietary and trademark-protected; exact Pantone conversion to RGB/hex is approximate (different displays and print substrates render differently). For brand-critical color matching, always reference a physical Pantone book at the printer, not an on-screen approximation.

How to use this calculator

Enter a color in any system — hex (#RRGGBB), RGB (rgb(r,g,b)), HSL (hsl(h,s%,l%)), CMYK (cmyk(c%,m%,y%,k%)), or color name. The calculator returns equivalents in all other systems.

For color picking: use the visual color picker to select a color, then read its values in each system.

For brand color management: input the Pantone number, get the closest hex/RGB/CMYK equivalents. Save these values to a brand-color reference document used across all design work. Common gotcha: a color that looks right on your screen may print very differently — always proof-print before mass-production runs.

Understanding your results

The calculator returns all-system equivalents for the entered color: hex, RGB, HSL, HSV, CMYK, approximate Pantone, named color (if matches a standard name).

Common reference colors. White: #FFFFFF, rgb(255,255,255), hsl(0,0,100%), cmyk(0,0,0,0). Black: #000000, rgb(0,0,0), hsl(0,0,0%), cmyk(0,0,0,100). Pure red: #FF0000. Pure green: #00FF00. Pure blue: #0000FF. The "primary" colors of additive (RGB) systems aren't the same as primary colors of subtractive (CMYK) — RGB primaries are red/green/blue; CMYK primaries are cyan/magenta/yellow.

The screen-vs-print gap. RGB has a wider color gamut than CMYK — many vibrant colors visible on screen cannot be reproduced exactly in CMYK printing. Bright blues, vivid greens, and saturated oranges often lose intensity in printing. Pantone spot colors (printed with pre-mixed ink, not from CMYK plates) extend printing's gamut significantly. For brand work where exact color matters: use Pantone for printing; provide hex equivalents for digital with the understanding that there will be slight variation.

The accessibility consideration. Color blindness affects ~8% of men and 0.5% of women (most common: red-green color blindness). When designing with color: don't rely on color alone to convey information. Use sufficient contrast (WCAG AA requires 4.5:1 contrast ratio for normal text, 3:1 for large text). The WebAIM Contrast Checker is the standard tool. High contrast also helps low-vision users and sunlight glare scenarios.

A worked example

A web developer is building a marketing site for a client whose brand colors are PMS 2935 (a vivid blue) and PMS 1235 (a warm yellow). The client wants the site to match the print materials.

PMS 2935: closest hex equivalent is #0057B7 (sky-blue, vivid). RGB: rgb(0, 87, 183). CMYK: cmyk(100, 67, 0, 0). HSL: hsl(212, 100%, 36%).

PMS 1235: closest hex is #FCB827 (vivid yellow). RGB: rgb(252, 184, 39). CMYK: cmyk(0, 26, 89, 0). HSL: hsl(41, 97%, 57%).

She implements these on the site. Sends a proof to the client. Client says: "the blue looks slightly off — looks more navy than the print pieces." She checks: her monitor is uncalibrated; the actual #0057B7 appears more saturated and slightly different on her monitor than on print or other monitors. She uses ChromaCast or a Spyder calibration tool to calibrate her display; now the hex appears closer to the print color.

For absolute brand consistency: she provides the printer with PMS 2935 and PMS 1235 for any spot-color printing (logos on business cards, brochures, packaging). For digital (website, social, email): hex/RGB equivalents. For PowerPoint or Office docs: HEX entered in the color picker. The client's brand identity document now contains: "PMS 2935 / #0057B7 / RGB 0,87,183 / CMYK 100,67,0,0 — primary brand blue. PMS 1235 / #FCB827 / RGB 252,184,39 / CMYK 0,26,89,0 — secondary brand yellow." Single source of truth, consistent across all media.

Related resources

For broader unit conversion, see Unit Converter. For digital design measurements, the Aspect Ratio Calculator and Pixel Ruler. The WebAIM Contrast Checker verifies WCAG accessibility compliance; Pantone provides authoritative PMS color references; Coolors generates accessible color palettes for design work.

Related calculators

qr code generatorpassword generator

Frequently asked questions

What is a hex color code?

Hex color codes represent colors as 3 pairs of hexadecimal digits — one each for red, green, and blue. Each pair ranges 00 to FF (0 to 255 in decimal). #FFFFFF is pure white (max red + max green + max blue), #000000 is black (no light), #FF0000 is pure red. Short-form hex (#FFF) is shorthand: each digit is doubled. Used universally in CSS, design tools, and print spec sheets.

RGB vs CMYK — what's the difference?

RGB is additive (used for screens) — combining all three at full intensity makes white. CMYK is subtractive (used for printing) — combining cyan, magenta, yellow inks absorbs more light, with K (black) added for depth and to save ink. A color that looks vivid on screen often prints duller because CMYK can't reproduce all RGB colors. Always design with the destination medium's gamut in mind; convert and proof before final delivery.

How do I pick an accessible color combination?

WCAG 2.1 requires a 4.5:1 contrast ratio between text and background for normal text, 3:1 for large text (18pt+ or 14pt bold). Check pairs with WebAIM's contrast checker. Avoid relying on color alone to convey meaning — about 8% of men and 0.5% of women have some form of color vision deficiency. Pair color with icons, labels, or patterns to remain accessible.

What's the difference between RGB and CMYK?

RGB is additive — colors are made by adding red, green, blue light. Used for screens, where pixels emit colored light. Maximum brightness (255 each) = white. All zero = black. CMYK is subtractive — colors are made by subtracting light from white paper through cyan, magenta, yellow ink layers. Used for printing. Maximum each = nearly black (in theory; in practice 'rich black' uses K=100%). All zero = white (the paper). RGB has wider color gamut; some RGB colors cannot be reproduced in CMYK exactly. When designing: work in RGB for screen output, convert to CMYK only for print, expect some color shift in the conversion.

Why doesn't Pantone exactly match RGB?

Pantone is mixed ink colors; RGB is emitted light. The two systems represent color through fundamentally different physical mechanisms (reflected light from paper vs emitted light from screens). Many Pantone colors are 'spot' colors using pre-mixed inks that achieve colors impossible with standard CMYK process printing — and impossible to display exactly on RGB screens either. Pantone provides approximate RGB/CMYK equivalents in their bridge guides, but they're approximations. For brand-critical work where exact color matters: use Pantone for printed materials, accept that on-screen display will be close but not exact.

How do I make sure colors look the same on different screens?

You can't, fully. Different displays render colors slightly differently due to: display type (LCD vs OLED vs CRT), age and wear of the display, manufacturing variation, user settings (brightness, contrast, color temperature), ambient lighting. Calibration (with a Spyder or X-Rite tool) ensures your display renders accurately; other people's displays may not be calibrated. For mission-critical color work: design on a calibrated display in a controlled lighting environment, accept that audience displays vary, prioritize colors that maintain identity across the spectrum of display variability (avoiding very subtle distinctions).

What is hex code?

Hex (hexadecimal) is a base-16 number system using 0-9 and A-F. Hex color codes represent 0-255 RGB values in 2 hex digits each. #00 = 0, #FF = 255, #80 ≈ 128. Six-digit hex codes (#RRGGBB) encode each channel. #FF0000 = red (255,0,0). #00FF80 = teal-green (0,255,128). Three-digit shorthand (#RGB) doubles each digit — #F00 = #FF0000 (red), #08F = #0088FF (blue). Used in HTML/CSS for web design — every web developer recognizes hex codes; some can read them at a glance.

How do I pick accessible colors for my website?

Use a contrast checker. WebAIM's Contrast Checker (webaim.org/resources/contrastchecker) is the standard tool. WCAG AA: 4.5:1 contrast for normal text on background (e.g., #333333 on #FFFFFF passes; #777777 on #FFFFFF fails). 3:1 for large text. WCAG AAA (more accessible): 7:1 normal, 4.5:1 large. For colorblindness-friendly design: don't rely on color alone to convey information (e.g., 'error' messages should have icon AND red color; charts should use shape/pattern alongside color). Test designs in colorblindness simulators (Sim Daltonism, Coblis).

Sources