Selector de color
Elige un color en un campo visual y obtén su código HEX, RGB y HSL.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Un color, todos sus códigos
Elige visualmente un color, ajusta tono y opacidad, y obtén los códigos HEX, RGB y HSL listos para pegar en tu CSS. Haz clic en un valor para copiarlo.
-
Ajusta el tono
El deslizador arcoíris elige el color base.
-
Afina en el campo
Saturación horizontal, brillo vertical.
-
Copia el código
HEX, RGB o HSL, con opacidad si hace falta.
Ejemplo: un naranja vivo
| Formato | Valor |
|---|---|
| HEX | #FF8800 |
| RGB | rgb(255, 136, 0) |
| HSL | hsl(32, 100%, 50%) |
Conversiones sRGB estándar, valores redondeados a enteros. Todo se calcula en tu navegador.
Preguntas frecuentes
¿Cómo funciona el campo de color?
El cuadrado grande muestra la saturación (de izquierda a derecha) y el brillo (de abajo arriba) para el tono elegido con el deslizador. Haz clic o arrastra para seleccionar; el valor HEX/RGB/HSL se actualiza en vivo.
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX es un código hexadecimal compacto (#FF8800). RGB describe el color por sus componentes rojo, verde, azul (rgb(255, 136, 0)). HSL lo describe por tono, saturación, luminosidad (hsl(32, 100%, 50%)) — más intuitivo para ajustar un matiz.
¿Para qué sirve la opacidad?
Controla la transparencia (canal alfa). Por debajo del 100 %, los códigos pasan a rgba()/hsla() y el HEX gana dos caracteres (p. ej. #FF8800CC). Útil para superposiciones y sombras.
¿El color es exacto para la web?
Sí: los valores se calculan con las conversiones estándar sRGB y se redondean a enteros. Copia el formato que encaje en tu CSS. Todo se calcula localmente, no se envía nada.