HEX to RGB Converter

Convert any hex color code to RGB. Paste, convert, copy. Part of AI color system tool.

Quick answer: Hex and RGB are two notations for the same color. A hex code like #4CA3FF represents red (4C = 76), green (A3 = 163), and blue (FF = 255) as hexadecimal pairs.

RGB
rgb(76, 163, 255)
HSL
hsl(211, 100%, 65%)
OKLCH
oklch(0.7044 0.1591 252.15)
CSS declarations
color: rgb(76, 163, 255);
color: hsl(211, 100%, 65%);
color: oklch(0.7044 0.1591 252.15);

How it works

  1. Enter a hex code

    Type or paste any 3 or 6 digit hex value.

  2. See the conversion

    RGB, HSL, and OKLCH values appear instantly.

  3. Copy the format you need

    Click any value to copy to clipboard.

What is hex to RGB conversion?

Hex and RGB are two notations for the same color. A hex code like #4CA3FF represents red (4C = 76), green (A3 = 163), and blue (FF = 255) as hexadecimal pairs. RGB writes the same values in decimal: rgb(76, 163, 255).

Hex is standard in CSS and design tools. RGB is common in image editing software, Android development, and APIs that accept channel values. Converting between them is a formatting change, not a color space transformation. The color stays identical.

Modern CSS also supports OKLCH, a perceptually uniform color space where equal numeric steps produce equal visual changes. OKLCH is increasingly used in design systems for generating consistent shade scales.

Verify a converted pair against the WCAG contrast checker before shipping it, or pull the source colors out of artwork with generate a palette from a photo. For full token sets and exports, Pro shade scales and exports.

Common use cases

  • Translate a brand guideline

    Convert hex from a PDF brand book into RGB and HSL for CSS, code, and print. Drop the base into the shade scale generator when you need a full ramp.

  • Pipe colors into a design tool

    Get OKLCH for Figma variables, RGB for Sketch, and HSL for legacy stylesheets in one paste.

  • Build a quick CSS variable

    Copy a ready-made --token: rgb(...) declaration and skip manual conversion.

  • Match a screenshot color

    Drop the hex from your eyedropper and get every format you need without round-tripping converters.

FAQ

Frequently asked questions

Different formats fit different jobs. Hex is compact and easy to share, RGB lets you adjust opacity with rgba(), and HSL lets you tune hue, saturation, and lightness independently, which is useful when building hover and active states from a base color.

OKLCH is a perceptually uniform color space, which means equal numerical changes in lightness produce equal perceived changes. HSL does not behave that way, so two HSL colors with the same lightness can look very different. Reach for OKLCH when building shade scales or interpolating between colors.

Copy any single value with the swatch, or use the copy-all action to grab a CSS declarations block with all formats commented. Paste it into a custom property like --color-brand and reference it with var(--color-brand) wherever you need the color.

Hex to RGB is exact since both describe the same sRGB triplet. HSL is rounded to whole degrees and percentages. OKLCH is rounded for readability to four decimals for lightness and chroma and two for hue; converting it back gives the same hex, or one that differs by at most one step (out of 255) per channel.

One color converted.

The Paletta Figma plugin turns one color into a full 50 to 950 scale, writes it into Figma Variables, and gives you the matching CSS.