Szukaj…


Składnia

  • kolor: #rgb
  • kolor: #rrggbb
  • color: rgb [a] (<red>, <green>, <blue> [, <alpha>])
  • kolor: hsl [a] (<hue>, <nasycenie%>, <jasność%> [, <alfa>])
  • kolor: słowo kluczowe / * zielony, niebieski, żółty, pomarańczowy, czerwony, itd. * /

Kolor Słowa kluczowe

Większość przeglądarek obsługuje używanie słów kluczowych koloru w celu określenia koloru. Na przykład, aby ustawić color elementu na niebieski, użyj blue słowa kluczowego:

.some-class {
    color: blue;
}

W słowach kluczowych CSS nie jest rozróżniana #0000FF liter - blue , Blue i BLUE spowodują #0000FF .

Kolor Słowa kluczowe

Nazwa koloru Wartość szesnastkowa Wartości RGB Kolor
AliceBlue # F0F8FF rgb (240,248,255) AliceBlue
Antyczna biel # FAEBD7 rgb (250,235,215) Antyczna biel
wodny # 00FFFF rgb (0,255,255) wodny
Akwamaryn # 7FFFD4 rgb (127.225.212) Akwamaryn
Lazur # F0FFFF rgb (240,255,255) Lazur
Beżowy # F5F5DC rgb (245,245,220) Beżowy
For # FFE4C4 rgb (255,228,196) For
czarny # 000000 rgb (0,0,0) czarny
BlanchedAlmond #FFEBCD rgb (255,235,205) BlanchedAlmond
niebieski # 0000FF rgb (0,0,255) niebieski
BlueViolet # 8A2BE2 rgb (138,43,226) BlueViolet
brązowy # A52A2A rgb (165 42,42) brązowy
BurlyWood # DEB887 rgb (222,184,135) BurlyWood
CadetBlue # 5F9EA0 rgb (95158,160) CadetBlue
Chartreuse # 7FFF00 rgb (127,255,0) Chartreuse
Czekolada # D2691E rgb (210,105,30) Czekolada
Koral # FF7F50 rgb (255,127,80) Koral
Chabrowy # 6495ED rgb (100 149 237) Chabrowy
Kukurydza # FFF8DC rgb (255,248,220) Kukurydza
Karmazynowy # DC143C rgb (220,20,60) Karmazynowy
Cyjan # 00FFFF rgb (0,255,255) Cyjan
Ciemny niebieski # 00008B rgb (0,0,139) Ciemny niebieski
DarkCyan # 008B8B rgb (0,139,139) DarkCyan
DarkGoldenRod # B8860B rgb (184,134,11) DarkGoldenRod
Ciemny szary # A9A9A9 rgb (169,169,169) Ciemny szary
Ciemno szary # A9A9A9 rgb (169,169,169) Ciemno szary
Ciemnozielony # 006400 rgb (0,100,0) Ciemnozielony
DarkKhaki # BDB76B rgb (189,183,107) DarkKhaki
DarkMagenta # 8B008B rgb (139,0,139) DarkMagenta
DarkOliveGreen # 556B2F rgb (85,107,47) DarkOliveGreen
Ciemna pomarańcza # FF8C00 rgb (255,140,0) Ciemna pomarańcza
DarkOrchid # 9932CC rgb (153,50,204) DarkOrchid
Ciemno czerwony # 8B0000 rgb (139,0,0) Ciemno czerwony
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
Głęboki róż # FF1493 rgb (255,20,147) Głęboki róż
DeepSkyBlue # 00BFFF rgb (0,191,255) DeepSkyBlue
DimGray # 696969 rgb (105, 105, 105) DimGray
DimGrey # 696969 rgb (105, 105, 105) DimGrey
DodgerBlue # 1E90FF rgb (30144,255) DodgerBlue
FireBrick # B22222 rgb (178,34,34) FireBrick
FloralWhite # FFFAF0 rgb (255,250,240) FloralWhite
Zielony las # 228B22 rgb (34, 139,34) Zielony las
Fuksja # FF00FF rgb (255,0,255) Fuksja
Gainsboro #DCDCDC rgb (220,220,220) Gainsboro
GhostWhite # F8F8FF rgb (248,248,255) GhostWhite
Złoto # FFD700 rgb (255,215,0) Złoto
GoldenRod # DAA520 rgb (218,165,32) GoldenRod
Szary # 808080 rgb (128, 128, 128) Szary
Szary # 808080 rgb (128, 128, 128) Szary
Zielony # 008000 rgb (0,128,0) Zielony
Zielony żółty # ADFF2F rgb (173,255,47) Zielony żółty
HoneyDew # F0FFF0 rgb (240,255,240) HoneyDew
Gorący róż # FF69B4 rgb (255,105,180) Gorący róż
IndianRed # CD5C5C rgb (205,92,92) IndianRed
Indygo # 4B0082 rgb (75.030) Indygo
kość słoniowa # FFFFF0 rgb (255,255,240) kość słoniowa
Khaki # F0E68C rgb (240,230,140) Khaki
Lawenda # E6E6FA rgb (230,230,250) Lawenda
Lawenda Rumieniec # FFF0F5 rgb (255,240,245) Lawenda Rumieniec
LawnGreen # 7CFC00 rgb (124, 252,0) LawnGreen
LemonChiffon #FFFACD rgb (255,250,205) LemonChiffon
Jasny niebieski # ADD8E6 rgb (173,216,230) Jasny niebieski
LightCoral # F08080 rgb (240,128,128) LightCoral
LightCyan # E0FFFF rgb (224,255,255) LightCyan
LightGoldenRodYellow # FAFAD2 rgb (250,250,210) LightGoldenRodYellow
Jasny szary # D3D3D3 rgb (211,211,211) Jasny szary
Jasnoszary # D3D3D3 rgb (211,211,211) Jasnoszary
Jasnozielony # 90EE90 rgb (144 238,144) Jasnozielony
Jasnoróżowy # FFB6C1 rgb (255,182,193) Jasnoróżowy
LightSalmon # FFA07A rgb (255,160,122) LightSalmon
LightSeaGreen # 20B2AA rgb (32.178.170) LightSeaGreen
LightSkyBlue # 87CEFA rgb (135.206.250) LightSkyBlue
LightSlateGray # 778899 rgb (119136,153) LightSlateGray
LightSlateGrey # 778899 rgb (119136,153) LightSlateGrey
LightSteelBlue # B0C4DE rgb (176 196 222) LightSteelBlue
Jasny zółty # FFFFE0 rgb (255,255,224) Jasny zółty
Limonka # 00FF00 rgb (0,255,0) Limonka
Limonkowy # 32CD32 rgb (50,205,50) Limonkowy
Bielizna # FAF0E6 rgb (250,240,230) Bielizna
Magenta # FF00FF rgb (255,0,255) Magenta
Kasztanowaty # 800000 rgb (128,0,0) Kasztanowaty
MediumAquaMarine # 66CDAA rgb (102.205.170) MediumAquaMarine
Średni niebieski # 0000CD rgb (0,0,205) Średni niebieski
MediumOrchid # BA55D3 rgb (186,85,211) MediumOrchid
MediumPurple # 9370DB rgb (147.112.219) MediumPurple
MediumSeaGreen # 3CB371 rgb (60179,113) MediumSeaGreen
MediumSlateBlue # 7B68EE rgb (123,104,238) MediumSlateBlue
MediumSpringGreen # 00FA9A rgb (0,250,154) MediumSpringGreen
Średni turkus # 48D1CC rgb (72.209.204) Średni turkus
MediumVioletRed # C71585 rgb (199,21,133) Średni turkus
Niebieska północ # 191970 rgb (25 255,112) Niebieska północ
MintCream # F5FFFA rgb (245,255,250) MintCream
MistyRose # FFE4E1 rgb (255,228,225) MistyRose
Mokasyn # FFE4B5 rgb (255,228,181) Mokasyn
NavajoWhite #FFDEAD rgb (255,222,173) NavajoWhite
Marynarka wojenna # 000080 rgb (0,0,128) Marynarka wojenna
OldLace # FDF5E6 rgb (253,245,230) OldLace
Oliwa # 808000 rgb (128,128,0) Oliwa
OliveDrab # 6B8E23 rgb (107,142,35) OliveDrab
Pomarańczowy # FFA500 rgb (255,165,0) Pomarańczowy
Pomarańczowy czerwony # FF4500 rgb (255,69,0) Pomarańczowy czerwony
Orchidea # DA70D6 rgb (218,112,214) Orchidea
PaleGoldenRod # EEE8AA rgb (238,232,170) PaleGoldenRod
Bladozielony # 98FB98 rgb (152.251.152) Bladozielony
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
Różowy # FFC0CB rgb (255,192,203) Różowy
Śliwka # DDA0DD rgb (221,160,221) Śliwka
PowderBlue # B0E0E6 rgb (176,224,230) PowderBlue
Fioletowy # 800080 rgb (128,0,128) Fioletowy
RebeccaPurple # 663399 rgb (102,51,153) RebeccaPurple
Czerwony # FF0000 rgb (255,0,0) Czerwony
RosyBrown # BC8F8F rgb (188,143,143) RosyBrown
Królewski niebieski # 4169E1 rgb (65.125.225) Królewski niebieski
SaddleBrown # 8B4513 rgb (139,69,19) SaddleBrown
łosoś # FA8072 rgb (250,128,114) łosoś
SandyBrown # F4A460 rgb (244,164,96) SandyBrown
Zielone morze # 2E8B57 rgb (46,139,87) Zielone morze
Muszla # FFF5EE rgb (255,245,238) Muszla
Sjena # A0522D rgb (160,82,45) Sjena
Srebro # C0C0C0 rgb (192,192,192) Srebro
Niebieskie niebo # 87CEEB rgb (135.206.235) Niebieskie niebo
Odcień niebieskiego # 6A5ACD rgb (106,90,205) Odcień niebieskiego
Popielaty # 708090 rgb (112.128.144) Popielaty
SlateGrey # 708090 rgb (112.128.144) SlateGrey
Śnieg #FFFAFA rgb (255,250,250) Śnieg
Wiosenna zieleń # 00FF7F rgb (0,255,127) Wiosenna zieleń
Stalowo - niebieski # 4682B4 rgb (70,130,180) Stalowo - niebieski
Dębnik # D2B48C rgb (210,180,140) dębnik
Cyraneczka # 008080 rgb (0,128,128) Cyraneczka
Oset # D8BFD8 rgb (216,191,216) Oset
Pomidor # FF6347 rgb (255,99,71) Pomidor
Turkus # 40E0D0 rgb (64.224.208) Turkus
Fioletowy # EE82EE rgb (238,130,238) Fioletowy
Pszenica # F5DEB3 rgb (245,222,179) Pszenica
Biały #FFFFFF rgb (255,255,255) Biały
Biały dym # F5F5F5 rgb (245,245,245) Biały dym
Żółty # FFFF00 rgb (255,255,0) Żółty
Żółty zielony # 9ACD32 rgb (154, 205,50) Żółty zielony

Oprócz nazwanych kolorów istnieje również słowo kluczowe transparent , które reprezentuje w pełni przezroczysty czarny: rgba(0,0,0,0)


Wartość szesnastkowa

tło

Kolory CSS mogą być również reprezentowane jako trójka heksadecymalna, w której elementy reprezentują składową koloru czerwonego, zielonego i niebieskiego. Każda z tych wartości reprezentuje liczbę z zakresu od 00 do FF lub od 0 do 255 w zapisie dziesiętnym. Wielkie i / lub małe wartości szesnastkowym mogą być wykorzystane (tj #3fc = #3FC = #33ffCC ). Przeglądarka interpretuje #369 jako #336699 . Jeśli to nie jest to, co zamierzałeś, a raczej chciałeś #306090 , musisz to wyraźnie określić.

Łączna liczba kolorów, które można przedstawić za pomocą zapisu szesnastkowego, to 256 ^ 3 lub 16 777 216.

Składnia

color: #rrggbb;
color: #rgb
Wartość Opis
rr 00 - FF dla ilości czerwieni
gg 00 - FF dla ilości zieleni
bb 00 - FF dla ilości niebieskiego
.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;
}

Notacja szesnastkowa służy do określania wartości kolorów w formacie kolorów RGB, zgodnie z „Numerycznymi wartościami kolorów” W3C .

W Internecie dostępnych jest wiele narzędzi do wyszukiwania szesnastkowych (lub po prostu szesnastkowych) wartości kolorów.

Wyszukaj „ paletę kolorów heksadecymalnych ” lub „ próbnik kolorów heksadecymalnych ” w swojej ulubionej przeglądarce, aby znaleźć wiele opcji!

Wartości szesnastkowe zawsze zaczynają się od znaku funta (#), mają do sześciu „cyfr” i nie rozróżniają wielkości liter: to znaczy, nie dbają o wielkie litery. #FFC125 i #ffc125 są tego samego koloru.

Notacja rgb ()

RGB to addytywny model kolorów, który reprezentuje kolory jako mieszankę światła czerwonego, zielonego i niebieskiego. Zasadniczo reprezentacja RGB jest dziesiętnym odpowiednikiem notacji szesnastkowej. W systemie szesnastkowym każda liczba zawiera się w przedziale od 00-FF, co odpowiada 0-255 w systemie dziesiętnym i 0% -100% w procentach.

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

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

Składnia

rgb(<red>, <green>, <blue>)
Wartość Opis
<red> liczba całkowita od 0 do 255 lub procent od 0 do 100%
<green> liczba całkowita od 0 do 255 lub procent od 0 do 100%
<blue> liczba całkowita od 0 do 255 lub procent od 0 do 100%

Notacja hsl ()

HSL oznacza odcień („jaki kolor”), nasycenie („ile koloru”) i jasność („ile bieli”).

Barwa jest reprezentowana jako kąt od 0 ° do 360 ° (bez jednostek), podczas gdy nasycenie i jasność są reprezentowane jako wartości procentowe.

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

Koło kolorów HSL

Składnia

color: hsl(<hue>, <saturation>%, <lightness>%);
Wartość Opis
<hue> podany w stopniach wokół koła kolorów (bez jednostek), gdzie 0 ° to czerwony, 60 ° to żółty, 120 ° to zielony, 180 ° to niebieski, 240 ° to niebieski, 300 ° to purpurowy, a 360 ° to czerwony
<saturation> określone w procentach, w których 0% jest w pełni desaturowane (skala szarości), a 100% jest w pełni nasycone (żywe kolory)
<lightness> określone w procentach, gdzie 0% jest całkowicie czarne, a 100% jest całkowicie białe

Notatki

  • Nasycenie 0% zawsze daje kolor w skali szarości; zmiana odcienia nie ma wpływu.

  • Lekkość 0% zawsze daje czerń, a 100% zawsze daje biel; zmiana odcienia lub nasycenia nie ma wpływu.

currentColor

currentColor zwraca obliczoną wartość koloru bieżącego elementu.

Użyj w tym samym elemencie

Tutaj currentColor zmienia się na czerwony, ponieważ właściwość color jest ustawiona na red :

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

W takim przypadku określenie currentColor dla ramki jest najprawdopodobniej zbędne, ponieważ pominięcie go powinno dać identyczne wyniki. Używaj currentColor wewnątrz właściwości border w tym samym elemencie, jeśli zostałby nadpisany w inny sposób z powodu bardziej szczegółowego selektora.

Ponieważ jest to obliczony kolor, w poniższym przykładzie ramka będzie zielona, ponieważ druga reguła zastępuje pierwszą:

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

Dziedziczony z elementu nadrzędnego

Kolor rodzica jest dziedziczony, tutaj currentColor ma wartość „niebieski”, dzięki czemu kolor elementu potomnego jest niebieski.

.parent-class {
    color: blue;
}

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

currentColor może być również używany przez inne reguły, które normalnie nie dziedziczyłyby po właściwości color, takie jak kolor tła. Poniższy przykład pokazuje dzieci korzystające z tła ustawionego w rodzicu jako tła:

.parent-class {
    color: blue;
}

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

Możliwy wynik:

wprowadź opis zdjęcia tutaj

Notacja rgba ()

Podobne do zapisu rgb () , ale z dodatkową wartością alfa (krycie).

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

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

Składnia

rgba(<red>, <green>, <blue>, <alpha>);
Wartość Opis
<red> liczba całkowita od 0 do 255 lub procent od 0 do 100%
<green> liczba całkowita od 0 do 255 lub procent od 0 do 100%
<blue> liczba całkowita od 0 do 255 lub procent od 0 do 100%
<alpha> liczba od 0 do 1, gdzie 0,0 jest w pełni przezroczysty, a 1,0 jest całkowicie nieprzezroczysty

Notacja hsla ()

Podobny do zapisu hsl () , ale z dodaną wartością alfa (krycie).

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

Składnia

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);
Wartość Opis
<hue> podany w stopniach wokół koła kolorów (bez jednostek), gdzie 0 ° to czerwony, 60 ° to żółty, 120 ° to zielony, 180 ° to niebieski, 240 ° to niebieski, 300 ° to purpurowy, a 360 ° to czerwony
<saturation> procent, w którym 0% jest w pełni desaturowane (skala szarości), a 100% jest w pełni nasycone (żywe kolory)
<lightness> procent, w którym 0% jest całkowicie czarne, a 100% jest całkowicie białe
<alpha> liczba od 0 do 1, gdzie 0 jest całkowicie przezroczyste, a 1 jest całkowicie nieprzezroczyste


Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow