HEX, RGB & HSL Color Converter

How to convert colors

1. Type a color in any format, such as #ff6600, rgb(255, 102, 0), hsl(24, 100%, 50%) or orange, or use the picker.
2. See HEX, RGB, HSL and CMYK values update instantly.
3. Click Copy next to the format you need, or pick a tint or shade to explore related colors.

Color formats explained

• HEX: six hexadecimal digits for red, green and blue. The most common format in web design.
• RGB: red, green and blue from 0–255. Used in CSS, design tools and screens.
• HSL: hue (0–360°), saturation and lightness percentages. Easier for humans to adjust.
• CMYK: cyan, magenta, yellow and key (black) ink percentages used in printing.

Make sure your colors are readable with the WCAG Contrast Checker.

Converting colors for CSS

All modern browsers accept HEX, rgb(), hsl() and named colors, so pick whichever is easiest to work with. HEX is compact and common in design handoffs. RGB is useful when you need transparency, written as rgb(37 99 235 / 50%) in modern syntax. HSL is the most practical for building themes: keep the hue and saturation and change only lightness to create hover states, borders and backgrounds that match.

Short HEX and alpha HEX

Three-digit HEX codes are shorthand where each digit is doubled: #f60 is the same as #ff6600. Eight-digit HEX adds transparency as the last two digits, so #2563eb80 is the blue at about 50% opacity. This converter understands all of these forms.

RGB vs. CMYK

Screens create color by adding red, green and blue light, while printers subtract light with cyan, magenta, yellow and black ink. Some bright screen colors, especially vivid greens, blues and oranges, cannot be reproduced exactly in print and will look duller. If you are preparing a print job, convert your brand colors early and ask your printer to proof them.

Building a palette

Use the tints and shades row to generate lighter and darker versions of a color with the same hue. Light tints work well for backgrounds and highlights, mid tones for buttons and links, and dark shades for text. Check text and background pairs with the contrast checker to make sure they are readable.

Picking colors from images

To match a color from a photo, logo or website, use your operating system’s color picker or your browser’s developer tools eyedropper, then paste the value here to get every format. On Windows, the free PowerToys Color Picker (Win+Shift+C) copies a HEX value from anywhere on the screen; on a Mac, the Digital Color Meter app shows RGB values under the cursor.