Color Converter
Convert between HEX, RGB, HSL, and HSV color formats. Live preview, color harmonies, and CSS code generation.
Understanding Color Models
HEX Colors
HEX (hexadecimal) is the most common color notation in web development. It uses a # followed by 6 hex digits: 2 for red, 2 for green, 2 for blue. Each pair ranges from 00 (0) to FF (255). Example: #FF6B35 = Red 255, Green 107, Blue 53. Shorthand notation like #F00 expands to #FF0000.
RGB Color Model
RGB is an additive color model where Red, Green, and Blue light combine to create colors. Each channel ranges 0–255. rgb(0, 0, 0) is black, rgb(255, 255, 255) is white. RGB is used by displays, cameras, and web browsers. RGBA adds an alpha channel (0–1) for transparency.
HSL Color Model
HSL (Hue, Saturation, Lightness) is considered more intuitive than RGB. Hue is the color angle on a 360° wheel (0°=red, 120°=green, 240°=blue). Saturation is color intensity (0%=gray, 100%=vivid). Lightness controls brightness (0%=black, 50%=pure color, 100%=white). HSL is preferred for creating color schemes because adjusting one property is predictable.
Color Harmonies
Complementary
Opposite on the color wheel (180° apart). Creates high contrast and visual impact. Use for CTAs and accents.
Analogous
Adjacent colors (30° apart). Creates harmonious, cohesive palettes. Common in nature-inspired designs.
Triadic
Three colors equally spaced (120° apart). Vibrant and balanced. Use one dominant, two as accents.
FAQ
Which format should I use in CSS?
HEX is the most compact and widely used. HSL is best when you need to create variants (lighter/darker) of a color. Modern CSS also supports the oklch() function for perceptually uniform colors.
How do I ensure color accessibility?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Use tools like WebAIM's contrast checker to verify your color combinations meet these standards.