Selector de color HEX, RGB y HSL
Cómo funciona
Haz clic en el recuadro de color para abrir el selector de colores de tu navegador y elige el tono que necesitas. También puedes escribir un código HEX de seis cifras en el campo Introduce el código HEX: la almohadilla inicial puedes omitirla, y el campo solo acepta cifras hexadecimales. Junto al selector hay una vista previa grande del color.
Para cada color la herramienta muestra tres formatos, cada uno con su botón Copiar: • HEX, por ejemplo #1A73E8: el formato para pegar en CSS, en herramientas de diseño y en manuales de marca. • RGB, por ejemplo rgb(26, 115, 232): los tres canales rojo, verde y azul de 0 a 255, útil cuando tienes que calcular o combinar colores en el código. • HSL, por ejemplo hsl(214, 82%, 51%): matiz, saturación y luminosidad, el formato más cómodo para construir variantes de un color.
Colores recientes. Cada color completo que eliges o escribes entra en el historial, hasta los últimos 20, guardado en el localStorage del navegador: se mantiene aunque recargues la página. Un clic en una muestra la vuelve a cargar y el botón Borrar vacía la lista. Se convierte en una pequeña paleta personal: introduce una vez los colores de tu marca y los encuentras la próxima vez.
Cómo leer el HSL sin ser diseñador. • El matiz (hue) es el color propiamente dicho, un ángulo de 0 a 360 grados: 0 es rojo, 120 verde y 240 azul. • La saturación dice lo vivo que es: 0% es gris y 100% es el color puro. • La luminosidad dice lo claro que es: 50% es el color puro, hacia 100% obtienes los tonos claros y hacia 0% los oscuros.
Para un color complementario o una paleta armónica a partir de un color base, usa el Color Palette Generator de este sitio, que calcula los esquemas complementario, análogo y triádico y comprueba el contraste WCAG.
Todo ocurre en tu navegador: ningún color se envía a un servidor.
Preguntas frecuentes
¿Cómo encuentro el código HEX de un color?
- Elige el color en el selector y lee la fila HEX, y luego pulsa Copiar. El código tiene seis cifras hexadecimales precedidas de #, dos por cada canal: en #1A73E8 el rojo es 1A (26), el verde 73 (115) y el azul E8 (232).
¿Cómo convierto un color de HEX a RGB?
- Escribe el código HEX en el campo Introduce el código HEX y lee la fila RGB: #1A73E8 pasa a ser rgb(26, 115, 232). A mano se hace convirtiendo cada pareja de cifras de hexadecimal a decimal: 1A es 1 × 16 + 10 = 26. La fila HSL se actualiza a la vez, así que con el mismo gesto tienes también la conversión de HEX a HSL.
¿Cómo convierto un color de RGB a HEX?
- Convierte cada canal de decimal a hexadecimal en dos cifras y ponlas en fila tras el #: rgb(255, 159, 67) pasa a ser #FF9F43, porque 255 es FF, 159 es 9F y 67 es 43. El campo de la herramienta solo acepta el código HEX: una vez introducido, las filas RGB y HSL te confirman que la conversión es correcta.
¿Qué diferencia hay entre HEX, RGB y HSL?
- Ninguna en el color, solo cambia cómo se escribe. HEX y RGB describen los mismos tres canales rojo, verde y azul, el primero en hexadecimal y el segundo en decimal. HSL describe el mismo color como matiz, saturación y luminosidad, y es el más cómodo cuando quieres una versión más clara o más oscura del mismo color.
¿Puedo introducir un código HEX de tres cifras como #FFF?
- No, el campo trabaja con el código completo de seis cifras: escribe #FFFFFF en lugar de #FFF. La forma corta se expande duplicando cada cifra, así que #1AF pasa a ser #11AAFF.
¿El historial de colores se guarda?
- Sí, en el localStorage de tu navegador: los últimos 20 colores se mantienen aunque cierres la página. El historial no sale de tu dispositivo y no se sincroniza en ningún sitio. Para vaciarlo, usa el botón Borrar.
¿Los colores que elijo se envían a un servidor?
- No. La página no tiene backend: las conversiones las hace JavaScript en la pestaña del navegador. Puedes comprobarlo en la pestaña Red de las herramientas para desarrolladores, donde al usar la herramienta no sale ninguna petición.