HTML de color blanco. Representación numérica del color. Texto blanco sobre fondo azul.
Los códigos de color en CSS se utilizan para especificar colores. Normalmente, códigos de colores o valores de color Se utiliza para establecer el color o primer plano elemento (por ejemplo, color de texto, enlace), o para el fondo del elemento (color de fondo, bloque). También se pueden utilizar para cambiar el color de un botón, borde, marcador, desplazamiento y otros efectos decorativos.
Puede configurar 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 gráfico. software, como Adobe Photoshop, Sorteo de núcleos, 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 son compatibles propiedad rgb() colores, por lo que no se recomienda su uso.
A continuación se muestra un ejemplo que muestra varios colores utilizando valores RGB.
Generador de có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 FFFFFF código hexadecimal. 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 |
>>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 color blanco papel. 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 como base negro el color de la pantalla del monitor, cada celda del cual brilla 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: color verde se da como #00FF00, rojo - como #FF0000, azul - como #0000FF, blanco - como #FFFFFF, ausencia total colores o negro se da como #000000 .
En el siguiente formulario puedes preguntar cualquier valores hexadecimales cada uno de los tres colores y vea 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, transmisión correcta El color es un problema. El caso es que el navegador siempre intenta ajustarse. paleta de color documento bajo ajustes del sistema y las capacidades del monitor, mezclando colores de forma independiente y reemplazándolos. 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 |
Como 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 modelo de color, que representa un método de obtención de todos los colores y sus matices mezclando en diversas proporciones los tres componentes principales, que 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 TV y monitores de computadora. Dado que los fabricantes dotan a sus productos diferentes caracteristicas, fue creado en 1996 un sistema Síntesis de color basada en RGB llamada sRGB, en la que colaboramos microsoft y H.P.
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 es sistema hexadecimal El cálculo 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 mesa Hace la vida mucho más fácil a los diseñadores web, ya que en unos segundos puedes 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ó el llamado "seguro". paleta RGB colores que se obtuvieron 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 no puede preocuparse por la visualización de colores en las páginas de su sitio cuando se visualiza usando diferentes navegadores, en varias plataformas y monitores. aunque en este momento la tabla de colores seguros pierde su 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 "dorado" se utilizó por primera vez a principios del siglo XIV para describir el color. 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 tarda bastante. lugar significativo en la historia, aunque no sea el más expresivo. Muchos monumentos culturales, especialmente esculturas antiguas, estaban hechos de esteatita y esteatita, que tienen un tinte beige. En modelo RGB color beige tiene las siguientes representaciones numéricas.
