🎨 Color Picker — HEX RGB HSL Converter
Pick colors visually and instantly convert between HEX, RGB, and HSL formats. Copy CSS-ready values with one click. Free online color picker and converter for designers.
Pick Color
Click to open color picker
HEX
#
RGB
R
G
B
HSL
H
S%
L%
100%
Selected
Complementary
Tints (lighter)
Shades (darker)
CSS Output
How to Use
1
Pick a color
Click the color swatch to open the browser color picker, or type directly into HEX, RGB, or HSL fields.
2
All formats update
All input fields and the preview update in real-time as you change any value.
3
Copy CSS values
Click any copy button in the CSS Output section to copy your color in any CSS format.
Frequently Asked Questions
What is HEX color format?
HEX (hexadecimal) color format represents colors as a 6-digit code prefixed with #, like #7c6af7. Each pair of digits (00–FF) represents Red, Green, and Blue channel intensity.
What is the difference between RGB and HSL?
RGB defines colors by Red, Green, Blue channel values (0–255). HSL uses Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) — more intuitive for human perception and easier to create color variations.
How do I convert HEX to RGB?
Split the HEX code into three pairs, convert each from hexadecimal to decimal: #7c6af7 → R:124, G:106, B:247. This tool does it instantly as you type.
Which color format should I use in CSS?
Use HEX for static colors in CSS (most common). Use HSL when you need to programmatically create lighter/darker variants. Use RGB when you need transparency (rgba()).
How do I pick accessible colors?
Ensure sufficient contrast between text and background. WCAG AA requires a 4.5:1 contrast ratio for normal text. Tools like our color picker help you find complementary colors.
Guía: Selector de Colores
¿Qué es?
Convierte entre formatos de color: HEX (#7c6af7), RGB (rgb(124,106,247)), HSL (hsl(248,90%,69%)) y valores CSS. La conversión manual es propensa a errores — esta herramienta garantiza precisión en todos los formatos.
Cómo usar
- Haz clic en el área de color o usa el selector visual.
- O ingresa un valor en cualquier campo — todos los demás se actualizan.
- Copia el formato que necesitas.
Consejos
- HSL es ideal para crear variantes de color: ajusta L% para más claro/oscuro, S% para más/menos saturado.
- Usa
rgba()cuando necesites transparencia. - Almacena colores de marca como variables CSS:
--color-primary: #7c6af7.