Selector de color HEX

Convierte cualquier color HEX a RGB y HSL, o elige uno nuevo a simple vista.

Funciona en tu navegador
Sin subidas
Sin cuenta

Cargando tu herramienta del navegador…

Qué hace Selector de color HEX

Escribe un código HEX como #3157D5 o la forma corta #35D, y la muestra y los valores RGB y HSL se actualizan mientras escribes. O haz clic en la muestra para abrir el selector de color de tu sistema y elegir un color a ojo. Es una forma rápida de pasar un color de una herramienta de diseño a rgb() para CSS, o de ver en qué se convierte un código HEX corto.

No hace falta ninguna imagen. Si quieres tomar un color de una captura, abre “Más opciones” y suelta allí la imagen. Los colores elegidos de una imagen se guardan como muestras. Para analizar los colores de toda una imagen, usa el Extractor de color dominante.

Ejemplo

Entrada

#35D

Resultado

HEX #3355DD
RGB rgb(51, 85, 221)
HSL hsl(228, 71%, 53%)

Cada dígito de un código de 3 dígitos se duplica, así que #35D es #3355DD.

Cómo usar Selector de color HEX

Escribe un código en “Color HEX” o haz clic en la muestra para elegir un color.
Lee los valores RGB y HSL bajo la muestra grande.
Haz clic en “Copiar” para copiar el código HEX, o copia RGB o HSL desde sus propios campos.

Conviene saber

No se aceptan códigos HEX de 8 dígitos con alfa, como #3157D580. Usa los seis primeros dígitos y fija la opacidad por separado en CSS.
En esta página solo se acepta HEX como entrada. La salida incluye HEX, RGB y HSL; no hay CMYK ni Pantone.
Los valores HSL se redondean a números enteros, así que al convertirlos de vuelta pueden desviarse una unidad en RGB.

Preguntas sobre Selector de color HEX

¿Cómo convierto HEX a RGB?

Divide los seis dígitos en tres pares y convierte cada uno de base 16 a base 10. #3157D5 se convierte en 31, 57 y D5, que son 49, 87 y 213. Escribe aquí el código y rgb(49, 87, 213) aparece al momento.

¿Qué es un color HEX de 3 dígitos?

Es una forma abreviada en la que cada dígito se duplica: #35D significa #3355DD y #FFF significa #FFFFFF. Solo funciona con colores cuyos pares se repiten, así que la mayoría de los colores de marca necesitan los seis dígitos.

¿Cuándo uso HSL en lugar de HEX?

HSL es más fácil de ajustar a mano. Cambiar solo el último valor aclara u oscurece un color, lo que viene bien para estados hover y tonos. HEX es más corto y es lo que exportan la mayoría de las herramientas de diseño.