Saltar al contenido

Nombres de colores HTML y CSS

Todos los colores con nombre que entiende cualquier navegador, como tomato o rebeccapurple, con su código HEX, RGB, HSL y OKLCH listos para copiar.

Copiar como

Los 148 colores con nombre de CSS y HTML

Funcionan en cualquier navegador escribiendo su nombre, por ejemplo color: tomato;. No distinguen mayúsculas de minúsculas.

Rojos10

Ver detalles

  • IndianRed

    #CD5C5C

  • LightCoral

    #F08080

  • Salmon

    #FA8072

  • DarkSalmon

    #E9967A

  • LightSalmon

    #FFA07A

  • Crimson

    #DC143C

  • Red

    #FF0000

  • FireBrick

    #B22222

  • DarkRed

    #8B0000

  • Maroon

    #800000

Naranjas5

Ver detalles

  • Coral

    #FF7F50

  • Tomato

    #FF6347

  • OrangeRed

    #FF4500

  • DarkOrange

    #FF8C00

  • Orange

    #FFA500

Amarillos11

Ver detalles

  • Gold

    #FFD700

  • Yellow

    #FFFF00

  • LightYellow

    #FFFFE0

  • LemonChiffon

    #FFFACD

  • LightGoldenrodYellow

    #FAFAD2

  • PapayaWhip

    #FFEFD5

  • Moccasin

    #FFE4B5

  • PeachPuff

    #FFDAB9

  • PaleGoldenrod

    #EEE8AA

  • Khaki

    #F0E68C

  • DarkKhaki

    #BDB76B

Verdes23

Ver detalles

  • GreenYellow

    #ADFF2F

  • Chartreuse

    #7FFF00

  • LawnGreen

    #7CFC00

  • Lime

    #00FF00

  • LimeGreen

    #32CD32

  • PaleGreen

    #98FB98

  • LightGreen

    #90EE90

  • MediumSpringGreen

    #00FA9A

  • SpringGreen

    #00FF7F

  • MediumSeaGreen

    #3CB371

  • SeaGreen

    #2E8B57

  • ForestGreen

    #228B22

  • Green

    #008000

  • DarkGreen

    #006400

  • YellowGreen

    #9ACD32

  • OliveDrab

    #6B8E23

  • Olive

    #808000

  • DarkOliveGreen

    #556B2F

  • MediumAquamarine

    #66CDAA

  • DarkSeaGreen

    #8FBC8F

  • LightSeaGreen

    #20B2AA

  • DarkCyan

    #008B8B

  • Teal

    #008080

Cianes8

Ver detalles

  • Aqua

    #00FFFF

  • Cyan

    #00FFFF

  • LightCyan

    #E0FFFF

  • PaleTurquoise

    #AFEEEE

  • Aquamarine

    #7FFFD4

  • Turquoise

    #40E0D0

  • MediumTurquoise

    #48D1CC

  • DarkTurquoise

    #00CED1

Azules17

Ver detalles

  • CadetBlue

    #5F9EA0

  • SteelBlue

    #4682B4

  • LightSteelBlue

    #B0C4DE

  • PowderBlue

    #B0E0E6

  • LightBlue

    #ADD8E6

  • SkyBlue

    #87CEEB

  • LightSkyBlue

    #87CEFA

  • DeepSkyBlue

    #00BFFF

  • DodgerBlue

    #1E90FF

  • CornflowerBlue

    #6495ED

  • MediumSlateBlue

    #7B68EE

  • RoyalBlue

    #4169E1

  • Blue

    #0000FF

  • MediumBlue

    #0000CD

  • DarkBlue

    #00008B

  • Navy

    #000080

  • MidnightBlue

    #191970

Morados18

Ver detalles

  • Lavender

    #E6E6FA

  • Thistle

    #D8BFD8

  • Plum

    #DDA0DD

  • Violet

    #EE82EE

  • Orchid

    #DA70D6

  • Fuchsia

    #FF00FF

  • Magenta

    #FF00FF

  • MediumOrchid

    #BA55D3

  • MediumPurple

    #9370DB

  • RebeccaPurple

    #663399

  • BlueViolet

    #8A2BE2

  • DarkViolet

    #9400D3

  • DarkOrchid

    #9932CC

  • DarkMagenta

    #8B008B

  • Purple

    #800080

  • Indigo

    #4B0082

  • SlateBlue

    #6A5ACD

  • DarkSlateBlue

    #483D8B

Rosados6

Ver detalles

  • Pink

    #FFC0CB

  • LightPink

    #FFB6C1

  • HotPink

    #FF69B4

  • DeepPink

    #FF1493

  • MediumVioletRed

    #C71585

  • PaleVioletRed

    #DB7093

Marrones16

Ver detalles

  • Cornsilk

    #FFF8DC

  • BlanchedAlmond

    #FFEBCD

  • Bisque

    #FFE4C4

  • NavajoWhite

    #FFDEAD

  • Wheat

    #F5DEB3

  • BurlyWood

    #DEB887

  • Tan

    #D2B48C

  • RosyBrown

    #BC8F8F

  • SandyBrown

    #F4A460

  • Goldenrod

    #DAA520

  • DarkGoldenrod

    #B8860B

  • Peru

    #CD853F

  • Chocolate

    #D2691E

  • SaddleBrown

    #8B4513

  • Sienna

    #A0522D

  • Brown

    #A52A2A

Blancos17

Ver detalles

  • White

    #FFFFFF

  • Snow

    #FFFAFA

  • HoneyDew

    #F0FFF0

  • MintCream

    #F5FFFA

  • Azure

    #F0FFFF

  • AliceBlue

    #F0F8FF

  • GhostWhite

    #F8F8FF

  • WhiteSmoke

    #F5F5F5

  • Seashell

    #FFF5EE

  • Beige

    #F5F5DC

  • OldLace

    #FDF5E6

  • FloralWhite

    #FFFAF0

  • Ivory

    #FFFFF0

  • AntiqueWhite

    #FAEBD7

  • Linen

    #FAF0E6

  • LavenderBlush

    #FFF0F5

  • MistyRose

    #FFE4E1

Grises17

Ver detalles

  • Gainsboro

    #DCDCDC

  • LightGray

    #D3D3D3

  • LightGrey

    #D3D3D3

  • Silver

    #C0C0C0

  • DarkGray

    #A9A9A9

  • DarkGrey

    #A9A9A9

  • Gray

    #808080

  • Grey

    #808080

  • DimGray

    #696969

  • DimGrey

    #696969

  • LightSlateGray

    #778899

  • LightSlateGrey

    #778899

  • SlateGray

    #708090

  • SlateGrey

    #708090

  • DarkSlateGray

    #2F4F4F

  • DarkSlateGrey

    #2F4F4F

  • Black

    #000000

Qué son los nombres de colores CSS

CSS reconoce 148 nombres de color, como tomato, cornflowerblue o rebeccapurple. Cada uno equivale a un código HEX fijo y funciona igual en todos los navegadores, sin definir nada más.

Son cómodos para prototipos, ejemplos y colores puntuales porque se leen mejor que un código. Para un sistema de diseño con tonos exactos y consistentes, sigue siendo mejor trabajar con HEX, RGB u OKLCH.

Curiosidades de los nombres de colores CSS

Detrás de la lista hay algo de historia y algunas rarezas que conviene conocer.

  • Empezaron siendo 16

    HTML 4 solo definía 16 nombres, como navy, teal u olive. El resto llegó después, heredado de los colores del sistema gráfico X11.

  • 148 nombres, 139 colores

    Hay nueve parejas que son el mismo color: gray y grey (y sus variantes), aqua y cyan, y fuchsia y magenta.

  • darkgray es más claro que gray

    Por esa herencia de X11, darkgray (#A9A9A9) resulta más claro que gray (#808080). Si buscas un gris oscuro, usa dimgray.

  • rebeccapurple tiene historia

    Se añadió en 2014 en recuerdo de Rebecca Meyer, hija de Eric Meyer, uno de los referentes de CSS. Es el único nombre que se ha incorporado en los últimos años.

  • No distinguen mayúsculas

    tomato, Tomato y TOMATO son el mismo color. Por convención se escriben en minúsculas.

  • transparent y currentColor

    No forman parte de la lista, pero también son palabras clave de color: transparent es totalmente transparente y currentColor usa el color del texto del elemento.

Preguntas frecuentes

148 nombres, que corresponden a 139 colores distintos porque hay nueve parejas de alias (como gray y grey). Van desde los básicos como red o blue hasta otros como mediumseagreen o rebeccapurple.

Sí, puedes escribirlos tal cual en cualquier propiedad de color, por ejemplo color: tomato;, sin convertirlos antes a HEX o RGB.

Sí. CSS acepta las dos grafías para todos los grises (gray/grey, darkgray/darkgrey…) y dan exactamente el mismo color.

Porque los nombres vienen de fuentes distintas: gray (#808080) es de la lista original de HTML y darkgray (#A9A9A9) se heredó de los colores de X11, donde «gray» era más claro. Para un gris oscuro usa dimgray (#696969).

Es el color #663399, añadido a CSS en 2014 en memoria de Rebecca Meyer, hija de Eric Meyer, uno de los referentes de la comunidad CSS.

No. Tomato, tomato y TOMATO funcionan igual, aunque lo habitual es escribirlos en minúsculas.

Sí, forman parte del estándar CSS y los admiten todos los navegadores actuales.

Más herramientas