Los números hexadecimales se utilizan 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. Los números mayores a 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 al determinar el sistema numérico, se coloca un símbolo de almohadilla # antes del número hexadecimal, por ejemplo #666999. Cada uno de los tres colores (rojo, verde y azul) puede tomar valores de 00 a FF. Por lo tanto, el símbolo de color se divide en tres componentes #rrggbb, donde los dos primeros símbolos indican el componente rojo del color, los dos del medio, verde y los dos últimos, azul. Está permitido utilizar la forma abreviada #rgb, donde cada carácter debe duplicarse. Por tanto, la entrada #fe0 debe considerarse como #ffee00.
Por nombre
| Explorador de Internet | Cromo | Ópera | Safari | Firefox | Androide | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Los navegadores admiten algunos colores por su nombre. en la mesa 1 muestra los nombres, código hexadecimal, valores RGB, HSL y descripción.
| Nombre | Color | Código | RGB | HSL | Descripción |
|---|---|---|---|---|---|
| blanco | #ffffff o #fff | rgb(255,255,255) | hsl(0,0%,100%) | Blanco | |
| plata | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Gris | |
| gris | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Gris oscuro | |
| negro | #000000 o #000 | rgb(0,0,0) | hsl(0,0%,0%) | Negro | |
| granate | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | rojo oscuro | |
| rojo | #ff0000 o #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Rojo | |
| naranja | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | Naranja | |
| amarillo | #ffff00 o #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Amarillo | |
| aceituna | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Aceituna | |
| cal | #00ff00 o #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Verde claro | |
| verde | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Verde | |
| agua | #00ffff o #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Azul | |
| azul | #0000ff o #00f | rgb(0,0,255) | hsl(240,100%,50%) | Azul | |
| marina de guerra | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | azul oscuro | |
| verde azulado | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Azul verdoso | |
| fucsia | #ff00ff o #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Rosa | |
| púrpura | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violeta |
Usando RGB
| Explorador de Internet | Cromo | Ópera | Safari | Firefox | Androide | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
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 está permitido especificar el color como un porcentaje, correspondiendo el 100% al número 255. Primero, especifique la palabra clave rgb y luego especifique los componentes de color entre paréntesis. , separados por comas, por ejemplo rgb(255, 128, 128) o rgb(100%, 50%, 50%).
RGBA
| Explorador de Internet | Cromo | Ópera | Safari | Firefox | Androide | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
El formato RGBA es similar en sintaxis a RGB, pero incluye un canal alfa que especifica la transparencia del elemento. Un valor de 0 es completamente transparente, 1 es opaco y un valor intermedio como 0,5 es semitransparente.
RGBA se agregó a CSS3, por lo que el código CSS debe validarse con esta versión. Cabe señalar que el estándar CSS3 aún está en desarrollo y algunas características pueden cambiar. Por ejemplo, un color en formato RGB agregado a la propiedad color de fondo se valida, pero uno agregado a la propiedad de fondo ya no es válido. Al mismo tiempo, los navegadores entienden bastante correctamente el color de ambas propiedades.
HSL
| Explorador de Internet | Cromo | Ópera | Safari | Firefox | Androide | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
El nombre del formato HSL se deriva de la combinación de las primeras letras Hue (matiz), Saturate (saturación) y Lightness (luminosidad). El tono es el valor del color en la rueda de colores (Fig. 1) y se expresa en grados. 0° corresponde al rojo, 120° al verde y 240° al azul. El valor del tono puede variar de 0 a 359.
Arroz. 1. Rueda de colores
La saturación es la intensidad de un color y se mide como un porcentaje del 0% al 100%. Un valor de 0% indica que no hay color y hay un tono de gris; 100% es el valor máximo de saturación.
La luminosidad especifica qué tan brillante es el color y se especifica como un porcentaje del 0% al 100%. Los valores bajos oscurecen el color y los valores altos lo aclaran; los valores extremos de 0% y 100% corresponden al blanco y negro.
HSLA
| Explorador de Internet | Cromo | Ópera | Safari | Firefox | Androide | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
El formato HSLA es similar en sintaxis a HSL, pero incluye un canal alfa para especificar la transparencia del elemento. Un valor de 0 es completamente transparente, 1 es opaco y un valor intermedio como 0,5 es semitransparente.
Los valores de color RGBA, HSL y HSLA se agregan a CSS3, así que verifique la validez de la versión de su código cuando utilice estos formatos.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Advertencia
Todos los métodos de captura de leones enumerados en el sitio son teóricos y se basan en métodos computacionales. Los autores no garantizan su seguridad al utilizarlos y rechazan cualquier responsabilidad por los resultados. Recuerde, ¡un 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
Vlad Merzhevich
En HTML, el color se especifica de dos maneras: usando 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.
| FA. | + | 8E | + | 47 | = | FA8E47 |
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; 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 manera 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.
| Nombre del color | Color | Descripción | valor hexadecimal |
|---|---|---|---|
| negro | Negro | #000000 | |
| azul | Azul | #0000FF | |
| fucsia | violeta claro | #FF00FF | |
| gris | Gris oscuro | #808080 | |
| verde | Verde | #008000 | |
| cal | Verde claro | #00FF00 | |
| granate | rojo oscuro | #800000 | |
| marina de guerra | azul oscuro | #000080 | |
| aceituna | Aceituna | #808000 | |
| púrpura | morado oscuro | #800080 | |
| rojo | Rojo | #FF0000 | |
| plata | Gris claro | #C0C0C0 | |
| verde azulado | Azul verdoso | #008080 | |
| blanco | Blanco | #FFFFFF | |
| amarillo | Amarillo | #FFFF00 |
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.Los códigos de color en CSS se utilizan para especificar un color. 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 irá precedido por un signo 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, 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 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.
| Tabla de colores "seguros" en CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
CSS no se entiende). Por tanto, el futuro webmaster simplemente necesita estudiar Herramientas HTML que le permiten cambiar el color, por ejemplo, para crear boletines informativos por correo electrónico brillantes y coloridos que atraigan la atención del público objetivo del sitio.
Esta publicación es bastante larga, pero a partir de ella aprenderá sobre todas las características técnicas del trabajo con color usando HTML. Comenzaremos la grabación entendiendo la pregunta: ¿por qué necesitamos resaltar ciertos elementos de una página HTML con color? Luego hablaremos sobre el modelo RGB, que le permite configurar colores en HTML usando códigos especiales (en el camino, veremos códigos de color decimales y valores de color HTML hexadecimales). Además, en esta publicación aprenderá sobre la paleta de colores y también comprenderá por qué no hay paleta en HTML. Y al final de esta publicación habrá ejemplos de cómo cambiar el color de fondo, el texto y los enlaces.
Usando colores en HTML
Las páginas del sitio web serían aburridas y poco interesantes sin imágenes, como hablamos anteriormente y con gran detalle. Pero las imágenes tienen un inconveniente importante: cada imagen es adicional y, en consecuencia, una carga adicional para el hosting.
Me gustaría señalar que no utilicé una sola imagen para diseñar mi blog de WordPress; el diseño fue diseñado completamente usando color. Sin embargo Hoy hablaremos de colores en HTML.. Los colores en HTML se utilizan para diferentes propósitos, por ejemplo, podemos diseñar diseños de sitios web resaltando ciertos elementos con un color u otro.
Usando el color, podemos centrar la atención de nuestros visitantes en un texto o bloque particular del sitio. Tenga en cuenta que también se determina utilizando el color de tal manera que el usuario pueda entender: en qué enlace ya hizo clic, en cuál aún no ha visitado y en qué página HTML se encuentra actualmente.
Ten cuidado Usar colores para diseñar documentos HTML., no todos los colores combinan y no todos los colores agradarán a los visitantes de su sitio web. Pero será mejor que preguntes a los diseñadores web sobre estas sutilezas; este artículo te ayudará a comprender las características técnicas que te permiten controlar el color de los elementos de la página HTML.
Pero no debes olvidar que el diseño debe estar separado del contenido, por lo que es mejor usar CSS para manipular el color en las páginas HTML, pero de esto hablaremos en otro post. ahora veremos ¿Qué herramientas tiene HTML para controlar el color en las páginas del sitio?.
En la industria de TI, existen muchos modelos de color para la manipulación del color. El modelo de representación de color más utilizado es el modelo RGB. Hablaremos sobre algunas de las características de este modelo aquí y habrá una publicación separada para una introducción más detallada a RGB. A continuación encontrará una lista de modelos de color utilizados en TI (no solo HTML y CSS):
- Modelo RGB. Este modelo se ha generalizado mucho y es quizás una de las formas más convenientes y comunes de manipular el color de los elementos HTML.
- Modelo RGBA. Este modelo es muy similar al modelo RGB, pero incluye un canal alfa para el color. La característica especial del modelo RGBA es que permite ajustar no sólo el color del elemento HTML, sino también su transparencia debido a la presencia de un canal alfa. El modelo RGBA se agregó a CSS3 y no es compatible con navegadores más antiguos.
- Modelo HSL. La peculiaridad del modelo HSL es que configuramos el color utilizando sus parámetros: tono, intensidad y luminosidad. Este modelo es algo más difícil de entender que el modelo RGB.
- Modelo HSLA. Este modelo es muy similar al modelo HSL, pero al igual que el modelo RGBA, permite trabajar con el canal de color alfa, por lo que usando HSLA podemos establecer no solo el color de un elemento HTML en la página, sino también su transparencia. .
- Modelo HSV (HSB). Este modelo no debe confundirse con el modelo HSL. Tenga en cuenta que los primeros cuatro modelos se pueden utilizar en HTML o CSS para diseñar páginas web, pero el modelo HSV no. El HSV fue diseñado por uno de los fundadores de Pixar en 1978 y es muy similar al HSL.
- Modelo CMY o CMYK. Este modelo se utiliza en todas las impresoras a color para imprimir. El modelo CMYK se basa en la regla de que la impresión se realiza en hojas de papel blancas. Cualquier color CMYK se obtiene mezclando Cyan (azul pálido, turquesa), Magenta (magenta) y amarillo. Cada color en el modelo CMY tiene una característica de opacidad (cantidad de tinta), medida como porcentaje. Pero además de los tres colores enumerados, el modelo CMYK también utiliza el negro.
Todos los modelos de color anteriores dependen del hardware, es decir, si establecer el color de un elemento HTML usando el modelo RGB o HSL, entonces es imposible decir con certeza qué tono exacto de color verá el visitante de su sitio, ya que los monitores de todos los usuarios son diferentes y transmiten los colores de manera diferente. Tenga en cuenta también que todos los modelos anteriores se basan en el modelo RGB y cualquier color especificado en cualquiera de los modelos (excepto HSLA y RGBA debido a la presencia de un canal alfa) se puede convertir a RGB.
Si hablamos de modelos de transferencia de color independientes del hardware, cabe destacar el modelo LAB. Entonces, tomamos un pequeño descanso del trabajo con color en HTML para familiarizarnos con algunos modelos de color. Tenga en cuenta que los navegadores sólo “entienden” los primeros cuatro modelos: HSL, RGB, HSLA y RGBA. Por tanto, sólo podemos controlar el color de los elementos HTML utilizando estos modelos.
Cómo se forma el color de un elemento HTML: algunas características del modelo RGB
Vamos a resolverlo cómo se forma el color de un elemento HTML y con algunas características del modelo RGB. Tenga en cuenta que hablaremos del modelo RGB, así como de otros modelos que se utilizan para diseñar páginas web, un poco más adelante en publicaciones separadas.
Entonces, el modelo RGB significa Rojo, Verde, Azul. El modelo RGB se basa en el principio de aditividad. Este principio es que para obtener cualquier color, se añade color al negro. Para una mejor comprensión, imagina que tu pantalla es una pared negra y tienes tres focos: el primero brilla en rojo, el segundo brilla en verde y el tercero brilla en azul. Puedes ajustar el brillo de cada foco usando una regla con números del 0 al 255. En consecuencia, si pones el foco en cero, se apaga y no brilla, si el valor es 255, entonces el foco produce el color más brillante posible; .
Por lo tanto, resulta que si iluminas un foco rojo y uno verde en el mismo punto, notarás una mancha amarilla en una pared negra. Si combinas rojo y azul, obtendrás violeta, y si combinas verde y azul, el punto de luz en una pared negra será cian, pero si apuntas los tres focos a un punto, el punto de luz será blanco.
El principio descrito anteriormente subyace al modelo RGB y se utiliza para manipular colores en elementos HTML en una página en un navegador.
Atributos HTML para cambiar el color de los elementos: el color de fondo del elemento y el color del texto dentro del elemento
Se utiliza para hacer que los elementos de la página sean únicos. Usando atributos HTML podemos manipular el color de los elementos:
- Color del atributo HTML. Este atributo le permite cambiar el color del texto dentro del elemento HTML. El atributo puede tomar valores en forma de nombres de colores HTML y códigos de modelo RGB en notaciones hexadecimales y decimales. El atributo de color es un atributo HTML único que le permite cambiar el color del texto dentro de ciertos elementos HTML.
- Atributo de texto HTML. Este atributo es un atributo de etiqueta único. . Etiqueta junto con etiquetas Y forma . Si recuerdas, dentro del contenedor. Se colocan elementos que luego son mostrados por el navegador en el área de visualización. El atributo de texto le permite especificar Color de texto predeterminado para toda la página HTML.
- Atributo HTML bgcolor. También es un atributo HTML único y le permite cambiar el color de fondo de algunos elementos HTML.
- Enlace v de atributo HTML. Este atributo es único y se aplica sólo a la etiqueta. para cambiar el color de un enlace que el usuario ya ha visitado.
- Enlace de atributo HTML. Este atributo también es único y solo se aplica a la etiqueta. . El atributo alink cambia el color del enlace HTML activo.
- Atributo de enlace HTML. El atributo de enlace se utiliza sólo junto con una etiqueta. y sirve para cambiar el color de los enlaces de páginas HTML que el usuario aún no ha visitado.
Tenga en cuenta: no se recomienda utilizar atributos para cambiar el color de los elementos HTML, ya que existen hojas de estilo en cascada que le permiten separar el diseño de una página web de su contenido.
Usar códigos de colores decimales en HTML
Entonces, hablamos sobre el hecho de que puedes configurar el brillo del foco usando una regla especial en la que hay dibujos numerados del 0 al 255. Ahora veamos cómo esto nos ayudará a cambiar el color de los elementos HTML. El caso es que podemos cambiar el color del texto dentro de un elemento HTML o el color de fondo en HTML usando código decimal de la siguiente manera:
Si crea un documento HTML en el que se describe el contenedor del cuerpo, como en el ejemplo, verá:
- El color de fondo del documento HTML ahora es verde: bgcolor=”rgb (0,255,0)”.
- El color del texto de la página HTML se volverá azul: text=”rgb (0,0,255)”.
- El color HTML de un enlace que el usuario no ha visitado será blanco: link=”rgb (255,255,255)”.
- Los colores del enlace que se encuentra actualmente abierto serán negro: alink=”rgb (0,0,0)”.
- Y el color del enlace HTML que ya ha sido visitado será rojo: vlink=”rgb (255,0,0)”.
Tenga en cuenta: nadie le prohíbe ajustar la "potencia del foco" a su discreción, usted puede establecer color HTML, por ejemplo, de esta manera:
RGB(94, 85, 50) |
Y consigue el color de la sorpresa infantil. Ésta es la peculiaridad, flexibilidad y conveniencia del modelo RGB. Su monitor es una pared negra con focos brillando sobre él, y puede ajustar la potencia de estos focos y crear todo tipo de colores de fondo, texto y enlaces usando atributos HTML en el sistema de notación decimal, o también puede decir: usando códigos de color decimales.
De hecho Está mal decir códigos de color decimales en HTML, sería más correcto decir Códigos de color decimales RGB, ya que este modelo se utiliza no sólo para diseñar páginas web en HTML y CSS.
Valores de color HTML hexadecimales
Configurar el color de los elementos HTML utilizando códigos decimales del modelo RGB no es muy conveniente (y por el momento, no todos los navegadores admiten este método de manipulación del color), ya que la grabación no será la más compacta, es mucho más conveniente; establezca el color de los elementos HTML utilizando valores hexadecimales. En la imagen siguiente puedes ver cómo se convierten los valores decimales a hexadecimales.
Para aquellos que no están familiarizados con el sistema numérico hexadecimal, conviene dar una pequeña explicación para que puedan entender fácilmente manipular el color de elementos HTML utilizando códigos de modelo RGB hexadecimales. En primer lugar, el sistema numérico decimal se llama así porque cualquier número se puede obtener mediante una combinación de diez dígitos (la terminología es importante: hay una diferencia entre un número y un dígito): 0, 1, 2, 3, 5, 6, 7, 8, 9.
En el sistema numérico hexadecimal, cualquier número se puede escribir usando una combinación de dieciséis dígitos: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Para facilitar la comprensión, puedes asumir que a es diez y f es quince. Por ejemplo, el número dieciséis se escribiría en hexadecimal como 10. Y el número 255 se escribiría como ff.
Ahora veamos cómo podemos establecer el color de los elementos HTML usando valores hexadecimales, repitamos nuestro ejemplo anterior, reemplazando los códigos de color decimales con sus contrapartes hexadecimales:
<
body
alink
=
”#000000” link=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”> |
Tenga en cuenta: escribir color en HTML en formato hexadecimal es algo más compacto que en decimal, ese es el primero. Segundo: la potencia de cada foco se establece mediante números del 0 al 255. Para escribir el número 255 se necesitan dos dígitos en formato hexadecimal (ff = 250), por lo que la luminosidad de cada canal de color (nuestros focos se llaman correctamente canal de color, canal de color) se establece mediante dos números de 0 a f.
Tenga en cuenta: el brillo de cada canal de color se establece por separado, pero si imaginamos que se trata de un solo número, entonces el número máximo posible en el sistema numérico hexadecimal del modelo RGB es ffffff, nos dará blanco, y en el sistema decimal es: 16.777.215. Esta cantidad de colores y sombras le permite configurar/usar el modelo RGB. Este número surge del hecho de que cada canal de color tiene 256 valores de brillo (de 0 a 255), respectivamente: 256 * 256 * 256 = 16.777.215.
Los valores de color HTML hexadecimales son más compactos y claros, la mayoría de los diseñadores web y diseñadores de diseño usan valores hexadecimales para manipular el color en HTML, por lo que le recomendamos que no se acostumbre a la forma decimal de notación de color, sino que use hexadecimal inmediatamente.
Está claro que al principio será difícil para un diseñador novato o un diseñador de diseño navegar por la forma hexadecimal de notación de color, por lo que casi cualquier editor gráfico tiene la llamada paleta de colores, que le permite seleccionar el color deseado y obtener su código para diferentes modelos de color en diferentes sistemas numéricos.
Algunos editores de texto, como , tienen extensiones de paleta que son muy útiles cuando desea seleccionar rápidamente un color y cambiarlo. No puedo decir nada al respecto en este sentido.
Nombres de colores en HTML
Los atributos HTML pueden tomar como valores. no sólo códigos decimales y valores hexadecimales, pero también nombres de flores especiales. Cambiar el color de los elementos HTML usando su nombre no es una buena idea. En primer lugar, detrás del nombre del color en HTML se encuentra el código del modelo RGB y, en segundo lugar, cada navegador muestra el color del elemento HTML especificado por el nombre de forma diferente, esto depende únicamente del deseo de los desarrolladores del navegador.
Es por eso No se recomienda utilizar un nombre de color en HTML.. El modelo RGB depende del hardware y el color especificado por el nombre depende del navegador e incluso de su versión. Intentemos establecer el color de los elementos de la página HTML usando el nombre:
<
body
alink
=
”black
”link
=
”#blanco” vlink=”rojo” bgcolor=”verde” texto=”azul”> |
Como comprenderás, hay muchos colores y matices. Vale la pena señalar aquí que los atributos HTML no le permiten establecer un degradado; CSS tiene esta opción, pero hablaremos de eso en otra publicación. Y muchos colores en HTML tienen nombres. Puedes encontrar una tabla de nombres de colores en HTML y sus códigos RGB en mi sitio web.
La tabla anterior muestra qué color obtendrá el elemento HTML si lo especifica usando el nombre. Esta tabla contiene 16 colores y sus nombres aprobados por el W3C y deben mostrarse igual en cualquier navegador. Pero, de hecho, en HTML se pueden utilizar alrededor de 200 nombres de colores compatibles con los principales navegadores, como Opera, Chrome, Firefox, Safari, Internet Explorer (esta afirmación es muy controvertida sobre este último).
paleta de colores HTML
De hecho no hay paleta de colores en HTML. Recordemos la definición de la palabra paleta. Una paleta es una pequeña tabla delgada de forma cuadrangular u ovalada sobre la que el artista mezcla pinturas y obtiene todo tipo de colores. A veces se hace un agujero en la paleta para que el pulgar sea cómodo de sostener. Encontrarás una imagen de la paleta a continuación. Por eso no hay paleta en HTML.
Pero en varios editores de texto hay complementos de paleta de colores esa ayuda seleccionar rápidamente el color de un elemento HTML. También hay una paleta de colores en los editores gráficos, porque no es muy conveniente y divertido para un diseñador sentarse y calcular: qué color saldrá con tal o cual brillo de tal o cual canal. En la imagen de abajo puedes ver la paleta más simple del editor Paint.
Tenga en cuenta que muchos módulos y complementos de paleta de colores le permiten obtener un código de color no solo en formato RGB/RGBA, sino también en el formato de otros modelos. Recordar que no hay paleta en HTML, bueno, a menos que seas un artista hasta la médula y a la paleta de colores de la página HTML le llamas esos colores que se usaron para decorarlo (después de todo, a veces una paleta se refiere a los colores que usa un artista en particular, o los colores que se usaron en la creación de una pintura en particular).
Aprendiendo a cambiar el color del texto en HTML
tenemos Mucha teoría sobre los colores en HTML., vamos a practicar y probar trabajar con colores de elementos HTML. Lo primero que aprenderemos a hacer es cambiar el color del texto en un documento HTML utilizando atributos y etiquetas especiales. Abra cualquier editor y escriba el siguiente código en él:
Aprendiendo a trabajar con color en HTML
Cambiar el color del texto
Para cambiar el color del texto, podemos usar el atributo de texto BODY exclusivo del elemento, y también podemos usar el elemento FONT y su atributo de color. Este texto aparecerá atenuado.
< ! DOCTYPE html > < html lang = "ru-RU" > < head > < meta charset = "UTF-8" > < title >Cambiar el color del texto en el documento HTML< / title > < link rel = "stylesheet" type = "text/css" href = "style.css" / > < / head > < body text = "#ff0000" > < h1 > < font color = "rgb(0,255,0)" >Aprendiendo a trabajar con color en HTML< / font > < / h1 > < h2 > < font color = "yellow" >Cambiar el color del texto< / font > < / h2 > < p >Para cambiar el color del texto podemos usar un único atributo de texto BODY del elemento, y también use el elemento FONT < / body > < / html > |
Guardaré este archivo como color.html y le aconsejo que no lo olvide. Chrome, Firefox y Opera no admiten la grabación de colores en el sistema numérico decimal, pero IE comprende esta notación de colores y resalta el encabezado HTML en verde:
Lo correcto es no cambiar el color del texto en HTML, sino cambiar el color de fuente en HTML. Acerca de