Herramienta de la Categoría Generadores
Color Picker y Conversor de formatos de color (HEX, RGB, HSL)
Selecciona colores y obtén sus códigos equivalentes para diseño y desarrollo web.
Incluye
- Selector visual del navegador
- Conversión entre HEX, RGB y HSL
- Vista previa instantánea
- Sugerencia de color de texto legible
- Copia de cada formato con un clic
Selección de color
Ajusta el color visualmente y sigue cada formato en tiempo real
Elige un color con el selector del navegador, ajusta el HEX o los canales RGB y copia el formato listo para CSS, interfaces y documentación.
Vista previa
--
Ajusta los campos para ver el color.
Usa el formato #RRGGBB.
Introduce un color HEX.
Usa números del 0 al 255.
Usa números del 0 al 255.
Usa números del 0 al 255.
Lleva el mismo color a HEX, RGB y HSL sin hacer cuentas
El selector de color sirve a diseñadores, desarrolladores front-end y quien prepara presentaciones y necesita repetir un color exacto en otro programa.
- Convierte un código HEX de una marca a RGB o HSL.
- Crea un color a partir de los canales rojo, verde y azul.
- Comprueba si un texto claro u oscuro se lee mejor sobre el color.
Cómo usarlo
- 1. Introduce un HEX de seis dígitos o ajusta los valores de R, G y B.
- 2. Revisa la muestra y los formatos generados.
- 3. Observa la sugerencia de color de texto para la muestra.
- 4. Copia el formato que necesites.
Tres formas de escribir el mismo color
HEX, RGB y HSL describen el mismo color de maneras distintas. La herramienta convierte entre ellos automáticamente.
HEX
Seis dígitos hexadecimales, dos por canal.
#FF6600 significa rojo FF, verde 66 y azul 00.
RGB
Cada canal va de 0 a 255.
Es el formato que usan muchas herramientas de edición de imagen.
HSL
Tono en grados, saturación y luminosidad en porcentaje.
Facilita crear variaciones más claras u oscuras del mismo color.
Naranja #FF6600
Al introducir el HEX siguiente, la herramienta muestra los valores equivalentes.
HEX
#FF6600
RGB
rgb(255, 102, 0)
HSL
hsl(24, 100%, 50%)
Para este naranja, la sugerencia de texto es blanca, porque el color no es lo bastante claro para un texto oscuro.
Límites del selector
La herramienta trabaja con colores opacos de pantalla.
- El HEX debe tener seis dígitos: la forma corta, como #F60, y la transparencia no se aceptan.
- La sugerencia de texto usa una estimación de brillo y no sustituye una verificación completa de contraste de accesibilidad.
- Los colores de impresión, como CMYK y Pantone, no se convierten.
Preguntas frecuentes
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX representa el color con componentes hexadecimales; RGB combina rojo, verde y azul; HSL describe tono, saturación y luminosidad. Son formas distintas de representar el mismo color.