🎨 Color Picker & Converter

How to Use the Color Picker

Using our color picker is straightforward. Click the color input field to open your browser's native color picker, or type a hex code directly into the HEX field. The tool instantly converts and displays the equivalent RGB, HSL, and CMYK values. Click "Copy" next to any format to copy it to your clipboard. The shades panel shows lighter and darker variants of your selected color for creating palettes.

Color Format Reference

HEX (Hexadecimal)

Hex color codes are six-digit hexadecimal numbers preceded by a hash (#), like #FF5733. Each pair of digits represents the intensity of red, green, and blue respectively, from 00 (no intensity) to FF (full intensity). For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. Hex is the most common format used in web design, CSS, and graphics software.

RGB (Red, Green, Blue)

RGB defines colors using three numbers from 0-255, representing the intensity of red, green, and blue light. White is rgb(255, 255, 255) and black is rgb(0, 0, 0). This additive color model matches how screens emit light. RGB is used in CSS, image processing, and digital displays.

HSL (Hue, Saturation, Lightness)

HSL describes colors using hue (0-360 degrees on the color wheel), saturation (0-100% intensity), and lightness (0-100%). It's more intuitive for humans — to make a color darker, decrease lightness; to make it less vivid, decrease saturation. Pure red is hsl(0, 100%, 50%), green is hsl(120, 100%, 50%), blue is hsl(240, 100%, 50%).

CMYK (Cyan, Magenta, Yellow, Key/Black)

CMYK is a subtractive color model used in printing. Unlike RGB which adds light, CMYK subtracts from white. Percentages range from 0-100% for each channel. Pure black is cmyk(0%, 0%, 0%, 100%). If you're designing for print, convert your colors to CMYK to see how they'll actually appear on paper.

Common Color Conversion Questions

How do I convert hex to RGB?

Split the 6-character hex into three pairs, convert each from hex to decimal. #FF5733 → FF(255), 57(87), 33(51) → rgb(255, 87, 51).

What is the difference between RGB and HSL?

RGB uses red/green/blue intensities (0-255). HSL uses hue angle, saturation, and lightness percentages. HSL is more intuitive for creating color variations.

Why does my color look different in print?

Screens use RGB (additive), printers use CMYK (subtractive). RGB has a wider gamut, so some vibrant colors can't be printed. Always test in CMYK for print work.

What hex code is white?

Pure white is #FFFFFF. Pure black is #000000.

How do I find the complementary color?

Add 180 degrees to the hue in HSL. The complement of hsl(30, 100%, 50%) is hsl(210, 100%, 50%).

What is alpha transparency in colors?

Alpha defines opacity from 0 (transparent) to 1 (opaque). Use rgba() or 8-digit hex (#RRGGBBAA).