Sök…


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

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
Värde Beskrivning
rr 00 - FF för mängden röd
gg 00 - FF för mängden grönt
bb 00 - FF för mängden blå
.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>)
Värde Beskrivning
<red> ett heltal från 0 - 255 eller procent från 0 - 100%
<green> ett heltal från 0 - 255 eller procent från 0 - 100%
<blue> ett heltal från 0 - 255 eller procent från 0 - 100%

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 */
}

HSL-färghjulet

Syntax

color: hsl(<hue>, <saturation>%, <lightness>%);
Värde Beskrivning
<hue> anges i grader runt färghjulet (utan enheter), där 0 ° är rött, 60 ° är gult, 120 ° är grönt, 180 ° är cyan, 240 ° är blått, 300 ° är magenta och 360 ° är rött
<saturation> anges i procent där 0% är fullständigt avmättad (gråskala) och 100% är fullmättad (levande färgad)
<lightness> anges i procent där 0% är helt svart och 100% är helt vit

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:

ange bildbeskrivning här

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>);
Värde Beskrivning
<red> ett heltal från 0 - 255 eller procent från 0 - 100%
<green> ett heltal från 0 - 255 eller procent från 0 - 100%
<blue> ett heltal från 0 - 255 eller procent från 0 - 100%
<alpha> ett tal från 0 - 1, där 0,0 är helt transparent och 1.0 är helt ogenomskinligt

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>);
Värde Beskrivning
<hue> anges i grader runt färghjulet (utan enheter), där 0 ° är rött, 60 ° är gult, 120 ° är grönt, 180 ° är cyan, 240 ° är blått, 300 ° är magenta och 360 ° är rött
<saturation> procent där 0% är helt avmättat (gråskala) och 100% är helt mättat (levande färgad)
<lightness> procent där 0% är helt svart och 100% är helt vit
<alpha> ett tal från 0 - 1 där 0 är helt transparent och 1 är helt ogenomskinligt


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow