Color Picker - HEX, RGB & HSL Tool
Pick and convert colors online. Get HEX, RGB, HSL, and CMYK values instantly. Use the visual color wheel to explore palettes and find the perfect shade.
Formula
RGB to HEX: #RRGGBB where RR, GG, BB are hexadecimal (00-FF)
Colors are converted between formats using mathematical transformations. RGB uses 0-255 values for each channel. HEX represents these as two-digit hexadecimal numbers. HSL calculates hue angle, saturation percentage, and lightness from the RGB values.
Worked Examples
Example 1: Convert Brand Red to All Formats
Problem: Your brand uses #E74C3C red. Get RGB and HSL values for design software.
Solution: Input: Move sliders to R=231, G=76, B=60\n\nCalculated values:\n- HEX: #E74C3C\n- RGB: rgb(231, 76, 60)\n- HSL: hsl(6, 78%, 57%)\n\nThe HSL tells us it's a red-orange (6°), highly saturated (78%), medium lightness (57%).
Result: All three formats represent the same color
Example 2: Create a Darker Shade
Problem: You have #3498DB blue and need a darker version for hover states.
Solution: Original: R=52, G=152, B=219\nHSL: hsl(204, 70%, 53%)\n\nTo darken, reduce lightness from 53% to 40%:\nNew HSL: hsl(204, 70%, 40%)\n\nConverted back:\n- HEX: #1A6CA8\n- RGB: rgb(26, 108, 168)\n\nUsing HSL makes shade creation intuitive!
Result: Darker shade: #1A6CA8
Example 3: Find Complementary Color
Problem: Design needs a complementary color to #2ECC71 green.
Solution: Original green HSL: hsl(145, 63%, 49%)\n\nComplementary = opposite on color wheel (add 180°):\n145° + 180° = 325°\n\nComplementary HSL: hsl(325, 63%, 49%)\n\nConverted:\n- HEX: #CC2E84\n- RGB: rgb(204, 46, 132)\n\nThis magenta-pink complements the green perfectly.
Result: Complementary: #CC2E84 magenta
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL color formats?
HEX uses a 6-digit hexadecimal code (#FF0000 for red). RGB specifies Red, Green, Blue values from 0-255. HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%). All three can represent the same 16.7 million colors, just in different notation systems. HEX is most common in web development, RGB in design software, and HSL for intuitive color adjustments.
When should I use HEX vs RGB vs HSL?
Use HEX for web development and CSS—it's compact and universally supported. Use RGB when working with design software, image editing, or programmatic color manipulation. Use HSL when you need to adjust brightness or saturation intuitively—changing lightness in HSL is much easier than calculating new RGB values. HSL is also great for creating color palettes with consistent saturation.
What does each RGB value represent?
R (Red), G (Green), and B (Blue) each range from 0-255. A value of 0 means none of that color; 255 means maximum. rgb(255,0,0) is pure red, rgb(0,255,0) is pure green, rgb(0,0,255) is pure blue. Mixing creates other colors: rgb(255,255,0) is yellow, rgb(255,0,255) is magenta, rgb(0,255,255) is cyan. rgb(0,0,0) is black, rgb(255,255,255) is white.
How do I read HSL values?
H (Hue) is the color angle on a 360° wheel: 0°=red, 60°=yellow, 120°=green, 180°=cyan, 240°=blue, 300°=magenta. S (Saturation) is color intensity: 0%=gray, 100%=vivid. L (Lightness) is brightness: 0%=black, 50%=pure color, 100%=white. Example: hsl(0, 100%, 50%) is pure red.
How do I convert HEX to RGB manually?
Split the 6-digit HEX into pairs: #FF5733 → FF, 57, 33. Convert each pair from hexadecimal to decimal: FF=255, 57=87, 33=51. Result: rgb(255, 87, 51). For shorthand HEX like #F00, expand to #FF0000 first. Our tool does this conversion instantly.
How do I create accessible color combinations?
WCAG guidelines require minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px bold). Use tools to check contrast. Generally: dark text on light backgrounds or vice versa. Avoid low-contrast combinations like light gray on white. Don't rely on color alone to convey information.