Color Picker Guide: HEX, RGB, HSL Conversion for Web Developers

Color Picker Guide: HEX, RGB, HSL Conversion for Web Developers Colors in web development can be represented in multiple formats: HEX, RGB, HSL, HSV. Understanding these formats and how to convert between them is essential for modern web development. Color Format Comparison Format Example Use Case HEX #667eea CSS, design tools RGB rgb(102, 126, 234) CSS, JavaScript RGBA rgba(102, 126, 234, 0.8) Transparency in CSS HSL hsl(228, 77%, 66%) Color manipulation HSV/HSB hsv(228, 56%, 92%) Color pickers HEX Color Format Structure: #RRGGBB where each pair is a hexadecimal value (00-FF) #667eea ││└─ Blue (ea = 234) │└─── Green (7e = 126) └──── Red (66 = 102) Shorthand HEX #fff = #ffffff ( white ) #f0f = #ff00ff ( magenta ) #369 = #336699 ( blue ) HEX with Alpha (Transparency) #667 eea80 /* 50% transparent */ └─── Alpha ( 80 = 128 / 255 = 50 %) Converting HEX to RGB function hexToRgb ( hex ) { const result = /^# ?([ a-f \d]{2})([ a-f \d]{2})([ a-f \d]{2}) $/i . exec ( hex ); return { r : parseInt