Pick Any Color and Convert It to Every Format You Need
Color picker to pick colors and convert HEX, RGB, HSL, CMYK. Hex color picker, RGB color picker, color converter with palette generator. Free online.
Every web project involves colors, and every color needs to exist in multiple formats: HEX for your CSS, RGB for your design tool, HSL for generating color variations, and CMYK if your project ever goes to print. This color picker shows all four formats simultaneously the moment you select a color, and automatically generates a five-color complementary palette so you do not have to guess which colors work well together. Click any format to copy it. Click any palette swatch to copy its value. It is a quick path from needing a color to having the exact value in the format you need.
HEX (#FF5733)
A hexadecimal representation of RGB values, widely used in web development because it is compact and supported by every CSS property that accepts a color. The first two characters represent red (00-FF), the next two represent green, and the last two represent blue. Shorthand notation like #F53 expands to #FF5533. HEX is the default format in most design tools and code editors.
RGB (255, 87, 51)
Represents color as three values from 0 to 255 for red, green, and blue light respectively. Used in CSS as rgb() and rgba(), in image processing libraries, and in programming environments where you need to manipulate individual color channels programmatically. More intuitive than HEX for understanding the actual color composition.
HSL (11, 100%, 60%)
Represents color as Hue (0-360 degrees on the color wheel), Saturation (0-100%, how vivid the color is), and Lightness (0-100%, how light or dark). HSL is the most intuitive format for generating color variations: to make a color lighter, just increase the L value. To create a complementary color, add 180 to the H value. Most modern CSS frameworks prefer HSL for theming.
CMYK (76%, 47%, 0%, 4%)
The subtractive color model used in printing. Represents Cyan, Magenta, Yellow, and Key (Black) ink percentages. If your design will be physically printed - business cards, brochures, packaging - you need CMYK values to ensure accurate color reproduction. Screen colors (RGB) often look different when printed because monitors emit light while ink absorbs it.