Design

Color Converter

Convert between HEX, RGB and HSL instantly. Use the visual color picker or type a value directly.

Any AI today can convert a color between HEX, RGB, and HSL in seconds. But not everyone has a paid plan, tokens available all the time, or knows how to ask for it properly. This converter exists for that: an instant result, no friction — and further down, we explain how the conversion works by hand.
Choose a color
Click the color swatch to open the picker. All three formats (HEX, RGB, HSL) update automatically.
Preview
#3B82F6
You can also type directly in any field and the others will update automatically.
#
color: #3b82f6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);

How a color is converted between formats

HEX → RGB each hex pair (00–FF) is read in base 16 and converted to a decimal value (0–255) — Example: #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246).
RGB → HEX each decimal value (0–255) is converted to a hex pair (00–FF) — Example: rgb(59, 130, 246) → 59=3B, 130=82, 246=F6 → #3B82F6.
RGB → HSL lightness is the average of the maximum and minimum channel; saturation depends on the difference between them; hue depends on which channel (R, G, or B) is the maximum — Example: rgb(59, 130, 246) → hsl(217°, 91%, 60%).
Why there's no universal RGB → CMYK conversion RGB is additive (screens, light) with a very wide gamut; CMYK is subtractive (ink on paper) with a narrower gamut — the result depends on the color profile (ICC) of each paper, ink, and printer — Unlike HEX↔RGB↔HSL (exact, lossless math conversions), going from RGB to CMYK has no fixed formula: the same red rgb(230, 30, 30) can print with different tones depending on which ICC profile is used. In practice, most businesses don't manage their own ICC profile: they simply send the design file and it's the print shop that applies its own calibrated profile when printing. Canva, for example, works natively in RGB — even with Canva Pro you can't preview or fine-tune the exact CMYK; when exporting as "Print PDF" the conversion happens automatically, and very saturated colors often look duller once printed. Professional workflows do request the print shop's specific ICC profile and embed it in the final file (PDF/X format), but it's a step most people skip.
Not all printing uses CMYK large-format printing and fabric screen printing don't necessarily follow the same RGB → CMYK flow as paper offset/digital printing — In screen printing (t-shirts, fabric), the standard approach for logos and simple designs is to use solid Pantone spot colors (pre-mixed ink), not CMYK — each color is a separate screen/pass, and very saturated colors (oranges, vivid reds, electric blues) simply can't be achieved by mixing CMYK; for photographic designs, CMYK or "simulated process" is used instead. Pantone isn't 100% equivalent to RGB either: the HEX/RGB values Pantone publishes for each color are only an approximation for on-screen preview, and the same color has different values depending on the substrate (coated paper, uncoated paper, textile), because the physical ink looks different depending on where it's applied — for actual production, the right move is to specify the exact Pantone code to the print shop, not the approximate HEX/RGB. In large-format printing, practice varies by provider: some ask for already-converted CMYK, others prefer RGB because their own RIP has a calibrated profile for that material — the right move is always to ask the specific provider.

Key concepts

The hexadecimal format represents a color as six digits in base 16 (0–9, A–F), grouped in three pairs: red, green, and blue. For example, #FF0000 is pure red. It is the most common format in HTML and CSS.

RGB (Red, Green, Blue) describes a color using three numeric values between 0 and 255, one per channel. rgb(255, 0, 0) is pure red. CSS also supports rgba(), which adds an opacity (alpha) channel.

HSL represents color in terms of Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). It is the most intuitive format for manually adjusting colors because its dimensions match how we perceive color.

Use HEX for fixed brand colors (CSS variables or design tokens). Use RGB/RGBA when you need dynamic opacity. Use HSL when building palettes or varying hue/saturation/lightness programmatically — for example in themes or color variant generation.

OKLCH is a perceptually uniform color space introduced in CSS Color Level 4. Unlike HSL, colors sharing the same L (lightness) value appear equally bright to the human eye, making it far more predictable for building accessible, harmonious palettes. Its three values are: L (lightness, 0–1), C (chroma, roughly 0–0.4) and H (hue, 0–360°). Chrome, Firefox and Safari already support it via the oklch() function.

The alpha channel defines a color's opacity from 0 (fully transparent) to 1 (fully opaque). In CSS use rgba(255, 0, 0, 0.5) or the 8-digit hex notation #FF000080. You can also separate opacity from color using the opacity property. The key difference: rgba() makes only that color transparent without affecting child elements; opacity applies transparency to the entire element and all its contents.

Color contrast is the relative luminance difference between two colors — typically text and background. WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text (AA level) and 3:1 for large text (18pt or 14pt bold). Insufficient contrast makes reading difficult for people with low vision or color blindness. You can measure the ratio directly in Chrome's accessibility panel or with the WebAIM Contrast Checker.

Web and UI/UX designers use it daily to convert colours between HEX, RGB, HSL, and HSB when working with CSS, Figma, Sketch, or Adobe XD — each tool has its preferred format. Front-end developers need it to apply colours precisely in CSS and Tailwind, and to understand which numeric values correspond to a visual colour. Graphic and branding designers consult it to transfer brand palettes between software (Illustrator, Canva, Photoshop) and ensure the colour is identical across all formats. Print designers use it to convert between RGB (screen) and the closest equivalent values before exporting to CMYK. Accessibility specialists use it to obtain precise luminance values and verify contrast ratios according to WCAG 2.1 guidelines.

On desktop, press Ctrl + D (Windows/Linux) or Cmd + D (Mac) in Chrome, Firefox, or Edge to add this page to your bookmarks instantly. In Safari for Mac, use Cmd + D or go to Bookmarks → Add Bookmark. On mobile with Chrome (Android), tap the three-dot menu (⋮) and choose "Add to Home screen" or "Add to bookmarks." On mobile with Safari (iPhone/iPad), tap the share button (□↑) and then "Add to Home Screen." Saving it means the next time you spot a HEX value in a design and need the RGB for CSS, it is already one click away.

If, besides colors, you also need to convert size units (px to rem or em) for responsive layouts, check out the px to rem and em converter, built for the same kind of CSS workflow: set a base size and get the equivalents instantly.