| |
|---|
|
|
El HTML es el lenguaje más utilizado en la creación de sitios web. Cuando estamos diseñando una web, no podemos determinar los colores solo con el nombre, sino expresarlos en su correspondiente código HTML, es allcuando es útil conocer los códigos que existen para esa función. Solo necesitas obtener el código HTML correspondiente al color elegido y copiarlo y pegarlo en tu sitio web, y es lo que se detalla en esta publicación.
IR A PORTAFOLIO¿Cuáles son los códigos de color de HTML ?
Los códigos de colores son formas de representar los colores que vemos cada día en un formato que un ordenador puede interpretar y mostrar. Comúnmente utilizado en sitios web y otras aplicaciones de software, hay una gran variedad de formatos, incluidos los códigos de color HEX, RGB y HSL valores y nombres de colores HTML, entre otros. Empecemos comentando su formato más básicoi, que es la metodología nombres de colores HTML (en inglés) ordar los otros.
En HTML se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR="xxx", donde "xxx" es el nombre en inglés del color que se desea. Hay que tener presente que algunos no se verán o se verán mal si la máquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es anidable con el de tamaño y todos los demás.
El procedimiento es sumamente sencillo; es el siguiente:
Si escribes:<B><FONT COLOR="red">Texto ROJO </FONT>Se ve así: Texto ROJO <br> <FONT COLOR="blue">Texto AZUL </FONT>Se ve así: Texto AZUL <br> <FONT COLOR="navy">Texto AZUL MARINO </FONT>Se ve así: Texto AZUL MARINO <br> <FONT COLOR="green">Texto VERDE </FONT>Se ve así: Texto VERDE <br> <FONT COLOR="olive">Texto OLIVA </FONT>Se ve así: Texto OLIVA <br> <FONT COLOR="yellow">Texto AMARILLO </FONT>Se ve así: Texto AMARILLO <br> <FONT COLOR="lime">Texto LIMA </FONT>Se ve así: Texto LIMA <br> <FONT COLOR="magenta">Texto MAGENTA </FONT>Se ve así: Texto MAGENTA <br> <FONT COLOR="purple">Texto PURPURA </FONT>Se ve así: Texto PURPURA <br> <FONT COLOR="cyan">Texto CYAN </FONT>Se ve así: Texto CYAN <br> <FONT COLOR="brown">Texto MARRON </FONT>Se ve así: Texto MARRON <br> <FONT COLOR="black">Texto NEGRO </FONT>Se ve así: Texto NEGRO <br> <FONT COLOR="gray">Texto GRIS </FONT>Se ve así: Texto GRIS <br>Se ve así: <FONT COLOR="teal">Texto TEAL </FONT>Se ve así: Texto TEAL <br> <FONT COLOR="white">Texto BLANCO </FONT>Se ve así: Texto BLANCO <br> </B>
He aquí una combinación de colores y tamaños:
Si escribes:
<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT> <FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>Resulta:
Esto es una Prueba
Los colores también se pueden definir en hexadecimal (por ejemplo el rojo es <FONT COLOR=#FF0000>. Cuando son colores básicos, como los del ejemplo de arriba, es más cómodo escribir el nombre aunque sea en inglés, pero cuando se trata de definir un color que "no tiene nombre" no hay más remedio que usar la codificación hexadecimal. En el índice encontrarás una tabla con los códigos de colores.
CSS 3: Colores
La recomendación CSS 3 Color (2º ed) (junio de 2018) describe los sistemas de definición de colores (nombres o códigos numéricos) que se pueden utilizar en las hojas de estilo, así como la forma de definir la opacidad de los elementos.
Los colores se pueden expresar mediante varios sistemas de unidades: RGB, RGBA, HSL y HSLA, así como mediante nombre de colores (básicos o extendidos)
En esta publicación se explica únicamente cómo se hace referencia a un color en una hoja de estilo. Para encontrar combinaciones de colores visualmente atractivas, se puede recurrir a sitios como Paletton o Coolors.
IR A PORTAFOLIO
Códigos de colores RGB
Los códigos decimales de colores RGB son aquellos que se expresan indicando la intensidad de cada uno de los colores primarios en su composición. Estos colores son el (rojo, verde y azul).
Esta nomenclatura permite una concentración de 256 niveles de intensidad, lo que hace un total de 256 x 256 x 256 = 16.777.216 colores diferentes. Para hacer referencia a un color concreto, basta con indicar las intensidades de cada uno de los tres colores básicos.
El código resultante para cada color indica la concentración de cada uno de los colores primarios para obtenerlo, correspondiendo:
Por ejemplo, el color "verde eléctrico" se representa con los números 0, 255, 0, lo que indica que tiene una concentración de 0 para el rojo, 255 niveles de verde y 0 para el azul.
Los códigos de colores RGB ya formaban parte de la recomendación CSS 1 (diciembre de 1996).
Hay que agregar que los códigos RGB se pueden expresar de distintas formas:
- rgb(rojo, verde, azul), donde rojo, verde y azul son números enteros desde 0 a 255.
- rgb(rojo, verde, azul), donde rojo, verde y azul son porcentajes desde 0% hasta 100%.
- #RRGGBB, donde RR, GG y BB son números hexadecimales desde 00 hasta FF.
- #RGB, donde R, G y B son números hexadecimales desde 0 hasta F (el navegador transforma esos números en números de dos cifras repitiendo el valor, es decir, F se convierte en FF, 6 en 66, etc.
Las más utilizadas son la tercera y la primera.
p {
background-color: #14B76E;
}
Se verá así: color: #14B76E
El color negro se consigue con la ausencia de cualquier color, así que su código RGB es rgb(0, 0, 0), rgb(0%, 0%, 0%), #000000 o #000.
El color blanco se consigue mezclando los tres colores con la máxima intensidad, así que su código RGB es rgb(255, 255, 255), rgb(100%, 100%, 100%), #FFFFFF o #FFF.
El cuadro siguiente permite generar códigos de colores RGB moviendo los deslizadores:
| Decimal | Hexadecimal | ||
| Rojo: | |||
| Verde: | |||
| Azul: | |||
|
Códigos RGB: |
Códigos de colores RGBA
Los códigos de colores RGBA se incorporaron a CSS en la primera edición (junio de 2011) de la recomendación CSS 3 Color (2º ed) (junio de 2018).
Estos códigos incorporan la transparencia alpha a los códigos RGB mediante un cuarto valor que indica la transparencia del elemento. La transparencia se expresa como un número decimal entre 0 y 1, en el que el 0 significa completamente transparente y el 1 completamente opaco.
Los códigos RGBA se pueden expresar de distintas formas:
- rgba(rojo, verde, azul, transparencia), donde rojo, verde y azul son números enteros desde 0 a 255 y transparencia un número decimal entre 0 y 1.
- rgba(rojo, verde, azul, transparencia), donde rojo, verde y azul son porcentajes desde 0% hasta 100% y transparencia un número decimal entre 0 y 1.
Al código RGB del color elegido se le puede añadir un número extra al final para especificar la opacidad o transparencia que oscila entre el 0 y el 1. Es decir, que si al color verde eléctrico (retomando el ejemplo usado en RGB) le añades un 0.5 al final, estarías indicando que este color entra una opacidad del 50%, quedando su código de la siguiente forma; 0, 255, 0, 0.5. A este formato se le conoce como RGBA.
El cuadro siguiente permite generar colores RGBA moviendo los deslizadores. Para poder apreciar el funcionamiento de la transparencia, el cuadro muestra dos rectángulos de color, en el que el color del rectángulo situado por delante permite transparencia:
| Decimal | ||
| Color trasero | ||
|---|---|---|
| Rojo: | ||
| Verde: | ||
| Azul: | ||
| Color delantero | ||
| Rojo: | ||
| Verde: | ||
| Azul: | ||
| Transparencia: | ||
|
Código RGBA: |
||
IR A PORTAFOLIO
Colores con códigos hexadecimal (HEX)
Los códigos de color HEX o hexadecimal, se componen por seriales hexadecimales, los cuales permiten identificarlos de una manera más sencilla y directa. Sin embargo, este código en ocasiones suele ser menos usado ya que no permite definir la opacidad del color, por lo que si bien está destinado a usarse en la programación HTML y CSS, en la mayoría de las veces se limita a estar presente en programas de edición como Photoshop o Illustrator para definir colores a los que posteriormente se les pueda editar la opacidad o añadir efectos y texturas.
A continuación presento una lista con los colores más utilizados en la programación y el diseño gráfico, de modo que identifiques sus códigos hexadecimales, RGB y HEX de una forma mucho más sencilla y puedas copiar y pegar en tus creaciones y diseños webs, aplicaciones, plantillas, canvas etc
IR A PORTAFOLIOResumen del Contenido
