En CSS la propiedad
background-color
se utiliza para dar un color de fondo a un elemento HTML.elemento{ background-color: #000;}
En el ejemplo anterior he utilizado un color hex, pero podría haber utilizado un color rgb o hsl o incluso colores con transparencias como rgba o hsla.
.rgb{ background-color: rgb(0,0,0);}
.rgba{ background-color: rgba(250,100,0,.5);}
.hsl{ background-color: hsl(0,100%,50%);}
.hsla{ background-color: hsla(180,100%,50%,.8);}
También podría haber utilizado nombres de colores como por ejemplo
black
.Nombre | Hex | RGB | hsl | Color |
---|---|---|---|---|
AliceBlue | #F0F8FF | rgb (240,248,255) | hsl(208,100%,97%) | |
AntiqueWhite | #FAEBD7 | rgb (250,235,215) | hsl(34,78%,91%) | |
Aqua | #00FFFF | rgb (0,255,255) | hsl(180,100%,50%) | |
Aquamarine | #7FFFD4 | rgb (127,255,212) | hsl(160,100%,75%) | |
Azure | #F0FFFF | rgb (240,255,255) | hsl(180,100%,97%) | |
Beige | #F5F5DC | rgb (245,245,220) | hsl(60,56%,91%) | |
Bisque | #FFE4C4 | rgb (255,228,196) | hsl(33,100%,88%) | |
Black | #000000 | rgb (0,0,0) | hsl(0,0%,0%) | |
BlanchedAlmond | #FFEBCD | rgb (255,235,205) | hsl(36,100%,90%) | |
Blue | #0000FF | rgb (0,0,255) | hsl(240,100%,50%) | |
BlueViolet | #8A2BE2 | rgb (138,43,226) | hsl(271,76%,53%) | |
Brown | #A52A2A | rgb (165,42,42) | hsl(0,59%,41%) | |
BurlyWood | #DEB887 | rgb (222,184,135) | hsl(34,57%,70%) | |
CadetBlue | #5F9EA0 | rgb (95,158,160) | hsl(182,25%,50%) | |
Chartreuse | #7FFF00 | rgb (127,255,0) | hsl(90,100%,50%) | |
Chocolate | #D2691E | rgb (210,105,30) | hsl(25,75%,47%) | |
Coral | #FF7F50 | rgb (255,127,80) | hsl(16,100%,66%) | |
CornflowerBlue | #6495ED | rgb (100,149,237) | hsl(219,79%,66%) | |
Cornsilk | #FFF8DC | rgb (255,248,220) | hsl(48,100%,93%) | |
Crimson | #DC143C | rgb (220,20,60) | hsl(348,83%,47%) | |
Cyan | #00FFFF | rgb (0,255,255) | hsl(180,100%,50%) | |
DarkBlue | #00008B | rgb (0,0,139) | hsl(240,100%,27%) | |
DarkCyan | #008B8B | rgb (0,139,139) | hsl(180,100%,27%) | |
DarkGoldenRod | #B8860B | rgb (184,134,11) | hsl(43,89%,38%) | |
DarkGray | #A9A9A9 | rgb (169,169,169) | hsl(0,0%,66%) | |
DarkGreen | #006400 | rgb (0,100,0) | hsl(120,100%,20%) | |
DarkKhaki | #BDB76B | rgb (189,183,107) | hsl(56,38%,58%) | |
DarkMagenta | #8B008B | rgb (139,0,139) | hsl(300,100%,27%) | |
DarkOliveGreen | #556B2F | rgb (85,107,47) | hsl(82,39%,30%) | |
DarkOrange | #FF8C00 | rgb (255,140,0) | hsl(33,100%,50%) | |
DarkOrchid | #9932CC | rgb (153,50,204) | hsl(280,61%,50%) | |
DarkRed | #8B0000 | rgb (139,0,0) | hsl(0,100%,27%) | |
DarkSalmon | #E9967A | rgb (233,150,122) | hsl(15,72%,70%) | |
DarkSeaGreen | #8FBC8F | rgb (143,188,143) | hsl(120,25%,65%) | |
DarkSlateBlue | #483D8B | rgb (72,61,139) | hsl(248,39%,39%) | |
DarkSlateGray | #2F4F4F | rgb (47,79,79) | hsl(180,25%,25%) | |
DarkTurquoise | #00CED1 | rgb (0,206,209) | hsl(181,100%,41%) | |
DarkViolet | #9400D3 | rgb (148,0,211) | hsl(282,100%,41%) | |
DeepPink | #FF1493 | rgb (255,20,147) | hsl(328,100%,54%) | |
DeepSkyBlue | #00BFFF | rgb (0,191,255) | hsl(195,100%,50%) | |
DimGray | #696969 | rgb (105,105,105) | hsl(0,0%,41%) | |
DodgerBlue | #1E90FF | rgb (30,144,255) | hsl(210,100%,56%) | |
FireBrick | #B22222 | rgb (178,34,34) | hsl(0,68%,42%) | |
FloralWhite | #FFFAF0 | rgb (255,250,240) | hsl(40,100%,97%) | |
ForestGreen | #228B22 | rgb (34,139,34) | hsl(120,61%,34%) | |
Fuchsia | #FF00FF | rgb (255,0,255) | hsl(300,100%,50%) | |
Gainsboro | #DCDCDC | rgb (220,220,220) | hsl(0,0%,86%) | |
GhostWhite | #F8F8FF | rgb (248,248,255) | hsl(240,100%,99%) | |
Gold | #FFD700 | rgb (255,215,0) | hsl(51,100%,50%) | |
GoldenRod | #DAA520 | rgb (218,165,32) | hsl(43,74%,49%) | |
Gray | #808080 | rgb (128,128,128) | hsl(0,0%,50%) | |
Green | #008000 | rgb (0,128,0) | hsl(120,100%,25%) | |
GreenYellow | #ADFF2F | rgb (173,255,47) | hsl(84,100%,59%) | |
HoneyDew | #F0FFF0 | rgb (240,255,240) | hsl(120,100%,97%) | |
HotPink | #FF69B4 | rgb (255,105,180) | hsl(330,100%,71%) | |
IndianRed | #CD5C5C | rgb (205,92,92) | hsl(0,53%,58%) | |
Indigo | #4B0082 | rgb (75,0,130) | hsl(275,100%,25%) | |
Ivory | #FFFFF0 | rgb (255,255,240) | hsl(60,100%,97%) | |
Khaki | #F0E68C | rgb (240,230,140) | hsl(54,77%,75%) | |
Lavender | #E6E6FA | rgb (230,230,250) | hsl(240,67%,94%) | |
LavenderBlush | #FFF0F5 | rgb (255,240,245) | hsl(340,100%,97%) | |
LawnGreen | #7CFC00 | rgb (124,252,0) | hsl(90,100%,49%) | |
LemonChiffon | #FFFACD | rgb (255,250,205) | hsl(54,100%,90%) | |
LightBlue | #ADD8E6 | rgb (173,216,230) | hsl(195,53%,79%) | |
LightCoral | #F08080 | rgb (240,128,128) | hsl(0,79%,72%) | |
LightCyan | #E0FFFF | rgb (224,255,255) | hsl(180,100%,94%) | |
LightGoldenRodYellow | #FAFAD2 | rgb (250,250,210) | hsl(60,80%,90%) | |
LightGray | #D3D3D3 | rgb (211,211,211) | hsl(0,0%,83%) | |
LightGreen | #90EE90 | rgb (144,238,144) | hsl(120,73%,75%) | |
LightPink | #FFB6C1 | rgb (255,182,193) | hsl(351,100%,86%) | |
LightSalmon | #FFA07A | rgb (255,160,122) | hsl(17,100%,74%) | |
LightSeaGreen | #20B2AA | rgb (32,178,170) | hsl(177,70%,41%) | |
LightSkyBlue | #87CEFA | rgb (135,206,250) | hsl(203,92%,75%) | |
LightSlateGray | #778899 | rgb (119,136,153) | hsl(210,14%,53%) | |
LightSteelBlue | #B0C4DE | rgb (176,196,222) | hsl(214,41%,78%) | |
LightYellow | #FFFFE0 | rgb (255,255,224) | hsl(60,100%,94%) | |
Lime | #00FF00 | rgb (0,255,0) | hsl(120,100%,50%) | |
LimeGreen | #32CD32 | rgb (50,205,50) | hsl(120,61%,50%) | |
Linen | #FAF0E6 | rgb (250,240,230) | hsl(30,67%,94%) | |
Magenta | #FF00FF | rgb (255,0,255) | hsl(300,100%,50%) | |
Maroon | #800000 | rgb (128,0,0) | hsl(0,100%,25%) | |
MediumAquaMarine | #66CDAA | rgb (102,205,170) | hsl(160,51%,60%) | |
MediumBlue | #0000CD | rgb (0,0,205) | hsl(240,100%,40%) | |
MediumOrchid | #BA55D3 | rgb (186,85,211) | hsl(288,59%,58%) | |
MediumPurple | #9370DB | rgb (147,112,219) | hsl(260,60%,65%) | |
MediumSeaGreen | #3CB371 | rgb (60,179,113) | hsl(147,50%,47%) | |
MediumSlateBlue | #7B68EE | rgb (123,104,238) | hsl(249,80%,67%) | |
MediumSpringGreen | #00FA9A | rgb (0,250,154) | hsl(157,100%,49%) | |
MediumTurquoise | #48D1CC | rgb (72,209,204) | hsl(178,60%,55%) | |
MediumVioletRed | #C71585 | rgb (199,21,133) | hsl(322,81%,43%) | |
MidnightBlue | #191970 | rgb (25,25,112) | hsl(240,64%,27%) | |
MintCream | #F5FFFA | rgb (245,255,250) | hsl(150,100%,98%) | |
MistyRose | #FFE4E1 | rgb (255,228,225) | hsl(6,100%,94%) | |
Moccasin | #FFE4B5 | rgb (255,228,181) | hsl(38,100%,85%) | |
NavajoWhite | #FFDEAD | rgb (255,222,173) | hsl(36,100%,84%) | |
Navy | #000080 | rgb (0,0,128) | hsl(240,100%,25%) | |
OldLace | #FDF5E6 | rgb (253,245,230) | hsl(39,85%,95%) | |
Olive | #808000 | rgb (128,128,0) | hsl(60,100%,25%) | |
OliveDrab | #6B8E23 | rgb (107,142,35) | hsl(80,60%,35%) | |
Orange | #FFA500 | rgb (255,165,0) | hsl(39,100%,50%) | |
OrangeRed | #FF4500 | rgb (255,69,0) | hsl(16,100%,50%) | |
Orchid | #DA70D6 | rgb (218,112,214) | hsl(302,59%,65%) | |
PaleGoldenRod | #EEE8AA | rgb (238,232,170) | hsl(55,67%,80%) | |
PaleGreen | #98FB98 | rgb (152,251,152) | hsl(120,93%,79%) | |
PaleTurquoise | #AFEEEE | rgb (175,238,238) | hsl(180,65%,81%) | |
PaleVioletRed | #DB7093 | rgb (219,112,147) | hsl(340,60%,65%) | |
PapayaWhip | #FFEFD5 | rgb (255,239,213) | hsl(37,100%,92%) | |
PeachPuff | #FFDAB9 | rgb (255,218,185) | hsl(28,100%,86%) | |
Peru | #CD853F | rgb (205,133,63) | hsl(30,59%,53%) | |
Pink | #FFC0CB | rgb (255,192,203) | hsl(350,100%,88%) | |
Plum | #DDA0DD | rgb (221,160,221) | hsl(300,47%,75%) | |
PowderBlue | #B0E0E6 | rgb (176,224,230) | hsl(187,52%,80%) | |
Purple | #800080 | rgb (128,0,128) | hsl(300,100%,25%) | |
RebeccaPurple | #663399 | rgb (102,51,153) | hsl(270,50%,40%) | |
Red | #FF0000 | rgb (255,0,0) | hsl(0,100%,50%) | |
RosyBrown | #BC8F8F | rgb (188,143,143) | hsl(0,25%,65%) | |
RoyalBlue | #4169E1 | rgb (65,105,225) | hsl(225,73%,57%) | |
SaddleBrown | #8B4513 | rgb (139,69,19) | hsl(25,76%,31%) | |
Salmon | #FA8072 | rgb (250,128,114) | hsl(6,93%,71%) | |
SandyBrown | #F4A460 | rgb (244,164,96) | hsl(28,87%,67%) | |
SeaGreen | #2E8B57 | rgb (46,139,87) | hsl(146,50%,36%) | |
SeaShell | #FFF5EE | rgb (255,245,238) | hsl(25,100%,97%) | |
Sienna | #A0522D | rgb (160,82,45) | hsl(19,56%,40%) | |
Silver | #C0C0C0 | rgb (192,192,192) | hsl(0,0%,75%) | |
SkyBlue | #87CEEB | rgb (135,206,235) | hsl(197,71%,73%) | |
SlateBlue | #6A5ACD | rgb (106,90,205) | hsl(248,53%,58%) | |
SlateGray | #708090 | rgb (112,128,144) | hsl(210,13%,50%) | |
Snow | #FFFAFA | rgb (255,250,250) | hsl(0,100%,99%) | |
SpringGreen | #00FF7F | rgb (0,255,127) | hsl(150,100%,50%) | |
SteelBlue | #4682B4 | rgb (70,130,180) | hsl(207,44%,49%) | |
Tan | #D2B48C | rgb (210,180,140) | hsl(34,44%,69%) | |
Teal | #008080 | rgb (0,128,128) | hsl(180,100%,25%) | |
Thistle | #D8BFD8 | rgb (216,191,216) | hsl(300,24%,80%) | |
Tomato | #FF6347 | rgb (255,99,71) | hsl(9,100%,64%) | |
Turquoise | #40E0D0 | rgb (64,224,208) | hsl(174,72%,56%) | |
Violet | #EE82EE | rgb (238,130,238) | hsl(300,76%,72%) | |
Wheat | #F5DEB3 | rgb (245,222,179) | hsl(39,77%,83%) | |
White | #FFFFFF | rgb (255,255,255) | hsl(0,0%,100%) | |
WhiteSmoke | #F5F5F5 | rgb (245,245,245) | hsl(0,0%,96%) | |
Yellow | #FFFF00 | rgb (255,255,0) | hsl(60,100%,50%) | |
YellowGreen | #9ACD32 | rgb (154,205,50) | hsl(80,61%,50%) |
0 Comentarios