Understanding Color Formats
- HEX (#RRGGBB): 6-digit hex code. Most used in web design and CSS. Example:
#0ea5e9= sky blue. - RGB (r, g, b): Three values 0–255 for Red, Green, Blue. Used in CSS and image editors. Example:
rgb(14, 165, 233) - HSL (h, s%, l%): Hue, Saturation, Lightness. Most intuitive — great for creating color variations.
💡 When to Use Which:
• HEX — CSS stylesheets, copying between tools
• RGB — JavaScript/Canvas image manipulation
• HSL — Creating shades by adjusting lightness
• HEX — CSS stylesheets, copying between tools
• RGB — JavaScript/Canvas image manipulation
• HSL — Creating shades by adjusting lightness
How to Use the Color Picker
1Open the Color Picker & Converter.
2Use the native color picker or type a HEX code directly.
3See HEX, RGB, and HSL equivalents update instantly.
4Click any value to copy to clipboard.
5Save colors to swatches via localStorage for future reference.
FAQ
How do I get the HEX code of a color on my screen?
Use your browser's DevTools (inspect → click color swatch in CSS panel) or install the ColorZilla extension for Chrome/Firefox. On macOS, the Digital Color Meter app reads any screen color.
What's an 8-digit HEX code?
8-digit HEX includes opacity: #RRGGBBAA. The last two digits represent alpha (00 = transparent, FF = opaque). Alternatively, use rgba() in CSS for compatibility.