Color Converter

Split the six hex digits into three pairs — each pair is one channel in base 16. For #FF5733: FF = 255 (red), 57 = 87 (green), 33 = 51 (blue), so the result is rgb(255, 87, 51). Paste any HEX code into the converter above and every other format updates instantly, including the reverse direction.

Both describe color with a hue angle (0-360°), but they define “saturation” differently. HSL uses Saturation + Lightness and is the format CSS understands, which makes it handy for hand-tweaking stylesheets. HSV (also called HSB) uses Saturation + Value/Brightness and is the model Photoshop-style color pickers use. Same hue, different second and third numbers: #FF5733 is hsl(11, 100%, 60%) but hsv(11, 80%, 100%).

Add 180° to the hue. #FF5733 sits at hue 10.6°, so its complement is at 190.6° → #33DBFF. The palette generator above does this automatically, along with analogous (±30°), triadic (±120°), split-complementary, tetradic, square, and monochromatic schemes.

WCAG 2.x defines three bars: 4.5:1 for normal text at AA (the legal baseline most teams target), 3:1 for large text (18pt+ or 14pt bold) at AA, and 7:1 for AAA. The contrast checker above computes the exact ratio with the official relative-luminance formula and shows which levels pass. Example: white text on #FF5733 is only 3.15:1 (fails AA), while black text on #FF5733 is 6.66:1 (passes AA).

Screens emit light (RGB) while paper absorbs it (CMYK ink), and the CMYK gamut is much smaller — many vivid screen colors simply cannot be printed. The CMYK values here use the standard naive formula, which is a solid estimate but not a true ICC-profile conversion with black generation, so treat them as a starting point and always request a proof from your print shop for brand-critical work.

Paste the RGB value into the converter (it accepts rgb(255, 87, 51), “255, 87, 51”, or #FF5733) and read the CMYK row — for #FF5733 that is cmyk(0%, 66%, 80%, 0%). The math: K = 1 − max(R,G,B), then each of C, M, Y = (1 − channel − K) / (1 − K). Everything runs in your browser; no software to install.

The last two digits are opacity in hex: 00 is fully transparent, FF is fully opaque. #FF573380 is #FF5733 at 50.2% opacity, equivalent to rgba(255, 87, 51, 0.5). This tool reads and writes 8-digit (and 4-digit shorthand) hex, and the RGB/HSL cards show the matching rgba()/hsla() strings.

Double each digit: #F53 becomes #FF5533. Four-digit shorthand works the same way for alpha: #F538 → #FF553388. The converter accepts 3, 4, 6, and 8-digit hex with or without the # prefix and normalizes everything to the full form.

CIELAB is a perceptually uniform color space: L* is lightness (0-100), a* runs green-to-red, b* runs blue-to-yellow. Equal numeric steps look like equal visual steps, which is why this tool uses Lab distance to find the nearest named color. Note the honest limitation: some Lab values fall outside the sRGB gamut, so converting them back to RGB clips to the nearest displayable color.

Those are one-function utilities — this page is the hub. One input updates HEX, RGB, HSL, HSV, CMYK, and Lab in both directions, plus a color picker with sliders, seven palette schemes, a WCAG contrast checker, an image eyedropper, nearest-named-color lookup, and CSS export. If you only need one tiny conversion, the focused tools (hex-to-hsl, hsl-to-hex, hsv-to-hex, rgb-to-hsv, cmyk-to-hex, dec-to-hex-color, color-shade-gen) are linked below and remain the fastest option for that single job.

Yes. Upload any image in the eyedropper section and click (or tap) any pixel — the exact color loads into the converter with all formats computed. The image is drawn to an off-screen canvas locally and is never uploaded anywhere.

No. The entire tool is a single self-contained page: every conversion, palette, contrast check, and image sample runs in JavaScript inside your browser with zero external requests. It keeps working offline once loaded, and there is nothing to sign up for.

The export panel generates ready-to-paste code from your current color and palette, e.g. :root { --brand: #FF5733; --brand-rgb: 255, 87, 51; } plus rgb()/hsl() fallbacks and a Tailwind-style snippet. Each format card also has its own one-click copy button.

Analogous schemes (hue ±30°) sit next to each other on the wheel and feel calm and cohesive — ideal for backgrounds and gradients. Triadic schemes (hue ±120°) are evenly spaced and feel vibrant but balanced — ideal when you need three distinct accents, like charts or category colors. Complementary pairs (±180°) give maximum pop for calls to action.

Pick whichever of black or white gives the higher contrast ratio — the checker suggests it automatically. As a rule of thumb, light saturated colors like #FF5733 take black text (6.66:1, passes AA), while deep colors like #2E86AB also take black text here (5.11:1 vs 4.11:1 for white — white fails AA normal text). When in doubt, test the exact pair instead of guessing.

It uses the standard naive RGB↔CMYK formula, which every quick online converter uses. It is accurate as an estimate for specs, mockups, and briefs, but it is not a prepress conversion: real print workflows apply ICC profiles, total-ink limits, and black generation that shift the numbers. For anything going to a commercial press, confirm with your printer’s profile.