Código de color metálico. Tutorial HTML. Colores RGB. Colores de paleta seguros

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

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

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

Colores CSS: códigos hexadecimales

Código de color hexadecimal es una representación del color de seis dígitos. Los dos primeros dígitos (RR) representan el valor rojo, los dos siguientes representan el valor verde (GG) y los dos últimos representan 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 un valor de color equivalente de seis dígitos. 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 "#". A continuación se muestran ejemplos del uso de notaciones hexadecimales.

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, uno para verde y otro para 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 utilizarla.

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

Generador de códigos de colores

Puede crear millones de códigos de colores utilizando 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 porque garantizan que todas las computadoras muestren el color correctamente cuando trabajan con la paleta de 256 colores.

HEX/HTML

El color HEX no es más que una representación hexadecimal de RGB.

Los colores se representan como tres grupos de dígitos hexadecimales, donde cada grupo es responsable de su propio color: #112233, donde 11 es rojo, 22 es verde y 33 es azul. Todos los valores deben estar entre 00 y FF.

Muchas aplicaciones permiten una forma abreviada de notación de color hexadecimal. Si cada uno de los tres grupos contiene los mismos caracteres, por ejemplo #112233, entonces se pueden escribir como #123.

1. h1 (color: #ff0000; ) /* rojo */
2. h2 ( color: #00ff00; ) /* verde */
3. h3 ( color: #0000ff; ) /* azul */
4. h4 ( color: #00f; ) /* mismo azul, taquigrafía */

RGB

El espacio de color RGB (rojo, verde, azul) consta de todos los colores posibles que se pueden crear mezclando rojo, verde y azul. Este modelo es popular en fotografía, televisión y gráficos por computadora.

Los valores RGB se especifican como un número entero de 0 a 255. Por ejemplo, rgb(0,0,255) se muestra en azul porque el parámetro azul está establecido en su valor más alto (255) y los demás están establecidos en 0.

Algunas aplicaciones (particularmente los navegadores web) admiten el registro porcentual de valores RGB (de 0% a 100%).

1. h1 (color: rgb(255, 0, 0); ) /* rojo */
2. h2 (color: rgb(0, 255, 0); ) /* verde */
3. h3 (color: rgb(0, 0, 255); ) /* azul */
4. h4 ( color: rgb(0%, 0%, 100%); ) /* mismo azul, entrada de porcentaje */

Los valores de color RGB son compatibles con los principales navegadores.

RGBA

Recientemente, los navegadores modernos han aprendido a trabajar con el modelo de color RGBA, una extensión de RGB compatible con un canal alfa, que determina la opacidad de un objeto.

El valor de color RGBA se especifica como: rgba (rojo, verde, azul, alfa). El parámetro alfa es un número que va desde 0,0 (totalmente transparente) a 1,0 (totalmente opaco).

1. h1 ( color: rgb(0, 0, 255); ) /* azul en RGB normal */
2. h2 ( color: rgba(0, 0, 255, 1); ) /* el mismo azul en RGBA, porque opacidad: 100% */
3. h3 (color: rgba(0, 0, 255, 0.5); ) /* opacidad: 50% */
4. h4 (color: rgba(0, 0, 255, .155); ) /* opacidad: 15,5% */
5. h5 ( color: rgba(0, 0, 255, 0); ) /* completamente transparente */

RGBA es compatible con IE9+, Firefox 3+, Chrome, Safari y Opera 10+.

HSL

El modelo de color HSL es una representación del modelo RGB en un sistema de coordenadas cilíndrico. HSL representa los colores de una manera más intuitiva y legible para los humanos que el RGB típico. El modelo se utiliza a menudo en aplicaciones de gráficos, paletas de colores y análisis de imágenes.

HSL significa Tono (color/tono), Saturación (saturación), Luminosidad/Luminancia (luminosidad/luminosidad/luminosidad, no confundir con brillo).

Tono especifica la posición del color en la rueda de colores (de 0 a 360). La saturación es el valor porcentual de la saturación (de 0% a 100%). La luminosidad es un porcentaje de luminosidad (de 0% a 100%).

1. h1 (color: hsl(120, 100%, 50%); ) /* verde */
2. h2 ( color: hsl(120, 100%, 75%); ) /* verde claro */
3. h3 (color: hsl(120, 100%, 25%); ) /* verde oscuro */
4. h4 ( color: hsl(120, 60%, 70%); ) /* verde pastel */

HSL es compatible con IE9+, Firefox, Chrome, Safari y Opera 10+.

HSLA

Similar a RGB/RGBA, HSL tiene un modo HSLA con soporte de canal alfa para indicar la opacidad de un objeto.

El valor de color HSLA se especifica como: hsla (tono, saturación, luminosidad, alfa). El parámetro alfa es un número que va desde 0,0 (totalmente transparente) a 1,0 (totalmente opaco).

1. h1 ( color: hsl(120, 100%, 50%); ) /* verde en HSL normal */
2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* el mismo verde en HSLA, porque opacidad: 100% */
3. h3 (color: hsla(120, 100%, 50%, 0.5); ) /* opacidad: 50% */
4. h4 (color: hsla(120, 100%, 50%, .155); ) /* opacidad: 15,5% */
5. h5 ( color: hsla(120, 100%, 50%, 0); ) /* completamente transparente */

CMYK

El modelo de color CMYK a menudo se asocia con la impresión y la impresión en color. CMYK (a diferencia de RGB) es un modelo sustractivo, lo que significa que los valores más altos se asocian con colores más oscuros.

Los colores están determinados por la proporción de cian (Cyan), magenta (Magenta), amarillo (Yellow), con la adición de negro (Key/blacK).

Cada uno de los números que definen un color en CMYK representa el porcentaje de tinta de un color determinado que conforma la combinación de colores, o más precisamente, el tamaño del punto de la trama que se imprime en una máquina de fotocomposición sobre una película de un color determinado ( o directamente sobre la plancha de impresión en el caso de CTP).

Por ejemplo, para obtener el color PANTONE 7526, mezclaría 9 partes de cian, 83 partes de magenta, 100 partes de amarillo y 46 partes de negro. Esto se puede denotar de la siguiente manera: (9,83,100,46). A veces se utilizan las siguientes designaciones: C9M83Y100K46, o (9%, 83%, 100%, 46%), o (0,09/0,83/1,0/0,46).

HSB/VHS

HSB (también conocido como HSV) es similar a HSL, pero son dos modelos de colores diferentes. Ambos se basan en geometría cilíndrica, pero HSB/HSV se basa en el modelo "hexcono", mientras que HSL se basa en el modelo "bi-hexcono". Los artistas suelen preferir utilizar este modelo; generalmente se acepta que el dispositivo HSB/HSV se acerca más a la percepción natural de los colores. En particular, el modelo de color HSB se utiliza en Adobe Photoshop.

HSB/HSV significa Tono (color/tono), Saturación (saturación), Brillo/Valor (brillo/valor).

Tono especifica la posición del color en la rueda de colores (de 0 a 360). La saturación es el valor porcentual de la saturación (de 0% a 100%). El brillo es un porcentaje del brillo (de 0% a 100%).

XYZ

El modelo de color XYZ (CIE 1931 XYZ) es un espacio puramente matemático. A diferencia de RGB, CMYK y otros modelos, en XYZ los componentes principales son "imaginarios", lo que significa que no se pueden asociar X, Y y Z con ningún conjunto de colores para mezclar. XYZ es el modelo maestro para casi todos los demás modelos de color utilizados en campos técnicos.

LABORATORIO

El modelo de color LAB (CIELAB, “CIE 1976 L*a*b*”) se calcula a partir del espacio CIE XYZ. El diseño de Lab fue diseñado para crear un espacio de color en el que los cambios de color serían más lineales en términos de percepción humana (en comparación con XYZ), es decir, de modo que el mismo cambio en los valores de las coordenadas de color en diferentes áreas del color el espacio produciría la misma sensación de cambio de color.

Vlad Merzhevich

En HTML, el color se especifica de dos maneras: mediante código hexadecimal y mediante el nombre de ciertos colores. Se utiliza predominantemente el método basado en el sistema numérico hexadecimal, ya que es el más universal.

Colores hexadecimales

HTML utiliza números hexadecimales para especificar colores. El sistema hexadecimal, a diferencia del sistema decimal, se basa, como su nombre 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. en la mesa 6.1 muestra la correspondencia entre números decimales y hexadecimales.

Los números mayores a 15 en el sistema hexadecimal se forman combinando dos números en uno (Tabla 6.2). Por ejemplo, el número 255 en decimal corresponde al número FF en hexadecimal.

Para evitar confusiones al definir el sistema numérico, un número hexadecimal está precedido por un símbolo de almohadilla #, por ejemplo #aa69cc. En este caso, el caso no importa, por lo que está permitido escribir #F0F0F0 o #f0f0f0.

Un color típico utilizado en HTML se ve así.

Aquí el color de fondo de la página web se establece en #FA8E47. El símbolo de almohadilla # delante de un número significa que es hexadecimal. Los primeros dos dígitos (FA) definen el componente rojo del color, los dígitos tercero a cuarto (8E) definen el componente verde y los dos últimos dígitos (47) definen el componente azul. El resultado final será este color.

Cada uno de los tres colores (rojo, verde y azul) puede tomar valores de 00 a FF, lo que da como resultado un total de 256 tonos. Así, el número total de colores puede ser 256x256x256 = 16.777.216 combinaciones. Un modelo de color basado en componentes rojo, verde y azul se llama RGB (rojo, verde, azul). Este modelo es aditivo (de agregar - agregar), en el que la suma de los tres componentes forma el color blanco.

Para que sea más fácil navegar por los colores hexadecimales, tenga en cuenta algunas reglas.

• Si los valores de los componentes del color son iguales (por ejemplo: #D6D6D6), el resultado será un tinte gris. Cuanto mayor sea el número, más claro será el color, con valores que van desde #000000 (negro) hasta #FFFFFF (blanco).
• Se forma un color rojo brillante si el componente rojo se hace al máximo (FF) y los componentes restantes se establecen en cero. Un color con un valor de #FF0000 es el tono rojo más rojo posible. Lo mismo ocurre con el verde (#00FF00) y el azul (#0000FF).
• El amarillo (#FFFF00) se obtiene mezclando rojo y verde. Esto es claramente visible en el círculo cromático (Fig. 6.1), que presenta los colores primarios (rojo, verde, azul) y los complementarios o adicionales. Estos incluyen el amarillo, el cian y el violeta (también llamado magenta). En general, se puede obtener cualquier color mezclando colores cercanos a él. Así, el cian (#00FFFF) se obtiene combinando azul y verde.

Arroz. 6.1. rueda de color

Los colores basados ​​en valores hexadecimales no tienen que seleccionarse empíricamente. Para ello, es adecuado un editor gráfico que pueda trabajar con diferentes modelos de color, por ejemplo, Adobe Photoshop. En la figura. La Figura 6.2 muestra la ventana para seleccionar un color en este programa; el valor hexadecimal resultante del color actual está delineado con una línea. Puedes copiarlo y pegarlo en tu código.

Arroz. 6.2. Ventana para elegir colores en Photoshop.

colores web

Si configura la calidad de reproducción cromática del monitor en 8 bits (256 colores), el mismo color se puede mostrar de forma diferente en diferentes navegadores. Esto se debe a la forma en que se muestran los gráficos, cuando el navegador trabaja con su propia paleta y no puede mostrar un color que no esté en su paleta. En este caso, el color se reemplaza por una combinación de píxeles de otros colores cercanos que imitan el dado. Para garantizar que el color siga siendo el mismo en los diferentes navegadores, se introdujo una paleta de los llamados colores web. Los colores web son aquellos colores para los cuales cada componente (rojo, verde y azul) se establece en uno de seis valores: 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC). , 255 (FF). El valor hexadecimal de este componente se indica entre paréntesis. El número total de colores de todas las combinaciones posibles da 6x6x6 - 216 colores. Un color web de ejemplo es #33FF66.

La característica principal del color web es que aparece igual en todos los navegadores. Por el momento, la relevancia de los colores web es muy pequeña debido a la mejora en la calidad de los monitores y la ampliación de sus capacidades.

Colores por nombre

Para evitar tener que recordar un conjunto de números, puede utilizar los nombres de los colores más utilizados. en la mesa 6.3 muestra los nombres de los nombres de colores populares.

No importa si especifica un color por su nombre o mediante números hexadecimales. Estos métodos son iguales en su efecto. El ejemplo 6.1 muestra cómo configurar los colores de fondo y de texto de una página web.

Ejemplo 6.1. Color de fondo y texto

Texto de ejemplo

En este ejemplo, el color de fondo se establece utilizando el atributo bgcolor de la etiqueta. y el color del texto a través del atributo de texto. Para variar, el atributo de texto se establece en un número hexadecimal y el atributo bgcolor se establece en la palabra clave reservada verde azulado.

El color en CSS se puede configurar de diferentes maneras:

• por nombre,
• por valor hexadecimal,
• en formatos RGB y RGBA,
• en formatos HSL y HSLA.

Establecer color por nombre

Los navegadores admiten la especificación de algunos colores para los elementos por nombre. Esta tabla contiene algunas palabras clave (nombres de colores en inglés) que se utilizan para especificar propiedades de color, código RGB, código hexadecimal (HEX) y código HSL.

Este es un ejemplo del uso de nombres de colores; los nombres de los colores se toman de la tabla extendida.

Así es como funciona este código:

Configurar el color usando RGB

RGB es un modelo de color aditivo. En Inglés suma- suma. RGB es una abreviatura de las palabras en inglés: rojo, verde, azul (rojo, verde, azul). De esto se desprende que en el modelo RGB los colores se sintetizan añadiendo tres colores (rojo, verde, azul) en diferentes cantidades.

Mezclando colores rojo, verde y azul se pueden obtener varios millones de tonos. Todas las combinaciones posibles se almacenan en la memoria de la computadora.

Vaya al grano.

Para establecer propiedades en este formato, utilice la notación rgb(r, g, b), donde r, g, b son los tres canales para cada color (rojo, verde, azul). Los valores para cada canal se establecen en el rango de 0 a 255.

Código de ejemplo.

Para que quede todo claro, aquí hay un ejemplo de código:

Así es como debería funcionar este ejemplo:

Explicaciones por ejemplo.

Al principio de la página creamos la clase div.rgb, es necesaria para los bloques creados por la etiqueta

se mostraron en el tamaño requerido: 240 px por 40 px. A la propiedad line-height le asignamos un valor de 40px, es decir igual a la altura del bloque, esto te permitirá mostrar texto en el bloque.

en el centro vertical. Centramos el texto en horizontal usando la regla ( alineación de texto: centro;).

A continuación, en el código configuramos el color de fondo del bloque.

usando el atributo de estilo, usando la propiedad de fondo y asignando valores a rgb(255, 0, 0), rgb(0, 255, 0) y rgb(0, 0, 255). Es decir, alternativamente hacemos que un canal esté lo más saturado posible y los canales restantes no se utilizan para síntesis, ya que su valor es cero.

Intente editar este ejemplo y especificar sus propios valores, por ejemplo rgb(100, 100, 100) .

Configurar el color usando RGBA

CSS3 tiene una nueva herramienta para trabajar con color: el formato RGBA. Se puede llamar una evolución del modelo RGB, pero con la adición de un nuevo canal: el canal A o alfa. Este canal establece la transparencia del color. Sus valores se establecen en el rango de 0 a 1. Un valor de 0 corresponde a transparencia total, 1 a opacidad total (el color será el mismo que se especificó en los primeros tres canales RGB) y valores intermedios. ​como 0,4 o 0,6: translucidez en distintos grados.

Código de ejemplo.

Así es como funcionará:

Este código es visualmente similar al siguiente, que utiliza el modelo RGB para especificar un valor de color:

Aquí está su resultado:

Un valor de canal alfa igual a cero hace que cualquier color sea invisible; un valor igual a uno traduce el color en el código RGB sin cambios; La propiedad rgba(255,0,0,1.0) muestra el color rojo rgb(255, 0, 0) .

Por valor hexadecimal (código HEX)

En la vida cotidiana utilizamos el sistema de conteo decimal. Su origen es muy simple: tenemos diez dedos en la mano y contar con los dedos ha sido conveniente en la vida. Si el sistema decimal tiene diez dígitos: del 0 al 9, y el número 10 es el siguiente dígito, entonces el sistema numérico hexadecimal tiene 16 dígitos y el siguiente dígito es el número 16.

Para indicar códigos de color, los dígitos decimales ordinarios del 0 al 9 se utilizan como dígitos hexadecimales, y las letras latinas de la A a la F se utilizan para indicar los números del 10 al 15, es decir, (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Para mayor claridad, pongamos esto en una tabla:

Para escribir números hexadecimales mayores que F (15 en el sistema decimal), como en el sistema decimal, también utilizan la combinación de dos dígitos, pero ya hexadecimal, lo cual es obvio. Por tanto, para escribir el número decimal 255 en notación hexadecimal, utilice la notación FF.

El sistema hexadecimal es más comprensible para la computadora y procesa los valores establecidos por valor hexadecimal más rápido.

Para especificar un color en hexadecimal, preceda el valor numérico con un signo "#", ejemplo: #FFC0CB. El valor #FFC0CB consta de tres dígitos hexadecimales FF, C0 y CB. El significado de esta entrada es el mismo que configurar el color en el formato RGB (rgb(r, g, b)): cada dígito hexadecimal en el código HEX indica la saturación de color en su canal del modelo RGB.

#FF0000

#00FF00

#0000FF

Este código mostrará los siguientes elementos:

Y aquí hay una imagen con el resultado de la sección "Configuración de colores usando RGB" en esta página arriba.

Fig.1. Colores en RGB.

Vemos que los colores son idénticos.

Se permite una notación abreviada del código de color HEX: un número de 6 dígitos se puede escribir como un número de 3 dígitos. Esto sólo es válido cuando se repiten dos dígitos en el valor de color de un canal.

Es decir, se acepta la siguiente abreviatura:

Por ejemplo, el color #ff22aa se puede escribir como #f2a, o el color #44aa22 se puede escribir como #4a2.

Configuración del color mediante HSL

CSS3 tiene un nuevo formato para especificar colores.

El formato HSL es una abreviatura de las palabras en inglés: Hue (matiz), Saturate (saturación) y Lightness (luminosidad).

El tono en HSL es el valor de un color en una rueda de colores especial (Figura 2) y se especifica en grados. Si hacemos analogías con el modelo RGB, entonces 0° corresponde al rojo, 120° corresponde al verde y 240° corresponde al azul.

El valor del tono cambiará de 0 a 359.

Figura 2. Rueda de colores HSL.

El segundo valor, la saturación (Saturar), se establece como porcentaje. Al 100% de saturación, el color es lo más "jugoso" posible; a medida que el indicador de saturación se acerca al 0%, el color se vuelve más apagado y se vuelve gris.

El tercer valor, Luminosidad, también se establece como porcentaje. Cuanto mayor sea el porcentaje, más brillante será el color. Los valores extremos de 0% y 100% indicarán colores negro (sin luz) y blanco (sobreexpuesto), respectivamente, y no importa qué color de la rueda de colores se seleccionó en el primer canal. El valor óptimo de brillo del color es del 50%.

Configuración del color mediante HSLA

El formato HSLA está relacionado con HSL, al igual que RGB lo está con RGBA. En el formato HSLA, como en RGBA, se agrega un canal alfa, que es responsable de la transparencia del color.

El color especificado en formato HSL es más fácil de leer. Podemos decir que es intuitivo. Por ejemplo, el código hsl(120,60%,50%) puede representar el color final si hay una imagen de la rueda de colores HSL en la memoria. No se puede decir lo mismo de los formatos RGB y HEX; el código de color especificado en estos formatos se vuelve claro sólo después de visualizarlo en el monitor.

Los nuevos formatos en CSS3 (HSL, HSLA y RGBA) funcionan en navegadores a partir de las versiones: IE 9.0, Opera 10.0 Firefox 3.0. ¿Cómo puedo hacer que los estilos funcionen en navegadores más antiguos?

Algún bloque (color de fondo: rgb(255,50,50); color de fondo: rgba(255,50,50,0.85) )

Cuando se utiliza este código en navegadores más antiguos, el color de fondo de la clase .somebloсk, aunque no utilizará un canal alfa, se mostrará en formato RGB.

Popular en la categoría:

Cómo fusionar capas en Photoshop en una o combinarlas en un grupo...

leer

Transferir contactos a un nuevo teléfono Android

leer

Samsung Galaxy se reinicia solo - Soluciones Galaxy Note...

leer

Características clave de Kaspersky Rescue Disk

leer



Últimos artículos

MacBook no se conecta a wifi MacBook no ve...

leer

Cómo ganar dinero con WebMoney

leer

Tableta "Supra": opiniones de clientes

leer

Ubicaciones de barcos en tiempo real

leer

Los mejores programas para Android Grabar llamadas desde...

leer

Eliminar a los no seguidores en Twitter

leer

Conexión a Internet en una computadora portátil: todo lo posible...

leer

Samsung Galaxy S IV es el nuevo buque insignia...

leer