Color Format Converter

Enter a HEX color (e.g., #FF5733) and see the RGB values instantly. Manual conversion: split into pairs (FF, 57, 33), convert each from hexadecimal to decimal (255, 87, 51). Result: rgb(255, 87, 51).

HEX uses hexadecimal notation (#RRGGBB), compact for CSS. RGB uses decimal (rgb(R, G, B)), range 0-255 each. They represent the same colors differently. HEX is more common in design tools; RGB is used in programming and allows alpha channel (RGBA).

HSL stands for Hue, Saturation, Lightness. Hue is the color angle (0-360°), saturation is intensity (0-100%), lightness is brightness (0-100%). HSL is intuitive for color adjustments: changing hue shifts the color, saturation affects vibrancy, lightness affects darkness/brightness.

Complementary colors are opposite on the color wheel (180° apart in HSL). For any color, add 180 to its hue value. Example: blue (hue 240°) complements orange (hue 60°). Complementary colors create high contrast and visual interest.

Alpha channel controls transparency, ranging from 0 (fully transparent) to 1 (fully opaque). RGBA adds alpha to RGB: rgba(255, 0, 0, 0.5) is 50% transparent red. HSLA adds it to HSL. HEX can use 8 digits: #RRGGBBAA.

Ensure sufficient contrast ratio: WCAG AA requires 4.5:1 for normal text, 3:1 for large text. WCAG AAA requires 7:1 and 4.5:1. Use contrast checkers, avoid low-contrast combinations, and test with color blindness simulators.

CSS has 147 named colors: red, blue, coral, steelblue, etc. Special values: transparent (fully transparent), currentColor (inherits text color). Keywords are convenient but limited. Use HEX/RGB/HSL for precise colors.

Convert each RGB value (0-255) to hexadecimal (00-FF). Example: rgb(255, 87, 51) → FF (255), 57 (87), 33 (51) → #FF5733. In JavaScript: '#' + [r,g,b].map(x => x.toString(16).padStart(2, '0')).join('').

HEX is most common and compact for solid colors. RGB/RGBA when you need transparency or programmatic manipulation. HSL when making color variations (easy to adjust lightness/saturation). All are widely supported in modern CSS.

A color space defines how colors are represented. sRGB is the web standard. Others include Adobe RGB (wider gamut), CMYK (printing), LAB (perceptually uniform). CSS Color Level 4 introduces display-p3 and other wide-gamut spaces with color() function.