Colores en hexadecimal para css

Seleccionador de color hexadecimal de la imagen

const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+.{0,1\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, ‘0’).replace(‘NaN’, ”)).join(”)}`

Ha pasado mucho tiempo desde que respondí originalmente a esta pregunta. Luego, las geniales características de ECMAScript 5 y 2015+ se han vuelto ampliamente disponibles en los navegadores, como las funciones de flecha, Array.map, String.padStart y las cadenas de plantilla. Así que ahora es posible escribir un rgb2hex de una sola línea:

Básicamente, usamos una expresión regular para obtener cada dígito dentro de la cadena rgb, slice(1) para obtener sólo los dígitos (el primer resultado de match es la cadena completa en sí), map para iterar a través de cada dígito, cada iteración convirtiendo a Número con parseInt, luego de vuelta a una Cadena hexadecimal (a través de una conversión base-16), añadiendo cero si es necesario a través de padStart. Finalmente, sólo hay que unir cada dígito convertido/ajustado a una cadena única que empieza por ‘#’.

const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, ‘0’).replace(‘NaN’, ”)).join(”)}`

Selector de color Rgba

Las palabras clave de color estándar de CSS se limitan a 149 tonos con nombre; el método de color hexadecimal (o “hex”) tiene acceso a toda la gama RGB. La clave para aprender hexadecimal es entender el sistema de conteo hexadecimal. A diferencia de nuestro sistema familiar de base-10, con enteros de 0 a 9, el sistema hexadecimal tiene 16 dígitos: Del 0 al 9, seguidos de la a a la f. En la variante más común, los componentes hexadecimales del color -rojo, verde y azul- se representan con dos pares de dígitos cada uno.

Utilizados en pares de esta manera, el valor más bajo de un componente de color sería 00. Un paso más arriba sería 01, seguido de 02, etc. Después del 09, el par de números pasa al 0a, luego al 0b, hasta llegar al 0f. En ese momento, el primer dígito pasa por encima como un cuentakilómetros, y el último se reinicia, convirtiéndose en 10. En ese momento, el último dígito empieza a subir de nuevo.

Una nemotecnia sencilla para recordar la base-16 para el color es pensar en cada componente de color (rojo, verde y azul) como una linterna independiente con un filtro apropiado. En hexadecimal, 00 significa “apagado”, y ff significa “linterna completamente encendida”.

Códigos de color Html

El hexadecimal utiliza dieciséis símbolos distintos, en el caso del color css los símbolos 0-9 para representar los valores del cero al nueve (obviamente), y A, B, C, D, E, F para representar los valores del diez al quince. Así, con un carácter Hexadecimal se pueden representar 16 valores. Con dos Hexadecimales se pueden representar 256 (16*16) valores.

Los colores en los ordenadores se expresan combinando el rojo, el verde y el azul en diferentes proporciones. Los valores de cada color van de 0 a 255. En notación RGB expresamos un rojo puro escribiendo (255,0,0) donde el verde y el azul tienen valor 0. Si mezclamos la misma cantidad de cada uno obtenemos diferentes tonos de gris. (123,123,123) es un tono de gris, (0,0,0) representa el negro y (255,255,255) es el blanco.

Para seguir expresando los números más grandes con un solo dígito, el sistema hexadecimal da a los números del 10 al 15 una representación de 1 carácter de longitud asignándoles letras. Así que ahora 10=A, 11=B, 12=C, 13=D, 14=E, 15=F. (Las letras pueden ser minúsculas).

Veamos cómo funciona nuestro sistema decimal, ya que es muy similar al hexadecimal. En el número 13, el primer dígito es un uno pero representa un 10 y para obtener trece sumamos 3, 13=10+3. Es decir, multiplicamos el segundo dígito de derecha a izquierda siempre por 10 y luego sumamos el siguiente número. El 2 en 23 representa un 20. En hexadecimal multiplicamos el segundo dígito de derecha a izquierda siempre por 16. (Hexadecimal significa dieciséis).

Selector de color css

Nota: Aunque los valores de <color> están definidos con precisión, su apariencia real puede variar (a veces significativamente) de un dispositivo a otro. Esto se debe a que la mayoría de los dispositivos no están calibrados, y algunos navegadores no son compatibles con los perfiles de color de los dispositivos de salida.

Palabras clave de colorLas palabras clave de color son identificadores que no distinguen entre mayúsculas y minúsculas y que representan un color específico, como el rojo, el azul, el negro o el verde claro. Aunque los nombres describen más o menos sus respectivos colores, son esencialmente artificiales, sin una razón estricta detrás de los nombres utilizados.

palabra clave transparenteLa palabra clave transparente representa un color totalmente transparente. Esto hace que el fondo detrás del elemento de color sea completamente visible. Técnicamente, transparente es un atajo para rgba(0,0,0,0).

Nota: Para evitar un comportamiento inesperado, como en un <gradiente>, la especificación CSS actual establece que transparente debe calcularse en el espacio de color alfa-premultiplicado. Sin embargo, tenga en cuenta que los navegadores más antiguos pueden tratarlo como negro con un valor alfa de 0.