Con la propiedad color establecemos el
color de letra de algún elemento. Aunque suene muy obvio, la propiedad color, se escribe como tal: color.
¿Cómo obtener un color determinado?
Lo más dificil de explicar es cómo obtener un color preciso. Para empezar, hay tres formas de definir los colores en la internet: Con los valores
Hexadecimales, con los valores
RGB y con el
nombre del color (en inglés).
¿Qué significa hexadecimal?
El código hexadecimal es una manera de definir un determinado color en una planilla de estilo. El
código siempre está compuesto por seis dígitos (de ahí hexa-) que puede adoptar números del 0-9 y también letras de la A-F. Además siempre
adelante habrá un numeral (#).
Ejemplo:
#FFA500
¿Qué significa Valor RGB?
Principalmente
RGB significa
Red Green y
Blue:
Rojo Verde y
Azul. Para entenderlo más sencillamente, estos tres colores se mezclan para formar muchos más. El valor máximo que puede tener uno de los tres colores es 255.
Si prestamos atención, la partícula sigue su orden "RGB", por ejemplo:
color:
rgb(
255, 0, 0); =
Hola
color: r
gb(o,
255, 0); =
Hola
color: rg
b(o, 0,
255); =
Hola
Entonces si aumentamos más algún color de los tres (Rojo, Verde y azul) más se va a parecer a este. Si mezclamos el azul y el rojo vamos a obtener violeta:
color: rgb(
255, 0,
255); =
Violeta
Nombres de colores y sus respectivos códigos
| Nombre
| Color
| Código Hexadecimal
| Código RGB
|
|
| red | rojo | #FF0000
| rgb(255, 0, 0)
|
|
| blue
| azul
| #0000FF
| rgb(0, 0, 255)
|
|
| yellow
| amarillo
| #FFFF00
| rgb(255, 255, 0)
|
|
| orange
| Naranja
| #FFA500
| rgb(255, 165, 0)
|
|
| green
| Verde
| #008000
| rgb(0, 128, 0)
|
|
| purple
| Morado | #800080
| rgb(128, 0, 128)
|
|
| chocolate
| Chocolate | #D2691E
| rgb(210, 105, 30)
|
|
| brown
| Marrón
| #A52A2A
| rgb(165, 42, 42)
|
|
| maroon | Granate
| #800000
| rgb(128, 0, 0)
|
|
| salmon
| Salmón
| #FA8072
| rgb(250, 128, 114)
|
|
| olivedrab
| Verde olivo
| #6B8E23
| rgb(107, 142, 35)
|
|
| fuchsia/magenta | Fuccia
| #FF00FF
| rgb(255, 0, 255)
|
|
| skyblue | Celeste
| #87CEEB
| rgb(135, 206, 235)
|
|
| gold
| Dorado
| #FFD700
| rgb(255, 215, 0)
|
|
| violet
| Violeta
| #EE82EE
| rgb(238, 130, 238)
|
|
| silver | Plateado
| #C0C0C0
| rgb(192, 192, 192)
|
|
| gray
| Gris
| #808080
| rgb(128, 128, 128)
|
|
| black
| Negro
| #000000
| rgb(0, 0, 0)
|
|
| white
| Blanco
| #FFFFFF
| rgb(255, 255, 255)
|
|
Para ver una lista completa de nombres de colores
Click aquí.
Utilización/Sintáxis
Para aplicar un color, copiamos el valor hexagecimal, rgb o el nombre del dicho color y lo pegamos como un valor de la propiedad color.
Ejemplo utilizando color en CSS:
<style>
span {
color:
#008000;
}
</style>
Propiedad: En este caso la propiedad que modifica al objeto (
span) es color.
Valor: Aquí es donde va el
nombre de un color, ejemplo
red; el
código hexagecimal, ejemplo
#FF0000; o el
código rgb, ejemplo
rgb(255, 0, 0).
| Usando "color" en HTML | Usando "color" en CSS |
| <span ></span> | span {
color:#008000;
} |
<span style="color: rgb(0, 128, 0);"></span> | span {
color:rgb(0, 128, 0);
} |
<span ></span> | span {
color:green;
} |
