Color Converter — Hex, RGB, HSL, CMYK
Convert any color between HEX, RGB, HSL, HSV, CMYK, and OKLCH formats. Enter a value in any format and see every other format instantly, with a live preview.
Convert HEX
| Code | Value | HTML/CSS | |
|---|---|---|---|
| HEX | EFBF04 | #EFBF04 | |
| RGB | 239, 191, 4 | rgb(239 191 4) | |
| HSL | 48, 97, 48 | hsl(48 97% 48%) | |
| HSV | 48, 98, 94 | — | |
| CMYK | 0, 20, 98, 6 | — | |
| OKLCH | 0.82, 0.17, 90 | oklch(0.82 0.17 90) |
CMYK values are approximate. For production printing, use ICC profile-based conversion in your design software.
Use this color in Moda
Apply exact brand colors to slides, social posts, and other designs — all on a real canvas you control.
Try Moda free →Supported color formats
This tool converts between six color formats: HEX (the compact #RRGGBB notation used in CSS and brand guidelines), RGB (red/green/blue channel values from 0–255), HSL (hue/saturation/lightness — intuitive for creating color variations), HSV (hue/saturation/value — common in color pickers), CMYK (cyan/magenta/yellow/key — the standard for commercial printing), and OKLCH (a perceptually uniform color space increasingly used in modern CSS and design systems).
When to use which format
For web development and CSS, use HEX or RGB — they are universally supported and compact. For programmatic color manipulation (creating lighter/darker variants, building palettes), use HSL or OKLCH — adjusting a single number produces predictable changes. For print production, use CMYK — it maps directly to the four-ink process used by commercial printers. HSV is commonly used in color picker interfaces because it maps intuitively to how users think about choosing colors.
How conversions work
All conversions route through RGB as the intermediate format. When you enter a color in any format, it is first converted to RGB, then from RGB to every other format. This means the tool always shows consistent results across all outputs. The conversion math is standard and well-documented — no external services or APIs are used.
Hex and RGB: two notations for one color
A hex color code is three pairs of hexadecimal digits (0–9, A–F), one pair per RGB channel: red, then green, then blue. To convert, take each pair from base-16 to base-10 — in #EFBF04, EF is 239, BF is 191, and 04 is 4, so #EFBF04 = RGB(239, 191, 4), a warm gold. The reverse direction converts each 0–255 channel to a two-digit hex number. Shorthand codes like #F80 expand to #FF8800 by doubling each character. Hex is more compact and dominates CSS, brand guidelines, and design tools; RGB is useful when manipulating channels programmatically or working with APIs that expect numeric values. In CSS, rgb(239 191 4) and #EFBF04 produce identical results.
HSL: built for adjusting colors
HSL expresses a color as hue (0–360° on the color wheel), saturation (0–100%), and lightness (0–100%). It is the most convenient format for creating variations: need a lighter version of a brand color, just increase L; a muted variant, reduce S. Design systems, theme generators, and CSS custom properties often define colors in HSL for exactly this reason, and modern CSS supports it natively via hsl(). Hex remains more common in handoff documents and brand guidelines, so convert back to hex when documenting a palette.
CMYK: converting for print
CMYK is the subtractive ink model used by commercial presses; RGB and hex are additive light models for screens. Converting to CMYK: normalize each RGB channel to 0–1, then K = 1 − max(R, G, B), C = (1−R−K)/(1−K), M = (1−G−K)/(1−K), Y = (1−B−K)/(1−K), each expressed as a percentage. Converting from CMYK: R = 255 × (1 − C/100) × (1 − K/100), and similarly for G (using M) and B (using Y). You need this conversion when sending digital artwork to a print shop, or when bringing a print-defined brand color to a website.
CMYK gamut and accuracy caveats
CMYK has a narrower gamut than RGB: highly saturated neon colors, electric blues, and bright greens that look vivid on screen will appear duller in print, and a color defined in CMYK may not look identical on a screen after conversion. The math here is the standard formula, which is a device-independent approximation — true color matching for commercial printing requires ICC profiles specific to the printer, ink set, and paper stock. Treat these values as a starting point, verify with a physical proof before a production run, and ask your print vendor about a Pantone spot color when accuracy is critical.
OKLCH: the modern color space
OKLCH is a perceptually uniform color space where equal numeric changes produce equal perceived visual changes. Unlike HSL, where the same saturation increment looks different at different hues, OKLCH maintains consistent visual behavior. It is supported in CSS via the oklch() function and is increasingly adopted by design systems like Open Props and Radix. If you are building a design system from scratch, OKLCH is worth considering as your base color space.
Frequently asked questions
What color formats does this tool support?
This tool supports HEX, RGB, HSL, HSV, CMYK, and OKLCH color formats. Enter a color in any format and all other formats will be calculated automatically.
How do I convert hex to RGB?
A hex color code is made up of three pairs of hexadecimal digits, one per RGB channel. Convert each pair from base-16 to decimal: #EFBF04 breaks down to EF (239 red), BF (191 green), and 04 (4 blue). The reverse converts each 0–255 value back to a two-digit hex number.
What is the difference between hex and RGB?
Both represent the same colors. Hex is a compact hexadecimal notation (e.g., #FF0000), while RGB spells out the decimal red, green, and blue values (e.g., 255, 0, 0). They are interchangeable.
What is the difference between RGB and CMYK?
RGB is an additive color model for screens (combining red, green, and blue light). CMYK is a subtractive model for printing (combining cyan, magenta, yellow, and black ink). RGB can produce brighter, more saturated colors than CMYK can reproduce.
Why do my CMYK colors look different when printed?
The RGB-to-CMYK conversion is a mathematical approximation, and CMYK has a narrower gamut than RGB — bright screen colors print duller. True color matching requires ICC profiles specific to your printer, ink, and paper; consult your print vendor for production-critical work.
When should I use HSL?
HSL is useful when you need color variations — making a color lighter, darker, or less saturated is as simple as adjusting one number. It is supported natively in CSS via the hsl() function.
Which format should I use for web design?
For CSS, use HEX (#EFBF04) or RGB (rgb(239 191 4)). HSL is also supported natively in CSS and is more intuitive for creating color variations.
What is OKLCH used for?
OKLCH is a perceptually uniform color space. It is increasingly used in modern CSS and design systems because equal numeric changes in OKLCH produce equal perceived changes in color, making it ideal for generating consistent color palettes.
Explore color guides
Looking up a named color as well as its formats? Browse the full color library for swatches, pairings, palettes, and accessibility guidance.