Color Converter

Color Converter - Convert Between Color Formats

A powerful color converter that converts between HEX, RGB, HSL, and CMYK color formats. Features a color picker with live preview, copy colors to clipboard, and color brightness detection. Perfect for web developers, designers, and anyone working with colors.

How do I convert HEX to RGB or RGB to HEX?

Paste a HEX value (with or without the leading #) into the HEX field, or type three numbers into the R, G, B fields, and every other format updates the instant your input is valid. The math is straightforward: HEX is just base-16 RGB, so #FF5733 splits into pairs FF/57/33 which equal 255/87/51 in decimal. Going the other way, each RGB channel divides by 16 to give one hex digit then the remainder gives the next; the tool handles both conversions and the 3-digit shorthand (#F57 expands to #FF5577). Use HEX when writing CSS by hand, RGB when manipulating colors in JavaScript or for the alpha channel (rgba(255,87,51,0.8) for 80% opacity, which HEX cannot express cleanly until you reach for the 8-digit #FF5733CC syntax).

When should I use HSL instead of HEX or RGB?

HSL is the format that maps to how human designers think about color: pick a hue from the rainbow, then choose how vivid (saturation) and how light (lightness) you want it. Use HSL when you need to derive variations of a single color — to make a hover state 10% darker, you keep the same H and S and drop L by 10%; the result is automatically the same hue. Doing this in HEX or RGB requires juggling all three channels and usually shifts the hue accidentally. HSL is also the backbone of design-system color ramps (Tailwind, Material, Radix), CSS custom properties for theming, and any animation that fades between related colors. Modern CSS even supports hsl() directly without conversion: color: hsl(9 100% 60%);.

Why do my CMYK values look duller than the RGB version on screen?

RGB is an additive color model used by light-emitting devices (monitors, phones, projectors), where adding all three channels at full strength produces pure white. CMYK is a subtractive model used by ink on paper, where adding all four inks subtracts light to produce near-black. The visible color spaces overlap but are not identical: a vivid screen blue or neon green cannot be reproduced by any combination of CMYK inks, so the mathematical conversion clips into the printable range and results look muted. This is fundamental physics, not a bug. For professional print work, design directly in CMYK from the start in software like Adobe InDesign or Affinity Publisher using an ICC color profile matched to your printer; never trust an automatic CMYK preview on screen as final.

How is color brightness calculated and why does it matter?

The Brightness value uses the YIQ / ITU-R BT.601 formula 0.299 × R + 0.587 × G + 0.114 × B applied to the raw (non-linearized) sRGB channels, weighting each by roughly how strongly the human eye responds to it. Green dominates because cone cells in the retina are most sensitive to mid-spectrum wavelengths; red is intermediate; blue contributes least. The result is a number from 0 (pure black) to 255 (pure white), and the tool uses the 128 cutoff as a fast light/dark heuristic for picking light or dark text.

Important: this YIQ brightness is NOT WCAG relative luminance. True WCAG 2.1 luminance first gamma-linearizes each channel and then weights them 0.2126 R + 0.7152 G + 0.0722 B; the contrast ratio derived from it is what actually governs accessibility compliance. That is why this tool now reports both — a quick YIQ brightness for a rough light/dark verdict, and a separate WCAG contrast ratio with AA / AA Large / AAA pass-fail badges for real accessibility checks.

What WCAG contrast ratios do I need to pass (AA vs AAA)?

WCAG 2.1 defines minimum contrast ratios between text (or UI elements) and their background, expressed as ratios from 1:1 (no contrast) to 21:1 (pure black on pure white):

- AA, normal text: 4.5:1 — the baseline most sites must meet for body copy under about 18pt (24px) regular or 14pt (18.66px) bold.
- AA, large text: 3:1 — applies to text at or above 18pt regular / 14pt bold, and also to graphical objects and active UI component boundaries (Success Criterion 1.4.11).
- AAA, normal text: 7:1 — the enhanced level for normal text; large text at AAA needs 4.5:1.

This tool computes the true WCAG relative luminance of your color, then its contrast ratio against both #FFFFFF and #000000, picks whichever text color gives more contrast, and shows AA / AA Large / AAA pass-or-fail badges. As a quick check: #767676 is the lightest gray that still hits 4.5:1 on white, while #777777 falls just short (about 4.48:1) and fails AA for body text even though it passes the 3:1 large-text threshold.

How do I keep colors usable for color-blind users?

About 8% of men and 0.5% of women have some color vision deficiency, most commonly red-green types: deuteranopia/deuteranomaly (reduced green perception) and protanopia/protanomaly (reduced red perception), with the rarer tritanopia affecting blue-yellow. The practical rules:

- Never rely on hue alone to convey meaning. Pair color with text labels, icons, patterns, or position — a red/green status dot is invisible to many users unless you also add a shape or word.
- Keep strong luminance contrast. Two colors that differ only in hue but not in lightness can collapse into the same gray for a color-blind viewer, so the WCAG contrast ratio shown here is your best safety net.
- Avoid problem pairings such as red-on-green, green-on-brown, and blue-on-purple for adjacent or overlapping elements.

Verify a HEX value here, confirm it meets the contrast threshold you need, then preview your full palette in a color-blindness simulator before shipping.

What is the difference between 3-digit and 6-digit HEX codes?

A 3-digit HEX like #F57 is shorthand for the 6-digit value #FF5577, with each digit doubled. This works because each pair of identical hex digits represents the same byte (FF = 255, 77 = 119), so the shorthand collapses repeating pairs into single digits. The shorthand only reaches 4,096 colors (16^3) versus the full 16.7 million available in 6-digit notation, so it is fine for solid web-safe primaries and pure greys (#000, #FFF, #888) but cannot represent most subtle brand colors. Use shorthand to keep small stylesheets compact and 6-digit notation everywhere else. CSS also accepts 4-digit shorthand (#F57C = #FF5577CC) and 8-digit notation (#FF5577CC) for colors with an alpha channel, though this tool focuses on opaque HEX/RGB/HSL/CMYK conversion.

Why does my exact brand HEX render slightly differently across devices?

Browsers render color in the sRGB color space by default, but the actual pixels you see depend on your monitor calibration, panel technology (IPS vs OLED vs older TN), brightness setting, ambient light, and whether the OS applies a wide-gamut profile like Display P3. Two monitors looking at the same #1A73E8 can show subtly different blues, and the same screen can shift across the day as warm-tone night modes kick in. For brand consistency, define color tokens once in HEX or HSL, document them with semantic names, and trust that the variation is bounded — sRGB still spans about 35% of the visible spectrum and is the universal lowest common denominator. For colors that must match across print and screen, use the CMYK output here as a starting point and run a press proof before committing.

Can I represent transparency or alpha channels in HEX?

Yes, modern browsers support 8-digit HEX (#RRGGBBAA) where the last two hex digits encode an alpha channel from 00 (fully transparent) to FF (fully opaque). For example #FF5733CC is the same color as #FF5733 at about 80% opacity (CC = 204 / 255). The 4-digit shorthand #F57C expands the same way. However, the older rgba() syntax (rgba(255, 87, 51, 0.8)) remains more readable, more widely supported in legacy email clients, and easier to manipulate via JavaScript or CSS custom properties because the alpha is a separate decimal field. Use 8-digit HEX when you want a single self-contained token; use rgba() when alpha varies independently from the base color, for example fading a brand color in a hover transition. Note that this converter works with opaque colors only — add the alpha digits yourself once you have the base HEX here.

How accurate is RGB to HSL conversion and what edge cases should I watch for?

The conversion is mathematically lossless in both directions — every (R, G, B) triple maps to exactly one (H, S, L) triple — but two edge cases produce non-intuitive results. Pure grayscale colors (where R = G = B) have undefined hue because there is no dominant channel; this tool reports H = 0 by convention, but you cannot use that hue value to generate harmony schemes (any harmony from a gray base stays gray). Second, very dark or very light colors lose hue precision when stored as integer percentages: a color at L = 2% with high saturation can round to the same HSL value as one with low saturation, so the round-trip RGB → HSL → RGB may drift by one or two RGB units. For design tokens, store the original HEX and treat HSL as a derivation, not a source of truth.

Key Features

• Convert between HEX, RGB, HSL, and CMYK
• Interactive color picker
• Live color preview
• Copy any color format to clipboard
• Brightness detection (light/dark)
• WCAG 2.1 contrast checker with AA / AA Large / AAA pass-fail badges
• Best text color (black or white) recommendation for accessibility
• Support #RGB and #RRGGBB HEX formats
• Real-time conversion as you type
• Color brightness calculator
• 100% client-side processing
• No server communication
• Works offline
• Dark mode support
• Mobile-friendly