Colores HTML: Text Color, Hexadecimales, Background Color, Tabla

Los colores siempre se especifican combinando una serie de colores básicos. Hay dos sistemas: el aditivo (RGB), y el sustractivo (CMY).

El sistema RGB utiliza 3 colores básicos: el rojo, el verde, y el azul. Este sistema es el mismo que funciona con la luz, y es un sistema aditivo. Es decir, si sumas colores, acabas por obtener colores más claros hasta acabar en el blanco.

Por el contrario, el sistema CMY usa el cyan, el magenta, y el amarillo, y es el mismo que se usa con las pinturas. Mezclando colores obtienes tonos cada vez más oscuros, hasta llegar al negro.

En HTML se usa el sistema RGB. Hay 256 posibles valores para cada color básico, lo que da para 16.777.216 combinaciones. A la hora de especificar los valores, se usan números hexadecimales, del 00 (0) al FF (255). Un color completo se especifica con el código#RRGGBB, indicando primero el rojo, luego el verde, y luego el azul. Cuanto mayor sea el valor, más intenso será el color.

Ejemplo: el código #FF0000 corresponde al máximo de rojo, por lo que un texto que use las marcas <span style="color:#FF0000"> texto </span>, se mostrará en rojo, como éste.

000000

333333

666666

999999

CCCCCC

FFFFFF

996666

663333

CC9999

993333

CC6666

CC3333

330000

660000

990000

CC0000

FF0000

FF3333

FF6666

FF9999

FFCCCC

FF3300

CC3300

FF6633

CC6633

993300

FF9966

FF6600

996633

CC9966

663300

CC6600

FF9933

FFCC99

FF9900

CC9933

996600

FFCC66

CC9900

FFCC33

FFCC00

999966

666633

CCCC99

999933

CCCC66

CCCC33

333300

666600

999900

CCCC00

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

CCFF00

99CC00

CCFF33

99CC33

669900

CCFF66

99FF00

669933

99CC66

336600

66CC00

99FF33

CCFF99

66FF00

66CC33

339900

99FF66

33CC00

66FF33

33FF00

669966

336633

99CC99

339933

66CC66

33CC33

003300

006600

009900

00CC00

00FF00

33FF33

66FF66

99FF99

CCFFCC

00FF33

00CC33

33FF66

33CC66

009933

66FF99

00FF66

339966

66CC99

006633

00CC66

33FF99

99FFCC

00FF99

33CC99

009966

66FFCC

00CC99

33FFCC

00FFCC

669999

336666

99CCCC

339999

66CCCC

33CCCC

003333

006666

009999

00CCCC

00FFFF

33FFFF

66FFFF

99FFFF

CCFFFF

00CCFF

0099CC

33CCFF

3399CC

006699

66CCFF

0099FF

336699

6699CC

003366

0066CC

3399FF

99CCFF

0066FF

3366CC

003399

6699FF

0033CC

3366FF

0033FF

666699

333366

9999CC

333399

6666CC

3333CC

000066

000033

000099

0000CC

0000FF

3333FF

6666FF

9999FF

CCCCFF

3300FF

3300CC

6633FF

6633CC

330099

9966FF

6600FF

663399

9966CC

330066

6600CC

9933FF

CC99FF

9900FF

9933CC

660099

CC66FF

9900CC

CC33FF

CC00FF

996699

663366

CC99CC

993399

CC66CC

CC33CC

330033

660066

990099

CC00CC

FF00FF

FF33FF

FF66FF

FF99FF

FFCCFF

FF00CC

CC0099

FF33CC

CC3399

990066

FF66CC

FF0099

993366

CC6699

660033

CC0066

FF3399

FF99CC

FF0066

CC3366

990033

FF6699

CC0033

FF3366

FF0033

Text Color

A continuación veremos una forma simple de darle color al texto que escribimos cuando hacemos una página en HTML.

Para lograr esto usaremos la etiqueta <font>, como lo muestra el siguiente ejemplo:

<font color="red">Aquí va el texto</font>

En este código la palabra red, que en inglés significa rojo, le indica al navegador el color del texto, que en este caso se verá así:

Aquí va el texto

La siguiente es una lista con los colores más usados. En algunos casos se agregó un fondo gris para que los colores pudieran ser apreciados:

  • Orange (Naranja)

  • Pink (Rosa)

  • Red (Rojo)

  • Yellow (Amarillo)

  • White (Blanco)

  • Black (Negro)

  • Brown (Marrón)

  • Blue (Azul)

  • Green (Verde)

  • Turquoise (Turquesa)

  • Gray (Gris)

En el código siempre se utiliza el nombre del color en inglés, tal como lo indica la lista anterior.

Colores Hexadecimales

En HTML utilizamos continuamente diferentes colores para los textos, bordes de tablas, fondos, etc. A estos colores bien podemos referirnos a través de su nombre de color o a través de su valor hexadecimal (notación del tipo #rrggbb).

Por ello, no dudamos que es de inestimable valor el tener siempre a mano una tabla como la que presentamos a continuación, con una multitud de colores, agrupados por tonalidad de color, donde además de poder ver el color en si, también vemos su nombre y su valor hexadecimal.

NOMBRE COLOR

CÓDIGO HEX.

¿CÓMO SE VE?

Black

#000000

Grey0

#150517

Grey18

#250517

Grey21

#2B1B17

Grey23

#302217

Grey24

#302226

Grey25

#342826

Grey26

#34282C

Grey27

#382D2C

Grey28

#3b3131

Grey29

#3E3535

Grey30

#413839

Grey31

#41383C

Grey32

#463E3F

Grey34

#4A4344

Grey35

#4C4646

Grey36

#4E4848

Grey37

#504A4B

Grey38

#544E4F

Grey39

#565051

Grey40

#595454

Grey41

#5C5858

Grey42

#5F5A59

Grey43

#625D5D

Grey44

#646060

Grey45

#666362

Grey46

#696565

Grey47

#6D6968

Grey48

#6E6A6B

Grey49

#726E6D

Grey50

#747170

Grey

#736F6E

Slate Grey4

#616D7E

Slate Grey

#657383

Light Steel Blue4

#646D7E

Light Slate Grey

#6D7B8D

Cadet Blue4

#4C787E

Dark Slate Grey4

#4C7D7E

Thistle4

#806D7E

Medium Slate Blue

#5E5A80

Medium Purple4

#4E387E

Midnight Blue

#151B54

Dark Slate Blue

#2B3856

Dark Slate Grey

#25383C

Dim Grey

#463E41

Cornflower Blue

#151B8D

Royal Blue4

#15317E

Slate Blue4

#342D7E

Royal Blue

#2B60DE

Royal Blue1

#306EFF

Royal Blue2

#2B65EC

Royal Blue3

#2554C7

Deep Sky Blue

#3BB9FF

Deep Sky Blue2

#38ACEC

Slate Blue

#357EC7

Deep Sky Blue3

#3090C7

Deep Sky Blue4

#25587E

Dodger Blue

#1589FF

Dodger Blue2

#157DEC

Dodger Blue3

#1569C7

Dodger Blue4

#153E7E

Steel Blue4

#2B547E

Steel Blue

#4863A0

Slate Blue2

#6960EC

Violet

#8D38C9

Medium Purple3

#7A5DC7

Medium Purple

#8467D7

Medium Purple2

#9172EC

Medium Purple1

#9E7BFF

Light Steel Blue

#728FCE

Steel Blue3

#488AC7

Steel Blue2

#56A5EC

Steel Blue1

#5CB3FF

Sky Blue3

#659EC7

Sky Blue4

#41627E

Slate Blue

#737CA1

Slate Grey3

#98AFC7

Violet Red

#F6358A

Violet Red2

#E4317F

Deep Pink

#F52887

Deep Pink2

#E4287C

Deep Pink3

#C12267

Deep Pink4

#7D053F

Medium Violet Red

#CA226B

Violet Red3

#C12869

Firebrick

#800517

Violet Red4

#7D0541

Maroon4

#7D0552

Maroon

#810541

Maroon3

#C12283

Maroon2

#E3319D

Maroon1

#F535AA

Magenta

#FF00FF

Magenta1

#F433FF

Magenta2

#E238EC

Magenta3

#C031C7

Medium Orchid

#B048B5

Medium Orchid1

#D462FF

Medium Orchid2

#C45AEC

Medium Orchid3

#A74AC7

Medium Orchid4

#6A287E

Purple

#8E35EF

Purple1

#893BFF

Purple2

#7F38EC

Purple3

#6C2DC7

Purple4

#461B7E

Dark Orchid4

#571B7E

Dark Orchid

#7D1B7E

Dark Violet

#842DCE

Dark Orchid3

#8B31C7

Dark Orchid2

#A23BEC

Dark Orchid1

#B041FF

Plum4

#7E587E

Pale Violet Red

#D16587

Pale Violet Red1

#F778A1

Pale Violet Red2

#E56E94

Pale Violet Red3

#C25A7C

Pale Violet Red4

#7E354D

Plum

#B93B8F

Plum1

#F9B7FF

Plum2

#E6A9EC

Plum3

#C38EC7

Thistle

#D2B9D3

Thistle3

#C6AEC7

Lavendar Blush2

#EBDDE2

Lavendar Blush3

#C8BBBE

Thistle2

#E9CFEC

Thistle1

#FCDFFF

Lavendar

#E3E4FA

Lavendar Blush

#FDEEF4

Light Steel Blue1

#C6DEFF

Light Blue

#ADDFFF

Light Blue1

#BDEDFF

Light Cyan

#E0FFFF

Slate Grey1

#C2DFFF

Slate Grey2

#B4CFEC

Light Steel Blue2

#B7CEEC

Turquoise1

#52F3FF

Cyan

#00FFFF

Cyan1

#57FEFF

Cyan2

#50EBEC

Turquoise2

#4EE2EC

Medium Turquoise

#48CCCD

Turquoise

#43C6DB

Dark Slate Grey1

#9AFEFF

Dark Slate Grey2

#8EEBEC

Dark Slate Grey3

#78C7C7

Cyan3

#46C7C7

Turquoise3

#43BFC7

Cadet Blue3

#77BFC7

Pale Turquoise3

#92C7C7

Light Blue2

#AFDCEC

Dark Turquoise

#3B9C9C

Cyan4

#307D7E

Light Sea Green

#3EA99F

Light Sky Blue

#82CAFA

Light Sky Blue2

#A0CFEC

Light Sky Blue3

#87AFC7

Sky Blue

#82CAFF

Sky Blue2

#B0E2FF

Light Sky Blue4

#566D7E

Sky Blue

#6698FF

Light Slate Blue

#736AFF

Light Cyan2

#CFECEC

Light Cyan3

#AFC7C7

Light Cyan4

#717D7D

Light Blue3

#95B9C7

Light Blue4

#5E767E

Pale Turquoise4

#5E7D7E

Dark Sea Green4

#617C58

Medium Aquamarine

#348781

Medium Sea Green

#306754

Sea Green

#4E8975

Dark Green

#254117

Sea Green4

#387C44

Forest Green

#4E9258

Medium Forest Green

#347235

Spring Green4

#347C2C

Dark Olive Green4

#667C26

Chartreuse4

#437C17

Green4

#347C17

Medium Spring Green

#348017

Spring Green

#4AA02C

Lime Green

#41A317

Spring Green

#4AA02C

Dark Sea Green

#8BB381

Dark Sea Green3

#99C68E

Green3

#4CC417

Chartreuse3

#6CC417

Yellow Green

#52D017

Spring Green3

#4CC552

Sea Green3

#54C571

Spring Green2

#57E964

Spring Green1

#5EFB6E

Sea Green2

#64E986

Sea Green1

#6AFB92

Dark Sea Green2

#B5EAAA

Dark Sea Green1

#C3FDB8

Green

#00FF00

Lawn Green

#87F717

Green1

#5FFB17

Green2

#59E817

Chartreuse2

#7FE817

Chartreuse

#8AFB17

Green Yellow

#B1FB17

Dark Olive Green1

#CCFB5D

Dark Olive Green2

#BCE954

Dark Olive Green3

#A0C544

Yellow

#FFFF00

Yellow1

#FFFC17

Khaki1

#FFF380

Khaki2

#EDE275

Goldenrod

#EDDA74

Gold2

#EAC117

Gold1

#FDD017

Goldenrod1

#FBB917

Goldenrod2

#E9AB17

Gold

#D4A017

Gold3

#C7A317

Goldenrod3

#C68E17

Dark Goldenrod

#AF7817

Khaki

#ADA96E

Khaki3

#C9BE62

Khaki4

#827839

Dark Goldenrod1

#FBB117

Dark Goldenrod2

#E8A317

Dark Goldenrod3

#C58917

Sienna1

#F87431

Sienna2

#E66C2C

Dark Orange

#F88017

Dark Orange1

#F87217

Dark Orange2

#E56717

Dark Orange3

#C35617

Sienna3

#C35817

Sienna

#8A4117

Sienna4

#7E3517

Indian Red4

#7E2217

Dark Orange3

#7E3117

Salmon4

#7E3817

Dark Goldenrod4

#7F5217

Gold4

#806517

Goldenrod4

#805817

Light Salmon4

#7F462C

Chocolate

#C85A17

Coral3

#C34A2C

Coral2

#E55B3C

Coral

#F76541

Dark Salmon

#E18B6B

Salmon1

#F88158

Salmon2

#E67451

Salmon3

#C36241

Light Salmon3

#C47451

Light Salmon2

#E78A61

Light Salmon

#F9966B

Sandy Brown

#EE9A4D

Hot Pink

#F660AB

Hot Pink1

#F665AB

Hot Pink2

#E45E9D

Hot Pink3

#C25283

Hot Pink4

#7D2252

Light Coral

#E77471

Indian Red1

#F75D59

Indian Red2

#E55451

Indian Red3

#C24641

Red

#FF0000

Red1

#F62217

Red2

#E41B17

Firebrick1

#F62817

Firebrick2

#E42217

Firebrick3

#C11B17

Pink

#FAAFBE

Rosy Brown1

#FBBBB9

Rosy Brown2

#E8ADAA

Pink2

#E7A1B0

Light Pink

#FAAFBA

Light Pink1

#F9A7B0

Light Pink2

#E799A3

Pink3

#C48793

Rosy Brown3

#C5908E

Rosy Brown

#B38481

Light Pink3

#C48189

Rosy Brown4

#7F5A58

Light Pink4

#7F4E52

Pink4

#7F525D

Lavendar Blush4

#817679

Light Goldenrod4

#817339

Lemon Chiffon4

#827B60

Lemon Chiffon3

#C9C299

Light Goldenrod3

#C8B560

Light Golden2

#ECD672

Light Goldenrod

#ECD872

Light Goldenrod1

#FFE87C

Lemon Chiffon2

#ECE5B6

Lemon Chiffon

#FFF8C6

Light Goldenrod Yellow

#FAF8CC

Background Color

Background Color (Color de fondo)

Sintaxis:

background-color: <valor>

Valores posibles:

<color> | transparent

Valor inicial:

transparent

Se aplica a:

Todos los elementos

Heredado:

No

La propiedad background-color establece el color del fondo de un elemento. Por ejemplo:

BODY { background-color: white }

H1 { background-color: #000080 }

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre que use background-color debería especificarse background-image. En la mayoría de casos, background-image: none es adecuado.

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-color.

Background (Fondo)

Sintaxis:

background: <valor>

Valores posibles:

<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> 

Valor inicial:

No definido

Se aplica a:

Todos los elementos

Heredado:

No

La propiedad background es una forma rápida para las propiedades más específicas relacionadas con background. Algunos ejemplos de declaraciones de background:

BODY { background: white url(http://www.domain.com/foo.gif) }

BLOCKQUOTE { background: #7fffd4 }

P { background: url(../fondos/peon.png) #f0f8ff fixed }

TABLE { background: #0c0 url(hojas.jpg) no-repeat bottom right }

Un valor no especificado recibirá el valor inicial. Por ejemplo, en las tres primeras reglas de arriba, la propiedad background-position será establecida a 0% 0%.

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberían especificarse juntas las propiedades background y color.

Tabla de Colores

Aqui tenemos representada la tabla con los 256 colores para su uso mas frequente en el diseño de páginas web.

FF0000

FF0033

FF0066

FF0099

FF00CC

FF00FF

FF3300

FF3333

FF3366

FF3399

FF33CC

FF33FF

FF6600

FF6633

FF6666

FF6699

FF66CC

FF66FF

FF9900

FF9933

FF9966

FF9999

FF99CC

FF99FF

FFCC00

FFCC33

FFCC66

FFCC99

FFCCCC

FFCCFF

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF

CC0000

CC0033

CC0066

CC0099

CC00CC

CC00FF

CC3300

CC3333

CC3366

CC3399

CC33CC

CC33FF

CC6600

CC6633

CC6666

CC6699

CC66CC

CC66FF

CC9900

CC9933

CC9966

CC9999

CC99CC

CC99FF

CCCC00

CCCC33

CCCC66

CCCC99

CCCCCC

CCCCFF

CCFF00

CCFF33

CCFF66

CCFF99

CCFFCC

CCFFFF

990000

990033

990066

990099

9900CC

9900FF

993300

993333

993366

993399

9933CC

9933FF

996600

996633

996666

996699

9966CC

9966FF

999900

999933

999966

999999

9999CC

9999FF

99CC00

99CC33

99CC66

99CC99

99CCCC

99CCFF

99FF00

99FF33

99FF66

99FF99

99FFCC

99FFFF

660000

660033

660066

660099

6600CC

6600FF

663300

663333

663366

663399

6633CC

6633FF

666600

666633

666666

666699

6666CC

6666FF

669900

669933

669966

669999

6699CC

6699FF

66CC00

66CC33

66CC66

66CC99

66CCCC

66CCFF

66FF00

66FF33

66FF66

66FF99

66FFCC

66FFFF

330000

330033

330066

330099

3300CC

3300FF

333300

333333

333366

333399

3333CC

3333FF

336600

336633

336666

336699

3366CC

3366FF

339900

339933

339966

339999

3399CC

3399FF

33CC00

33CC33

33CC66

33CC99

33CCCC

33CCFF

33FF00

33FF33

33FF66

33FF99

33FFCC

33FFFF

000000

000033

000066

000099

0000CC

0000FF

003300

003333

003366

003399

0033CC

0033FF

006600

006633

006666

006699

0066CC

0066FF

009900

009933

009966

009999

0099CC

0099FF

00CC00

00CC33

00CC66

00CC99

00CCCC

00CCFF

00FF00

00FF33

00FF66

00FF99

00FFCC

00FFFF

Vídeos Gratis
www.Santos-Catolicos.com
¡DVDs, Artículos y Libros Gratis!
FREE DVDS & VIDEOS
WATCH & DOWNLOAD ALL THE DVDS & VIDEOS FOR FREE!