Herramientas de Color
Convert colors between HEX, RGB and HSL with a live preview — the quick way to grab the exact value you need for CSS and design.
Acerca de Herramientas de Color
Las herramientas de color resuelven un problema pequeño pero constante: el valor que tienes no está en el formato que necesitas. Una guía de marca te da un código hexadecimal, un archivo de diseño reporta RGB, una variable CSS quiere HSL, y en algún punto intermedio tienes que convertir. Esta categoría tiene cuatro herramientas exactamente para eso: el conversor de HEX a RGB para la conversión más habitual, el más amplio conversor de color para moverse entre formatos, el verificador de contraste de color para la accesibilidad, y el generador de tonos de color para construir una paleta. Están dirigidas a desarrolladores front-end, diseñadores y cualquiera que monte una hoja de estilos o una presentación.
Elegir entre ellas es sencillo. Si tienes un valor y necesitas otro, usa HEX a RGB cuando esa sea la dirección exacta que quieres, o el conversor de color general cuando vayas en sentido contrario o necesites HSL. Vale la pena aprender HSL aquí, porque es el formato que hace fácil razonar sobre un color: el tono te dice de qué color se trata, y ajustar solo la luminosidad te da un conjunto coherente de tintes y sombras. Cuando necesitas un rango completo en lugar de un solo valor —un estado hover, un estado deshabilitado, un fondo que se quede discreto detrás del texto— el generador de tonos de color lo hace en un solo paso. Y antes de publicar cualquier combinación de texto y fondo, pásala por el verificador de contraste de color, que mide la relación de contraste para que sepas si tu combinación es cómodamente legible o solo técnicamente visible.
Las cuatro herramientas son gratuitas, no necesitan cuenta y se ejecutan por completo en tu navegador —tus valores de color nunca se suben, y la vista previa en vivo se actualiza mientras escribes en lugar de tras una ida y vuelta al servidor. Eso las hace lo bastante rápidas para usarlas como borrador mientras trabajas: ajusta un valor, observa la muestra, copia el resultado. Si estás construyendo CSS en lugar de eligiendo valores, la categoría de generadores CSS tiene un constructor de degradados y uno de sombras que producen código listo para copiar, y la categoría de generadores incluye un generador de color aleatorio por si solo necesitas un punto de partida.
Preguntas frecuentes
¿A qué relación de contraste debería aspirar?
La guía WCAG, ampliamente usada, pide una relación de al menos 4,5 a 1 para el texto de cuerpo normal y 3 a 1 para el texto grande, con un 7 a 1 más estricto para el nivel más alto. El verificador de contraste te muestra la relación para que puedas juzgarla frente al estándar que corresponda a tu proyecto.
¿HEX, RGB y HSL son intercambiables?
Para colores opacos normales, sí. HEX y RGB describen el mismo valor con notación distinta, y HSL se corresponde con los mismos colores sRGB. El redondeo al convertir a HSL y de vuelta puede desplazar un valor un punto o dos, lo cual es invisible en la práctica pero puede hacer que dos códigos parezcan ligeramente distintos.
¿Estas herramientas funcionan con transparencia?
El alfa se expresa mediante formatos como RGBA, HSLA y hexadecimal de ocho dígitos. Ten en cuenta que la relación de contraste de un color semitransparente depende de lo que haya detrás, así que comprueba el color final mezclado en lugar del transparente.
¿Se almacenan mis datos de color en algún sitio?
No. Las cuatro herramientas se ejecutan en tu navegador, así que nada de lo que introduces se sube, guarda ni registra. Son gratuitas y sin cuenta.