Kolory

kolor tekstu
color: kod-koloru
style="color: kod-koloru"

kolor tła
background-color: kod-koloru
style="background-color: kod-koloru"

nazwy kolorów
white - biały
black - czarny
yellow - zółty
orange - pomarańczowy
red - czerwony

kody szesnastkowe
Zapis heksadecymalny (ang. hex triplet) składa się z sześciu cyfr szesnastkowych (trzech bajtów).
Zgodnie z modelem RGB (ang. red, green, blue) bajty odpowiadają kolejno za barwę czerwoną, zieloną i niebieską.
Każdy bajt może przyjąć wartość od 00 (0) do FF (255), co oznacza, odpowiednio, najmniejszą i największą intensywność danej barwy.
W tym systemie można zapisać 256 × 256 × 256 = 16777216 różnych kolorów.
#FFFFFF - biały
#000000 - czarny
#FF0000 - czerwony
#008000 - zielony
#0000FF - niebieski

wartości RGB
rgb(R,G,B)
R,G,B to liczby z przedziału od 0 do 255 oznaczają nasycenie barwy składowej:
R - czerwonej
G - zielonej
B - niebieskiej
rgb(255,255,255) - biały
rgb(0,0,0) - czerny
rgb(255,0,0) - czerwony
rgb(0,255,0) - zielony
rgb(0,0,255) - niebieski

przykłady użycia kolorów
<h3 style="color: orange">pomarańczowy tekst</h3>
<h3 style="background: yellow">żółte tło</h3>
<h3 style="color: green; background-color: yellow">zielony tekst na zółtym tle</h3>
<h3 style="color: rgb(255,0,0)">czerwony tekst</h3>
<h3 style="color: rgb(0,255,0)">zielony tekst</h3>
<h3 style="color: rgb(0,0,255)">niebieski tekst</h3>
wynik kodu

pomarańczowy tekst

żółte tło

zielony tekst na zółtym tle

czerwony tekst

zielony tekst

niebieski tekst



wybrane kolory:
White
#FFFFFF
rgb(255,255,255)
AntiqueWhite
#FAEBD7
rgb(250,235,215)
silver
#C0C0C0
rgb(192,192,192)
LightGrey
#D3D3D3
rgb(211,211,211)
DarkGray
#A9A9A9
rgb(169,169,169)
Gray
#808080
rgb(128,128,128)
LightSlateGray
#778899
rgb(119,136,153)
SlateGray
#708090
rgb(112,128,144)
DarkSlateGray
#2F4F4F
rgb(47,79,79)
Black
#000000
rgb(0,0,0)
LightYellow
#FFFFE0
rgb(255,255,224)
Yellow
#FFFF00
rgb(255,255,0)
gold
#FFD700
rgb(255,215,0)
Orange
#FFA500
rgb(255,165,0)
DarkOrange
#FF8C00
rgb(255,140,0)
OrangeRed
#FF4500
rgb(255,69,0)
Red
#FF0000
rgb(255,0,0)
FireBrick
#B22222
rgb(178,34,34)
DarkRed
#8B0000
rgb(139,0,0)
Pink
#FFC0CB
rgb(255,192,203)
LightPink
#FFB6C1
rgb(255,182,193)
HotPink
#FF69B4
rgb(255,105,180)
DeepPink
#FF1493
rgb(255,20,147)
Brown
#A52A2A
rgb(165,42,42)
Maroon
#800000
rgb(128,0,0)
LightBlue
#ADD8E6
rgb(173,216,230)
SkyBlue
#87CEEB
rgb(135,206,235)
LightSkyBlue
#87CEFA
rgb(135,206,250)
DeepSkyBlue
#00BFFF
rgb(0,191,255)
DodgerBlue
#1E90FF
rgb(30,144,255)
RoyalBlue
#4169E1
rgb(65,105,225)
Blue
#0000FF
rgb(0,0,255)
MediumBlue
#0000CD
rgb(0,0,205)
DarkBlue
#00008B
rgb(0,0,139)
Navy
#000080
rgb(0,0,128)
LightGreen
#90EE90
rgb(144,238,144)
Green
#008000
rgb(0,128,0)
DarkGreen
#006400
rgb(0,100,0)


Nieprzezroczystość

opacity - nieprzezroczystość elementu oraz jego elementów potomnych o zakresie od 0.0 do 1.0
wartość alfa: 0.05 - element jest w 5% nieprzezroczysty
0.1 - element jest w 10% nieprzezroczysty
0.15 - element jest w 15% nieprzezroczysty
0.5 - element jest w 50% nieprzezroczysty
itd.

<p style="background-color: rgb(0,0,0); opacity: 0.25;">nieprzezroczystość tła na poziomie 25%</p>
<p style="background-color: rgb(0,0,0); opacity: 0.5;">nieprzezroczystość tła na poziomie 50%</p>
<p style="background-color: rgb(0,0,0); opacity: 0.75;">nieprzezroczystość tła na poziomie 75%</p>

wynik kodu

nieprzezroczystość tła na poziomie 25%

nieprzezroczystość tła na poziomie 50%

nieprzezroczystość tła na poziomie 75%


rgba - trzy pierwsze wartości to kolor, czwarta wartość takzwana alfa to nieprzezroczystość danego elementu i tylko jego bez elementów potomnych
(jej dopuszczalny zakres wynosi od 0.0 do 1.0)
wartość alfa: 0.05 - element jest w 5% nieprzezroczysty
0.1 - element jest w 10% nieprzezroczysty
0.15 - element jest w 15% nieprzezroczysty
0.5 - element jest w 50% nieprzezroczysty
itd.

to jest źle zapisane
<p style="background-color: rgb(0,0,0,0.25); opacity: 0.25;">nieprzezroczystość tła na poziomie 25%</p>
<p style="background-color: rgb(0,0,0,0.5); opacity: 0.5;">nieprzezroczystość tła na poziomie 50%</p>
<p style="background-color: rgb(0,0,0,0.75); opacity: 0.75;">nieprzezroczystość tła na poziomie 75%</p>

wynik kodu

nieprzezroczystość tła na poziomie 25%

nieprzezroczystość tła na poziomie 50%

nieprzezroczystość tła na poziomie 75%


to jest dobrze zapisane
<p style="background-color: rgba(0,0,0,0.25);">nieprzezroczystość tła na poziomie 25%</p>
<p style="background-color: rgba(0,0,0,0.5);">nieprzezroczystość tła na poziomie 50%</p>
<p style="background-color: rgba(0,0,0,0.75);">nieprzezroczystość tła na poziomie 75%</p>

wynik kodu

nieprzezroczystość tła na poziomie 25%

nieprzezroczystość tła na poziomie 50%

nieprzezroczystość tła na poziomie 75%



Kolory HSL


hsl - odcień, nasycenie, jasność
hsla - odcień, nasycenie, jasność, wartość alfa

odcień (kolor) - jest reprezentowany przy użyciu koła, w którym kąt określa kolor w przedziale wartości od 0 do 360

nasycenie - to ilość szarości w kolorze wyrażana w procentach:
    100% - pełne nasycenie koloru
    0% - odcień szarości

jasność (ang. lightness) - określa ilość bieli (jasność) lub czerni (ciemność), jest ona wyrażona w formie wartości procentowej
    0% - kolor czarny
    50% - normalny kolor
    100% - kolor biały

wartość alfa to nieprzezroczystość danego elementu i tylko jego bez elementów potomnych
(jej dopuszczalny zakres wynosi od 0.0 do 1.0)
wartość alfa: 0.05 - element jest w 5% nieprzezroczysty
0.1 - element jest w 10% nieprzezroczysty
0.15 - element jest w 15% nieprzezroczysty
0.5 - element jest w 50% nieprzezroczysty
itd.


tabela kolorów hsl
hsl(0,0%,10% hsl(0,0%,25%) hsl(0,0%,50%) hsl(0,0%,75%) hsl(0,0%,95%)
hsl(0,25%,10%) hsl(0,25%,25%) hsl(0,25%,50%) hsl(0,25%,75%) hsl(0,25%,95%)
hsl(0,50%,10%) hsl(0,50%,25%) hsl(0,50%,50%) hsl(0,50%,75%) hsl(0,50%,95%)
hsl(0,75%,10%) hsl(0,75%,25%) hsl(0,75%,50%) hsl(0,75%,75%) hsl(0,75%,95%)
hsl(0,100%,10%) hsl(0,100%,25%) hsl(0,100%,50%) hsl(0,100%,75%) hsl(0,100%,95%)
hsl(30,0%,10%) hsl(30,0%,25%) hsl(30,0%,50%) hsl(30,0%,75%) hsl(30,0%,95%)
hsl(30,25%,10%) hsl(30,25%,25%) hsl(30,25%,50%) hsl(30,25%,75%) hsl(30,25%,95%)
hsl(30,50%,10%) hsl(30,50%,25%) hsl(30,50%,50%) hsl(30,50%,75%) hsl(30,50%,95%)
hsl(30,75%,10%) hsl(30,75%,25%) hsl(30,75%,50%) hsl(30,75%,75%) hsl(30,75%,95%)
hsl(30,100%,10%) hsl(30,100%,25%) hsl(30,100%,50%) hsl(30,100%,75%) hsl(30,100%,95%)
hsl(60,0%,10%) hsl(60,0%,25%) hsl(60,0%,50%) hsl(60,0%,75%) hsl(60,0%,95%)
hsl(60,25%,10%) hsl(60,25%,25%) hsl(60,25%,50%) hsl(60,25%,75%) hsl(60,25%,95%)
hsl(60,50%,10%) hsl(60,50%,25%) hsl(60,50%,50%) hsl(60,50%,75%) hsl(60,50%,95%)
hsl(60,75%,10%) hsl(60,75%,25%) hsl(60,75%,50%) hsl(60,75%,75%) hsl(60,75%,95%)
hsl(60,100%,10%) hsl(60,100%,25%) hsl(60,100%,50%) hsl(60,100%,75%) hsl(60,100%,95%)
hsl(90,0%,10%) hsl(90,0%,25%) hsl(90,0%,50%) hsl(90,0%,75%) hsl(90,0%,95%)
hsl(90,25%,10%) hsl(90,25%,25%) hsl(90,25%,50%) hsl(90,25%,75%) hsl(90,25%,95%)
hsl(90,50%,10%) hsl(90,50%,25%) hsl(90,50%,50%) hsl(90,50%,75%) hsl(90,50%,95%)
hsl(90,75%,10%) hsl(90,75%,25%) hsl(90,75%,50%) hsl(90,75%,75%) hsl(90,75%,95%)
hsl(90,100%,10%) hsl(90,100%,25%) hsl(90,100%,50%) hsl(90,100%,75%) hsl(90,100%,95%)
hsl(120,0%,10%) hsl(120,0%,25%) hsl(120,0%,50%) hsl(120,0%,75%) hsl(120,0%,95%)
hsl(120,25%,10%) hsl(120,25%,25%) hsl(120,25%,50%) hsl(120,25%,75%) hsl(120,25%,95%)
hsl(120,50%,10%) hsl(120,50%,25%) hsl(120,50%,50%) hsl(120,50%,75%) hsl(120,50%,95%)
hsl(120,75%,10%) hsl(120,75%,25%) hsl(120,75%,50%) hsl(120,75%,75%) hsl(120,75%,95%)
hsl(120,100%,10%) hsl(120,100%,25%) hsl(120,100%,50%) hsl(120,100%,75%) hsl(120,100%,95%)
hsl(150,0%,10%) hsl(150,0%,25%) hsl(150,0%,50%) hsl(150,0%,75%) hsl(150,0%,95%)
hsl(150,25%,10%) hsl(150,25%,25%) hsl(150,25%,50%) hsl(150,25%,75%) hsl(150,25%,95%)
hsl(150,50%,10%) hsl(150,50%,25%) hsl(150,50%,50%) hsl(150,50%,75%) hsl(150,50%,95%)
hsl(150,75%,10%) hsl(150,75%,25%) hsl(150,75%,50%) hsl(150,75%,75%) hsl(150,75%,95%)
hsl(150,100%,10%) hsl(150,100%,25%) hsl(150,100%,50%) hsl(150,100%,75%) hsl(150,100%,95%)
hsl(180,0%,10%) hsl(180,0%,25%) hsl(180,0%,50%) hsl(180,0%,75%) hsl(180,0%,95%)
hsl(180,25%,10%) hsl(180,25%,25%) hsl(180,25%,50%) hsl(180,25%,75%) hsl(180,25%,95%)
hsl(180,50%,10%) hsl(180,50%,25%) hsl(180,50%,50%) hsl(180,50%,75%) hsl(180,50%,95%)
hsl(180,75%,10%) hsl(180,75%,25%) hsl(180,75%,50%) hsl(180,75%,75%) hsl(180,75%,95%)
hsl(180,100%,10%) hsl(180,100%,25%) hsl(180,100%,50%) hsl(180,100%,75%) hsl(180,100%,95%)
hsl(210,0%,10%) hsl(210,0%,25%) hsl(210,0%,50%) hsl(210,0%,75%) hsl(210,0%,95%)
hsl(210,25%,10%) hsl(210,25%,25%) hsl(210,25%,50%) hsl(210,25%,75%) hsl(210,25%,95%)
hsl(210,50%,10%) hsl(210,50%,25%) hsl(210,50%,50%) hsl(210,50%,75%) hsl(210,50%,95%)
hsl(210,75%,10%) hsl(210,75%,25%) hsl(210,75%,50%) hsl(210,75%,75%) hsl(210,75%,95%)
hsl(210,100%,10%) hsl(210,100%,25%) hsl(210,100%,50%) hsl(210,100%,75%) hsl(210,100%,95%)
hsl(240,0%,10%) hsl(240,0%,25%) hsl(240,0%,50%) hsl(240,0%,75%) hsl(240,0%,95%)
hsl(240,25%,10%) hsl(240,25%,25%) hsl(240,25%,50%) hsl(240,25%,75%) hsl(240,25%,95%)
hsl(240,50%,10%) hsl(240,50%,25%) hsl(240,50%,50%) hsl(240,50%,75%) hsl(240,50%,95%)
hsl(240,75%,10%) hsl(240,75%,25%) hsl(240,75%,50%) hsl(240,75%,75%) hsl(240,75%,95%)
hsl(240,100%,10%) hsl(240,100%,25%) hsl(240,100%,50%) hsl(240,100%,75%) hsl(240,100%,95%)
hsl(270,0%,10%) hsl(270,0%,25%) hsl(270,0%,50%) hsl(270,0%,75%) hsl(270,0%,95%)
hsl(270,25%,10%) hsl(270,25%,25%) hsl(270,25%,50%) hsl(270,25%,75%) hsl(270,25%,95%)
hsl(270,50%,10%) hsl(270,50%,25%) hsl(270,50%,50%) hsl(270,50%,75%) hsl(270,50%,95%)
hsl(270,75%,10%) hsl(270,75%,25%) hsl(270,75%,50%) hsl(270,75%,75%) hsl(270,75%,95%)
hsl(270,100%,10%) hsl(270,100%,25%) hsl(270,100%,50%) hsl(270,100%,75%) hsl(270,100%,95%)
hsl(300,0%,10%) hsl(300,0%,25%) hsl(300,0%,50%) hsl(300,0%,75%) hsl(300,0%,95%)
hsl(300,25%,10%) hsl(300,25%,25%) hsl(300,25%,50%) hsl(300,25%,75%) hsl(300,25%,95%)
hsl(300,50%,10%) hsl(300,50%,25%) hsl(300,50%,50%) hsl(300,50%,75%) hsl(300,50%,95%)
hsl(300,75%,10%) hsl(300,75%,25%) hsl(300,75%,50%) hsl(300,75%,75%) hsl(300,75%,95%)
hsl(300,100%,10%) hsl(300,100%,25%) hsl(300,100%,50%) hsl(300,100%,75%) hsl(300,100%,95%)
hsl(330,0%,10%) hsl(330,0%,25%) hsl(330,0%,50%) hsl(330,0%,75%) hsl(330,0%,95%)
hsl(330,25%,10%) hsl(330,25%,25%) hsl(330,25%,50%) hsl(330,25%,75%) hsl(330,25%,95%)
hsl(330,50%,10%) hsl(330,50%,25%) hsl(330,50%,50%) hsl(330,50%,75%) hsl(330,50%,95%)
hsl(330,75%,10%) hsl(330,75%,25%) hsl(330,75%,50%) hsl(330,75%,75%) hsl(330,75%,95%)
hsl(330,100%,10%) hsl(330,100%,25%) hsl(330,100%,50%) hsl(330,100%,75%) hsl(330,100%,95%)
hsl(360,0%,10%) hsl(360,0%,25%) hsl(360,0%,50%) hsl(360,0%,75%) hsl(360,0%,95%
hsl(360,25%,10%) hsl(360,25%,25%) hsl(360,25%,50%) hsl(360,25%,75%) hsl(360,25%,95%)
hsl(360,50%,10%) hsl(360,50%,25%) hsl(360,50%,50%) hsl(360,50%,75%) hsl(360,50%,95%)
hsl(360,75%,10%) hsl(360,75%,25%) hsl(360,75%,50%) hsl(360,75%,75%) hsl(360,75%,95%)
hsl(360,100%,10%) hsl(360,100%,25%) hsl(360,100%,50%) hsl(360,100%,75%) hsl(360,100%,95%)