Czwartek, 2024-03-28, 2:12 PM                    
Jesteś zalogowany jako Gość | Grupa "Goście"Witaj Gość | RS
Smak chwil
Główna » Pliki » Ramki » Inne

Kolory na stronie WWW
[ · Pobierz z innej strony () ] 2014-07-07, 11:06 PM

 Kolory na stronie WWW

Każda przeglądarka stron WWW pozwala uzyskać na ekranie jednocześnie 256 różnych kolorów, jednak tylko 216 z nich poprawnie wyświetlają wszystkie przeglądarki internetowe. Używając "bezpiecznego" zestawu barw masz pewność, że kolor zostanie pokazany tak samo w każdym systemie operacyjnym (paleta 256 kolorów w systemie Windows nie odpowiada tym samym kolorom systemowym w komputerze Macintosh). Jeżeli użyjesz większej ilości kolorów, mogą one zostać zamienione do podobnych kolorów z podstawowego zestawu barw, czyli wspomnianych, bezpiecznych 216 kolorów.

Kurs XHTML: 1.1, 1.0 / HTML: 4.01, 4.0, 3.2, 3.0, 2.0 / CSS: 2.1, 2.0, 1.0 z przykładami

[Start][Elementy XHTML/HTML][Atrybuty XHTML/HTML][Style CSS]
[0] [A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]

 

Kolory na stronie WWW

Każda przeglądarka stron WWW pozwala uzyskać na ekranie jednocześnie 256 różnych kolorów, jednak tylko 216 z nich poprawnie wyświetlają wszystkie przeglądarki internetowe. Używając "bezpiecznego" zestawu barw masz pewność, że kolor zostanie pokazany tak samo w każdym systemie operacyjnym (paleta 256 kolorów w systemie Windows nie odpowiada tym samym kolorom systemowym w komputerze Macintosh). Jeżeli użyjesz większej ilości kolorów, mogą one zostać zamienione do podobnych kolorów z podstawowego zestawu barw, czyli wspomnianych, bezpiecznych 216 kolorów.

Dowolny kolor składa się z trzech barw podstawowych: czerwonej, zielonej i niebieskiej (red, green, blue - czyli RGB). Do dyspozycji mamy 256 odcieni każdego z tych kolorów i poprzez ich mieszanie otrzymujemy dowolny inny kolor.

Kolor RGB zapisywany jest w postaci #RRGGBB, gdzie RR to zapisany szesnastkowo (heksadecymalnie) kolor czerwony (red), GG to kolor zielony (green), a BB to kolor niebieski (blue). Oznacza to, że każdy kolor może przyjmować wartości od 00 do FF. W stylach CSS pojawia się jeszcze zapis dziesiętny koloru RGB w postaci rgb(RR,GG,BB), gdzie każda składowa może przyjmować wartości od 0 do 255. Bezpieczne kolory operują wielokrotnością liczby 33 w systemie szesnastkowym (00, 33, 66, 99, CC, FF) i 51 w systemie dziesiętnym (0, 51, 102, 153, 204, 255).

Można też używać nazw kolorów. Podstawowe 16 określeń pochodzi od nazw kolorów, które można było uzyskać na komputerach z kartą graficzną VGA (komputery pokazywały kiedyś tylko 16 kolorów): white (kolor biały - #FFFFFF), black (kolor czarny - #000000), green, blue, fuchsia, yellow, lime, olive, purple, teal, silver, red, navy, maroon, gray, aqua.

Ostatecznie zwiększono jednak liczbę dostępnych nazw kolorów do 140. Tabela na końcu tekstu prezentuje wszystkie dostępne nazwy. Należy jednak pamiętać, że nie w pełni odpowiadają one bezpiecznej palecie, np. zapis szesnastkowy koloru maroon to #800000 (nie ma takiego w tablicy bezpiecznych kolorów!).

Można nie zwracać uwagi na różnicę jeśli umieszczamy tylko zielony napis lub zieloną tabelę. Wtedy nawet lepiej jest stosować nazwy, bo nie trzeba zastanawiać się, jak zapisać kolor zielony za pomocą #RRGGBB. Informacja ta zaczyna nabierać znaczenia wyłącznie przy łączeniu bitmapy (GIF, JPEG) z kolorami na stronie WWW wprowadzonymi np. takimi instrukcjami:

color: #00ff66; - ustala kolor czcionki za pomocą stylu
background-color: #00ff66; - ustala kolor tła za pomocą stylu
 
a to stare sposoby, już nie zalecane:
<font color="#33ff22"> - ustala kolor czcionki
<tr bgcolor="blue"> - ustawia kolor rzędu komórek w tabeli
<td bgcolor="#cc9966"> - ustawia kolor komórki w tabeli
<body bgcolor="white"> - ustawia kolor tła strony

Grupa elementów wykorzystujących kolory: basefont, body, font, table, td, th, tr

Grupa atrybutów wykorzystujących kolory: alink, bgcolor, color, link, text, vlink

Grupa stylów wykorzystujących kolory: active, background-color, border-bottom-color, border-color, border-left-color, border-right-color, border-top-color, color, link, outline, visited

Obecnie nie zaleca się stosowania atrybutów HTML. Powinno się je zamieniać na style CSS. W stylach, w miejsce #RRGGBB można wpisać kolor w postaci szesnastkowej (np. #CCFFCC), nazwy angielskiej (np. maroon) lub wartości RGB - rgb(20,20,99). Oto odpowiedniki:

alink - a:active { color: #RRGGBB; }
bgcolor - background-color: #RRGGBB;
color - color: #RRGGBB;
link - a:link { color: #RRGGBB; }
text - color: #RRGGBB;
vlink - a:visited { color: #RRGGBB; }

Projektując wygląd strony, warto zwrócić uwagę na dobór kolorów. W Internecie dostępne są serwisy wspomagające dobieranie kolorów i projektowanie bezpiecznych zestawów barwnych dla tabel, linków, tekstu czy tła. Takie narzędzie znajdziesz w serwisie algorytmy.pl.

zestawienie 216 "bezpiecznych" kolorów (HEX/RGB)

#ff0000
255 0 0
#ff0033
255 0 51
#ff0066
255 0 102
#ff0099
255 0 153
#ff00cc
255 0 204
#ff00ff
255 0 155
#ff3300
255 51 0
#ff3333
255 51 51
#ff3366
255 51 102
#ff3399
255 51 153
#ff33cc
255 51 204
#ff33ff
255 51 255
#ff6600
255 102 0
#ff6633
255 102 51
#ff6666
255 102 102
#ff6699
255 102 153
#ff66cc
255 102 204
#ff66ff
255 102 255
#ff9900
255 153 0
#ff9933
255 153 51
#ff9966
255 153 102
#ff9999
255 153 153
#ff99cc
255 153 204
#ff99ff
255 153 255
#ffcc00
255 204 0
#ffcc33
255 204 51
#ffcc66
255 204 102
#ffcc99
255 204 153
#ffcccc
255 204 204
#ffccff
255 204 255
#ffff00
255 255 0
#ffff33
255 255 51
#ffff66
255 255 102
#ffff99
255 255 153
#ffffcc
255 255 204
#ffffff
255 255 255
#cc0000
204 0 0
#cc0033
204 0 51
#cc0066
204 0 102
#cc0099
204 0 153
#cc00cc
204 0 204
#cc00ff
204 0 255
#cc3300
204 51 0
#cc3333
204 51 51
#cc3366
204 51 102
#cc3399
204 51 153
#cc33cc
204 51 204
#cc33ff
204 51 255
#cc6600
204 102 0
#cc6633
204 102 51
#cc6666
204 102 102
#cc6699
204 102 153
#cc66cc
204 102 204
#cc66ff
204 102 255
#cc9900
204 153 0
#cc9933
204 153 0
#cc9966
204 153 102
#cc9999
204 153 153
#cc99cc
204 153 204
#cc99ff
204 153 255
#cccc00
204 204 0
#cccc33
204 204 51
#cccc66
204 204 102
#cccc99
204 204 153
#cccccc
204 204 204
#ccccff
204 204 255
#ccff00
204 255 0
#ccff33
204 255 51
#ccff66
204 255 102
#ccff99
204 255 153
#ccffcc
204 255 204
#ccffff
204 255 255
#990000
153 0 0
#990033
153 0 51
#990066
153 0 102
#990099
153 0 153
#9900cc
153 0 204
#9900ff
153 0 255
#993300
153 51 0
#993333
153 51 51
#993366
153 51 102
#993399
153 51 153
#9933cc
153 51 204
#9933ff
153 51 255
#996600
153 102 0
#996633
153 102 51
#996666
153 102 102
#996699
153 102 153
#9966cc
153 102 204
#9966ff
153 102 255
#999900
153 153 0
#999933
153 153 51
#999966
153 153 102
#999999
153 153 153
#9999cc
153 153 204
#9999ff
153 153 255
#99cc00
153 204 0
#99cc33
153 204 51
#99cc66
153 204 102
#99cc99
153 204 153
#99cccc
153 204 204
#99ccff
153 204 255
#99ff00
153 255 0
#99ff33
153 255 51
#99ff66
153 255 102
#99ff99
153 255 153
#99ffcc
153 255 204
#99ffff
153 255 255
#660000
102 0 0
#660033
102 0 51
#660066
102 0 102
#660099
102 0 153
#6600cc
102 0 204
#6600ff
102 0 255
#663300
102 51 0
#663333
102 51 51
#663366
102 51 102
#663399
102 51 153
#6633cc
102 51 204
#6633ff
102 51 255
#666600
102 102 0
#666633
102 102 51
#666666
102 102 102
#666699
102 102 153
#6666cc
102 102 204
#6666ff
102 102 255
#669900
102 153 0
#669933
102 153 51
#669966
102 153 102
#669999
102 153 153
#6699cc
102 153 204
#6699ff
102 153 255
#66cc00
102 204 0
#66cc33
102 204 51
#66cc66
102 204 102
#66cc99
102 204 153
#66cccc
102 204 204
#66ccff
102 204 255
#66ff00
102 255 0
#66ff33
102 255 51
#66ff66
102 255 102
#66ff99
102 255 153
#66ffcc
102 255 204
#66ffff
102 255 255
#330000
51 0 0
#330033
51 0 51
#330066
51 0 102
#330099
51 0 153
#3300cc
51 0 204
#3300ff
51 0 255
#333300
51 51 0
#333333
51 51 51
#333366
51 51 102
#333399
51 51 153
#3333cc
51 51 204
#3333ff
51 51 255
#336600
51 102 0
#336633
51 102 51
#336666
51 102 102
#336699
51 102 153
#3366cc
51 102 204
#3366ff
51 102 255
#339900
51 153 0
#339933
51 153 51
#339966
51 153 102
#339999
51 153 153
#3399cc
51 153 204
#3399ff
51 153 255
#33cc00
51 204 0
#33cc33
51 204 51
#33cc66
51 204 102
#33cc99
51 204 153
#33cccc
51 204 204
#33ccff
51 204 255
#33ff00
51 255 0
#33ff33
51 255 51
#33ff66
51 255 102
#33ff99
51 255 153
#33ffcc
51 255 204
#33ffff
51 255 255
#000000
0 0 0
#000033
0 0 51
#000066
0 0 102
#000099
0 0 153
#0000cc
0 0 204
#0000ff
0 0 255
#003300
0 51 0
#003333
0 51 51
#003366
0 51 102
#003399
0 51 153
#0033cc
0 51 204
#0033ff
0 51 255
#006600
0 102 0
#006633
0 102 51
#006666
0 102 102
#006699
0 102 153
#0066cc
0 102 204
#0066ff
0 102 255
#009900
0 153 0
#009933
0 153 51
#009966
0 153 102
#009999
0 153 153
#0099cc
0 153 204
#0099ff
0 153 255
#00cc00
0 204 0
#00cc33
0 204 51
#00cc66
0 204 102
#00cc99
0 204 153
#00cccc
0 204 204
#00ccff
0 204 255
#00ff00
0 255 0
#00ff33
0 255 51
#00ff66
0 255 102
#00ff99
0 255 153
#00ffcc
0 255 204
#00ffff
0 255 255

zestawienie nazw kolorów (nie są to kolory "bezpieczne"):
(pogrubionych zostało 16 podstawowych nazw)

nazwa koloru HEX RGB kolor
AliceBlue #F0F8FF rgb(240,248,255)  
AntiqueWhite #FAEBD7 rgb(250,235,215)  
Aqua #00FFFF rgb(0,255,255)  
Aquamarine #7FFFD4 rgb(127,255,212)  
Azure #F0FFFF rgb(240,255,255)  
Beige #F5F5DC rgb(245,245,220)  
Bisque #FFE4C4 rgb(255,228,196)  
Black #000000 rgb(0,0,0)  
BlanchedAlmond #FFEBCD rgb(255,235,205)  
Blue #0000FF rgb(0,0,255)  
BlueViolet #8A2BE2 rgb(138,43,226)  
Brown #A52A2A rgb(165,42,42)  
Burlywood #DEB887 rgb(222,184,135)  
CadetBlue #5F9EA0 rgb(95,158,160)  
Chartreuse #7FFF00 rgb(127,255,0)  
Chocolate #D2691E rgb(210,105,30)  
Coral #FF7F50 rgb(255,127,80)  
CornflowerBlue #6495ED rgb(100,149,237)  
Cornsilk #FFF8DC rgb(255,248,220)  
Crimson #DC143C rgb(220,20,60)  
Cyan #00FFFF rgb(0,255,255)  
DarkBlue #00008B rgb(0,0,139)  
DarkCyan #008B8B rgb(0,139,139)  
DarkGoldenrod #B8860B rgb(184,134,11)  
DarkGray #A9A9A9 rgb(169,169,169)  
DarkGreen #006400 rgb(0,100,0)  
DarkKhaki #BDB76B rgb(189,183,107)  
DarkMagenta #8B008B rgb(139,0,139)  
DarkOliveGreen #556B2F rgb(85,107,47)  
DarkOrange #FF8C00 rgb(255,140,0)  
DarkOrchid #9932CC rgb(153,50,204)  
DarkRed #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)  
DarkTurquoise #00CED1 rgb(0,206,209)  
DarkViolet #9400D3 rgb(148,0,211)  
DeepPink #FF1493 rgb(255,20,147)  
DeepSkyBlue #00BFBF rgb(0,191,191)  
DimGrey #696969 rgb(105,105,105)  
DodgerBlue #1E90FF rgb(30,144,255)  
Firebrick #B22222 rgb(178,34,34)  
FloralWhite #FFFAF0 rgb(255,250,240)  
ForestGreen #228B22 rgb(34,139,34)  
Fuchsia #FF00FF rgb(255,0,255)  
Gainsboro #DCDCDC rgb(220,220,220)  
GhostWhite #F8F8FF rgb(248,248,255)  
Gold #FFD700 rgb(255,215,0)  
Goldenrod #DAA520 rgb(218,165,32)  
Green #008000 rgb(0,128,0)  
GreenYellow #ADFF2F rgb(173,255,47)  
Gray #808080 rgb(128,128,128)  
Honeydew #F0FFF0 rgb(240,255,240)  
HotPink #FF69B4 rgb(255,105,180)  
IndianRed #CD5C5C rgb(205,92,92)  
Indigo #4B0082 rgb(75,0,130)  
Ivory #FFFFF0 rgb(255,255,240)  
Khaki #F0E68C rgb(240,230,140)  
Lavender #E6E6FA rgb(230,230,250)  
LavenderBlush #FFF0F5 rgb(255,240,245)  
LawnGreen #7CFC00 rgb(124,252,0)  
LemonChiffon #FFFACD rgb(255,250,205)  
LightBlue #ADD8E6 rgb(173,216,230)  
LightCoral #F08080 rgb(240,128,128)  
LightCyan #E0FFFF rgb(224,255,255)  
LightGoldenrodYellow #FAFAD2 rgb(250,250,210)  
LightGreen #90EE90 rgb(144,238,144)  
LightGray #D3D3D3 rgb(211,211,211)  
LightPink #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(119,136,153)  
LightSteelBlue #B0C4DE rgb(176,196,222)  
LightYellow #FFFFE0 rgb(255,255,224)  
Lime #00FF00 rgb(0,255,0)  
LimeGreen #32CD32 rgb(50,205,50)  
Linen #FAF0E6 rgb(250,240,230)  
Magenta #FF00FF rgb(255,0,255)  
Maroon #800000 rgb(128,0,0)  
MediumAquamarine #66CDAA rgb(102,205,170)  
MediumBlue #0000CD rgb(0,0,205)  
MediumOrchid #BA55D3 rgb(186,85,211)  
MediumPurple #9370DB rgb(147,112,219)  
MediumSeaGreen #3CB371 rgb(60,179,113)  
MediumSlateBlue #7B68EE rgb(123,104,238)  
MediumSpringGreen #00FA9A rgb(0,250,154)  
MediumTurquoise #48D1CC rgb(72,209,204)  
MediumVioletRed #C71585 rgb(199,21,133)  
MidnightBlue #191970 rgb(25,25,112)  
MintCream #F5FFFA rgb(245,255,250)  
MistyRose #FFE4E1 rgb(255,228,225)  
Moccasin #FFE4B5 rgb(255,228,181)  
NavajoWhite #FFDEAD rgb(255,222,173)  
Navy #000080 rgb(0,0,128)  
OldLace #FDF5E6 rgb(253,245,230)  
Olive #808000 rgb(128,128,0)  
OliveDrab #6B8E23 rgb(107,142,35)  
Orange #FFA500 rgb(255,165,0)  
OrangeRed #FF4500 rgb(255,69,0)  
Orchid #DA70D6 rgb(218,112,214)  
PaleGoldenrod #EEE8AA rgb(238,232,170)  
PaleGreen #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)  
Pink #FFC0CB rgb(255,192,203)  
Plum #DDA0DD rgb(221,160,221)  
PowderBlue #B0E0E6 rgb(176,224,230)  
Purple #800080 rgb(128,0,128)  
Red #FF0000 rgb(255,0,0)  
RosyBrown #BC8F8F rgb(188,143,143)  
RoyalBlue #4169E1 rgb(65,105,225)  
SaddleBrown #8B4513 rgb(139,69,19)  
Salmon #FA8072 rgb(250,128,114)  
SandyBrown #F4A460 rgb(244,164,96)  
SeaGreen #2E8B57 rgb(46,139,87)  
Seashell #FFF5EE rgb(255,245,238)  
Sienna #A0522D rgb(160,82,45)  
Silver #C0C0C0 rgb(192,192,192)  
SkyBlue #87CEEB rgb(135,206,235)  
SlateBlue #6A5ACD rgb(106,90,205)  
SlateGrey #708090 rgb(112,128,144)  
Snow #FFFAFA rgb(255,250,250)  
SpringGreen #00FF7F rgb(0,255,127)  
SteelBlue #4682B4 rgb(70,130,180)  
Tan #D2B48C rgb(210,180,140)  
Teal #008080 rgb(0,128,128)  
Thistle #D8BFD8 rgb(216,191,216)  
Tomato #FF6347 rgb(255,99,71)  
Turquoise #40E0D0 rgb(64,224,208)  
Violet #EE82EE rgb(238,130,238)  
Wheat #F5DEB3 rgb(245,222,179)  
White #FFFFFF rgb(255,255,255)  
WhiteSmoke #F5F5F5 rgb(245,245,245)  
Yellow #FFFF00 rgb(255,255,0)  
YellowGreen #9ACD32 rgb(154,205,50)  

 

Kategoria: Inne | Dodał: fiolka
Wyświetleń: 1785 | Pobrań: 396 | Rating: 0.0/0
Liczba wszystkich komentarzy: 0
Imię *:
Email *:
Kod *:
| Główna |
| Rejestracja |
| Wejdź |
Menu witryny
Formularz logowania
Kategorie sekcji
Inne [7]
Wyszukiwanie
Mini-czat
Przyjaciele witryny
  • Załóż darmową stronę
  • Internetowy pulpit
  • Darmowe gry online
  • Szkolenia wideo
  • Wszystkie znaczniki HTML
  • Zestawy przeglądarek
  • Statystyki

    Ogółem online: 1
    Gości: 1
    Użytkowników: 0
    Copyright MyCorp
    © 2024