Hex Color to RGB, RGBA, HSL & CMYK Converter
Convert web hex color codes (#3B82F6) into CSS rgb(), hsl(), and print-ready CMYK values with live alpha transparency sliders.
Hex Color Input
Visual Swatch & Alpha Preview
Converted Color Formats
rgb(59, 130, 246)rgba(59, 130, 246, 1.00)hsl(217, 91%, 60%)hsla(217, 91%, 60%, 1.00)cmyk(76%, 47%, 0%, 4%)hsv(217, 76%, 96%)rgb(59 130 246 / 100%)Developer Code Snippets
:root {
--brand-color: #3B82F6;
--brand-color-rgb: 59, 130, 246;
--brand-color-alpha: rgba(59, 130, 246, 1.00);
--brand-color-hsl: hsl(217, 91%, 60%);
}Color Harmonies & Palettes
Understanding Web Color Models: Hex, RGB, HSL & CMYK
Modern digital design and print workflows depend on specific color spaces. Whether building web interfaces in CSS, generating brand assets in Figma, or sending brochures to four-color commercial offset printing presses, understanding how these color representations map to one another ensures accurate visual fidelity.
Base-16 shorthand notation for 24-bit sRGB color. Each pair of characters represents 8 bits (00 to FF, corresponding to 0 to 255 in decimal) for red, green, and blue. Supports optional 8-digit alpha channel (#RRGGBBAA).
Additive color model used for computer monitors, mobile screens, and projectors. Combines red, green, and blue light photons. Full intensity (255, 255, 255) produces pure white, while zero intensity (0, 0, 0) produces pure pitch black.
Cylindrical coordinate representation designed around human perception. Hue is the color angle on a 360° circle, Saturation is color intensity (0% gray to 100% vivid), and Lightness measures perceived illumination (0% black to 100% white).
Subtractive color model used in standard printing processes. Physical paper reflects ambient light, and physical inks absorb (subtract) wavelengths: Cyan, Magenta, Yellow, and Key (Black).
Exact Mathematical Conversion Formulas
| Conversion | Formula / Logic | Example (#3B82F6) |
|---|---|---|
| Hex → RGB | R = parseInt(hex.slice(0, 2), 16), G = parseInt(hex.slice(2, 4), 16), B = parseInt(hex.slice(4, 6), 16) | rgb(59, 130, 246) |
| RGB → HSL | L = (max + min) / 2; S = delta / (1 - |2L - 1|); H = angle based on max channel | hsl(217, 91%, 60%) |
| RGB → CMYK | K = 1 - max(R', G', B'); C = (1 - R' - K) / (1 - K); M = (1 - G' - K) / (1 - K); Y = (1 - B' - K) / (1 - K) | cmyk(76%, 47%, 0%, 4%) |
| Alpha → Hex8 | AA = Math.round(alpha * 255).toString(16).padStart(2, "0") | #3B82F6FF (100% Opaque) |
Frequently Asked Questions (FAQ)
What is the difference between 6-digit (#RRGGBB) and 8-digit (#RRGGBBAA) hex codes?
A standard 6-digit hex code controls red, green, and blue channels with full 100% opacity. An 8-digit hex code introduces a fourth pair representing the alpha (transparency) channel, where 00 is completely transparent (0% opacity) and FF is completely opaque (100% opacity). Modern CSS and all major browsers natively support 8-digit hex codes.
Why do CMYK values look different when printed compared to on-screen RGB?
RGB is an additive color space capable of emitting bright neon, vivid saturated cyans, and intense greens directly via backlit LEDs. In contrast, CMYK is a subtractive color space where ink absorbs light reflected off paper. CMYK has a smaller color gamut than sRGB, which is why converting vivid RGB colors into print values often requires gamut mapping.
What is WCAG contrast ratio and why is 4.5:1 recommended?
The Web Content Accessibility Guidelines (WCAG 2.1) require a minimum contrast ratio of 4.5:1 for normal body text (Level AA) and 7:1 for Level AAA to ensure readability for users with low vision or color blindness. For large text (18pt+ or 14pt bold), the minimum ratio is 3:1. Our tool calculates these exact ratios in real time against both pure white and pure black.
Is any of my color data or telemetry sent to an external server?
No. In accordance with the ToolsAA Privacy First architecture, 100% of mathematical conversions, string parsing, and accessibility calculations occur locally in your browser. No network requests, analytics, or cookies are dispatched.