HexaCalc
All tools
Pick Hex color pickerColor picker from imagePalette from imageCamera color identifierScreen color picker
Create Palette generatorColor wheelComplementary colorsTriadic colorsMonochromatic schemeColor mixerBrownBlueGreenPurplePinkOrangeGrayColor matcherGradient generatorTailwind color generatorShades and tintsRandom color generatorPaint color visualizerWebsite color schemesColor mixing chart
Check Contrast checkerColor blindness simulatorColor blind testTypes of color blindnessHue test
Convert HEX to RGBRGB to HEXRGB to CMYKCMYK to RGBHEX to CMYKHEX to HSLColor converterColor temperatureColor name finder
Personal color Color analysisSkin tone chartSeasonal color quizWinterAutumnSpringLight SpringTrue SpringBright SpringLight SummerTrue SummerSoft SummerSoft AutumnTrue AutumnDeep AutumnDeep WinterTrue WinterBright Winter
Color families Color codesBlueGreenSage greenMauveRedPinkPurplePastelNeutralDarkGoldGrayMint greenLight greenLight purpleLime greenPastel pinkNeonPastel greenPastel yellowPeachCrimsonCool colorsBurnt orangeOrangeGreigeBright colorsSpring colors
Hex math Hex calculatorHex to decimalDecimal to hexHex to binaryBinary to hexHex to textText to hex
More tools Minecraft color codesColor gameResistor color codeImage color changerColor by numberGrayscale image
↑ ↓ to moveEnter to openEsc to close

Color converter

Paste any color string, from a HEX code to an oklch() value, and get it in twelve formats at once. Every row has a copy button.

    Formats it reads

    The input box accepts anything a modern browser understands as a color, plus a couple of extras:

    • HEX in 3, 4, 6 or 8 digits: #F60, #0F766E80
    • rgb() and rgba(), with commas or spaces, numbers or percentages
    • hsl(), hwb()
    • lab(), lch(), oklab(), oklch()
    • color(srgb …) and similar color() strings
    • the 148 CSS named colors, from aliceblue to yellowgreen

    The line under the input confirms how the color was read, so you can catch a typo before copying anything.

    The fourteen outputs

    RowWhat it's for
    HEXCSS, design tools, anywhere a short code is wanted
    RGBmodern CSS syntax, rgb(217 72 28)
    RGB legacycomma syntax for older tools and email templates
    HSLhue, saturation and lightness for quick tweaks in CSS
    HSV / HSBthe model used by Photoshop, Figma and most pickers
    HWBhue with whiteness and blackness, easy to reason about
    CMYKformula-based ink percentages for rough print specs
    LabCIE Lab (D50), used in color management and measuring
    LCHthe cylindrical version of Lab
    OKLaba newer perceptual space, good for mixing and gradients
    OKLCHthe cylindrical form of OKLab, good for palettes and scales
    XYZ D65the device-independent base most conversions pass through
    sRGB floatchannels from 0 to 1, for shaders and native app code
    Integerthe 24-bit number, such as 14239772 for #D9481C

    Set Decimals to control rounding. Two is a sensible default; use 0 for clean CSS and 4 when you're feeding values into code that will convert them again.

    An example

    Typing oklch(62% 0.19 37) gives:

    • #E04F1F
    • rgb(224 79 31)
    • hsl(15 76% 50%)
    • lab(54.3% 56.2 56.5)
    • cmyk(0%, 65%, 86%, 12%)

    Compare that with #D9481C, which has an OKLCH of 60.1%, 0.189, 36.2. The two oranges are close but not identical, and converting through OKLCH makes the difference measurable rather than a hunch.

    How the conversions work

    Everything passes through linear-light sRGB and CIE XYZ:

    1. The input is parsed into sRGB channels, removing the gamma curve to get linear light.
    2. A 3×3 matrix gives XYZ under the D65 white point (the white of a standard screen).
    3. From there, OKLab uses Björn Ottosson's published matrices and a cube root. CIE Lab first adapts XYZ to the D50 white point with the Bradford transform, which matches how CSS defines lab().
    4. LCH and OKLCH are the same values in polar form: chroma is the distance from gray, hue is the angle.

    HSL, HSV and HWB are simple rearrangements of the gamma-encoded RGB numbers, with no matrix involved. CMYK uses the naive formula described on the RGB to CMYK page.

    Out-of-gamut input

    oklch() and lab() can describe colors that no sRGB screen can show, such as a very saturated green at high lightness. When you type one, the tool keeps lightness and hue and reduces chroma until the color fits in sRGB. That is the gamut-mapping approach the CSS Color 4 spec recommends. The HEX and RGB rows then describe that mapped color, so converting back won't return your original numbers.

    Copying

    Every row has its own copy button. Copy all puts every format on the clipboard as labeled lines, which is handy for a design handoff or a ticket. Copies are plain text with no hidden formatting.

    Precision notes

    • HEX is limited to 256 steps per channel, so it is always rounded. If you need to round-trip Lab or OKLCH values exactly, keep them in that format instead of passing through HEX.
    • Lab values here follow CSS (D50). Some older software reports Lab under D65, and the a and b numbers can differ by a few units.
    • Hue is undefined for grays. The tool shows 0, which is the CSS convention.

    For single conversions with a worked explanation, see HEX to RGB and HEX to HSL. To find out what a color is called, use the color name finder. To pick a color visually and get the same readouts, open the HEX color picker.

    FAQ

    Which format should I use in CSS?

    HEX or rgb() for maximum compatibility. oklch() if you want to adjust lightness and chroma predictably. All current browsers support it, and fallbacks are only needed for quite old ones.

    Why is CMYK listed if it isn't accurate?

    It is useful as a ballpark, and people often need a number for a form. Read the RGB to CMYK guide before using it for real print work.

    Is my input stored anywhere?

    No. Conversion happens in your browser and nothing is sent to a server.