Start a project

Tool 06 of 57 · Colour

Colour Converter

Paste a colour in any CSS format and get it back in every other one, from 8-digit hex to OKLCH, with opacity and a quick contrast check.

Use the tool All developer tools Live · free
Colour Converter at a glanceIllustration: 1, Any CSS colour; 2, processed in your browser; 3, Every format.Colour ConverterAa 4.5:11Any CSS colour</>3Every format2In yourbrowser
1 Any CSS colour 2 processed on your device 3 Every format

Colour Converter

Any colour in

Hex, rgb(), hsl() or a colour name

Every format

    All formats

    CSS custom properties
    JSON

    01

    What it does

    Converts any CSS colour into HEX, RGB, HSL, HWB, OKLab, OKLCH and more, with opacity and contrast on white and black.

    • HEX, 8-digit HEX, RGB, HSL, HWB, OKLab, OKLCH and color(display-p3)
    • Opacity slider for every format
    • Accepts any colour the browser understands, including names
    • Contrast on white and black

    02

    Private by design

    Everything happens in your browser. Nothing you type, paste or upload is sent anywhere, and it keeps working offline once the page has loaded.

    03

    What you get

    Every CSS colour format, CSS variables and JSON, with a Copy and a Download button on every result.

    • HEX
    • RGB
    • HSL
    • OKLCH

    Why it matters

    Design files, frameworks and browsers all speak different colour formats. Figma hands you hex, a design system wants HSL or OKLCH, and a client sends 'that blue, rgb(88, 101, 242)'. Converting by hand is slow and easy to get wrong, especially with opacity.

    OKLCH is now supported in every major browser and is the best format for building palettes, because equal steps in lightness look equal to the eye. This converter gives you OKLCH alongside the formats you already use, so you can move a design system over gradually.

    How it works

    1. InputA colour in hex, rgb(), hsl(), oklch() or a name
    2. In your browserParsed by the browser, converted with OKLab maths
    3. OutputHEX, RGB, HSL, HWB, OKLCH, OKLab and P3, plus CSS variables

    Where it fits in a designer's workflow

    1. Plan
    2. Design
    3. Build
    4. Test
    5. Launch
    Whenever a design file and the code use different colour formats.

    By the numbers

    #5865f2 written in each CSS colour formatHEX: 7 chars; HEX with alpha: 9 chars; RGB: 15 chars; RGB (legacy): 17 chars; HSL: 20 chars; HWB: 19 chars; OKLCH: 27 chars; OKLab: 27 chars; Display P3: 38 charsHEX7 charsHEX with alpha9 charsRGB15 charsRGB (legacy)17 charsHSL20 charsHWB19 charsOKLCH27 charsOKLab27 charsDisplay P338 chars
    Example colour #5865f2, converted by this tool's own code (run at build time). Every format describes the same colour; HEX is shortest, OKLCH is the easiest to adjust by hand (lightness, chroma, hue), and Display P3 is for wide-gamut screens. Source: CSS Color Module Level 4.
    Show the numbers as a table
    FormatValue
    HEX#5865f2
    HEX with alpha#5865f2ff
    RGBrgb(88 101 242)
    RGB (legacy)rgb(88, 101, 242)
    HSLhsl(235 85.6% 64.7%)
    HWBhwb(235 34.5% 5.1%)
    OKLCHoklch(57.74% 0.2091 273.85)
    OKLaboklab(57.74% 0.014 -0.2086)
    Display P3color(display-p3 0.3548 0.3945 0.9161)

    How to use it

    1. Type or paste a colour, or use the colour picker.
    2. Set the opacity if you need transparency.
    3. Copy the format you need from the list.
    4. Download every format as CSS variables or JSON.

    FAQ

    Which colour formats can I paste?

    Anything a browser understands: hex (3, 4, 6 or 8 digits), rgb(), hsl(), hwb(), named colours like rebeccapurple, and the newer lab(), oklch() and color() syntax in up-to-date browsers.

    Why use OKLCH?

    Its lightness matches how bright colours look to people, so shades and tints made by changing L look evenly spaced. HSL lightness doesn't: yellow at 50% looks far brighter than blue at 50%.

    Is the Display P3 value more vivid?

    No, it's the same colour written in the P3 colour space, so the numbers differ. To use colours outside sRGB you'd choose them in P3 or OKLCH directly.

    Are the values rounded?

    Slightly, to keep them readable: RGB to whole numbers and the others to sensible decimals. Converting back gives the same hex.

    Work with me

    Want a site that gets these right?

    I build fast, accessible websites and web apps that pass these checks from day one. Tell me about your project and I'll reply personally with honest next steps.

    Start a project What I do

    All developer tools · Back to leej.uk