Color Picker

Pick any color and instantly get HEX, RGB, HSL, and CMYK values. Copy with one click.

Related Tool: Image Color Picker
HEX #7C3AED
RGB rgb(124, 58, 237)
HSL hsl(262, 83%, 58%)
CMYK cmyk(48%, 76%, 0%, 7%)
CSS color: #7C3AED;
Color Name
Royal Purple
Luminance
0.07
vs White
9.05:1
vs Black
2.32:1
Who this tool is for:

Best for: Pulling a precise hex from a colour wheel, and converting the result to RGB, HSL or CMYK for print or CSS use

Limitations: Picks from the on-screen wheel rather than sampling anywhere on your desktop, and CMYK values are approximate rather than press-accurate

Best suited for: Designers choosing a colour from scratch who need the value in several formats at once

How to Use the Color Picker

Click the color picker square above to open your browser's native color selector. As you choose a color, all values update instantly in real time. Use the Copy buttons to copy any format to your clipboard.

HEX codes (like #7C3AED) are the most common format for web design. Paste them directly into CSS files, design tools like Figma or Sketch, and HTML style attributes. The # prefix is required in CSS but optional in some design tools.

RGB values are useful when you need to control transparency -- combine them with CSS rgba() to add an alpha channel. For example, rgba(124, 58, 237, 0.5) gives you the same purple at 50% opacity.

HSL is the most intuitive format for programmatic color work. Adjusting only the lightness (L) value lets you create tints and shades without changing the hue. Many design systems use HSL for building color scales.

CMYK values are for print design. If you are handing colors off to a print shop or working in Adobe InDesign, use the CMYK values shown here. Note that not all RGB colors can be precisely reproduced in CMYK print due to gamut differences.

Advertisement

Frequently Asked Questions

HEX is a six-character hexadecimal code (like #FF0000) that represents the same RGB values in a compact form used widely in web design. RGB explicitly lists the red, green, and blue channel values from 0 to 255. Both describe the same colors; HEX is shorter to type in CSS while RGB is easier to read numerically.
HSL (Hue, Saturation, Lightness) is easier to understand intuitively and ideal when you want to programmatically lighten, darken, or adjust the saturation of a color. Changing only the L value in HSL reliably adjusts brightness without shifting the hue, which makes it popular for generating color scales in design systems.
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used for print design. Printers mix these four inks to produce colors. When designing for print, you need CMYK values instead of RGB or HEX. Most print software accepts CMYK percentages directly.
You can use any format in CSS: color: #FF0000 (HEX), color: rgb(255, 0, 0) (RGB), or color: hsl(0, 100%, 50%) (HSL). All three produce the same red color. HEX is the most common in legacy code; HSL is growing in popularity for design systems because it is easier to manipulate programmatically.
Relative luminance is a measure of a color's perceived brightness on a scale from 0 (absolute black) to 1 (absolute white). It is calculated using a weighted formula that accounts for how human eyes perceive red, green, and blue differently. Luminance is used to calculate contrast ratios for WCAG accessibility compliance.
Related Tools
🔄 HEX to RGB Converter 🎨 Palette Generator ✅ Contrast Checker

Get fresh reads straight to your inbox

Get notified when we publish new articles. Unsubscribe anytime.