Kolory w języku HTML mogą być definiowane w różnych formatach. Oto one:
- nazwa koloru,
- heksadecymalny (HEX),
- RGB,
- RGBA,
- HSL,
- HSLA.
W tej lekcji dowiesz się, na czym polega określanie kolorów w tych formatach.
Nazwy kolorów
Najprostszym sposobem na definiowanie kolorów jest używanie nazwy koloru. HTML definiuje bardzo wiele nazw kolorów, co jest bardzo wygodnym rozwiązaniem. Nie zawsze predefiniowane kolory będą odpowiadać Twoim potrzebom, dlatego poznasz też inne sposoby definiowania kolorów.
Poniżej przedstawiam tabelę z kilkoma podstawowymi nazwami kolorów.
| Nazwa koloru | HEX | Kolor |
|---|---|---|
| Black | #000000 | |
| DimGrey | #696969 | |
| DarkGrey | #A9A9A9 | |
| Grey | #808080 | |
| LightGrey | #D3D3D3 | |
| DarkBlue | #00008B | |
| Blue | #0000FF | |
| LightBlue | #ADD8E6 | |
| DarkGreen | #006400 | |
| Green | #008000 | |
| LightGreen | #90EE90 | |
| DarkRed | #8B0000 | |
| Red | #FF0000 | |
| Pink | #FFC0CB | |
| Cyan | #00FFFF | |
| Violet | #EE82EE | |
| Yellow | #FFFF00 | |
| Orange | #FF8C00 |
Wartości RGB
Kolory RGB definiuje się za pomocą formuły rgb(czerwony, zielony, niebieski). Czerwony, zielony i niebieski jest to wartość od 0 do 255 i oznacza on nasycenie. Wartość zero oznacza brak nasycenia koloru, a wartość 255 to maksymalna wartość nasycenia.
Kilka przykładów:
- czerwony - maksymalne nasycenie czerwonego i brak nasycenia pozostałych kolorów - rgb(255, 0 ,0)
- czarny - rgb(0, 0, 0) - brak nasycenia kolorów
- biały rgb(255, 255, 255) - maksymalne nasycenie wszystkich kolorów
Wartości HEX
Wartości heksadecymalne definiowane są za pomocą formuły #rrggbb, gdzie rr gg i bb, może przyjmować wartości wartości od 00 do ff. Wartości te są to liczby podane w systemie szesnastkowym. Nie będę się szczegółowo rozpisysywał na temat systemu szesnastkowego. Napiszę tylko, że wartość 00 odpowiada wartości 0 z systemu dziesiętnego. Wartość ff odpowiada wartości 255. Kilka kolejnych przykładów powinno rozwiać dalsze wątpliwości:
| Wartość HEX | Wartość dziesiętna |
|---|---|
| 00 | 0 |
| 01 | 1 |
| 09 | 9 |
| 0a | 10 |
| 0b | 11 |
| 0c | 12 |
| 0d | 13 |
| oe | 14 |
| 0f | 15 |
| 10 | 16 |
Myślę, że szybko oswoisz się z systemem szesnastkowym, ponieważ kolory są bardzo często zapisywane w tej notacji. Dodam tylko, że nie ma znaczenia czy wartości są napisane małą czy dużą literą.
Wartości RGBA
Notacja RGBA jest bardzo zbliżona do tej z RGB. Jest ona definiowana formułą rgba(r, g, b, alfa). Pierwsze parametry niczym nie różnią się od systemu, który już poznałeś. Ostatni parametr to tak zwany kanał alfa. Określa on przezroczystość elementu. Posiada on zakres od 0.0 do 1.0. Wartość 0.0 określa całkowitą przezroczystość. Wartość 1.0 to brak przezroczystości.
Konwerter kolorów
Polecam zapoznać się z naszym narzędziem, które umożliwia konwertowanie kolorów, jak również generowanie kolorów losowych.
Otwórz konwerter kolorów