#ff0000
Red
red
rgb(255, 0, 0)
hsl(0, 100%, 50%)
Referencia de Colores con Nombre de CSS
Busca, filtra y copia los 148 colores con nombre de CSS con sus valores HEX, RGB y HSL. Filtra por 12 familias de color: rojo, naranja, amarillo, verde, cian, azul, morado, rosa, marrón, blanco, gris y negro. Haz clic en cualquier botón de copiar para copiar al instante el nombre del color, su valor HEX o RGB. Totalmente privado, 100% gratis y sin registro.
CSS Named Colors Reference
Search, filter, and copy all 146 CSS named colors. Click any copy button to copy the color name, HEX, or RGB value to your clipboard instantly.
Showing 146 of 146 CSS named colors
CSS Color Level 4
#8b0000
Dark Red
darkred
rgb(139, 0, 0)
hsl(0, 100%, 27%)
#b22222
Firebrick
firebrick
rgb(178, 34, 34)
hsl(0, 68%, 42%)
#dc143c
Crimson
crimson
rgb(220, 20, 60)
hsl(348, 83%, 47%)
#cd5c5c
Indian Red
indianred
rgb(205, 92, 92)
hsl(0, 53%, 58%)
#f08080
Light Coral
lightcoral
rgb(240, 128, 128)
hsl(0, 79%, 72%)
#fa8072
Salmon
salmon
rgb(250, 128, 114)
hsl(6, 93%, 71%)
#e9967a
Dark Salmon
darksalmon
rgb(233, 150, 122)
hsl(15, 72%, 70%)
#ffa07a
Light Salmon
lightsalmon
rgb(255, 160, 122)
hsl(17, 100%, 74%)
#ff6347
Tomato
tomato
rgb(255, 99, 71)
hsl(9, 100%, 64%)
#ff4500
Orange Red
orangered
rgb(255, 69, 0)
hsl(16, 100%, 50%)
#ffa500
Orange
orange
rgb(255, 165, 0)
hsl(39, 100%, 50%)
#ff8c00
Dark Orange
darkorange
rgb(255, 140, 0)
hsl(33, 100%, 50%)
#ff7f50
Coral
coral
rgb(255, 127, 80)
hsl(16, 100%, 66%)
#ffff00
Yellow
yellow
rgb(255, 255, 0)
hsl(60, 100%, 50%)
#ffd700
Gold
gold
rgb(255, 215, 0)
hsl(51, 100%, 50%)
#ffffe0
Light Yellow
lightyellow
rgb(255, 255, 224)
hsl(60, 100%, 94%)
#fffacd
Lemon Chiffon
lemonchiffon
rgb(255, 250, 205)
hsl(54, 100%, 90%)
#fafad2
Light Goldenrod Yellow
lightgoldenrodyellow
rgb(250, 250, 210)
hsl(60, 80%, 90%)
#ffefd5
Papaya Whip
papayawhip
rgb(255, 239, 213)
hsl(37, 100%, 92%)
#ffe4b5
Moccasin
moccasin
rgb(255, 228, 181)
hsl(38, 100%, 85%)
#ffdab9
Peach Puff
peachpuff
rgb(255, 218, 185)
hsl(28, 100%, 86%)
#eee8aa
Pale Goldenrod
palegoldenrod
rgb(238, 232, 170)
hsl(55, 67%, 80%)
#f0e68c
Khaki
khaki
rgb(240, 230, 140)
hsl(54, 77%, 75%)
#bdb76b
Dark Khaki
darkkhaki
rgb(189, 183, 107)
hsl(56, 38%, 58%)
#008000
Green
green
rgb(0, 128, 0)
hsl(120, 100%, 25%)
#006400
Dark Green
darkgreen
rgb(0, 100, 0)
hsl(120, 100%, 20%)
#00ff00
Lime
lime
rgb(0, 255, 0)
hsl(120, 100%, 50%)
#32cd32
Lime Green
limegreen
rgb(50, 205, 50)
hsl(120, 61%, 50%)
#228b22
Forest Green
forestgreen
rgb(34, 139, 34)
hsl(120, 61%, 34%)
#2e8b57
Sea Green
seagreen
rgb(46, 139, 87)
hsl(146, 50%, 36%)
#8fbc8f
Dark Sea Green
darkseagreen
rgb(143, 188, 143)
hsl(120, 25%, 65%)
#3cb371
Medium Sea Green
mediumseagreen
rgb(60, 179, 113)
hsl(147, 50%, 47%)
#20b2aa
Light Sea Green
lightseagreen
rgb(32, 178, 170)
hsl(177, 70%, 41%)
#00ff7f
Spring Green
springgreen
rgb(0, 255, 127)
hsl(150, 100%, 50%)
#00fa9a
Medium Spring Green
mediumspringgreen
rgb(0, 250, 154)
hsl(157, 100%, 49%)
#adff2f
Green Yellow
greenyellow
rgb(173, 255, 47)
hsl(84, 100%, 59%)
#7fff00
Chartreuse
chartreuse
rgb(127, 255, 0)
hsl(90, 100%, 50%)
#7cfc00
Lawn Green
lawngreen
rgb(124, 252, 0)
hsl(90, 100%, 49%)
#9acd32
Yellow Green
yellowgreen
rgb(154, 205, 50)
hsl(80, 61%, 50%)
#6b8e23
Olive Drab
olivedrab
rgb(107, 142, 35)
hsl(80, 60%, 35%)
#808000
Olive
olive
rgb(128, 128, 0)
hsl(60, 100%, 25%)
#556b2f
Dark Olive Green
darkolivegreen
rgb(85, 107, 47)
hsl(82, 39%, 30%)
#98fb98
Pale Green
palegreen
rgb(152, 251, 152)
hsl(120, 93%, 79%)
#90ee90
Light Green
lightgreen
rgb(144, 238, 144)
hsl(120, 73%, 75%)
#66cdaa
Medium Aquamarine
mediumaquamarine
rgb(102, 205, 170)
hsl(160, 51%, 60%)
#00ffff
Cyan
cyan
rgb(0, 255, 255)
hsl(180, 100%, 50%)
#00ffff
Aqua
aqua
rgb(0, 255, 255)
hsl(180, 100%, 50%)
#008b8b
Dark Cyan
darkcyan
rgb(0, 139, 139)
hsl(180, 100%, 27%)
#008080
Teal
teal
rgb(0, 128, 128)
hsl(180, 100%, 25%)
#7fffd4
Aquamarine
aquamarine
rgb(127, 255, 212)
hsl(160, 100%, 75%)
#40e0d0
Turquoise
turquoise
rgb(64, 224, 208)
hsl(174, 72%, 56%)
#48d1cc
Medium Turquoise
mediumturquoise
rgb(72, 209, 204)
hsl(178, 60%, 55%)
#00ced1
Dark Turquoise
darkturquoise
rgb(0, 206, 209)
hsl(181, 100%, 41%)
#e0ffff
Light Cyan
lightcyan
rgb(224, 255, 255)
hsl(180, 100%, 94%)
#afeeee
Pale Turquoise
paleturquoise
rgb(175, 238, 238)
hsl(180, 65%, 81%)
#b0e0e6
Powder Blue
powderblue
rgb(176, 224, 230)
hsl(187, 52%, 80%)
#add8e6
Light Blue
lightblue
rgb(173, 216, 230)
hsl(195, 53%, 79%)
#0000ff
Blue
blue
rgb(0, 0, 255)
hsl(240, 100%, 50%)
#00008b
Dark Blue
darkblue
rgb(0, 0, 139)
hsl(240, 100%, 27%)
#000080
Navy
navy
rgb(0, 0, 128)
hsl(240, 100%, 25%)
#0000cd
Medium Blue
mediumblue
rgb(0, 0, 205)
hsl(240, 100%, 40%)
#4169e1
Royal Blue
royalblue
rgb(65, 105, 225)
hsl(225, 73%, 57%)
#6495ed
Cornflower Blue
cornflowerblue
rgb(100, 149, 237)
hsl(219, 79%, 66%)
#1e90ff
Dodger Blue
dodgerblue
rgb(30, 144, 255)
hsl(210, 100%, 56%)
#00bfff
Deep Sky Blue
deepskyblue
rgb(0, 191, 255)
hsl(195, 100%, 50%)
#87ceeb
Sky Blue
skyblue
rgb(135, 206, 235)
hsl(197, 71%, 73%)
#87cefa
Light Sky Blue
lightskyblue
rgb(135, 206, 250)
hsl(203, 92%, 75%)
#4682b4
Steel Blue
steelblue
rgb(70, 130, 180)
hsl(207, 44%, 49%)
#b0c4de
Light Steel Blue
lightsteelblue
rgb(176, 196, 222)
hsl(214, 41%, 78%)
#5f9ea0
Cadet Blue
cadetblue
rgb(95, 158, 160)
hsl(182, 25%, 50%)
#191970
Midnight Blue
midnightblue
rgb(25, 25, 112)
hsl(240, 64%, 27%)
#f0f8ff
Alice Blue
aliceblue
rgb(240, 248, 255)
hsl(208, 100%, 97%)
#e6e6fa
Lavender
lavender
rgb(230, 230, 250)
hsl(240, 67%, 94%)
#f8f8ff
Ghost White
ghostwhite
rgb(248, 248, 255)
hsl(240, 100%, 99%)
#f0ffff
Azure
azure
rgb(240, 255, 255)
hsl(180, 100%, 97%)
#800080
Purple
purple
rgb(128, 0, 128)
hsl(300, 100%, 25%)
#9400d3
Dark Violet
darkviolet
rgb(148, 0, 211)
hsl(282, 100%, 41%)
#9932cc
Dark Orchid
darkorchid
rgb(153, 50, 204)
hsl(280, 61%, 50%)
#8b008b
Dark Magenta
darkmagenta
rgb(139, 0, 139)
hsl(300, 100%, 27%)
#8a2be2
Blue Violet
blueviolet
rgb(138, 43, 226)
hsl(271, 76%, 53%)
#4b0082
Indigo
indigo
rgb(75, 0, 130)
hsl(275, 100%, 25%)
#6a5acd
Slate Blue
slateblue
rgb(106, 90, 205)
hsl(248, 53%, 58%)
#7b68ee
Medium Slate Blue
mediumslateblue
rgb(123, 104, 238)
hsl(249, 80%, 67%)
#483d8b
Dark Slate Blue
darkslateblue
rgb(72, 61, 139)
hsl(248, 39%, 39%)
#9370db
Medium Purple
mediumpurple
rgb(147, 112, 219)
hsl(260, 60%, 65%)
#663399
Rebecca Purple
rebeccapurple
rgb(102, 51, 153)
hsl(270, 50%, 40%)
#ee82ee
Violet
violet
rgb(238, 130, 238)
hsl(300, 76%, 72%)
#da70d6
Orchid
orchid
rgb(218, 112, 214)
hsl(302, 59%, 65%)
#ba55d3
Medium Orchid
mediumorchid
rgb(186, 85, 211)
hsl(288, 59%, 58%)
#dda0dd
Plum
plum
rgb(221, 160, 221)
hsl(300, 47%, 75%)
#d8bfd8
Thistle
thistle
rgb(216, 191, 216)
hsl(300, 24%, 80%)
#fff0f5
Lavender Blush
lavenderblush
rgb(255, 240, 245)
hsl(340, 100%, 97%)
#ff00ff
Magenta
magenta
rgb(255, 0, 255)
hsl(300, 100%, 50%)
#ff00ff
Fuchsia
fuchsia
rgb(255, 0, 255)
hsl(300, 100%, 50%)
#ff1493
Deep Pink
deeppink
rgb(255, 20, 147)
hsl(328, 100%, 54%)
#ff69b4
Hot Pink
hotpink
rgb(255, 105, 180)
hsl(330, 100%, 71%)
#ffc0cb
Pink
pink
rgb(255, 192, 203)
hsl(350, 100%, 88%)
#ffb6c1
Light Pink
lightpink
rgb(255, 182, 193)
hsl(351, 100%, 86%)
#db7093
Pale Violet Red
palevioletred
rgb(219, 112, 147)
hsl(340, 60%, 65%)
#c71585
Medium Violet Red
mediumvioletred
rgb(199, 21, 133)
hsl(322, 81%, 43%)
#ffe4e1
Misty Rose
mistyrose
rgb(255, 228, 225)
hsl(6, 100%, 94%)
#a52a2a
Brown
brown
rgb(165, 42, 42)
hsl(0, 59%, 41%)
#8b4513
Saddle Brown
saddlebrown
rgb(139, 69, 19)
hsl(25, 76%, 31%)
#a0522d
Sienna
sienna
rgb(160, 82, 45)
hsl(19, 56%, 40%)
#d2691e
Chocolate
chocolate
rgb(210, 105, 30)
hsl(25, 75%, 47%)
#cd853f
Peru
peru
rgb(205, 133, 63)
hsl(30, 59%, 53%)
#f4a460
Sandy Brown
sandybrown
rgb(244, 164, 96)
hsl(28, 87%, 67%)
#deb887
Burlywood
burlywood
rgb(222, 184, 135)
hsl(34, 57%, 70%)
#d2b48c
Tan
tan
rgb(210, 180, 140)
hsl(34, 44%, 69%)
#bc8f8f
Rosy Brown
rosybrown
rgb(188, 143, 143)
hsl(0, 25%, 65%)
#800000
Maroon
maroon
rgb(128, 0, 0)
hsl(0, 100%, 25%)
#f5deb3
Wheat
wheat
rgb(245, 222, 179)
hsl(39, 77%, 83%)
#ffdead
Navajo White
navajowhite
rgb(255, 222, 173)
hsl(36, 100%, 84%)
#ffe4c4
Bisque
bisque
rgb(255, 228, 196)
hsl(33, 100%, 88%)
#ffebcd
Blanched Almond
blanchedalmond
rgb(255, 235, 205)
hsl(36, 100%, 90%)
#fff8dc
Cornsilk
cornsilk
rgb(255, 248, 220)
hsl(48, 100%, 93%)
#fdf5e6
Old Lace
oldlace
rgb(253, 245, 230)
hsl(39, 85%, 95%)
#faf0e6
Linen
linen
rgb(250, 240, 230)
hsl(30, 67%, 94%)
#faebd7
Antique White
antiquewhite
rgb(250, 235, 215)
hsl(34, 78%, 91%)
#ffffff
White
white
rgb(255, 255, 255)
hsl(0, 0%, 100%)
#fffafa
Snow
snow
rgb(255, 250, 250)
hsl(0, 100%, 99%)
#f0fff0
Honeydew
honeydew
rgb(240, 255, 240)
hsl(120, 100%, 97%)
#f5fffa
Mint Cream
mintcream
rgb(245, 255, 250)
hsl(150, 100%, 98%)
#fffff0
Ivory
ivory
rgb(255, 255, 240)
hsl(60, 100%, 97%)
#fffaf0
Floral White
floralwhite
rgb(255, 250, 240)
hsl(40, 100%, 97%)
#fff5ee
Seashell
seashell
rgb(255, 245, 238)
hsl(25, 100%, 97%)
#f5f5dc
Beige
beige
rgb(245, 245, 220)
hsl(60, 56%, 91%)
#f5f5f5
White Smoke
whitesmoke
rgb(245, 245, 245)
hsl(0, 0%, 96%)
#808080
Gray
gray
rgb(128, 128, 128)
hsl(0, 0%, 50%)
#808080
Grey
grey
rgb(128, 128, 128)
hsl(0, 0%, 50%)
#a9a9a9
Dark Gray
darkgray
rgb(169, 169, 169)
hsl(0, 0%, 66%)
#a9a9a9
Dark Grey
darkgrey
rgb(169, 169, 169)
hsl(0, 0%, 66%)
#d3d3d3
Light Gray
lightgray
rgb(211, 211, 211)
hsl(0, 0%, 83%)
#d3d3d3
Light Grey
lightgrey
rgb(211, 211, 211)
hsl(0, 0%, 83%)
#c0c0c0
Silver
silver
rgb(192, 192, 192)
hsl(0, 0%, 75%)
#dcdcdc
Gainsboro
gainsboro
rgb(220, 220, 220)
hsl(0, 0%, 86%)
#696969
Dim Gray
dimgray
rgb(105, 105, 105)
hsl(0, 0%, 41%)
#696969
Dim Grey
dimgrey
rgb(105, 105, 105)
hsl(0, 0%, 41%)
#708090
Slate Gray
slategray
rgb(112, 128, 144)
hsl(210, 13%, 50%)
#708090
Slate Grey
slategrey
rgb(112, 128, 144)
hsl(210, 13%, 50%)
#778899
Light Slate Gray
lightslategray
rgb(119, 136, 153)
hsl(210, 14%, 53%)
#778899
Light Slate Grey
lightslategrey
rgb(119, 136, 153)
hsl(210, 14%, 53%)
#2f4f4f
Dark Slate Gray
darkslategray
rgb(47, 79, 79)
hsl(180, 25%, 25%)
#2f4f4f
Dark Slate Grey
darkslategrey
rgb(47, 79, 79)
hsl(180, 25%, 25%)
#000000
Black
black
rgb(0, 0, 0)
hsl(0, 0%, 0%)
¿Por qué usar nuestra referencia de colores con nombre de CSS?
- Búsqueda instantánea en los 148 colores: La referencia de colores con nombre de CSS busca en tiempo real entre nombres de color, valores HEX, valores RGB y valores HSL. Encuentra cualquier color al instante escribiendo su nombre, su código hex o su valor RGB.
- Filtra por familia de color: Filtra la referencia por 12 familias de color: rojo, naranja, amarillo, verde, cian, azul, morado, rosa, marrón, blanco, gris y negro. Explora rápidamente todos los colores de un rango tonal concreto.
- 100% privado: sin subidas: La referencia de colores con nombre de CSS funciona íntegramente en tu navegador. No se envía ningún dato a ningún servidor: segura para uso sin conexión y para trabajo de diseño privado.
- Gratis y sin límites: Explora y copia colores con nombre de CSS sin límite, sin registro, sin suscripción y sin topes de uso. La referencia de colores con nombre de CSS es totalmente gratuita para siempre y sin anuncios que bloqueen la interfaz.
Casos de uso comunes de la referencia de colores con nombre de CSS
- Desarrollo CSS y HTML: Los desarrolladores frontend usan la referencia de colores con nombre de CSS para consultar rápidamente nombres de color que usar en hojas de estilo CSS y atributos HTML. Copia el nombre exacto de color CSS, su HEX o su valor RGB con un clic.
- Diseño y prototipado: Los diseñadores usan la referencia de colores con nombre de CSS para encontrar colores con nombre seguros para maquetas y prototipos. El filtro por familia de color facilita explorar de una vez todos los azules, verdes o rojos.
- Accesibilidad y comprobación de contraste: Los especialistas en accesibilidad usan la referencia para identificar colores con nombre y después comprobar sus ratios de contraste. Los valores HEX y RGB pueden pegarse directamente en herramientas de comprobación de contraste.
- Aprender CSS y diseño web: Estudiantes y principiantes usan la referencia de colores con nombre de CSS para aprender qué nombres de color existen en CSS. Ver la muestra real del color junto al nombre facilita recordar qué nombre corresponde a cada color.
- Desarrollo de plantillas de correo: Los desarrolladores de correo usan la referencia para encontrar colores con nombre seguros en clientes de correo HTML. Los colores con nombre tienen amplia compatibilidad en clientes que quizá no admitan funciones de color CSS modernas.
- Documentación de sistemas de diseño: Los equipos de sistemas de diseño usan la referencia para documentar qué colores con nombre de CSS emplean en su sistema y para encontrar equivalencias HEX para tokens de diseño y estilos de color de Figma.
¿Qué son los colores con nombre de CSS?
Los colores con nombre de CSS son palabras clave de color predefinidas que pueden usarse directamente en CSS sin especificar un valor HEX, RGB o HSL. Por ejemplo, color: cornflowerblue equivale a color: #6495ed. La especificación CSS define 148 colores con nombre, desde colores básicos como red y blue hasta nombres más descriptivos como rebeccapurple y papayawhip. Nuestra referencia de colores con nombre de CSS los lista los 148 con sus equivalentes HEX, RGB y HSL.
Cómo funciona nuestra referencia de colores con nombre de CSS
- Busca por nombre, HEX o RGB: Escribe cualquier parte de un nombre de color (por ejemplo, «blue», «coral»), un valor HEX (por ejemplo, «#ff7f50») o un valor RGB para filtrar la referencia al instante.
- Filtra por familia de color: Haz clic en cualquier chip de familia - Rojo, Naranja, Amarillo, Verde, Cian, Azul, Morado, Rosa, Marrón, Blanco, Gris o Negro - para mostrar solo los colores de esa familia. Combínalo con la búsqueda para un filtrado preciso.
- Copia con un clic: Cada tarjeta de color tiene tres botones de copiar: Nombre, HEX y RGB. Haz clic en cualquiera para copiar ese valor a tu portapapeles al instante. Todo el procesamiento se ejecuta localmente en tu navegador.
Qué incluye la referencia de colores con nombre de CSS
- Nombre de color CSS: la palabra clave exacta que usar en CSS (por ejemplo, cornflowerblue).
- Valor HEX: el equivalente hexadecimal de 6 dígitos (por ejemplo, #6495ed).
- Valor RGB: los valores de los canales rojo, verde y azul (por ejemplo, rgb(100, 149, 237)).
- Valor HSL: los valores de tono, saturación y luminosidad (por ejemplo, hsl(219, 79%, 66%)).
Notas sobre colores duplicados
Algunos colores con nombre de CSS son duplicados exactos entre sí. Por ejemplo, aqua y cyan corresponden ambos a #00ffff, y fuchsia y magenta corresponden ambos a #ff00ff. Del mismo modo, gray y grey (y sus variantes) son idénticos. La referencia de colores con nombre de CSS incluye los 148 nombres oficiales, incluidos estos duplicados, ya que ambas grafías son CSS válido.
Preguntas frecuentes
La referencia de colores con nombre de CSS es una lista con buscador y filtros de los 148 colores con nombre de CSS con sus valores HEX, RGB y HSL. Puedes buscar por nombre de color, HEX o valor RGB, filtrar por familia de color y copiar cualquier valor con un clic. Todo funciona en tu navegador, sin enviar datos a ningún servidor.
La especificación CSS Color Level 4 define 148 colores con nombre. Incluye los 16 colores básicos de HTML 4.01, los 140 colores X11 adoptados por CSS2.1 y el color especial «rebeccapurple», añadido en CSS Color Level 4 en honor a Rebecca Meyer.
Sí. Los 148 colores con nombre de CSS son compatibles con todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. También funcionan en navegadores antiguos desde IE9. Los colores con nombre son una de las características CSS con mayor compatibilidad.
Sí. La referencia de colores con nombre de CSS es 100% gratis, sin registro, sin funciones premium y sin límites de uso. Explora y copia colores ilimitados sin restricciones ni costes ocultos.
La especificación CSS incluye tanto la grafía del inglés americano (gray) como la del británico (grey) para varios colores, y ambas son válidas en CSS. Del mismo modo, «aqua» y «cyan» son colores idénticos con nombres distintos, igual que «fuchsia» y «magenta». La referencia incluye los 148 nombres oficiales, incluidos estos duplicados.
Rebeccapurple (#663399) se añadió a la especificación CSS Color Level 4 en 2014 en honor a Rebecca Alison Meyer, hija del defensor de los estándares web Eric Meyer, fallecida el día en que cumplía seis años. Es el único color con nombre de CSS dedicado a una persona concreta.
Tailwind CSS no usa los colores con nombre de CSS en su paleta predeterminada: emplea su propio sistema de color con escalas numéricas (por ejemplo, blue-500). Sin embargo, puedes usar colores con nombre de CSS en valores arbitrarios de Tailwind: text-[cornflowerblue] o bg-[coral]. También puedes añadir colores con nombre al tema de tu tailwind.config.js.
No. Los nombres de color de CSS no distinguen mayúsculas de minúsculas. «CornflowerBlue», «cornflowerblue» y «CORNFLOWERBLUE» son válidos y equivalentes. El estilo convencional es todo en minúsculas, que es lo que muestra la referencia de colores con nombre de CSS.