CSS
Zabarwienie

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

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

.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>)

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

Składnia

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

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:

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>);

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>);