CSS => Colores

Sintaxis

color: #rgb
color: #rrggbb
color: rgb [a] (<red>, <green>, <blue> [, <alpha>])
color: hsl [a] (<hue>, <saturation%>, <lightness%> [, <alpha>])
color: colorkeyword / * verde, azul, amarillo, naranja, rojo, ..etc * /

Palabras clave de color

La mayoría de los navegadores admiten el uso de palabras clave de color para especificar un color. Por ejemplo, para establecer el color de un elemento en azul, use la palabra clave blue :

.some-class {
    color: blue;
}

Las palabras clave de CSS no distinguen entre mayúsculas y minúsculas: blue , Blue y BLUE darán como resultado #0000FF .

Palabras clave de color

Nombre del color	Valor hexadecimal	Valores RGB	Color
Alice azul	# F0F8FF	rgb (240,248,255)
Blanco antiguo	# FAEBD7	rgb (250,235,215)
Agua	# 00FFFF	rgb (0,255,255)
Aguamarina	# 7FFFD4	rgb (127,255,212)
Azur	# F0FFFF	rgb (240,255,255)
Beige	# F5F5DC	rgb (245,245,220)
Sopa de mariscos	# FFE4C4	rgb (255,228,196)
Negro	# 000000	rgb (0,0,0)
BlanchedAlmond	#FFEBCD	rgb (255,235,205)
Azul	# 0000FF	rgb (0,0,255)
Violeta Azul	# 8A2BE2	rgb (138,43,226)
marrón	# A52A2A	rgb (165,42,42)
BurlyWood	# DEB887	rgb (222,184,135)
CadetBlue	# 5F9EA0	rgb (95,158,160)
Monasterio	# 7FFF00	rgb (127,255,0)
Chocolate	# D2691E	rgb (210,105,30)
Coral	# FF7F50	rgb (255,127,80)
Aciano Azul	# 6495ED	rgb (100,149,237)
Seda de maiz	# FFF8DC	rgb (255,248,220)
carmesí	# DC143C	rgb (220,20,60)
Cian	# 00FFFF	rgb (0,255,255)
Azul oscuro	# 00008B	rgb (0,0,139)
DarkCyan	# 008B8B	rgb (0,139,139)
DarkGoldenRod	# B8860B	rgb (184,134,11)
Gris oscuro	# A9A9A9	rgb (169,169,169)
Gris oscuro	# A9A9A9	rgb (169,169,169)
Verde oscuro	# 006400	rgb (0,100,0)
DarkKhaki	# BDB76B	rgb (189,183,107)
DarkMagenta	# 8B008B	rgb (139,0,139)
DarkOliveGreen	# 556B2F	rgb (85,107,47)
Naranja oscuro	# FF8C00	rgb (255,140,0)
Orquídea Oscura	# 9932CC	rgb (153,50,204)
Rojo oscuro	# 8B0000	rgb (139,0,0)
Salmón oscuro	# E9967A	rgb (233,150,122)
DarkSeaGreen	# 8FBC8F	rgb (143,188,143)
DarkSlateBlue	# 483D8B	rgb (72,61,139)
DarkSlateGray	# 2F4F4F	rgb (47,79,79)
DarkSlateGrey	# 2F4F4F	rgb (47,79,79)
DarkTurquoise	# 00CED1	rgb (0,206,209)
Violeta oscuro	# 9400D3	rgb (148,0,211)
Rosa profundo	# FF1493	rgb (255,20,147)
DeepSkyBlue	# 00BFFF	rgb (0,191,255)
DimGray	# 696969	rgb (105,105,105)
DimGrey	# 696969	rgb (105,105,105)
DodgerBlue	# 1E90FF	rgb (30,144,255)
Ladrillo refractario	# B22222	rgb (178,34,34)	$Ladrillo refractario$
FloralWhite	# FFFAF0	rgb (255,250,240)
Bosque verde	# 228B22	rgb (34,139,34)
Fucsia	# FF00FF	rgb (255,0,255)
Gainsboro	#DCDCDC	rgb (220,220,220)
Fantasma blanco	# F8F8FF	rgb (248,248,255)
Oro	# FFD700	rgb (255,215,0)
Vara de oro	# DAA520	rgb (218,165,32)
gris	# 808080	rgb (128,128,128)
Gris	# 808080	rgb (128,128,128)
Verde	# 008000	rgb (0,128,0)
Verde amarillo	# ADFF2F	rgb (173,255,47)
Gotas de miel	# F0FFF0	rgb (240,255,240)
Rosa caliente	# FF69B4	rgb (255,105,180)
IndianRed	# CD5C5C	rgb (205,92,92)
Índigo	# 4B0082	rgb (75,0,130)
Marfil	# FFFFF0	rgb (255,255,240)
Caqui	# F0E68C	rgb (240,230,140)
Lavanda	# E6E6FA	rgb (230,230,250)
LavenderBlush	# FFF0F5	rgb (255,240,245)
Césped verde	# 7CFC00	rgb (124,252,0)
Limón chiffon	#FFFACD	rgb (255,250,205)
Azul claro	# ADD8E6	rgb (173,216,230)
LightCoral	# F08080	rgb (240,128,128)
Cian claro	# E0FFFF	rgb (224,255,255)
LightGoldenRodYellow	# FAFAD2	rgb (250,250,210)
Gris claro	# D3D3D3	rgb (211,211,211)
Gris claro	# D3D3D3	rgb (211,211,211)
Verde claro	# 90EE90	rgb (144,238,144)
Rosa claro	# FFB6C1	rgb (255,182,193)
Salmón de luz	# FFA07A	rgb (255,160,122)
LightSeaGreen	# 20B2AA	rgb (32,178,170)
LightSkyBlue	# 87CEFA	rgb (135,206,250)
LightSlateGray	# 778899	rgb (119,136,153)
LightSlateGrey	# 778899	rgb (119,136,153)
LightSteelBlue	# B0C4DE	rgb (176,196,222)
Amarillo claro	# FFFFE0	rgb (255,255,224)
Lima	# 00FF00	rgb (0,255,0)
Verde lima	# 32CD32	rgb (50,205,50)
Lino	# FAF0E6	rgb (250,240,230)
Magenta	# FF00FF	rgb (255,0,255)
Granate	# 800000	rgb (128,0,0)
MedioAquaMarine	# 66CDAA	rgb (102,205,170)
Azul medio	# 0000CD	rgb (0,0,205)
MediumOrchid	# BA55D3	rgb (186,85,211)
Mediano	# 9370DB	rgb (147,112,219)
MediumSeaGreen	# 3CB371	rgb (60,179,113)
MediumSlateBlue	# 7B68EE	rgb (123,104,238)
MediumSpringGreen	# 00FA9A	rgb (0,250,154)
MediumTurquoise	# 48D1CC	rgb (72,209,204)
MediumVioletRed	# C71585	rgb (199,21,133)
MidnightBlue	# 191970	rgb (25,25,112)
MintCream	# F5FFFA	rgb (245,255,250)
MistyRose	# FFE4E1	rgb (255,228,225)
Mocasín	# FFE4B5	rgb (255,228,181)
Navajoblanco	#FFDEAD	rgb (255,222,173)
Armada	# 000080	rgb (0,0,128)
Antiguo lace	# FDF5E6	rgb (253,245,230)
Aceituna	# 808000	rgb (128,128,0)
Verde oliva	# 6B8E23	rgb (107,142,35)
naranja	# FFA500	rgb (255,165,0)
Rojo naranja	# FF4500	rgb (255,69,0)
Orquídea	# DA70D6	rgb (218,112,214)
PaleGoldenRod	# EEE8AA	rgb (238,232,170)
Verde pálido	# 98FB98	rgb (152,251,152)
PaleTurquoise	#AFEEEE	rgb (175,238,238)
PaleVioletRed	# DB7093	rgb (219,112,147)
PapayaWhip	# FFEFD5	rgb (255,239,213)
Peachpuff	# FFDAB9	rgb (255,218,185)
Perú	# CD853F	rgb (205,133,63)
Rosado	# FFC0CB	rgb (255,192,203)
ciruela	# DDA0DD	rgb (221,160,221)
Azul pálido	# B0E0E6	rgb (176,224,230)
Púrpura	# 800080	rgb (128,0,128)
RebeccaPurple	# 663399	rgb (102,51,153)
rojo	# FF0000	rgb (255,0,0)
RosyBrown	# BC8F8F	rgb (188,143,143)
Azul real	# 4169E1	rgb (65,105,225)
SaddleBrown	# 8B4513	rgb (139,69,19)
Salmón	# FA8072	rgb (250,128,114)
SandyBrown	# F4A460	rgb (244,164,96)
Mar verde	# 2E8B57	rgb (46,139,87)
Concha	# FFF5EE	rgb (255,245,238)
Tierra de siena	# A0522D	rgb (160,82,45)
Plata	# C0C0C0	rgb (192,192,192)
Cielo azul	# 87CEEB	rgb (135,206,235)
SlateBlue	# 6A5ACD	rgb (106,90,205)
SlateGray	# 708090	rgb (112,128,144)
Pizarra gris	# 708090	rgb (112,128,144)
Nieve	#FFAFA	rgb (255,250,250)
Primavera verde	# 00FF7F	rgb (0,255,127)
Azul acero	# 4682B4	rgb (70,130,180)
Bronceado	# D2B48C	rgb (210,180,140)
Teal	# 008080	rgb (0,128,128)
Cardo	# D8BFD8	rgb (216,191,216)
Tomate	# FF6347	rgb (255,99,71)
Turquesa	# 40E0D0	rgb (64,224,208)
Violeta	# EE82EE	rgb (238,130,238)
Trigo	# F5DEB3	rgb (245,222,179)
Blanco	#FFFFFF	rgb (255,255,255)
Humo blanco	# F5F5F5	rgb (245,245,245)
Amarillo	# FFFF00	rgb (255,255,0)
Amarillo verde	# 9ACD32	rgb (154,205,50)

Además de los colores nombrados, también existe la palabra clave transparent , que representa un negro totalmente transparente: rgba(0,0,0,0)

Valor hexadecimal

Fondo

Los colores CSS también se pueden representar como un triplete hexagonal, donde los miembros representan los componentes rojo, verde y azul de un color. Cada uno de estos valores representa un número en el rango de 00 a FF , o 0 a 255 en notación decimal. Se pueden usar valores hexadecimales en mayúsculas y / o en minúsculas (es decir, #3fc = #3FC = #33ffCC ). El navegador interpreta #369 como #336699 . Si eso no es lo que deseaba, sino que deseaba #306090 , debe especificarlo explícitamente.

El número total de colores que se pueden representar con notación hexadecimal es 256 ^ 3 o 16,777,216.

Sintaxis

color: #rrggbb;
color: #rgb

Valor	Descripción
`rr`	`00` - `FF` por la cantidad de rojo
`gg`	`00` - `FF` por la cantidad de verde
`bb`	`00` - `FF` por la cantidad de azul

.some-class {
    /* This is equivalent to using the color keyword 'blue' */
    color: #0000FF;
}

.also-blue {
    /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
    color: #00F;
}

La notación hexadecimal se utiliza para especificar valores de color en el formato de color RGB, según los 'Valores numéricos de color' de W3C .

Hay muchas herramientas disponibles en Internet para buscar valores de color hexadecimales (o simplemente hexadecimales).

¡Busca " paleta de colores hexadecimal " o " selector de color hexadecimal " con tu navegador web favorito para encontrar un montón de opciones!

Los valores hexadecimales siempre comienzan con un signo de número (#), tienen hasta seis "dígitos" de longitud y no distinguen entre mayúsculas y minúsculas: es decir, no les importa el uso de mayúsculas. #FFC125 y #ffc125 son del mismo color.

rgb () Notación

RGB es un modelo de color aditivo que representa los colores como mezclas de luz roja, verde y azul. En esencia, la representación RGB es el equivalente decimal de la Notación Hexadecimal. En hexadecimal, cada número oscila entre 00-FF, que es equivalente a 0-255 en decimal y 0% -100% en porcentajes.

.some-class {
    /* Scalar RGB, equivalent to 'blue'*/
    color: rgb(0, 0, 255);
}

.also-blue {
    /* Percentile RGB values*/
    color: rgb(0%, 0%, 100%);
}

Sintaxis

rgb(<red>, <green>, <blue>)

Valor	Descripción
`<red>`	un número entero de 0 a 255 o un porcentaje de 0 a 100%
`<green>`	un número entero de 0 a 255 o un porcentaje de 0 a 100%
`<blue>`	un número entero de 0 a 255 o un porcentaje de 0 a 100%

hsl () Notación

HSL significa tono ("qué color"), saturación ("cuánto color") y luminosidad ("cuánto blanco").

El tono se representa como un ángulo de 0 ° a 360 ° (sin unidades), mientras que la saturación y la luminosidad se representan como porcentajes.

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

Sintaxis

color: hsl(<hue>, <saturation>%, <lightness>%);

Valor	Descripción
`<hue>`	especificado en grados alrededor de la rueda de color (sin unidades), donde 0 ° es rojo, 60 ° es amarillo, 120 ° es verde, 180 ° es cian, 240 ° es azul, 300 ° es magenta y 360 ° es rojo
`<saturation>`	especificado en porcentaje donde el 0% está totalmente desaturado (escala de grises) y el 100% está completamente saturado (de color vivo)
`<lightness>`	especificado en porcentaje donde 0% es completamente negro y 100% es completamente blanco

Notas

Una saturación del 0% siempre produce un color en escala de grises; Cambiar el tono no tiene efecto.
Una luminosidad del 0% siempre produce negro, y el 100% siempre produce blanco; Cambiar el tono o la saturación no tiene efecto.

color actual

currentColor devuelve el valor de color calculado del elemento actual.

Utilizar en el mismo elemento

Aquí currentColor se evalúa en rojo ya que la propiedad de color se establece en red :

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

En este caso, la especificación de currentColor para el borde es probablemente redundante porque omitirlo debería producir resultados idénticos. Solo use currentColor dentro de la propiedad de borde dentro del mismo elemento si de lo contrario se sobrescribiría debido a un selector más específico .

Ya que es el color computado, el borde será verde en el siguiente ejemplo debido a que la segunda regla anula la primera:

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

Heredado del elemento padre

El color del padre se hereda, aquí currentColor se evalúa como 'azul', haciendo que el color del borde del elemento hijo sea azul.

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor también puede ser usado por otras reglas que normalmente no heredarían de la propiedad de color, como el color de fondo. El siguiente ejemplo muestra a los hijos utilizando el conjunto de colores en el padre como fondo:

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

Resultado posible:

rgba () Notación

Similar a la notación rgb () , pero con un valor alfa (opacidad) adicional.

.red {
    /* Opaque red */
    color: rgba(255, 0, 0, 1);
}

.red-50p {
    /* Half-translucent red. */
    color: rgba(255, 0, 0, .5);
}

Sintaxis

rgba(<red>, <green>, <blue>, <alpha>);

Valor	Descripción
`<red>`	un número entero de 0 a 255 o un porcentaje de 0 a 100%
`<green>`	un número entero de 0 a 255 o un porcentaje de 0 a 100%
`<blue>`	un número entero de 0 a 255 o un porcentaje de 0 a 100%
`<alpha>`	un número del 0 al 1, donde 0.0 es totalmente transparente y 1.0 es totalmente opaco

hsla () Notación

Similar a la notación hsl () , pero con un valor alfa (opacidad) agregado.

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

Sintaxis

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);

Valor	Descripción
`<hue>`	especificado en grados alrededor de la rueda de color (sin unidades), donde 0 ° es rojo, 60 ° es amarillo, 120 ° es verde, 180 ° es cian, 240 ° es azul, 300 ° es magenta y 360 ° es rojo
`<saturation>`	porcentaje en el que el 0% está totalmente desaturado (escala de grises) y el 100% está completamente saturado (de color vivo)
`<lightness>`	porcentaje donde 0% es completamente negro y 100% es completamente blanco
`<alpha>`	un número del 0 al 1 donde 0 es completamente transparente y 1 es completamente opaco

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

CSS
Colores

Buscar..

Sintaxis

Palabras clave de color

Palabras clave de color

Valor hexadecimal

Fondo

Sintaxis

rgb () Notación

Sintaxis

hsl () Notación

Sintaxis

Notas

color actual

Utilizar en el mismo elemento

Heredado del elemento padre

rgba () Notación

Sintaxis

hsla () Notación

Sintaxis