HTML turquesa. Tutorial HTML. Colores RGB. Colores de paleta seguros

Mira atentamente el dibujo. El fondo de la ventana desplegable se vuelve translúcido. Esta es una técnica de diseño bastante común. Pensemos en cómo se puede implementar esto.

Tarea

Haga que el color sea translúcido para todos los navegadores.

Solución

La primera idea en esta situación es utilizar una imagen png24 con una translucidez preestablecida para el fondo. Pero esta imagen es completamente innecesaria. Puedes hacerlo bien sin él (y por lo tanto sin una solicitud adicional al servidor). Intentemos todavía encontrar la solución óptima.

El segundo pensamiento es utilizar . Pero en este caso no es muy conveniente. Después de todo, no solo el fondo, sino también las inscripciones se volverán translúcidos. Sí, de hecho, toda la ventana a la vez.

Por supuesto, puede intentar agregar un contenedor adicional y aplicarle opacidad solo a él, pero este elemento HTML estará destinado únicamente a la decoración y obviamente será redundante. ¿Es posible prescindir de él?

¡Por supuesto que puedes! Si usas RGBA.

Formato de descripción de color RGBA

CSS3 le permite especificar el color usando funciones RGB y RGBA. En este caso, debemos indicar la proporción de cada componente de color para la que se asigna un byte (de 0 a 255, por si alguien no lo sabe).

La sintaxis para este caso es muy sencilla:

Fondo: rgb(0, 255, 0); /*verde puro*/

Para RGBA, se agrega un cuarto parámetro: transparencia alfa (de 0 a 1).

Antecedentes: rgba(255, 0, 0, 0,5); /* rojo puro con 50% de transparencia */

Aquí está, la solución a nuestro problema. Simplemente configure el color de fondo usando rgba y todo se verá como queremos. ¡Sin imágenes ni elementos innecesarios!

¿Dónde puedo conseguir estos números?

Puedes observar los componentes del color usando la herramienta cuentagotas de Photoshop.


Acerca de la compatibilidad entre navegadores

Dado que la función RGB es mucho más antigua que RGBA y ha estado presente desde los días del estándar CSS2, para protegerse contra los navegadores más antiguos, puede utilizar la siguiente construcción duplicada:

SomeBlock (fondo: rgb(255, 0, 0); fondo: rgba(255, 0, 0, 0.5); )

Con este enfoque, los bisabuelos de los navegadores modernos no tendrán translucidez, pero el color en sí seguirá siendo el correcto.

Tendrás que encargarte de IE por separado. Los burros no entienden RGBA hasta la versión 8 inclusive.

Como siempre: ¡tierra para los campesinos, fábricas para los trabajadores y muletas para los burros! En forma de .

Por supuesto, en condiciones de combate colocamos esta regla en un CSS separado, que conectamos.

SomeBlock (fondo:transparente; filtro:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

El truco consiste en especificar los colores inicial y final como iguales (ff0000 - rojo) y aprovechar el hecho de que puedes configurar el canal alfa para el degradado en este filtro (en el ejemplo, el valor es 80).

Como referencia: el filtro utiliza el sistema hexadecimal y el código para un color completamente opaco es FF (en decimal es 255). En consecuencia, 80 hexadecimal es 128 decimal, es decir, 50% de transparencia.

Probado en:

  • ES 6-9
  • Firefox 3+
  • Ópera 10+
  • Safari 4
  • Cromo

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.

Mesa 1. Nombres de los colores, su código RGB, HEX y 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
marina de guerra rgb(0,0,128) #000080 hsl(240, 100%, 25%) azul oscuro
verde azulado rgb(0, 128, 128) #008080 hsl(180, 100%, 25%) Azul verdoso
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.

RGB en CSS

Turquesa mediana
marrón
carmesí
azulvioleta
rolivedrab


Así es como funciona este código:

Configurar el color usando RGB

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

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

Vaya al grano.

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

Código de ejemplo.

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

RGB en CSS

rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)


Así es como debería funcionar este ejemplo:

Fig.1. Colores en RGB.

Explicaciones por ejemplo.

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

se mostraron en el tamaño requerido: 240 px por 40 px. A la propiedad line-height le asignamos un valor de 40px, es decir igual a la altura del bloque, esto te permitirá mostrar texto en el bloque.
en el centro vertical. Centramos el texto en horizontal usando la regla ( alineación de texto: centro;).

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

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

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

Configurar el color usando RGBA

CSS3 tiene una nueva herramienta para trabajar con color: el formato RGBA. Se 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.

RGBA en CSS3



Así es como funcionará:

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

RGBA en CSS3



Aquí está su resultado:

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

Por valor hexadecimal (código HEX)

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

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

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

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

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

Código HEX en CSS

#FF0000
#00FF00
#0000FF


Este código mostrará los siguientes elementos:

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

Fig.1. Colores en RGB.

Vemos que los colores son idénticos.

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

Es decir, se acepta la siguiente abreviatura:

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

Configuración del color mediante HSL

CSS3 tiene un nuevo formato para especificar colores.

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

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

El valor del tono cambiará de 0 a 359.


Figura 2. Rueda de colores HSL.

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

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

Configuración del color mediante HSLA

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

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

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

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

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

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 según sus nombres. en la mesa 1 muestra los nombres, código hexadecimal, valores RGB, HSL y descripción.

Mesa 1. Nombres de colores
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

Bandera

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!

¡Arrrgh!


El resultado de este ejemplo se muestra en la Fig. 2.

Arroz. 2. Colores en la página web

HEX/HTML

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

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

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

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

RGB

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

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

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

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

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

RGBA

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

El valor de color RGBA se especifica como: rgba (rojo, verde, azul, alfa). El parámetro alfa es un número que oscila entre 0,0 (completamente transparente) y 1,0 (completamente opaco).

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

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

HSL

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

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

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

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

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

HSLA

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

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

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

CMYK

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

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

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

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

HSB/VHS

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

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

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

XYZ

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

LABORATORIO

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

>>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 para transmitir color cuando el color requerido se obtiene restando del blanco los colores que faltan.

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 a 255 , o de 0% a 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 a 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.
Para convertir números de un sistema numérico a otro y viceversa, utilice la siguiente calculadora. El valor máximo aquí puede ser FF - 255 .

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, último- azul bandera. Todos los números pueden tomar valores en el rango de 00 a 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.

ROJOVERDEAZUL
0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f
...haga clic aquí

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 especificar 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
aliciaazul Blanco antiguo Agua Aguamarina
Azur Beige Sopa de mariscos Blanchedalmond
azulvioleta Marrón Burlywood cadeteazul
Monasterio Chocolate Coral acianoazul
seda de maíz 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 oscuro azul cielo profundo gris oscuro Dodgerazul
Ladrillo refractario floralblanco verde bosque fucsia
Gainsboro blanco fantasma Oro vara de oro
Gris verdeamarillo Gotas de miel rosa intenso
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 Marina de guerra encaje viejo
Aceituna Oliverab naranjarojo Orquídea
vara de oro pálido verde pálido paletaturquesa rojovioletapálido
papayalátigo melocotón Perú Rosa
Ciruela Azul polvo marrón rosado azul real
marrón silla de montar Verdemar Concha Tierra de siena
Plata Celeste Azul pizarra gris pizarra
Nieve primavera verde Azul acero Broncearse
verde azulado Cardo Tomate Turquesa
Violeta Trigo humo blanco amarillo verdoso
La lista de literales en minúsculas con nombres de colores es bastante extensa y más que suficiente. Si necesita establecer un color de fondo que sea tan inusual que ni siquiera tenga nombre, puede utilizar un valor hexadecimal.

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 a 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.

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
vista código vista código vista código vista código vista código vista código



Arriba