Colores HTML

Colores RGB

Los colores en HTML se especifican mediante el estándar RGB (Red Green and Blue). Este estándar indica que una combinación de los tres colores básicos: rojo, verde y azul puede dar lugar a cualquier otro color.

Los valores que se les da al RGB son valores hexadecimales que van desde el 00 hasta el FF. Al valor del color se le antepone una almohadilla.

De esta forma un color rojo sería aquel que solo tiene activado el Red, el verde solo la parte del Green y el azul la parte del Blue. Así los colores básicos en HTML serán:

Rojo    #FF0000
Verde   #00FF00
Azul    #0000FF

Otras combinaciones generales de colores serían el negro (activando todos los colores), el blanco (desactivando todos los colores), amarillo (combinando Red y Blue), fucsia (combinando todo el rojo y todo el azul)

Negro     #FFFFFF
Blanco    #000000
Amarillo  #FFFF00
Fucsia    #FF00FF

Y luego ya combinaciones de los múltiples valores hexadecimales

Gris Plata    #C0C0C0
Azul Marino   #000080
Verde Oliva   #808000
…

Aunque lo más recomendable es utilizar el código hexadecimal para representar un valor, tenemos la alternativa de referirnos a los colores por su nombre en inglés. Este valor también será entendido por el navegador web. Así tendremos:

  • Rojo - red
  • Verde - green
  • Azul - blue
  • Blanco - white
  • Negro - black
  • Naranja - orange

Utilizar los colores en HTML

Los colores al ser elementos de estilo son utilizados en las CSS. Ya que HTML solo define la estructura de la página.

Pero vamos a ver, por encima, cómo podríamos cambiar el color de un texto. Para ello vamos a utilizar el atributo style. El atributo style nos permite asignar un estilo CSS a un elemento HTML.

El estilo que vamos a manipular es color. A ese atributo color le asignaremos un valor RGB.

<elemento style="color:#RGB" />

Por ejemplo si queremos cambiar el color a un header podríamos hacer lo siguiente.

<h1 style="color:#FF0000">Cabecera 1</h1>

Otro atributo CSS al que podríamos dar un colo es el color de fondo. Para ello deberemos de manipular el atributo background-color. De esta forma si queremos poner un color de fondo a una capa podríamos hacer lo siguiente.

<div style="background-color:#FFFF00">Mi Capa</div>

Es interesante que le eches un ojo al Manual de CSS para aprender más sobre el uso de colores en páginas web.

Guía de Colores Hexadecimales

A modo de apoyo aquí tenemos una guía de colores generales, sus valores hexadecimales y nombre en inglés

Aliceblue

F0F8FF

Antiquewhite

FAEBD7

Aqua

00FFFF

Aquamarine

7FFFD4

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

Darkgoldenrod

B8860B

Darkgray

A9A9A9

Darkgreen

006400

Darkkhaki

BDB76B

Darkmagenta

8B008B

Darkolivegreen 556B2F

Darkorange

FF8C00

Darkorchid

9932CC

Darkred

8B0000

Darksalmon

E9967A

Darkseagreen

8FBC8F

Darkslateblue

483D8B

Darkslategray

2F4F4F

Darkturquoise 00CED1

Darkviolet

9400D3

deeppink

FF1493

Deepskyblue

00BFFF

Dimgray

696969

Dodgerblue

1E90FF

Firebrick

B22222

Floralwhite

FFFAF0

Forestgreen

228B22

Fuchsia

FF00FF

Gainsboro

DCDCDC

Ghostwhite

F8F8FF

Gold

FFD700

Goldenrod

DAA520

Gray

808080

Green

008000

Greenyellow

ADFF2F

Honeydew

F0FFF0

Hotpink

FF69B4

Indianred

CD5C5C

Indigo

4B0082

Ivory

FFFFF0

Khaki

F0E68C

Lavendar

E6E6FA

Lavenderblush FFF0F5

Lawngreen

7CFC00

Lemonchiffon

FFFACD

Lightblue

ADD8E6

Lightcoral

F08080

Lightcyan

E0FFFF

Lightgoldenrodyellow

FAFAD2

Lightgreen

90EE90

Lightgrey

D3D3D3

Lightpink

FFB6C1

Lightsalmon

FFA07A

Lightseagreen

20B2AA

Lightskyblue

87CEFA

Lightslategray

778899

Lightsteelblue

B0C4DE

Lightyellow

FFFFE0

Lime

00FF00

Limegreen

32CD32

Linen

FAF0E6

Magenta

FF00FF

Maroon

800000

Mediumauqamarine

66CDAA

Mediumblue

0000CD

Mediumorchid

BA55D3

Mediumpurple 9370D8

Mediumseagreen

3CB371

Mediumslateblue

7B68EE

Mediumspringgreen 00FA9A

Mediumturquoise

48D1CC

Mediumvioletred

C71585

Midnightblue

191970

Mintcream

F5FFFA

Mistyrose

FFE4E1

Moccasin

FFE4B5

Navajowhite

FFDEAD

Navy

000080

Oldlace

FDF5E6

Olive

808000

Olivedrab

688E23

Orange

FFA500

Orangered

FF4500

Orchid

DA70D6

Palegoldenrod

EEE8AA

Palegreen

98FB98

Paleturquoise

AFEEEE

Palevioletred

D87093

Papayawhip

FFEFD5

Peachpuff

FFDAB9

Peru

CD853F

Pink

FFC0CB

Plum

DDA0DD

Powderblue

B0E0E6

Purple

800080

Red

FF0000

Rosybrown

BC8F8F

Royalblue

4169E1

Saddlebrown

8B4513

Salmon

FA8072

Sandybrown

F4A460

Seagreen

2E8B57

Seashell

FFF5EE

Sienna

A0522D

Silver

C0C0C0

Skyblue

87CEEB

Slateblue

6A5ACD

Slategray

708090

Snow

FFFAFA

Springgreen

00FF7F

Steelblue

4682B4

Tan

D2B48C

Teal

008080

Thistle

D8BFD8

Tomato

FF6347

Turquoise

40E0D0

Violet

EE82EE

Wheat

F5DEB3

White

FFFFFF

Whitesmoke

F5F5F5

Yellow

FFFF00

YellowGreen

9ACD32


Mejora esta página