¿`Gray` y `Grey` ambos válidos?

Sí. Todas las palabras clave de color CSS aceptan ambas grafías — `Gray`, `LightGray`, `DarkGray`, `DimGray`, `SlateGray` también funcionan con `Grey`. La tabla muestra `Gray` por concisión.

¿Qué es `RebeccaPurple`?

Añadido en CSS Color Module Level 4 en 2014, en memoria de Rebecca, la hija de Eric Meyer. Es el único nombre introducido tras el set X11 original.

¿Qué colores nombrados son idénticos?

`Aqua` y `Cyan` son ambos `#00FFFF`; `Magenta` y `Fuchsia` son ambos `#FF00FF`. Vienen de la fusión de los 16 colores nombrados de HTML 4 con el set X11.

¿Conviene construir un sistema de diseño sobre colores con nombre?

Como literales en una página rápida o una demo van bien, pero son una paleta arbitraria heredada de X11 y sin ninguna escala coherente detrás de los nombres: DarkGray (#A9A9A9) es más claro que Gray (#808080), por ejemplo. Todo lo que necesite pasos regulares, temas o una variante oscura debería definir sus propios tokens en lugar de tomar prestadas palabras clave.

¿Funcionan estos nombres fuera de CSS?

Casi siempre. La misma lista de X11 aparece en SVG, en muchas bibliotecas de gráficos y dibujo y en algunos editores, pero no en todas partes ni siempre con los mismos valores: hay entornos que definen solo una parte. Cuando el color exacto importa entre herramientas, convierte la palabra clave a hexadecimal y pasa ese valor.

Colores Nombrados de CSS

Explora cada palabra clave de color CSS (`Tomato`, `LightSlateGray`, `RebeccaPurple`, …) con una muestra visual, el código HEX y la notación `rgb()` equivalente. Filtra por familia de matiz o busca por nombre y HEX. Pulsa el botón de copia para obtener el HEX.

—

#CD5C5C

IndianRed

rgb(205, 92, 92)

#F08080

LightCoral

rgb(240, 128, 128)

#FA8072

Salmon

rgb(250, 128, 114)

#E9967A

DarkSalmon

rgb(233, 150, 122)

#FFA07A

LightSalmon

rgb(255, 160, 122)

#DC143C

Crimson

rgb(220, 20, 60)

#FF0000

Red

rgb(255, 0, 0)

#B22222

FireBrick

rgb(178, 34, 34)

#8B0000

DarkRed

rgb(139, 0, 0)

#FFC0CB

Pink

rgb(255, 192, 203)

#FFB6C1

LightPink

rgb(255, 182, 193)

#FF69B4

HotPink

rgb(255, 105, 180)

#FF1493

DeepPink

rgb(255, 20, 147)

#C71585

MediumVioletRed

rgb(199, 21, 133)

#DB7093

PaleVioletRed

rgb(219, 112, 147)

#FF7F50

Coral

rgb(255, 127, 80)

#FF6347

Tomato

rgb(255, 99, 71)

#FF4500

OrangeRed

rgb(255, 69, 0)

#FF8C00

DarkOrange

rgb(255, 140, 0)

#FFA500

Orange

rgb(255, 165, 0)

#FFD700

Gold

rgb(255, 215, 0)

#FFFF00

Yellow

rgb(255, 255, 0)

#FFFFE0

LightYellow

rgb(255, 255, 224)

#FFFACD

LemonChiffon

rgb(255, 250, 205)

#FAFAD2

LightGoldenrodYellow

rgb(250, 250, 210)

#FFEFD5

PapayaWhip

rgb(255, 239, 213)

#FFE4B5

Moccasin

rgb(255, 228, 181)

#FFDAB9

PeachPuff

rgb(255, 218, 185)

#EEE8AA

PaleGoldenrod

rgb(238, 232, 170)

#F0E68C

Khaki

rgb(240, 230, 140)

#BDB76B

DarkKhaki

rgb(189, 183, 107)

#ADFF2F

GreenYellow

rgb(173, 255, 47)

#7FFF00

Chartreuse

rgb(127, 255, 0)

#7CFC00

LawnGreen

rgb(124, 252, 0)

#00FF00

Lime

rgb(0, 255, 0)

#32CD32

LimeGreen

rgb(50, 205, 50)

#98FB98

PaleGreen

rgb(152, 251, 152)

#90EE90

LightGreen

rgb(144, 238, 144)

#00FA9A

MediumSpringGreen

rgb(0, 250, 154)

#00FF7F

SpringGreen

rgb(0, 255, 127)

#3CB371

MediumSeaGreen

rgb(60, 179, 113)

#2E8B57

SeaGreen

rgb(46, 139, 87)

#228B22

ForestGreen

rgb(34, 139, 34)

#008000

Green

rgb(0, 128, 0)

#006400

DarkGreen

rgb(0, 100, 0)

#9ACD32

YellowGreen

rgb(154, 205, 50)

#6B8E23

OliveDrab

rgb(107, 142, 35)

#808000

Olive

rgb(128, 128, 0)

#556B2F

DarkOliveGreen

rgb(85, 107, 47)

#66CDAA

MediumAquaMarine

rgb(102, 205, 170)

#8FBC8F

DarkSeaGreen

rgb(143, 188, 143)

#20B2AA

LightSeaGreen

rgb(32, 178, 170)

#008B8B

DarkCyan

rgb(0, 139, 139)

#008080

Teal

rgb(0, 128, 128)

#00FFFF

Aqua

rgb(0, 255, 255)

#00FFFF

Cyan

rgb(0, 255, 255)

#E0FFFF

LightCyan

rgb(224, 255, 255)

#AFEEEE

PaleTurquoise

rgb(175, 238, 238)

#7FFFD4

Aquamarine

rgb(127, 255, 212)

#40E0D0

Turquoise

rgb(64, 224, 208)

#48D1CC

MediumTurquoise

rgb(72, 209, 204)

#00CED1

DarkTurquoise

rgb(0, 206, 209)

#5F9EA0

CadetBlue

rgb(95, 158, 160)

#4682B4

SteelBlue

rgb(70, 130, 180)

#B0C4DE

LightSteelBlue

rgb(176, 196, 222)

#B0E0E6

PowderBlue

rgb(176, 224, 230)

#ADD8E6

LightBlue

rgb(173, 216, 230)

#87CEEB

SkyBlue

rgb(135, 206, 235)

#87CEFA

LightSkyBlue

rgb(135, 206, 250)

#00BFFF

DeepSkyBlue

rgb(0, 191, 255)

#1E90FF

DodgerBlue

rgb(30, 144, 255)

#6495ED

CornflowerBlue

rgb(100, 149, 237)

#7B68EE

MediumSlateBlue

rgb(123, 104, 238)

#4169E1

RoyalBlue

rgb(65, 105, 225)

#0000FF

Blue

rgb(0, 0, 255)

#0000CD

MediumBlue

rgb(0, 0, 205)

#00008B

DarkBlue

rgb(0, 0, 139)

#000080

Navy

rgb(0, 0, 128)

#191970

MidnightBlue

rgb(25, 25, 112)

#E6E6FA

Lavender

rgb(230, 230, 250)

#D8BFD8

Thistle

rgb(216, 191, 216)

#DDA0DD

Plum

rgb(221, 160, 221)

#EE82EE

Violet

rgb(238, 130, 238)

#DA70D6

Orchid

rgb(218, 112, 214)

#FF00FF

Fuchsia

rgb(255, 0, 255)

#FF00FF

Magenta

rgb(255, 0, 255)

#BA55D3

MediumOrchid

rgb(186, 85, 211)

#9370DB

MediumPurple

rgb(147, 112, 219)

#663399

RebeccaPurple

rgb(102, 51, 153)

#8A2BE2

BlueViolet

rgb(138, 43, 226)

#9400D3

DarkViolet

rgb(148, 0, 211)

#9932CC

DarkOrchid

rgb(153, 50, 204)

#8B008B

DarkMagenta

rgb(139, 0, 139)

#800080

Purple

rgb(128, 0, 128)

#4B0082

Indigo

rgb(75, 0, 130)

#6A5ACD

SlateBlue

rgb(106, 90, 205)

#483D8B

DarkSlateBlue

rgb(72, 61, 139)

#FFF8DC

Cornsilk

rgb(255, 248, 220)

#FFEBCD

BlanchedAlmond

rgb(255, 235, 205)

#FFE4C4

Bisque

rgb(255, 228, 196)

#FFDEAD

NavajoWhite

rgb(255, 222, 173)

#F5DEB3

Wheat

rgb(245, 222, 179)

#DEB887

BurlyWood

rgb(222, 184, 135)

#D2B48C

Tan

rgb(210, 180, 140)

#BC8F8F

RosyBrown

rgb(188, 143, 143)

#F4A460

SandyBrown

rgb(244, 164, 96)

#DAA520

Goldenrod

rgb(218, 165, 32)

#B8860B

DarkGoldenrod

rgb(184, 134, 11)

#CD853F

Peru

rgb(205, 133, 63)

#D2691E

Chocolate

rgb(210, 105, 30)

#8B4513

SaddleBrown

rgb(139, 69, 19)

#A0522D

Sienna

rgb(160, 82, 45)

#A52A2A

Brown

rgb(165, 42, 42)

#800000

Maroon

rgb(128, 0, 0)

#FFFFFF

White

rgb(255, 255, 255)

#FFFAFA

Snow

rgb(255, 250, 250)

#F0FFF0

HoneyDew

rgb(240, 255, 240)

#F5FFFA

MintCream

rgb(245, 255, 250)

#F0FFFF

Azure

rgb(240, 255, 255)

#F0F8FF

AliceBlue

rgb(240, 248, 255)

#F8F8FF

GhostWhite

rgb(248, 248, 255)

#F5F5F5

WhiteSmoke

rgb(245, 245, 245)

#FFF5EE

SeaShell

rgb(255, 245, 238)

#F5F5DC

Beige

rgb(245, 245, 220)

#FDF5E6

OldLace

rgb(253, 245, 230)

#FFFAF0

FloralWhite

rgb(255, 250, 240)

#FFFFF0

Ivory

rgb(255, 255, 240)

#FAEBD7

AntiqueWhite

rgb(250, 235, 215)

#FAF0E6

Linen

rgb(250, 240, 230)

#FFF0F5

LavenderBlush

rgb(255, 240, 245)

#FFE4E1

MistyRose

rgb(255, 228, 225)

#DCDCDC

Gainsboro

rgb(220, 220, 220)

#D3D3D3

LightGray

rgb(211, 211, 211)

#C0C0C0

Silver

rgb(192, 192, 192)

#A9A9A9

DarkGray

rgb(169, 169, 169)

#808080

Gray

rgb(128, 128, 128)

#696969

DimGray

rgb(105, 105, 105)

#778899

LightSlateGray

rgb(119, 136, 153)

#708090

SlateGray

rgb(112, 128, 144)

#2F4F4F

DarkSlateGray

rgb(47, 79, 79)

#000000

Black

rgb(0, 0, 0)

Cómo usar

Escribe un nombre (`tomato`) o un HEX (`#ff6347`) en la búsqueda.
Usa los chips de matiz para acotar — p.ej. solo azules al elegir colores de acento.
Pulsa el botón de copia de cualquier color para poner su HEX en el portapapeles.

Preguntas frecuentes

¿`Gray` y `Grey` ambos válidos?: Sí. Todas las palabras clave de color CSS aceptan ambas grafías — `Gray`, `LightGray`, `DarkGray`, `DimGray`, `SlateGray` también funcionan con `Grey`. La tabla muestra `Gray` por concisión.
¿Qué es `RebeccaPurple`?: Añadido en CSS Color Module Level 4 en 2014, en memoria de Rebecca, la hija de Eric Meyer. Es el único nombre introducido tras el set X11 original.
¿Qué colores nombrados son idénticos?: `Aqua` y `Cyan` son ambos `#00FFFF`; `Magenta` y `Fuchsia` son ambos `#FF00FF`. Vienen de la fusión de los 16 colores nombrados de HTML 4 con el set X11.
¿Conviene construir un sistema de diseño sobre colores con nombre?: Como literales en una página rápida o una demo van bien, pero son una paleta arbitraria heredada de X11 y sin ninguna escala coherente detrás de los nombres: DarkGray (#A9A9A9) es más claro que Gray (#808080), por ejemplo. Todo lo que necesite pasos regulares, temas o una variante oscura debería definir sus propios tokens en lugar de tomar prestadas palabras clave.
¿Funcionan estos nombres fuera de CSS?: Casi siempre. La misma lista de X11 aparece en SVG, en muchas bibliotecas de gráficos y dibujo y en algunos editores, pero no en todas partes ni siempre con los mismos valores: hay entornos que definen solo una parte. Cuando el color exacto importa entre herramientas, convierte la palabra clave a hexadecimal y pasa ese valor.

Herramientas relacionadas

Paleta de Colores Tailwind

La paleta por defecto completa de Tailwind CSS — 22 matices × 11 sombras, 50 a 950 — click para copiar como clase Tailwind, HEX o rgb().

Color 0 0

Ordenar Colores

Pega una lista de colores hex y ordénalos por tono, saturación, claridad o brillo percibido — útil pra organizar una paleta de tokens de diseño.

Color 0 0

Conversor de longitud de onda a color (nm → sRGB)

Convierte una longitud de onda en nanómetros (380–780 nm — el espectro visible) a un color sRGB aproximado, con una barra de gradiente arcoíris clicable y líneas de absorción de Fraunhofer del espectro solar real como referencia.

Color 0 0

Exportador de Tokens de Color

Define una paleta de colores una vez, exporta a CSS custom properties, configuración Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color o `colors.xml` de Android. Vista previa de swatches en vivo.

Color 0 0

Buscador de nombre de color

Encuentra el nombre de color CSS, Tailwind o XKCD más cercano a cualquier hex/RGB — ordenado por distancia perceptual en el espacio OKLab.

Color 0 0

Conversor de Formatos de Color

Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.

Color 0 0