CSS
Färger

Syntax

• färg: #rgb
• färg: #rrggbb
• färg: rgb [a] (<red>, <grön>, <blå> [, <alfas])
• färg: hsl [a] (<hue>, <mättnad%>, <ljushet%> [, <alfas)]
• färg: färgnyckelord / * grön, blå, gul, orange, röd, ..etc * /

Färg nyckelord

De flesta webbläsare stöder användning av färgnyckelord för att ange en färg. För att till exempel ställa in color element på blått använder du det blue nyckelordet:

.some-class {
    color: blue;
}

CSS sökord är inte fallet sensitive- blue , Blue och BLUE kommer alla resultat i #0000FF .

Färg nyckelord

Färgnamn	Hexvärde	RGB-värden	Färg
AliceBlue	# F0F8FF	rgb (240.248.255)
AntiqueWhite	# FAEBD7	rgb (250.235.215)
Aqua	# 00FFFF	rgb (0.255.255)
Akvamarin	# 7FFFD4	rgb (127.255.212)
Azurblå	# F0FFFF	rgb (240.255.255)
Beige	# F5F5DC	rgb (245.245.220)
bisque	# FFE4C4	rgb (255.228.196)
Svart	# 000000	rgb (0,0,0)
BlanchedAlmond	#FFEBCD	rgb (255.235.205)
Blå	# 0000FF	rgb (0,0,255)
Blåviolett	# 8A2BE2	rgb (138,43,226)
Brun	# A52A2A	rgb (165,42,42)
Burlywood	# DEB887	rgb (222.184.135)
CadetBlue	# 5F9EA0	rgb (95.158.160)
Chartreuse	# 7FFF00	rgb (127,255,0)
Choklad	# D2691E	rgb (210,105,30)
Korall	# FF7F50	rgb (255,127,80)
kornblå	# 6495ED	rgb (100.149.237)
Cornsilk	# FFF8DC	rgb (255.248.220)
djupröd	# DC143C	rgb (220,20,60)
cyan	# 00FFFF	rgb (0.255.255)
Mörkblå	# 00008B	rgb (0,0,139)
DarkCyan	# 008B8B	rgb (0.139.139)
DarkGoldenRod	# B8860B	rgb (184,134,11)
Mörkgrå	# A9A9A9	rgb (169.169.169)
Mörkgrå	# A9A9A9	rgb (169.169.169)
Mörkgrön	# 006.400	rgb (0,100,0)
DarkKhaki	# BDB76B	rgb (189.183.107)
DarkMagenta	# 8B008B	rgb (139,0,139)
DarkOliveGreen	# 556B2F	rgb (85,107,47)
DarkOrange	# FF8C00	rgb (255,140,0)
DarkOrchid	# 9932CC	rgb (153,50,204)
Mörkröd	# 8B0000	rgb (139,0,0)
DarkSalmon	# 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)
DarkViolet	# 9400D3	rgb (148,0,211)
deeppink	# FF1493	rgb (255,20,147)
DeepSkyBlue	# 00BFFF	rgb (0.191.255)
DimGray	# 696.969	rgb (105.105.105)
DimGrey	# 696.969	rgb (105.105.105)
DodgerBlue	# 1E90FF	rgb (30.144.255)
Eldfast tegel	# B22222	rgb (178,34,34)
FloralWhite	# FFFAF0	rgb (255.250.240)
Skog grön	# 228B22	rgb (34,139,34)
Fuchsia	# FF00FF	rgb (255.0.255)
Gainsboro	#DCDCDC	rgb (220.220.220)
GhostWhite	# F8F8FF	rgb (248.248.255)
Guld	# FFD700	rgb (255,215,0)
Gullris	# DAA520	rgb (218,165,32)
grå	# 808080	rgb (128.128.128)
Grå	# 808080	rgb (128.128.128)
Grön	# 008000	rgb (0,128,0)
Grön gul	# ADFF2F	rgb (173,255,47)
hONUNGS~~POS=TRUNC	# F0FFF0	rgb (240.255.240)
Skrikrosa	# FF69B4	rgb (255.105.180)
IndianRed	# CD5C5C	rgb (205,92,92)
Indigo	# 4B0082	rgb (75,0,130)
Elfenben	# FFFFF0	rgb (255.255.240)
Kaki	# F0E68C	rgb (240.230.140)
Lavendel	# E6E6FA	rgb (230.230.250)
LavenderBlush	# FFF0F5	rgb (255.240.245)
LawnGreen	# 7CFC00	rgb (124,252,0)
LemonChiffon	#FFFACD	rgb (255.250.205)
Ljusblå	# ADD8E6	rgb (173.216.230)
LightCoral	# F08080	rgb (240.128.128)
LightCyan	# E0FFFF	rgb (224.255.255)
LightGoldenRodYellow	# FAFAD2	rgb (250.250.210)
Ljusgrått	# D3D3D3	rgb (211.211.211)
Ljusgrå	# D3D3D3	rgb (211.211.211)
Ljusgrön	# 90EE90	rgb (144.238.144)
Ljusrosa	# FFB6C1	rgb (255.182.193)
LightSalmon	# FFA07A	rgb (255.160.122)
LightSeaGreen	# 20B2AA	rgb (32.178.170)
LightSkyBlue	# 87CEFA	rgb (135.206.250)
LightSlateGray	# 778.899	rgb (119.136.153)
LightSlateGrey	# 778.899	rgb (119.136.153)
LightSteelBlue	# B0C4DE	rgb (176.196.222)
Ljusgul	# FFFFE0	rgb (255.255.224)
Kalk	# 00FF00	rgb (0,255,0)
Limegrön	# 32CD32	rgb (50,205,50)
Linné	# FAF0E6	rgb (250.240.230)
Magenta	# FF00FF	rgb (255.0.255)
Rödbrun	# 800000	rgb (128,0,0)
MediumAquaMarine	# 66CDAA	rgb (102.205.170)
medium	# 0000CD	rgb (0,0,205)
MediumOrchid	# BA55D3	rgb (186,85,211)
MediumPurple	# 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)
Midnattsblå	# 191.970	rgb (25,25,112)
MintCream	# F5FFFA	rgb (245.255.250)
Mistyrose	# FFE4E1	rgb (255.228.225)
Mockasin	# FFE4B5	rgb (255.228.181)
NavajoWhite	#FFDEAD	rgb (255.222.173)
Marin	# 000080	rgb (0,0,128)
OldLace	# FDF5E6	rgb (253.245.230)
Oliv	# 808 tusen	rgb (128,128,0)
olivedrab	# 6B8E23	rgb (107,142,35)
Orange	# FFA500	rgb (255,165,0)
Orange röd	# FF4500	rgb (255,69,0)
Orkide	# DA70D6	rgb (218.112.214)
PaleGoldenRod	# EEE8AA	rgb (238.232.170)
Ljusgrön	# 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)
peru	# CD853F	rgb (205,133,63)
Rosa	# FFC0CB	rgb (255.192.203)
Plommon	# DDA0DD	rgb (221.160.221)
Puderblå	# B0E0E6	rgb (176.224.230)
Lila	# 800080	rgb (128,0,128)
RebeccaPurple	# 663.399	rgb (102,51,153)
Röd	# FF0000	rgb (255,0,0)
RosyBrown	# BC8F8F	rgb (188.143.143)
Kungsblått	# 4169E1	rgb (65.105.225)
SaddleBrown	# 8B4513	rgb (139,69,19)
Lax	# FA8072	rgb (250.128.114)
Sandybrown	# F4A460	rgb (244,164,96)
Havsgrön	# 2E8B57	rgb (46,139,87)
Snäckskal	# FFF5EE	rgb (255.245.238)
Sienna	# A0522D	rgb (160,82,45)
Silver	# C0C0C0	rgb (192.192.192)
Himmelsblå	# 87CEEB	rgb (135.206.235)
SlateBlue	# 6A5ACD	rgb (106,90,205)
Skiffer grå	# 708.090	rgb (112.128.144)
SlateGrey	# 708.090	rgb (112.128.144)
Snö	#FFFAFA	rgb (255.250.250)
SpringGreen	# 00FF7F	rgb (0.255.127)
Stålblå	# 4682B4	rgb (70.130.180)
Solbränna	# D2B48C	rgb (210.180.140)
Kricka	# 008.080	rgb (0.128.128)
Tistel	# D8BFD8	rgb (216.191.216)
Tomat	# FF6347	rgb (255,99,71)
Turkos	# 40E0D0	rgb (64.224.208)
Violett	# EE82EE	rgb (238.130.238)
Vete	# F5DEB3	rgb (245.222.179)
Vit	#FFFFFF	rgb (255.255.255)
Vit rök	# F5F5F5	rgb (245.245.245)
Gul	# FFFF00	rgb (255,255,0)
Gulgrön	# 9ACD32	rgb (154,205,50)

Förutom de nämnda färgerna finns det också nyckelordet transparent , som representerar en helt transparent svart: rgba(0,0,0,0)

Hexadecimalt värde

Bakgrund

CSS-färger kan också representeras som en hex-triplett, där medlemmarna representerar de röda, gröna och blå komponenterna i en färg. Var och en av dessa värden representerar ett tal i intervallet 00 till FF eller 0 till 255 i decimal notering. Hexidecimala värden på stora och små bokstäver kan användas (dvs. #3fc = #3FC = #33ffCC ). Webbläsaren tolkar #369 som #336699 . Om det inte är vad du tänkte utan snarare ville ha #306090 måste du ange det uttryckligen.

Det totala antalet färger som kan representeras med hex-notation är 256 ^ 3 eller 16 777 216.

Syntax

color: #rrggbb;
color: #rgb

.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;
}

Hexadecimal notation används för att specificera färgvärden i RGB-färgformat, enligt W3C: s "Numeriska färgvärden" .

Det finns många verktyg tillgängliga på Internet för att leta upp hexadecimala (eller helt enkelt hex) färgvärden.

Sök efter " hex färgpalett " eller " hex färgväljare " med din favoritwebbläsare för att hitta ett gäng alternativ!

Hexvärden börjar alltid med ett pundtecken (#), är upp till sex "siffror" långa och är skiftlägeskänsliga: det vill säga att de inte bryr sig om stora bokstäver. #FFC125 och #ffc125 har samma färg.

rgb () Notation

RGB är en additiv färgmodell som representerar färger som blandningar av rött, grönt och blått ljus. I huvudsak är RGB-representationen decimalekvivalenten för Hexadecimal Notation. I Hexadecimal varierar varje nummer från 00-FF vilket motsvarar 0-255 i decimal och 0% -100% i procent.

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

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

Syntax

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

hsl () Notation

HSL står för nyans ("vilken färg"), mättnad ("hur mycket färg") och ljushet ("hur mycket vitt").

Nyans representeras som en vinkel från 0 ° till 360 ° (utan enheter), medan mättnad och ljushet representeras som procenttal.

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

Syntax

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

anteckningar

• En mättnad på 0% ger alltid en gråskala färg; att ändra nyans har ingen effekt.

• En ljushet på 0% ger alltid svart och 100% ger alltid vitt; att ändra nyans eller mättnad har ingen effekt.

currentColor

currentColor returnerar det beräknade färgvärdet för det aktuella elementet.

Använd i samma element

Här utvärderar nuvarande färg till rött eftersom color är inställd på red :

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

I det här fallet är det troligtvis överflödigt att specificera strömfärg för gränsen eftersom utelämnande av den borde ge identiska resultat. Använd endast currentColor inuti gränseegenskapen inom samma element om det annars skulle skrivas över på grund av en mer specifik väljare.

Eftersom det är den beräknade färgen blir gränsen grön i följande exempel på grund av att den andra regeln åsidosätter den första:

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

Ärvt från förälderelementet

Förälderns färg ärvs, här utvärderar nu aktuell färg till 'blå', vilket gör barnelementets kantfärg blå.

.parent-class {
    color: blue;
}

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

currentColor kan också användas av andra regler som normalt inte skulle ärva från färgegenskapen, t.ex. bakgrundsfärg. Exemplet nedan visar barnen som använder färguppsättningen i föräldern som bakgrund:

.parent-class {
    color: blue;
}

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

Möjligt resultat:

rgba () Notation

Liknar rgb () notation , men med ett extra alfa (opacitet) värde.

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

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

Syntax

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

hsla () Notation

Liknar noteringen hsl () , men med ett tilläggs alfa (opacitet) värde.

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

Syntax

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