CSS 2: Colores

En una pgina web o en una hoja de estilo se puede definir los colores
mediante cdigos numricos o mediante nombres de colores. Existen
varios cdigos numricos, aunque lo habitual es utilizar cdigos RGB.
En esta pgina se tratan los siguientes temas:
Cdigos de colores RGB
Nombres de colores HTML 3.2
Nombres de colores X11 / SVG
Nombres de colores del sistema
Cdigos de colores HSL
Opacidad: opacity
Para combinar los colores de las pginas, se puede recurrir a sitios
como Paletton o Coolors.

Cdigos de colores RGB

Las pantallas de ordenador consiguen los colores mezclando tres
colores bsicos (rojo - verde - azul). Cada color admite 256 niveles
de intensidad, lo que hace un total de 256 x 256 x 256 = 16.777.216
colores distintos. Para codificar un color es suficiente indicar las
intensidades de cada uno de los tres colores. Como las intensidades
van de 0 a 255, se suelen expresar en notacin hexadecimal (de 00 a
FF) en vez de en notacin decimal. El cdigo de un color se escribe
#RRGGBB, donde RR, GG y BB son los valores (hexadecimales) de la
intensidad de los colores rojo, verde y azul respectivamente.
El color negro se consigue con la ausencia de cualquier color, as que
su cdigo RGB es #000000. El color blanco se consigue mezclando
los tres colores con la mxima intensidad, as que su cdigo RGB es
#FFFFFF.
Volver al principio de la pgina

Nombres de colores HTML 3.2

En la recomendacin HTML 3.2 (aprobada el 14 de enero de 1997) se

incluyeron diecisis nombres de colores: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y
yellow. Estos colores son los colores de la paleta VGA de Windows. La
tabla e ilustracin siguientes muestran estos 16 colores, sus nombres
y cdigos RGB.
Colo Nombr Cdig
Colo Nombr Cdig
r
e
o RGB
r
e
o RGB
blue
#0000FF
navy #000080
fuchsia #FF00FF
purple #800080
red
#FF0000
maroon #800000
yellow #FFFF00
olive #808000
lime
#00FF00
green #008000
aqua #00FFFF
teal
#008080
gray
#808080
black #000000
white #FFFFFF
silver #C0C0C0
Volver al principio de la pgina

Nombres de colores X11 / SVG

En el mdulo CSS 3:Color (aprobado en septiembre de 2011) se
permiten los nombres de colores X11 (o SVG), que la mayora de
navegadores son capaces de representar desde hace tiempo. La tabla
siguiente muestra los 140 colores, sus nombres y cdigos RGB.
Nota: Los colores Fuchsia y Magenta son el mismo color y los colores
Aqua y Cyan son tambin el mismo color, por lo que la tabla contiene
en
realidad
138
colores
distintos.
Tambin estn duplicados los nombres de los colores grises, que
pueden incluir los trminos "gray" o "grey" (DarkGrey/DarkGray, etc).
En X11 slo era vlida una de las dos variantes, pero en la
recomendacin SVG 1.0 ya se admitan ambas variantes.
Cdi
Col
Col
Cdigo
Nombre
go
Nombre
or
or
RGB
RGB
#FFB6C
AliceBlue
#F0F8FF
LightPink
1
#FFA07
AntiqueWhite
#FAEBD7
LightSalmon
A
#20B2A
Aqua
#00FFFF
LightSeaGreen
A
Aquamarine
#7FFFD4
LightSkyBlue
#87CEF

Col
Nombre
or

Cdi
go
RGB

Azure

#F0FFFF

Beige

#F5F5DC

Bisque

#FFE4C4

Black

#000000

BlanchedAlmond #FFEBCD
Blue

#0000FF

BlueViolet

#8A2BE2

Brown

#A52A2A

BurlyWood

#DEB887

CadetBlue

#5F9EA0

Chartreuse

#7FFF00

Chocolate

#D2691E

Coral

#FF7F50

CornflowerBlue

#6495ED

Cornsilk

#FFF8DC

Crimson

#DC143C

Cyan

#00FFFF

DarkBlue

#00008B

DarkCyan

#008B8B

Col
Nombre
or

Cdigo
RGB

A
#77889
LightSlateGray
9
#77889
LightSlateGrey
9
#B0C4D
LightSteelBlue
E
#FFFFE
LightYellow
0
#00FF0
Lime
0
#32CD3
LimeGreen
2
#FAF0E
Linen
6
#FF00F
Magenta
F
#80000
Maroon
0
MediumAquama #66CDA
rine
A
#0000C
MediumBlue
D
#BA55D
MediumOrchid
3
#9370D
MediumPurple
B
MediumSeaGre #3CB37
en
1
MediumSlateBlu #7B68E
e
E
MediumSpringG #00FA9
reen
A
MediumTurquoi #48D1C
se
C
MediumVioletR #C7158
ed
5
#19197
MidnightBlue
0

Col
Nombre
or

Cdi
go
RGB

DarkGoldenrod

#B8860B

DarkGray

#A9A9A9

DarkGrey

#A9A9A9

DarkGreen

#006400

DarkKhaki

#BDB76B

DarkMagenta

#8B008B

DarkOliveGreen #556B2F
DarkOrange

#FF8C00

DarkOrchid

#9932CC

DarkRed

#8B0000

DarkSalmon

#E9967A

DarkSeaGreen

#8FBC8F

DarkSlateBlue

#483D8B

DarkSlateGray

#2F4F4F

DarkSlateGrey

#2F4F4F

DarkTurquoise

#00CED1

DarkViolet

#9400D3

DeepPink

#FF1493

DeepSkyBlue

#00BFFF

DimGray

#696969

Col
Nombre
or

Cdigo
RGB

#F5FFF
A
#FFE4E
MistyRose
1
#FFE4B
Moccasin
5
#FFDE
NavajoWhite
AD
#00008
Navy
0
#FDF5E
OldLace
6
#80800
Olive
0
#6B8E2
OliveDrab
3
#FFA50
Orange
0
#FF450
OrangeRed
0
#DA70D
Orchid
6
#EEE8A
PaleGoldenrod
A
#98FB9
PaleGreen
8
#AFEE
PaleTurquoise
EE
#DB709
PaleVioletRed
3
#FFEFD
PapayaWhip
5
#FFDA
PeachPuff
B9
#CD853
Peru
F
#FFC0C
Pink
B
#DDA0
Plum
DD
MintCream

Col
Nombre
or

Cdi
go
RGB

Col
Nombre
or

DimGrey

#696969

PowderBlue

DodgerBlue

#1E90FF

Purple

FireBrick

#B22222

Red

FloralWhite

#FFFAF0

RosyBrown

ForestGreen

#228B22

RoyalBlue

Fuchsia

#FF00FF

SaddleBrown

Gainsboro

#DCDCDC

Salmon

GhostWhite

#F8F8FF

SandyBrown

Gold

#FFD700

SeaGreen

Goldenrod

#DAA520

Seashell

Gray

#808080

Sienna

Grey

#808080

Silver

Green

#008000

SkyBlue

GreenYellow

#ADFF2F

SlateBlue

Honeydew

#F0FFF0

SlateGray

HotPink

#FF69B4

SlateGrey

IndianRed

#CD5C5C

Snow

Indigo

#4B0082

SpringGreen

Ivory

#FFFFF0

SteelBlue

Khaki

#F0E68C

Tan

Cdigo
RGB
#B0E0E
6
#80008
0
#FF000
0
#BC8F8
F
#4169E
1
#8B451
3
#FA807
2
#F4A46
0
#2E8B5
7
#FFF5E
E
#A0522
D
#C0C0
C0
#87CEE
B
#6A5AC
D
#70809
0
#70809
0
#FFFAF
A
#00FF7
F
#4682B
4
#D2B48
C

Col
Nombre
or

Cdi
go
RGB

Col
Nombre
or

Lavender

#E6E6FA

Teal

LavenderBlush

#FFF0F5

Thistle

LawnGreen

#7CFC00

Tomato

LemonChiffon

#FFFACD

Turquoise

LightBlue

#ADD8E6

Violet

LightCoral

#F08080

Wheat

LightCyan

#E0FFFF

White

LightGoldenrodY
#FAFAD2
ellow

WhiteSmoke

LightGray

#D3D3D3

Yellow

LightGreen

#90EE90

YellowGreen

Cdigo
RGB
#00808
0
#D8BF
D8
#FF634
7
#40E0D
0
#EE82E
E
#F5DEB
3
#FFFFF
F
#F5F5F
5
#FFFF0
0
#9ACD3
2

LightGrey
#D3D3D3
Volver al principio de la pgina

Nombres de colores del sistema

Los colores del sistema hacen referencia a los colores utilizados por el
interfaz del sistema operativo. Forman parte de la recomendacin CSS
2, pero se consideran obsoletos en la recomendacin CSS 3:Color, en
favor de otros trminos (llamados valores de apariencia) definidos en
la futura recomendacin CSS 3: Interface de usuario bsico,
actualmente (octubre de 2014) en elaboracin.
Color Nombre
Concepto
ActiveBorder
Borde de la ventana activa
ActiveCaption
Ttulo de la ventana activa
Color de fondo del interfaz de
AppWorkspace
mltiplesdocumentos
Background
Color de fondo del escritorio
ButtonFace
Color frontal de los elementos 3D

Color Nombre

Concepto
Sombra oscura de los elementos 3D
ButtonHighlight
(bordes opuestos a la fuente de luz)
ButtonShadow
Sombra de los elementos 3D
ButtonText
Texto de los botones
Texto en ttulo, caja de tamao y caja de
CaptionText
flecha de desplazamiento
Texto en gris (desactivado). Este color es
GrayText
#000000 si no se puede mostrar un colo
gris slido
Highlight
Elemento(s) seleccionado(s) en un control
Texto
de
(de
los)
elemento(s)
HighlightText
seleccionado(s) en un control
InactiveBorder
Borde de la ventana inactiva
InactiveCaption
Ttulo de la ventana inactiva
InactiveCaptionText Texto de un ttulo inactivo
InfoBackground
Color de fondo de los tooltips
InfoText
Texto de los tooltips
Menu
Fondo de los mens
MenuText
Texto de los mens
Scrollbar
rea gris de la barra de desplazamiento
ThreeDDarkShadow Sombra oscura de los elementos 3D
ThreeDFace
Color frontal de los elementos 3D
ThreeDHighlight
Color brillante de los elementos 3D
Color claro de los elementos 3D (bordes
ThreeDLightShadow
frente a la fuente de luz)
ThreeDShadow
Sombra oscura de los elementos 3D
Window
Fondo de la ventana
WindowFrame
Marco de la ventana
WindowText
Texto en las ventanas
Volver al principio de la pgina

Cdigos de colores HSL

La recomendacin CSS 3: Color permite define los colores

mediante el modelo de color HSL (Hue, Saturation, Lightness, es decir,
Tonalidad, Saturacin, Luminancia).
p {
background-color: hsl(153, 80%, 40%)

Si algo puede

Las tablas siguientes muestran los colores con el modelo HSL, por lo
que slo se ven los colores si el navegador admite el modelo hsl.
Hue: 0
S \ L 0%

20 40 60 80 100
% % % % %

0%
20%
40%
60%
80%
100
%
Hue: 51
S \ L 0%
0%
20%
40%
60%
80%
100
%

20 40 60 80 100
% % % % %

Hue: 102
S \ L 0%

20 40 60 80 100
% % % % %

0%
20%
40%
60%
80%
100
%
Hue: 153
S \ L 0%

20 40 60 80 100
% % % % %

0%
20%
40%
60%
80%
100
%
Hue: 204
S \ L 0% 20 40 60 80 100

0%
20%
40%
60%
80%
100
%
Hue: 255
S \ L 0%

20 40 60 80 100
% % % % %

0%
20%
40%
60%
80%
100
%
Volver al principio de la pgina

Opacidad: opacity

La propiedad opacity incluida en la recomendacin CSS 3:

Color permite hacer que un elemento sea parcialmente transparente.
El valor de esta propiedad debe ser un valor decimal entre 0 y 1 (el
valor 0 hace que el elemento sea completamente transparente y el
valor 1 hace que el elemento sea completamente opaco).
Si un elemento parcialmente transparente se superpone a otro
elemento de otro color, el navegador mezcla los colores de los
elementos, como muestra el siguiente ejemplo:
p1 {
background-color: lightblue;
}
p2 {
background-color: lightyellow;
opacity: 0.5;
}
/* En el ejemplo tambin se utilizan propiedades
de posicionamiento que no aparecen aqu. */

Volver al principio de la pgina

ltima modificacin de esta pgina: 6 de noviembre de 2014
Esta pgina forma parte del curso Pginas web HTML / XHTML y
hojas de estilo CSS por Bartolom Sintes Marco
que se distribuye bajo una Licencia Creative Commons
Reconocimiento-CompartirIgual 4.0 Internacio

Este texto se
a la izquierda
la izquierda,
Este texto se
la derecha, a
derecha, a la