El código RGB para el color rojo se escribe como. Configurar el color del texto en CSS

En la primera parte del libro, ya demostramos en algunos ejemplos cómo configurar el color del texto en CSS. Aquí no hay nada complicado: necesitarás la propiedad de color y el valor del color con el que quieres colorear el texto.

PAG (color: #211C18; )

En nuestro ejemplo, el valor #211C18 representa el código de color hexadecimal. Si ya está familiarizado con el sistema numérico hexadecimal, puede omitir la lectura del siguiente párrafo. También hablaremos más sobre otras formas de representar colores en la web: utilizando modelos de color (RGB, HSL) y palabras clave. Esta información será útil para principiantes y se recomienda su lectura.

Colores hexadecimales (hexadecimal)

Sistema numérico hexadecimal ( hexadecimal, hexadecimal) se basa en el número 16. Para escribir un valor hexadecimal se utilizan 16 caracteres: números arábigos del 0 al 9 y las primeras letras del alfabeto latino (A, B, C, D, E, F). El color en formato hexadecimal se escribe como tres números de dos dígitos del 00 al FF (deben estar precedidos por un símbolo de almohadilla #), que corresponde a tres componentes: rojo, verde, azul (modelo de color RGB). En otras palabras, una entrada de color se puede representar como #RRGGBB, donde el primer par de caracteres determina el nivel de rojo, el segundo, el nivel de verde y el tercero, el nivel de azul. El color resultante es una combinación de estos tres colores.

Notación taquigráfica para colores hexadecimales

Algunos valores de color hexadecimales se pueden escribir en abreviaturas. Para hacer esto, convierta la entrada como #RRGGBB en #RGB. Esto se puede hacer cuando el número hexadecimal contiene tres pares de caracteres idénticos.

La forma abreviada de notación es bastante común y, para su referencia, le proporcionaremos varios ejemplos de abreviaturas. Por cierto, los valores de color hexadecimales no distinguen entre mayúsculas y minúsculas: puede usar letras mayúsculas y minúsculas, todo depende de su deseo y gusto.

Ejemplos de notación abreviada para colores hexadecimales:

modelo de color RGB

La segunda forma de especificar colores en CSS es utilizar valores RGB decimales (rojo, azul, verde). Para hacer esto, debe escribir la palabra clave rgb después de la propiedad de color, y luego entre paréntesis y separados por comas, tres números en el rango de 0 a 255, cada uno de los cuales significa la intensidad de los colores rojo, verde y azul (r , g, b). Cuanto mayor sea el número, más intenso será el color. Por ejemplo, para obtener un color verde brillante, debes escribir:

PAG (color: rgb(0, 255, 0); )

Pero el tinte mostaza amarillento tiene el siguiente significado:

Color: rgb(94, 81, 3); /* a continuación se muestra el mismo color, escrito en hexadecimal: */ color: #5E5103;

El valor del negro se escribe como (0, 0, 0) y del blanco como (255, 255, 255). También es posible indicar estos valores como porcentajes. Entonces, el número 255 corresponde al 100%, por lo tanto, el color blanco se puede configurar de la siguiente manera:

Color: rgb(100%, 100%, 100%);

Dónde buscar significados de colores

Quizás tengas una pregunta: ¿de dónde sacas todos estos significados de los colores? Hay muchos editores gráficos y servicios en línea con los que puede seleccionar colores y crear combinaciones de colores. Uno de los programas más populares en el que puedes seleccionar un color adecuado y obtener su valor RGB, hexadecimal y más. Adobe Photoshop. Como alternativa, existen sitios especiales donde puede elegir fácilmente no sólo un color, sino también una combinación de colores completa. Un gran ejemplo es el servicio Adobe Color CC.

Modelo de color RGBA

Puede configurar un color en formato RGBA de la misma manera que en RGB. La diferencia entre RGBA y RGB es la presencia de un canal alfa, que es responsable de la transparencia del color. La transparencia se establece mediante un número en el rango de 0 a 1, donde 0 significa transparencia total y 1, por el contrario, significa completamente opaco. Los valores intermedios como 0,5 le permiten establecer una apariencia translúcida (se permite la notación taquigráfica, sin cero, pero con un punto: 0,5). Por ejemplo, para que el texto tenga color y sea ligeramente transparente, debe escribir la palabra clave rgba y el valor del color después de la propiedad de color:

PAG (color: rgba(94, 81, 3, .9); )

La desventaja de RGBA es que no admite navegador de Internet Versiones del explorador 8 y anteriores. Especialmente para IE8, puedes aplicar la siguiente solución:

P (color: rgb(94, 81, 3); color: rgba(94, 81, 3, .9); )

La primera propiedad del ejemplo está destinada al navegador IE8, que mostrará el texto en el color deseado, pero sin transparencia. Y aquellos navegadores que entiendan RGBA aplicarán la segunda propiedad al elemento, con transparencia.

Modelos de color HSL (HSLA)

También puedes configurar el color en CSS usando las coordenadas del modelo de color HSL (Tono, Saturación, Luminosidad). Está escrito así:

PAG (color: hsl(165, 100%, 50%); )

El primer número entre paréntesis significa tono y se expresa en grados (el rango de números va de 0 a 359). Será fácil entender por qué se utilizan los grados si recuerda cómo se ve la rueda de colores:

El segundo y tercer número entre paréntesis significan saturación y luminosidad, respectivamente. Sus valores se establecen en porcentajes de 0 a 100. Cuanto menor sea el valor de saturación, más apagado se vuelve el color. Un valor de saturación de cero dará como resultado un color gris, sin importar cuál sea el valor del tono. El valor de luminosidad le permite especificar el brillo del color. Los valores bajos dan como resultado tonos de color oscuros, los valores altos dan como resultado tonos claros. Un valor de 100% para la luminosidad significa blanco, 0% significa negro.

El modelo de color HSLA funciona casi igual que HSL, pero, al igual que RGBA, tiene un canal alfa con el que puedes configurar la transparencia del color, especificando el valor deseado en el rango de 0 a 1:

PAG (color: hsla(165, 100%, 50%, .6); )

HSL y HSLA son compatibles con todos los navegadores excepto explorador de Internet versiones 8 y anteriores.

Colores HTML estándar

Otra forma de representar colores en la web es mediante palabras clave, que se pueden utilizar para especificar un color para un elemento. Ejemplo:

PAG(color:negro;)

Hay 16 colores estándar que se pueden escribir en el valor de la propiedad de color:

Estos colores son compatibles con todos los navegadores. Además de éstas, hay alrededor de 130 palabras clave adicionales para diferentes tonos de colores. Se puede ver una tabla completa de estos colores en el libro de referencia del W3C.

El uso de dichas palabras clave es aceptable, pero existe el riesgo de que el navegador no acepte alguna palabra. Por lo tanto, se recomienda escribir el código de color hexadecimal en lugar de palabras clave.

Resultados

En CSS, el color del texto se especifica mediante la propiedad de color y su valor se puede escribir de varias formas: en formato hexadecimal (hex), en formato RGB o HSL, o especificando una palabra clave. Para evitar la visualización incorrecta de un color especificado mediante una palabra clave, es mejor especificar su valor hexadecimal.

También es posible configurar la transparencia del elemento mediante un canal alfa (formatos RGBA y HSLA). Hay que tener en cuenta que el navegador IE8 y su primeras versiones no admite formatos RGBA, HSL y HSLA.

En este artículo nos familiarizaremos con las capacidades de HTML y CSS para cambiar el color del texto en las páginas del sitio web. Se considerarán varias opciones. Para cada caso individual, es conveniente su propio método específico.

Para empezar, observamos que todos los colores se pueden especificar en tres formatos:

• Nombre del color (rojo, azul, verde, etc.)
• Formato hexadecimal (#104A00, #0F0, etc.)
• formato rgba (rgba(0,0,0,0.5), etc.)

Nuestro sitio web presenta la paleta completa y los nombres de colores html para el sitio, donde puede elegir el color apropiado.

Método 1. Mediante etiqueta html