Ostatnia aktualizacja 4 stycznia, 2024
Dzięki zastosowaniu różnych metod definiowania kolorów, od prostych nazw kolorów po bardziej skomplikowane formaty jak RGB, HSL czy HEX, programiści mają ogromne możliwości w dostosowywaniu wyglądu stron. W niniejszym tekście przyjrzymy się bliżej tym metodom. Poniżej znajdziesz przykłady kodu, które pomogą lepiej zrozumieć, jak stosować kolory w CSS.
Kolory CSS – nazwy
CSS pozwala na definiowanie kolorów poprzez ich nazwy. Jest to najprostszy sposób, aczkolwiek ograniczony do predefiniowanych kolorów. Przykładowy kod wygląda wówczas następująco:
p {
color: blue;
}Na końcu tekstu zamieszczamy pełną listę predefiniowanych kolorów CSS.
HEX
Format heksadecymalny (HEX) pozwala na dokładne określenie koloru. Składa się z hasha (#) oraz sześciu znaków reprezentujących wartości kolorów czerwonego, zielonego i niebieskiego (RGB).
p {
color: #ff5733;
}RGB
RGB definiuje kolory poprzez podanie wartości czerwonego, zielonego i niebieskiego w skali od 0 do 255. Pozwala to na precyzyjne określenie koloru. Przykładowy kod wygląda tak:
p {
color: rgb(255, 87, 51);
}RGBA
RGBA jest rozszerzeniem RGB, gdzie “A” oznacza alfę i reprezentuje przezroczystość koloru. Przykład:
p {
color: rgba(255, 87, 51, 0.5);
}HSL
HSL (Hue, Saturation, Lightness) to kolejna metoda definiowania kolorów, która używa trzech wartości: odcienia, nasycenia i jasności. W praktyce wygląda to tak:
p {
color: hsl(11, 100%, 60%);
}HSLA
Podobnie jak RGBA, HSLA dodaje czwarty element – alfa, który reprezentuje przezroczystość.
p {
color: hsla(11, 100%, 60%, 0.5);
}Predefiniowane kolory CSS – lista
- AliceBlue
- AntiqueWhite
- Aqua
- Aquamarine
- Azure
- Beige
- Bisque
- Black
- BlanchedAlmond
- Blue
- BlueViolet
- Brown
- BurlyWood
- CadetBlue
- Chartreuse
- Chocolate
- Coral
- CornflowerBlue
- Cornsilk
- Crimson
- Cyan
- DarkBlue
- DarkCyan
- DarkGoldenRod
- DarkGray
- DarkGreen
- DarkKhaki
- DarkMagenta
- DarkOliveGreen
- DarkOrange
- DarkOrchid
- DarkRed
- DarkSalmon
- DarkSeaGreen
- DarkSlateBlue
- DarkSlateGray
- DarkTurquoise
- DarkViolet
- DeepPink
- DeepSkyBlue
- DimGray
- DodgerBlue
- FireBrick
- FloralWhite
- ForestGreen
- Fuchsia
- Gainsboro
- GhostWhite
- Gold
- GoldenRod
- Gray
- Green
- GreenYellow
- HoneyDew
- HotPink
- IndianRed
- Indigo
- Ivory
- Khaki
- Lavender
- LavenderBlush
- LawnGreen
- LemonChiffon
- LightBlue
- LightCoral
- LightCyan
- LightGoldenRodYellow
- LightGray
- LightGreen
- LightPink
- LightSalmon
- LightSeaGreen
- LightSkyBlue
- LightSlateGray
- LightSteelBlue
- LightYellow
- Lime
- LimeGreen
- Linen
- Magenta
- Maroon
- MediumAquaMarine
- MediumBlue
- MediumOrchid
- MediumPurple
- MediumSeaGreen
- MediumSlateBlue
- MediumSpringGreen
- MediumTurquoise
- MediumVioletRed
- MidnightBlue
- MintCream
- MistyRose
- Moccasin
- NavajoWhite
- Navy
- OldLace
- Olive
- OliveDrab
- Orange
- OrangeRed
- Orchid
- PaleGoldenRod
- PaleGreen
- PaleTurquoise
- PaleVioletRed
- PapayaWhip
- PeachPuff
- Peru
- Pink
- Plum
- PowderBlue
- Purple
- RebeccaPurple
- Red
- RosyBrown
- RoyalBlue
- SaddleBrown
- Salmon
- SandyBrown
- SeaGreen
- SeaShell
- Sienna
- Silver
- SkyBlue
- SlateBlue
- SlateGray
- Snow
- SpringGreen
- SteelBlue
- Tan
- Teal
- Thistle
- Tomato
- Turquoise
- Violet
- Wheat
- White
- WhiteSmoke
- Yellow
- YellowGreen
Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
