EntradaCódigo rgb de color turquesa. 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 utilizar 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 de 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, 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.
| 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 |
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 el 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 aclaran el color; los valores extremos de 0% y 100% corresponden a 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: mediante código hexadecimal y mediante el nombre de ciertos colores. Se utiliza principalmente 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 confusión 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). 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.