Saltar al contenido
TextArray
Totalmente local

Convertidor de colores

Convierte colores entre HEX, RGB y HSL, con alfa y una paleta de tintes.

Entrada
4

Convertidor de colores

Pegue un color en cualquier notación que CSS entienda (#3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%) y los otros dos volverán instantáneamente. El hexadecimal corto como #f00 se expande, el hash inicial es opcional y tanto la sintaxis de coma antigua como la sintaxis de espacio más nueva se leen sin que se le diga cuál utilizó. Coloque un color por línea y toda una paleta se convertirá a la vez, que es exactamente lo que desea cuando llega una transferencia de diseño como una columna de códigos hexadecimales y su hoja de estilo está escrita en HSL.

Alpha sobrevive al viaje como sea que lo escribas: rgba(59, 130, 246, 0.5), rgb(59 130 246 / 50%) y el hexadecimal de 8 dígitos #3b82f680 describen el mismo azul semitransparente y cada uno se convierte en el otro. Desactive "Mantener canal alfa" cuando solo desee el color opaco. El menú de formato de salida reduce el resultado a hexadecimal, RGB o HSL solo (útil para listas masivas) y el menú de sintaxis decide entre rgb(255, 0, 0) y rgb(255 0 0 / 0.5), por lo que lo que copia se pega directamente en el código base que ya tiene. El hexadecimal en mayúsculas está a una casilla de distancia.

Active la paleta de tintes y cada color obtendrá una tabla de variantes más claras y más oscuras, mezcladas uniformemente hacia el blanco y el negro. Es una forma rápida de derivar estados de desplazamiento, bordes y estilos deshabilitados a partir de un color de marca sin abrir una herramienta de diseño. Elija de uno a ocho pasos por lado; el color base se encuentra en el medio con 0%.

Todo se ejecuta en su navegador: sin carga, sin ida y vuelta al servidor, sin cuenta. Los colores de marca inéditos permanecen en su máquina. Las líneas que no son colores se dejan en su lugar como comentario CSS y se cuentan en el recuento, por lo que un error tipográfico nunca oculta el resto de una lista larga. Los colores CSS con nombre, como rebeccapurple, no son compatibles; conviértalos a hexadecimal primero.

Preguntas frecuentes

¿Qué notaciones de color lee?
Hexadecimal de 3, 4, 6 y 8 dígitos, con o sin almohadilla inicial; rgb() y rgba(); hsl() y hsla(). La sintaxis de coma y espacio funciona, y el tono acepta grados, rad, grado y giro. No se admiten colores con nombre, como rebeccapurple.
¿Cómo se maneja el canal alfa?
Alfa se lee desde el cuarto argumento, desde la forma de barra diagonal y desde un hexadecimal de 8 dígitos, luego se imprime nuevamente en la notación que usted eligió. Desactive "Mantener canal alfa" para obtener el color opaco.
¿Por qué un color cambia un dígito cuando lo vuelvo a convertir?
HSL se imprime como grados enteros y porcentaje entero, por lo que leer ese valor redondeado nuevamente puede aterrizar en el color vecino de 8 bits: hsl(217, 91%, 60%) regresa como #3c83f6, no #3b82f6. Los navegadores hacen lo mismo. Mantenga el hexadecimal como fuente de verdad cuando el byte exacto sea importante.
¿Qué hace la paleta de tintes?
Mezcla el color hacia el blanco y hacia el negro en pasos uniformes de luminosidad y enumera cada variante, para que puedas crear sombras flotantes, de borde y deshabilitadas a partir de un color base. Elija de uno a ocho pasos por lado.
¿Mi texto está subido a alguna parte?
No. La conversión se ejecuta completamente en su navegador y nada de lo que pegue sale de su dispositivo.