El color en los estilos se puede configurar de diferentes maneras: por valor hexadecimal, por nombre, en formato RGB, RGBA, HSL, HSLA. El color en los estilos se puede configurar de diferentes maneras: por valor hexadecimal, por nombre, en formato RGB, RGBA, HSL, HSLA

Los números hexadecimales se utilizan para especificar colores. El sistema hexadecimal, a diferencia del sistema decimal, se basa, como su nombre lo indica, en el número 16. Los números serán los siguientes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Los números del 10 al 15 se sustituyen por letras latinas. Los números mayores de 15 en el sistema hexadecimal se forman combinando dos números en uno. Por ejemplo, el número 255 en decimal corresponde al número FF en hexadecimal. Para evitar confusiones en la definición del sistema numérico, el número hexadecimal está precedido por el símbolo de almohadilla #, por ejemplo #666999. Cada uno de los tres colores, rojo, verde y azul, puede tomar valores de 00 a FF. Así, la designación del color se divide en tres componentes #rrggbb, donde los dos primeros caracteres marcan el componente rojo del color, los dos del medio marcan el verde y los dos últimos marcan el azul. Se permite utilizar la forma abreviada #rgb, donde cada carácter debe ser duplicado. Por lo tanto, la entrada #fe0 debe considerarse como #ffee00.

por nombre

Los navegadores admiten algunos colores por nombre. En mesa. 1 muestra los nombres, código hexadecimal, valores en RGB, formato HSL y descripción.

con RGB

Puede definir un color utilizando los valores rojo, verde y azul en términos decimales. Cada uno de los tres componentes de color toma un valor de 0 a 255. También es aceptable establecer el color como un porcentaje, mientras que el 100 % corresponderá al número 255. Primero, se especifica la palabra clave rgb y luego se especifican los componentes de color. especificado entre paréntesis, separados por comas, por ejemplo rgb(255 , 128, 128) o rgb(100%, 50%, 50%).

RGBA

El formato RGBA es similar en sintaxis a RGB, pero incluye un canal alfa que establece la transparencia del elemento. Un valor de 0 es totalmente transparente, 1 es opaco y un valor intermedio como 0,5 es translúcido.

RGBA se agrega a CSS3, por lo que la validación del código CSS debe realizarse de acuerdo con esta versión. Cabe señalar que el estándar CSS3 aún está en desarrollo y algunas de sus características pueden cambiar. Por ejemplo, un color RGB agregado a la propiedad background-color pasa la validación, pero uno agregado a la propiedad background no. Al mismo tiempo, los navegadores entienden correctamente el color de ambas propiedades.

LGV

El nombre del formato HSL se forma a partir de una combinación de las primeras letras Hue (tono), Saturate (saturación) y Lightness (luminosidad). El tono es el valor del color en la rueda de colores (Fig. 1) y se especifica en grados. 0° es rojo, 120° es verde y 240° es azul. El valor de matiz puede variar de 0 a 359.

Arroz. 1. Rueda de colores

La saturación es la intensidad de un color, medida como un porcentaje de 0% a 100%. Un valor de 0% indica ausencia de color y una sombra de gris, 100% es el valor máximo de saturación.

La luminosidad establece qué tan brillante es el color y se especifica como un porcentaje de 0% a 100%. Los valores pequeños oscurecen el color, mientras que los valores altos lo hacen más claro, los valores extremos de 0% y 100% corresponden a blanco y negro.

HSLA

El formato HSLA es similar en sintaxis a HSL, pero incluye un canal alfa que establece la transparencia del elemento. Un valor de 0 es totalmente transparente, 1 es opaco y un valor intermedio como 0,5 es translúcido.

Los valores de color en los formatos RGBA, HSL y HSLA se agregan a CSS3, por lo que al usar estos formatos, verifique la validez del código con respecto a la versión.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Advertencia

Todos los métodos para atrapar un león enumerados en el sitio son teóricos y se basan en métodos computacionales. Los autores no garantizan su seguridad al utilizarlos y declinan cualquier responsabilidad por el resultado. ¡Recuerde, el león es un depredador y un animal peligroso!

El resultado de este ejemplo se muestra en la Fig. 2.

Arroz. 2. Colores en la página web

Los colores HTML se indican con seis caracteres después de la barra, por ejemplo, #000000. Estos seis caracteres representan las proporciones de los distintos colores (rojo, verde y azul) en el color final. La imagen en el monitor de su computadora se compone de una gran cantidad de puntos llamados píxeles. Cada píxel es una pequeña fuente de luz, llamémoslo "linterna", que a su vez consta de tres linternas: roja, verde y azul. Al reducir o aumentar la intensidad del brillo de las linternas de colores individuales, obtenemos el color deseado.

códigos de color html

Los colores en HTML se indican mediante la notación hexadecimal (HEX) para la combinación de rojo, azul y verde (RGB).

El valor de color más pequeño es 0 (hexadecimal 00). El valor de color más alto es 255 (FF hexadecimal).

El valor de color hexadecimal es de tres dígitos que comienzan con #.

Códigos de color (valores)

16 millones de tonos

Combinar rojo, azul y verde con valores que van de 0 a 255 para cada color suma más de 16 millones de tonos (256 x 256 x 256).

La mayoría de los monitores modernos son capaces de mostrar al menos 16 384 tonos diferentes (los monitores LCD generalmente son capaces de mostrar 262,16 millones (actualizado en octubre de 2013) colores, mientras que los monitores CRT pueden mostrar una cantidad casi ilimitada de colores).

La siguiente tabla de colores muestra el cambio en la proporción de rojo de 0 a 255 con valores cero para azul y verde:

sombras de gris

Para obtener tonos de gris, se utilizan proporciones iguales de todos los colores. Para facilitar la elección del color deseado, ponemos a su disposición códigos de tonos de gris.

Nombres de colores html entre navegadores (para todos los navegadores)

Una colección de 150 nombres de colores html compatibles con todos los navegadores.

Nombres de colores estandarizados

El W3C enumera 16 nombres de colores válidos para HTML y CSS: aqua (aguamarina), negro (negro), azul (azul), fucsia (magenta), gris (gris), verde (verde), lima (lima o verde claro), granate (castaño), azul marino (ultramar), verde oliva (oliva), morado (púrpura), rojo (rojo), plata (plata), verde azulado (gris), blanco (blanco) y amarillo (amarillo).

Cuando se utilicen colores que no estén incluidos en esta lista, será más correcto utilizar su código hexadecimal (HEX) o su código RGB.

Colores seguros

Hace algunos años, cuando las computadoras podían admitir un máximo de 256 colores diferentes, se propuso una lista de 216 "Colores seguros para la Web", con 40 colores reservados para el sistema.

Esta paleta de 216 colores se creó para mostrar correctamente los colores en el modo de paleta de 256 colores.

No importa ahora porque la mayoría de las computadoras en todo el mundo admiten millones de tonos de color. En cualquier caso, aquí hay una lista de esos colores:

Tabla (paleta) de colores html le da la oportunidad de elegir independientemente el tono que necesita. El valor del color se muestra en tres formatos: hexadecimal, RGB y HSV.

• Hex consta de tres valores de dos caracteres en notación hexadecimal. Por ejemplo: #ff00b3, donde el primer par de números es rojo, el segundo es verde y el tercero es azul.
• RGB (RedGreenBlue) tiene la forma "200,100,255" que indica la cantidad del tono correspondiente (rojo, verde, azul) en el color resultante.
• HSV (Tono, Saturación, Valor - tono, saturación, valor) - un modelo de color en el que las coordenadas son:
  • Hue - tono de color, puede variar de 0° a 360°.
  • Saturación - saturación, varía entre 0-100 o 0-1. Cuanto mayor sea esta configuración, más "puro" será el color, razón por la cual esta configuración a veces se denomina pureza del color. Y cuanto más cerca esté este parámetro de cero, más cerca estará el color del gris neutro.
  • Valor (valor de color) - establece el brillo, el valor también puede variar entre 0-100 o 0-1.

Introduzca el código de color: VAMOS

Lista de colores con nombres

La tabla enumera los nombres de colores en inglés (que se pueden usar como valores) admitidos por todos los navegadores y sus valores hexadecimales. Todos los colores enumerados son "seguros", lo que significa que se mostrarán de la misma manera en todos los navegadores.

Los códigos de color en CSS se utilizan para especificar colores. Por lo general, los códigos de color o los valores de color se utilizan para establecer un color para el primer plano de un elemento (por ejemplo, texto, color de enlace) o el fondo de un elemento (fondo, color de bloque). También se pueden usar para cambiar el color de los botones, los bordes, el marcador, el desplazamiento y otros efectos decorativos.

Puede establecer sus valores de color en varios formatos. La siguiente tabla enumera todos los formatos posibles:

Estos formatos se describen con más detalle a continuación.

Colores CSS - Códigos hexadecimales

código de color hexadecimal es una representación de color de seis dígitos. Los dos primeros dígitos (RR) son el valor rojo, los dos siguientes son el valor verde (GG) y los dos últimos son el valor azul (BB).

Colores CSS - Códigos hexadecimales cortos

Código de color hexadecimal corto es una forma más corta de notación de seis caracteres. En este formato, cada dígito se repite para producir el valor de color de seis dígitos equivalente. Por ejemplo: #0F0 se convierte en #00FF00.

El valor hexadecimal se puede tomar de cualquier software de gráficos como Adobe Photoshop, Core Draw, etc.

Cada código de color hexadecimal en CSS estará precedido por un signo de almohadilla "#". Los siguientes son ejemplos del uso de la notación hexadecimal.

Colores CSS - Valores RGB

valor RGB es un código de color que se establece mediante la propiedad rgb(). Esta propiedad toma tres valores: uno para rojo, verde y azul. El valor puede ser un número entero, de 0 a 255, o un porcentaje.

Nota: No todos los navegadores admiten la propiedad de color rgb(), por lo que no se recomienda su uso.

A continuación se muestra un ejemplo que muestra varios colores utilizando valores RGB.

Generador de código de colores

Puede crear millones de códigos de color con nuestro servicio.

Colores seguros del navegador

A continuación se muestra una tabla de 216 colores que son los más seguros e independientes de la computadora. Estos colores en CSS van desde 000000 hasta el código hexadecimal FFFFFF. Son seguros de usar ya que aseguran que todas las computadoras muestren el color correctamente cuando trabajen con la paleta de 256 colores.

El módulo de color CSS detalla los valores que permiten a los autores especificar los colores y la opacidad de los elementos html, así como los valores de la propiedad color.

propiedad de color

1. Colores prioritarios: propiedad del color

La propiedad establece el color de la fuente utilizando varios sistemas de representación. La propiedad describe el color del contenido del texto del elemento. También se usa para proporcionar un valor indirecto potencial (color actual) para cualquier otra propiedad que acepte valores de color.

La propiedad se hereda.

2. Valores de color

2.1. Palabras clave principales

La lista de palabras clave principales incluye los siguientes valores:

Los nombres de los colores no distinguen entre mayúsculas y minúsculas.

Sintaxis

Color turquesa;

2.2. Valores numéricos de color

2.2.1. Colores del modelo RGB

El formato de un valor RGB en hexadecimal es un signo # seguido inmediatamente por tres o seis caracteres hexadecimales. La notación RGB de tres dígitos #rgb se convierte a la forma de seis dígitos #rrggbb copiando los dígitos, no agregando ceros. Por ejemplo, #fb0 se expande a #ffbb00 . Esto garantiza que el #ffffff blanco se pueda especificar en la abreviatura #fff y elimina cualquier dependencia en la profundidad de color de la pantalla.

El formato de un valor RGB en notación funcional es rgb (seguido de una lista separada por comas de tres valores numéricos (ya sean tres valores enteros o tres valores porcentuales) seguidos de un carácter). El valor entero 255 corresponde al 100% y F o FF en notación hexadecimal:

rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF

Se permiten caracteres de espacio alrededor de los valores numéricos.