RGB Color Converter
Convert a color between HEX, RGB, HSL, and more, with shades and harmonies.
Lighten and darken
Drag the bar to mix in white or black. Click the swatch to copy its HEX.
Color harmonies
Colors rotated around the color wheel. Click a swatch to copy its HEX.
RGB Color Converter
The RGB Color Converter turns one color into HEX, RGB, HSL, HSB, CMYK, and OKLCH, plus Android, iOS, Flutter, and React Native code. It also lets you lighten or darken the color and shows color harmonies. Everything is calculated in your browser.
Screens make colors by mixing red (R), green (G), and blue (B) light. Each channel has 256 levels, from 0 to 255, so the number of possible colors is:
256 × 256 × 256 = 16,777,216 colors
HEX writes the same values as two hexadecimal digits each. ff is 255, 63 is 99, and 47 is 71, so #ff6347 is the same color as rgb(255, 99, 71).
How to use
- Enter a color in any format you know, such as #ff6347, rgb(255, 99, 71), hsl(9, 100%, 64%), or tomato. You can also click the swatch to pick a color, or, in browsers that support it, use the eyedropper to pick one from your screen.
- Adjust the color with the R, G, B, and opacity sliders.
- Click any format on the right to copy it.
- Use the bar below to lighten or darken the color, and check the harmonies. Click a swatch to copy its HEX.
Key terms
HEX
Writes R, G, and B as two hexadecimal digits each, like #RRGGBB. Three digits (#f63) are shorthand with each digit doubled (#ff6633). With eight digits (#ff634780), the last two are opacity: 00 is fully transparent and ff is fully opaque.
HSL
Describes a color by hue (0–360°), saturation, and lightness. Lightness is the average of the largest and smallest of R, G, and B, so it can differ from how bright the color looks.
HSB (HSV)
Describes a color by hue, saturation, and brightness. Brightness is the largest of R, G, and B, and saturation is the gap between the largest and smallest divided by brightness.
OKLCH
A notation added in CSS Color 4 that describes lightness (L), chroma (C), and hue (H). It’s based on the Oklab color space, so its lightness reflects how bright a color looks much better.
CMYK
The mix of printing inks: cyan (C), magenta (M), yellow (Y), and black (K). This tool uses the simple conversion from CSS Color 5, which knows nothing about your inks or paper. Check real print colors with your printer.
Why yellow looks brighter at the same 50% lightness
In HSL, blue is hsl(240, 100%, 50%) and yellow is hsl(60, 100%, 50%). Both have 50% lightness, yet yellow looks far brighter.
In OKLCH, blue has a lightness of 0.452 and yellow 0.968, so the numbers show the difference you see. That makes OKLCH handy for picking colors that look equally bright or for even lightness steps.
The 148 CSS color names
CSS has 148 color names, like tomato and skyblue. Sixteen of them, including aqua, black, and blue, came from the VGA palette, and most of the rest came from the X11 color system.
They were standardized because they’d been used for decades, so they aren’t consistent. For example, darkgray is lighter than gray. Some are the same color with different spellings, like gray and grey.
This tool shows the name closest to your color by Oklab distance.
App code puts opacity in a different place
Eight-digit CSS HEX puts opacity last (#RRGGBBAA). Android and Flutter color ints put it first (0xAARRGGBB). Semi-transparent red is #ff000080 in CSS and 0x80FF0000 on Android.
iOS’s UIColor takes R, G, B, and opacity as values from 0 to 1, so each channel is divided by 255.
React Native accepts the same color strings as CSS. Its color ints, however, are 0xRRGGBBAA with opacity last, the reverse of Android. This tool shows React Native colors as strings to avoid the mix-up.
How lightening, darkening, and harmonies work
Moving the bar left mixes in white, and moving it right mixes in black, by the percentage shown. This matches mixing in sRGB with CSS color-mix().
Harmonies keep saturation and lightness and rotate the hue on the HSL color wheel: 180° for complementary, ±30° for analogous, and 120° and 240° for triadic.
FAQ
Are HEX and RGB different colors?
No. They’re the same R, G, and B values, written in hexadecimal for HEX and in decimal for RGB. #ff6347 and rgb(255, 99, 71) are the same color.
Will printing with these CMYK values match the screen?
No. The CMYK values here are a simple conversion that knows nothing about inks or paper, so they’re only an estimate. The CSS Color 5 specification also notes that this conversion can look very different from the printed result.
Why don’t I see the eyedropper button?
The eyedropper uses the browser’s EyeDropper API, which not every browser supports yet. The button appears only in browsers that support it, and it works only on HTTPS pages after you click it.
Is my color saved?
It’s never sent to a server. Only your last color is saved in this browser, so it’s still there when you reload the page.