Pick any color and instantly get HEX, RGB, HSL, and CMYK values. Copy with one click.
HEX#7C3AED
RGBrgb(124, 58, 237)
HSLhsl(262, 83%, 58%)
CMYKcmyk(48%, 76%, 0%, 7%)
CSScolor: #7C3AED;
Color Name
Royal Purple
Luminance
0.07
vs White
9.05:1
vs Black
2.32:1
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.
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.