Color Converter

How do you convert a HEX color to RGB and other formats?

Enter #ff6600 to get rgb(255, 102, 0) and hsl(24, 100%, 50%) in All Formats. Results update as you type; no conversion button is required. The six HEX digits form three base-16 channel values: ff is 255, 66 is 102, and 00 is zero. Each RGB channel therefore falls between 0 and 255.

Selected outputs for the same opaque orange

Output row	Value	Meaning
HEX	#ff6600	Three hexadecimal channel bytes
HSL	hsl(24, 100%, 50%)	Hue, saturation and lightness
CMYK	cmyk(0%, 60%, 100%, 0%)	Unprofiled ink-channel calculation
Android	0xFFFF6600	Opaque alpha followed by RGB bytes
Integer	16737792	Packed RGB without an alpha byte

The integer follows R × 65536 + G × 256 + B: 255 × 65536 + 102 × 256 = 16737792. CMYK normalizes the RGB channels, computes black as one minus their maximum, then calculates the other ink percentages. Here black is zero and magenta is 60%. Copy the row that matches your destination's expected representation rather than treating Android and Integer as interchangeable.

Which input and output formats are supported?

The main input accepts three-, four-, six- and eight-digit HEX, RGB/RGBA, HSL/HSLA, HWB, CSS named colors, LAB, LCH, OKLab and OKLCH functions. It also accepts color(srgb ...), color(srgb-linear ...) and color(display-p3 ...). Short HEX expands each digit into a repeated pair. For LAB-family functions, use space-separated channels with an optional slash alpha; commas are rejected.

The 16 output rows are HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, LAB, LCH, OKLCH, OKLab, XYZ, Android and Integer. Output coverage is broader than input coverage: HSV, CMYK, XYZ, Android and decimal integer strings are not input formats. An unrecognized value shows an error and hides the results; start again with a supported color expression.

Choose HEX or RGB for channel-oriented screen work, HSL for hue and lightness controls, and OKLCH for perceptual coordinates. HSV describes hue, saturation and value but is not a CSS color function. XYZ is a reference representation. CMYK is calculated without printer, paper or ink profiles, so use a profiled print workflow before approving physical output.

When should you use each color format?

Choose a representation for the destination and the adjustment you need. A different notation does not automatically improve the color or make it printable. HEX, RGB and HSL can describe the same sRGB color, while perceptual spaces organize coordinates differently and can describe colors outside sRGB.

Choosing a color representation for a practical task

Formats	Useful for	Integration check
HEX / HEX8	CSS custom properties, SVG fills and compact color specifications	Use an alpha-preserving path when transparency matters.
RGB / RGBA	Reading channel values and working with canvas pixels	Check whether the receiving API expects bytes or normalized channels.
HSL / HSLA	Adjusting hue or deriving interface states	Equal lightness values do not imply equal perceived brightness.
HSV	Communicating values to creative application pickers	Convert before using in CSS; there is no CSS hsv() function.
HWB	Describing hue with added whiteness and blackness	Use the function syntax expected by the destination.
OKLab / OKLCH	Perceptual comparisons, color ramps and modern CSS authoring	Check gamut and retain the original coordinates when needed.
LAB / LCH / XYZ	Color-science calculations and coordinate interchange	Match reference white, scaling and coordinate conventions.
CMYK	An initial ink-channel reference	Obtain printer-specific values through a profiled workflow.
Android / Integer	Application fields requiring packed channel values	Confirm alpha layout and numeric encoding before pasting.

What is the difference between LAB, LCH and OKLCH?

LAB separates lightness from the a and b axes. The a axis runs from green toward red, and b runs from blue toward yellow. LCH converts those two axes into a distance from neutral and a hue angle, making hue and chroma easier to discuss separately. LCH expresses the same LAB chromatic coordinates as chroma and a hue angle. OKLab and its polar form OKLCH use a different perceptual model. CSS Color Level 4 defines the corresponding CSS functions, but the reference white matters when moving coordinates between implementations.

This converter's LAB, LCH and XYZ output rows use D65. Its CSS lab() and lch() input uses D50 and applies Bradford adaptation to D65 before conversion. Consequently, the LAB output's function-like text is not a CSS D50 round-trip representation. Use another CSS output when transferring the color to a stylesheet. LAB-family input accepts percentage lightness and treats a component written as none as zero.

Why does a wide-gamut color need an sRGB fallback?

Gamut describes a color space's reproducible range. An OKLCH or Display-P3 input may lie outside sRGB. Gamut & Display-P3 tests the original input against both spaces, while the main output rows describe an sRGB result. For colors outside sRGB, the panel displays a mapped HEX found by lowering OKLCH chroma with hue and lightness fixed. Lightness at or beyond the endpoints maps to black or white.

The search runs 24 iterations. Display-P3 output is mapped to its own gamut if necessary and uses four decimal places per channel. The fallback panel supplies an sRGB declaration followed by a @media (color-gamut: p3) override. Adapt that pattern inside your stylesheet's selectors. Gamut membership does not measure your physical screen or guarantee identical appearance across devices.

How do transparency and rounding affect the results?

Main rows are opaque: HEX8 appends ff, RGBA and HSLA use 1, and the SwiftUI export contains no opacity argument. Supplying an alpha value does not blend the color against a chosen background. Use Bulk Convert for alpha-preserving conversions; HEX rounds alpha to a byte, while RGB, HSL, OKLCH and Display-P3 express it after a slash when below one.

Main HSL, HSV, HWB and CMYK percentages are rounded to whole numbers. Main OKLCH lightness and chroma use three decimal places, and hue uses one. Conversion back from a rounded representation can change channel values. Keep the original expression when precision matters; these formatted rows do not promise lossless round trips.

How can you replace colors throughout pasted CSS?

Bulk Convert scans text for HEX, RGB, HSL, HWB, OKLCH, OKLab, color() functions and CSS names. Choose HEX, RGB, HSL, OKLCH or Display-P3. Copy all copies the converted list; Copy text with replacements preserves surrounding text and replaces the detected spans. Processing stops after 500 valid matches.

This is a text scanner, not a stylesheet parser. It does not resolve variables, nested functions or calculated expressions. LAB and LCH functions are excluded from bulk detection. Color names in comments or quoted text can also match, so review the detected list before copying replacements. Unrecognized tokens remain unchanged.

What can you export or check after conversion?

Export for Developers offers CSS custom properties, a Tailwind configuration snippet under theme.extend.colors.brand, W3C JSON with a brand.DEFAULT object containing $value and $type, and a SwiftUI initializer. SwiftUI divides each RGB channel by 255 and formats it to three decimals. These are copyable snippets; adjust names and integration to your project's configuration.

Keep the difference between a value and a token explicit: the same orange might be named brand-accent in one system and action-primary in another. The export supplies a starting structure, not a full naming scheme, theme mapping or build pipeline. Check the JSON shape accepted by your token tooling instead of assuming the W3C JSON label guarantees compatibility with every specification version. For Tailwind, integrate the configuration into your project's supported setup rather than treating it as a ready-made @theme stylesheet.

Tints & Shades supplies five white-mixed tints and five black-mixed shades. Color Harmony offers complementary, triadic, split-complementary, analogous and tetradic previews. Continue with Palette Generator for palettes or Color Shades Generator for a fuller scale.

Contrast Check compares the active color with white and black. Use Contrast Checker for your actual foreground/background pair. For a utility-class workflow, compare the candidate with Tailwind Color Finder before choosing a token. A nearest framework color may differ from your source, so retest the replacement in context.

How does the browser EyeDropper select a screen color?

Where available, click Pick color from screen, then select a pixel with the browser's eyedropper. The tool calls EyeDropper.open() and commits the returned sRGBHex value. Sampling can include another application window. Cancelling leaves the current selection in place.

The EyeDropper API requires a secure context and a user action. Availability varies by browser; the button is conditional on the API being exposed. If it is absent, enter a value or use the swatch's native color input. The returned value represents an sRGB screen sample, not an original wide-gamut design token.

What can color-blindness simulation reveal about a color choice?

The seven previews cover protanopia, deuteranopia, tritanopia, their three anomalous-trichromacy counterparts, and achromatopsia. Protan and deutan models concern red-green discrimination; tritan models concern blue-yellow discrimination. Anomaly previews approximate altered sensitivity, while achromatopsia provides a grayscale view. These transformations illustrate possible changes in appearance rather than predicting every person's vision.

A single swatch cannot establish whether two status colors remain distinguishable. Compare the colors used together, then add words, icons or patterns to carry their meaning. WCAG Use of Color addresses information conveyed by color alone. A contrast pass and a simulation answer different questions; both inform a design review.

Where are colors processed and saved?

Conversion calculations run locally in browser code. Recent Colors retains up to ten committed colors in local storage, and the active HEX updates the URL fragment as #c=. That fragment represents the sRGB color, not the original wide-gamut expression or alpha. The optional screen picker appears only when the browser exposes EyeDropper; the swatch opens the native color input.