Color Converter

HEX is a 6-digit hexadecimal code (e.g. #FF5733) used in CSS and HTML. RGB specifies amounts of Red, Green and Blue (0–255 each). HSL describes Hue (0–360 degrees on the color wheel), Saturation (0–100%) and Lightness (0–100%). All three describe the same colors but in different ways. Designers often prefer HSL because it is more intuitive to adjust.

Split the HEX code into three pairs and convert each from base 16 to base 10. Example: #FF5733 → R=FF=255, G=57=87, B=33=51 → rgb(255, 87, 51). In JavaScript: parseInt("FF",16) = 255. Our converter does this instantly — just paste the HEX code and all formats are shown.

HSB (Hue, Saturation, Brightness) is also called HSV (Hue, Saturation, Value). In HSB, maximum brightness = pure color. In HSL, 50% lightness = pure color (100% lightness = white, 0% = black). HSB is used in Adobe Photoshop and most design apps. A pure red: HSL = (0, 100%, 50%) = HSB = (0, 100%, 100%). Both use Hue 0–360 and Saturation 0–100%.

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in print design. Printers mix these four ink colors to produce full-color output. RGB is for screens (additive light mixing). CMYK values are 0–100%. Pure black in CMYK = (0, 0, 0, 100). CMYK cannot reproduce all colors achievable in RGB — the difference is called "out of gamut."

The # prefix indicates a hexadecimal color code in CSS and HTML. #RRGGBB uses 6 hex digits: 2 each for red, green, blue. #RGB is shorthand (3 digits, each duplicated: #FFF = #FFFFFF). #RRGGBBAA adds alpha transparency (8 digits). Colors can also be written as rgb(), hsl(), or named colors (e.g. "tomato", "steelblue") in modern CSS.

The complementary color is directly opposite on the color wheel — add or subtract 180 from the Hue value. Example: Hue 30 (orange) → complementary Hue 210 (blue). In CSS: use the HSL representation and add 180 to H. Split-complementary uses Hue ±150. Triadic uses Hue ±120. Analogous uses Hue ±30.

Alpha (A) controls transparency. In CSS rgba() and hsla(), alpha is 0 (fully transparent) to 1 (fully opaque). In HEX with alpha (#RRGGBBAA), alpha is 00 (transparent) to FF (opaque). In design tools, opacity is expressed as 0–100%. Example: 50% opacity = rgba(R,G,B,0.5) = hex alpha 80 (128 in decimal).

Web-safe colors are 216 colors that display consistently on all monitors at 8-bit depth, using only hex digits 00, 33, 66, 99, CC, FF in each channel. Examples: #FF0000 (red), #00FF00 (lime), #0000FF (blue), #FFCC00 (amber). In modern web design with 24-bit displays, web-safe colors are no longer necessary — all 16.7 million RGB colors display correctly.

CSS supports multiple color syntaxes: hex (#RRGGBB), rgb(), rgba() (with opacity), hsl(), hsla(), named colors (140+ names), and in CSS Color Level 4: lab(), lch(), oklch() for perceptual uniformity. Modern browsers support all of these. For design systems, HSL is popular because you can easily adjust brightness without changing the hue.

First normalize RGB to 0–1 by dividing by 255. Then K = 1 − max(R,G,B). Then C = (1 − R − K) / (1 − K), M = (1 − G − K) / (1 − K), Y = (1 − B − K) / (1 − K). Example: rgb(255,87,51) → CMYK(0%, 66%, 80%, 0%). Note: screen-to-print conversion is not exact; professional printers use ICC color profiles for accurate matching.