🎨 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.

Hex, RGB, HSL, and CMYK Side by Side

The table below runs six familiar colors through every format this tool outputs, computed with the same conversion functions the page uses. It's a handy sanity check when a conversion of your own looks off:

Two rows teach the whole HSL trick. White and middle gray have zero saturation and a meaningless hue, which is why grayscale lives on the lightness axis alone. And the coral red at 100% saturation but 60% lightness shows what lightness does — nudge it toward 50% and the color deepens; push past 60% and it washes toward pink. That knob is the reason designers do their variations in HSL rather than RGB.

Contrast and Readable Text

Color choice isn't only aesthetic — if text sits on the color, the pair has to pass a contrast test. WCAG 2.1 Level AA, the standard threshold for accessibility, requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (roughly 18.66px and up, or 14px bold). Level AAA, the stricter tier, asks 7:1 for body copy. The scale runs from 1:1, where text and background are identical, to 21:1, the maximum: black on white.

Intuition fails here more often than it holds. A brand yellow at hsl(48, 100%, 50%) carries a respectable brightness but almost no contrast against white — white text on it fails outright. Deep navy #1a1a2e passes with white text easily. The practical workflow: pick your brand color here, note its hex, then test text colors against it with a contrast checker before committing. Grays around #767676 are the boundary for white text on a neutral background — lighter than that and white text starts failing.

Shorthand Hex, Alpha, and Named Colors

Three variations you'll meet in real stylesheets. Shorthand: when both digits of each hex pair match, the code compresses from six characters to three — #ffffff becomes #fff, #3366ff becomes #36f. It only works when the pairs repeat, so #6366f1 has no short form.

Alpha: modern CSS accepts 8-digit hex, where a fourth pair encodes opacity from 00 (fully transparent) to ff (opaque) — #6366f180 is roughly half-transparent indigo. The rgba() notation expresses the same idea with a 0-to-1 decimal: rgba(99, 102, 241, 0.5).

Named colors: CSS defines 148 of them, from aliceblue and black through rebeccapurple (added in memory of Rebecca Meyer and standardized in CSS Color Module Level 4). They're fine for prototypes and readable in small doses, but a palette mixes hex codes in practice — names can't express your exact shade, and half the names nobody can picture without looking them up anyway.

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).

Can I shorten a hex code like #ffffff?

Yes, when both digits of each pair match. #ffffff compresses to #fff, #3366ff to #36f. Three-digit hex duplicates each digit once — it cannot express #6366f1 because the pairs differ.

What contrast ratio does accessible text need?

WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text (18.66px and up, or 14px bold). The scale runs from 1:1 (invisible difference) to 21:1 (black on white), and Level AAA asks 7:1 for body copy.