Número de color burdeos. Tutorial HTML. Colores RGB. Colores de paleta seguros
>>Gestión del color
Valores de color RGB hexadecimales
Los métodos para describir y procesar el color se diferencian entre sí en la representación final a la que están destinados. Comparemos, por ejemplo, la representación de los colores en la impresión y en los monitores de ordenador. En el primer caso, se toma la base. blanco el color del papel sobre el que posteriormente se aplican tres colores primarios: azul, púrpura Y amarillo. Mezclados entre sí y con el color blanco del papel en diferentes proporciones, estos tres colores primarios dan diferentes tonalidades de color, excepto el negro puro, o en ausencia total de pinturas dan el papel blanco. Si les añadimos color negro, obtenemos CMYK-un método de transmisión de color cuando el color requerido se obtiene restando los colores que faltan del blanco.
En el segundo caso, se toma la base. negro el color de la pantalla del monitor, cada celda del cual se ilumina en uno de tres colores: rojo-rojo, verde-verde y azul-azul. Luego, en ausencia total de brillo, obtenemos un color de pantalla negro puro, y cualquiera de los colores requeridos viene dado por la proporción de cada uno de los tres colores. En este caso obtendremos RGB-método de transmisión del color. Los colores primarios pueden variar desde 0
antes 255
, o de 0%
antes 100%
, o puede representarse como un valor hexadecimal. En la siguiente figura puedes ver los resultados de mezclar colores primarios.
El sistema numérico hexadecimal, a diferencia del sistema numérico decimal, no tiene diez dígitos, sino dieciséis, de ahí el nombre. En consecuencia, solo puede haber variantes no repetidas de combinaciones de dos dígitos: 256 , para continuar la serie de números después 9 cartas de A antes F, por lo tanto, la serie se verá así:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
En este caso, el color se especifica mediante tres números hexadecimales, cada uno de los cuales consta de dos dígitos. El primer número determina la intensidad. rojo colores, medio- verde, última cosa- azul colores. Todos los números pueden tomar valores en el rango de 00 antes FF(de 0 a 255). Por ejemplo: el color verde se da como #00FF00, rojo - como #FF0000, azul - como #0000FF, blanco - como #FFFFFF, la ausencia total de color o negro se da como #000000 .
En el siguiente formulario, puede especificar cualquier valor hexadecimal para cada uno de los tres colores y ver el resultado de mezclarlos haciendo clic en el campo de salida.
Ejemplos de algunos valores de color RGB hexadecimales: gradaciones de rojo, azul y verde.
vista | código | vista | código | vista | código | vista | código | vista | código | vista | código |
#010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
#100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
#200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
#300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
#400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
#500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
#600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
#700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Especificación de color mediante literales de cadena
Para facilitar su uso, a algunos colores y sus combinaciones se les asignaron nombres que son reconocidos por todos los navegadores, y fue posible configurar muchos de ellos por nombre. La siguiente tabla muestra algunos de los nombres de colores:
vista | Nombre | vista | Nombre | vista | Nombre | vista | Nombre |
Blanco | Rojo | Naranja | Amarillo | ||||
Verde | Azul | Púrpura | Negro | ||||
Alice azul | Blanco antiguo | Agua | Aguamarina | ||||
Azur | Beige | Sopa de mariscos | Blanchedalmond | ||||
Violeta Azul | Marrón | Burlywood | cadeteazul | ||||
Monasterio | Chocolate | Coral | acianoazul | ||||
Seda de maiz | carmesí | cian | Azul oscuro | ||||
cian oscuro | Vara dorada oscura | Gris oscuro | Verde oscuro | ||||
caqui oscuro | magenta oscuro | verde oliva oscuro | Naranja oscuro | ||||
orquídea oscura | Rojo oscuro | salmón oscuro | verde mar oscuro | ||||
Azul pizarra oscuro | Gris pizarra oscuro | turquesa oscuro | Violeta oscuro | ||||
Rosa profundo | azul cielo profundo | gris oscuro | Dodgerazul | ||||
Ladrillo refractario | floralblanco | Bosque verde | fucsia | ||||
Gainsboro | blanco fantasma | Oro | vara de oro | ||||
Gris | Verde amarillo | Gotas de miel | Rosa caliente | ||||
rojo indio | Índigo | Marfil | Caqui | ||||
Lavanda | rubor lavanda | chifón de limón | Azul claro | ||||
coral claro | Cian claro | clarofríovarillaamarillo | Verde claro | ||||
Gris claro | Rosa claro | salmón claro | verdemar claro | ||||
azul cielo claro | Lucesgris pizarra | Azul acero claro | Amarillo claro | ||||
Cal | Verde lima | Lino | Magenta | ||||
Granate | aguamarina media | Azul medio | orquídea mediana | ||||
morado medio | Verdemar medio | Azul pizarra medio | Verde primavera medio | ||||
Turquesa medio | violeta mediorojo | azul medianoche | crema de menta | ||||
rosa brumosa | Navajoblanco | Armada | encaje viejo | ||||
Aceituna | Oliverab | Rojo naranja | Orquídea | ||||
vara de oro pálido | Verde pálido | paletaturquesa | rojovioletapálido | ||||
papayalátigo | melocotón | Perú | Rosa | ||||
Ciruela | Azul pálido | marrón rosado | Azul real | ||||
marrón silla de montar | Mar verde | Concha | Tierra de siena | ||||
Plata | Cielo azul | Azul pizarra | gris pizarra | ||||
Nieve | Primavera verde | Azul acero | Broncearse | ||||
verde azulado | Cardo | Tomate | Turquesa | ||||
Violeta | Trigo | Humo blanco | Amarillo verde |
Usar una paleta de colores segura
Desafortunadamente, en diferentes plataformas, con diferentes configuraciones del sistema, la reproducción correcta del color es un problema. El caso es que el navegador siempre intenta ajustar la paleta de colores del documento a la configuración del sistema y las capacidades del monitor, mezclando colores y reemplazándolos de forma independiente. Como resultado, a veces el usuario no ve exactamente lo que el webmaster quería mostrarle. Se encontró una salida a esta situación mediante el uso de una paleta, cada color de la cual se garantiza que todos los navegadores en diferentes plataformas se reproduzcan por igual. Este es el llamado garantizado paleta, también llamada seguro paleta. Esta paleta incluye colores cuyos componentes de color toman los siguientes valores: 00 ,33 ,66 ,99 , CC,FF, de todas las formas posibles 216 sus combinaciones.
vista | código | vista | código | vista | código | vista | código | vista | código | vista | código |
FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
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.
Nombre | Color | RGB | MALEFICIO | HSL | Descripción |
---|---|---|---|---|---|
blanco | RGB(255, 255, 255) | #ffffff o #fff | hsl(0, 0%, 100%) | Blanco | |
plata | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Gris | |
gris | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Gris oscuro | |
negro | rgb(0, 0, 0) | #000000 o #000 | hsl(0, 0%, 0%) | Negro | |
granate | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Rojo oscuro | |
rojo | rgb(255, 0, 0) | #ff0000 o #f00 | hsl(0, 100%, 50%) | Rojo | |
naranja | rgb(255, 165, 0) | #ffa500 | hsl(38,8, 100%, 50%) | Naranja | |
amarillo | rgb(255, 255, 0) | #ffff00 o #ff0 | hsl(60, 100%, 50%) | Amarillo | |
aceituna | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Aceituna | |
cal | rgb(0, 255, 0) | #00ff00 o #0f0 | hsl(120, 100%, 50%) | Verde claro | |
verde | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Verde | |
agua | RGB(0, 255, 255) | #00ffff o #0ff | hsl(180, 100%, 50%) | Azul | |
azul | rgb(0, 0, 255) | #0000ff o #00f | hsl(240, 100%, 50%) | Azul | |
Armada | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Azul oscuro | |
verde azulado | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Azul verde | |
fucsia | RGB(255, 0, 255) | #ff00ff o #f0f | hsl(300, 100%, 50%) | Rosa | |
púrpura | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violeta |
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.
Llegar al punto.
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:
![](https://i1.wp.com/komotoz.ru/uroki/css/images/edinicy_izmereniya_v_css_1.jpg)
Explicaciones por ejemplo.
Al principio de la página creamos la clase div.rgb, es necesaria para los bloques creados por la etiqueta
A continuación, en el código configuramos el color de fondo del bloque.
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 le 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 del 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.
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.
![](https://i1.wp.com/komotoz.ru/uroki/css/images/edinicy_izmereniya_v_css_1.jpg)
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á en el rango de 0 a 359.
![](https://i2.wp.com/komotoz.ru/uroki/css/images/hsl-colors.png)
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.
26/02/15 8.9KComo sabes, el color puede afectar el estado de una persona: tanto mental como físico. Cada día, mientras navegamos por sitios web en Internet, los ojos evalúan millones de colores y matices. Un diseñador web que esté familiarizado con la psicología del color puede manipular el estado de ánimo del visitante para lograr ciertos objetivos.
Esto se debe al hecho de que algunos tonos calman y otros, por el contrario, excitan. A continuación hablaremos sobre cómo se sintetiza y muestra el color mediante tecnología informática.
RGB es un modelo de color que representa un método de obtención de todos los colores y sus matices mezclando en varias proporciones tres componentes principales, los cuales son:
- Color rojo ( Rojo);
- color verde ( Verde);
- Color azul ( Azul).
De aquí proviene el nombre abreviado RGB. Estos colores fueron elegidos como principales por una razón: la razón es la fisiología de la retina del ojo humano y cómo los percibe:
El modelo RGB sigue siendo el más popular hoy en día y se utiliza para reproducir colores en pantallas de televisión y monitores de ordenador. Dado que los fabricantes dotan a sus productos de diferentes características, en 1996 se creó un sistema unificado de síntesis de color basado en RGB llamado sRGB, en el que Microsoft y HP trabajaron juntos.
Representación numérica del color.
Como se mencionó anteriormente, los colores RGB se forman mezclando colores primarios. Para describir la intensidad de cada uno de ellos se adoptó un esquema en el que el color está representado por el rango 0-255 (8 bits), que en notación hexadecimal corresponde a 00-FF.
Es decir, los colores primarios quedarán así:
- Rojo – RGB (255,0,0);
- Verde – RGB (0,255,0);
- Azul – RGB (0,0,255);
Si la intensidad del color toma valores inferiores a 255, se obtienen diferentes tonalidades de rojo, verde y azul. La siguiente es una tabla de sus gradaciones, así como los valores hexadecimales de cada una de las tonalidades:
tablas de colores rgb
Naturalmente, además de las gradaciones de colores primarios, también los hay mixtos, y su número es bastante grande. Por ello, se creó una tabla de colores RGB, que presenta todas las tonalidades existentes, así como sus nombres y representaciones numéricas ( en forma decimal y hexadecimal).
Puedes verlo aquí. Esta tabla hace la vida mucho más fácil a los diseñadores web, ya que en unos segundos pueden encontrar el tono requerido y conocer su representación numérica.
Paleta de colores RGB segura
Sin embargo, en algún momento surgió un problema con la visualización de colores en diferentes navegadores y, para solucionarlo, se compiló la llamada paleta "segura" de colores RGB, que se derivaron mediante cálculos matemáticos.
Cuando el navegador no puede mostrar un color correctamente, intentará obtener algo parecido a lo que necesita mezclando colores adyacentes y lo más probable es que el resultado sea completamente inaceptable:
Al utilizar códigos de color RGB de esta paleta, un desarrollador web puede tener tranquilidad con respecto a la visualización de los colores en las páginas de su sitio web cuando se visualizan utilizando diferentes navegadores, plataformas y monitores. Aunque de momento la tabla de colores seguros está perdiendo relevancia ( El progreso tecnológico aún no se detiene.), al usarlo podrás, como dicen, dormir tranquilo.
Color dorado en modelo RGB
La palabra "oro" se utilizó por primera vez a principios del siglo XIV para describir el color de un elemento químico llamado Aurum: oro. En el modelo RGB, el color dorado está representado por los siguientes valores numéricos:
- RGB (255, 215, 0) – sistema decimal;
- HEX #FFD700 – sistema hexadecimal.
Color beige en modelo RGB
El color beige ocupa un lugar bastante importante en la historia, aunque no sea el más expresivo. Muchos monumentos culturales, especialmente las esculturas antiguas, estaban hechos de esteatita y esteatita, que tienen un tinte beige. En el modelo RGB, el color beige tiene las siguientes representaciones numéricas.
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 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, 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. Se permite 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 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 | |
Armada | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Azul oscuro | |
verde azulado | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Azul verde | |
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