Samouczek dotyczący kolorów
Wyświetlane są kolory łączące światło CZERWONE, ZIELONE i NIEBIESKIE.
Nazwy kolorów
W CSS kolory można ustawić za pomocą nazw kolorów:
Przykład
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
Wartości kolorów CSS
W CSS kolory można określać na różne sposoby:
- Według nazw kolorów
- Jako wartości RGB
- Jako wartości szesnastkowe
- Jako wartości HSL (CSS3)
- Jako wartości HWB (CSS4)
- ze
currentcolorsłowem kluczowym
Kolory RGB
Wartości kolorów RGB są obsługiwane we wszystkich przeglądarkach.
Wartość koloru RGB jest określona za pomocą: rgb( CZERWONY , ZIELONY , NIEBIESKI ).
Każdy parametr określa intensywność koloru jako liczbę całkowitą z przedziału od 0 do 255.
Na przykład rgb(0,0,255) jest renderowany jako niebieski, ponieważ niebieski parametr jest ustawiony na najwyższą wartość (255), a pozostałe są ustawione na 0.
Przykład
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
Odcienie szarości są często definiowane przy użyciu równych wartości dla wszystkich 3 źródeł światła:
Przykład
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Kolory szesnastkowe
Szesnastkowe wartości kolorów są również obsługiwane we wszystkich przeglądarkach.
Kolor szesnastkowy jest określony za pomocą: # RR GG BB .
RR (czerwony), GG (zielony) i BB (niebieski) to szesnastkowe liczby całkowite z zakresu od 00 do FF określające intensywność koloru.
Na przykład #0000FF jest wyświetlany jako niebieski, ponieważ niebieski składnik jest ustawiony na najwyższą wartość (FF), a pozostałe są ustawione na 00.
Przykład
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Odcienie szarości są często definiowane przy użyciu równych wartości dla wszystkich 3 źródeł światła:
Przykład
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
Wielkie czy małe litery?
Do określania wartości szesnastkowych można używać wielkich lub małych liter.
Małe litery są łatwiejsze do pisania. Wielkie litery są łatwiejsze do odczytania.
Nazwy kolorów
CSS obsługuje 140 standardowych nazw kolorów.
W następnym rozdziale znajdziesz pełną alfabetyczną listę nazw kolorów z wartościami szesnastkowymi:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Słowo kluczowe currentcolor
Słowo currentcolorkluczowe odnosi się do wartości właściwości koloru elementu.
Przykład
Kolor obramowania następującego elementu <div> będzie niebieski, ponieważ kolor tekstu elementu <div> jest niebieski:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}