Kolory HTML - czyli pełny przewodnik po kolorach i paletach kolorów w Internecie

Opublikowano 28.06.2020 12:49 -


Internet odzwierciedla wiele aspektów współczesnego świata i jest coraz bardziej jego nierozerwalną częścią. Kluczowym elementem, zarówno cyberprzestrzeni jak i świata rzeczywistego – są kolory. Tak samo, jak ich postrzeganie przez nas świata wokół nas, tak samo wpływa na świat wirtualny. Przyjrzyjmy się więc bliżej procesowi powstawania kolorów w internecie. Poznajcie najważniejsze informacje o kolorach HTML, a jest tego trochę.

Określenie palety kolorów dla ludzi bywa trudnym zadaniem. Przykładową sytuacją problemów w jej rozróżnianiu, może być taka sytuacja – gdy przed dziesięcioma różnymi osobami postawimy planszę na której znajdziemy cytrynę i poprosimy je, aby opisać jej kolor, bardzo możliwe że otrzymamy dziesięć różnych określeń na jej kolor. Ludzka zdolność do myślenia abstrakcyjnego sprawia, że dwoje ludzi używając różnych określeń będzie mogło się porozumieć co do koloru przykładowej cytryny.

Język internetu – kolory html - jak nim mówić o kolorach? 

Komputery jednak takiej zdolności nie posiadają. Nie są w stanie używać zdolności kojarzenia i wnioskowania, więc nie są zdolne do procesu poznawczego, słowem – nie myślą. Wymagają bardzo precyzyjnych informacji, które przetwarzają. W przypadku stron internetowych, językiem jakim mówią, będzie HTML (ang. HyperText Markup Language – Hipertekstowy język znaczników). Przez to posługiwanie się kodami kolorów będzie zdecydowanie bardziej wygodne.

rgb - Zmieszaj je, czyli jak uzyskać każdy kolor?

Dla komputerów najłatwiej kolor jest określić metodą RGB. Ten skrót pochodzi od angielskich nazw trzech kolorów: czerwonego (Red), zielonego (Green) i niebieskiego (Blue). Mieszając te kolory możemy uzyskać wszystkie inne. Dlatego też i w języku HTML można stosować zapis typu RGB. Taki zapis, określany jest mianem 24 – bitowego, albowiem każdemu kolorowi podstawowemu daje się po osiem bitów informacji, aby go określić. Dlatego mnożąc trzy razy osiem otrzymujemy dwadzieścia cztery, stąd nazwa tego systemu zapisu. Za jego przykład niech posłuży nam sytuacja, w której chcemy uzyskać żółty kolor czcionki. Krój czcionki już wybraliśmy, teraz chcemy uzyskać kolor. Żeby otrzymać żółty kolor musimy zmieszać kolor czerwony z zielonym więc kolor żółty będzie mieć kod HTML wyglądający tak: rgb(255, 255, 0). W ten sposób możemy bardzo precyzyjnie określić odcień każdego koloru za pomocy wartości liczbowych.

Zobacz także Kurs UX.

kolory HEX - czyli kolory html w kodzie szesnastkowym

Inną metodą, jest system szesnastkowy, lub inaczej heksadecymalny – a nazywany w skrócie HEX. W takim zapisie również stosujemy mieszanie się trzech wspomnianych wcześniej podstawowych kolorów. Zapis ich jednak będzie wyglądać inaczej. Zamiast dłuższej wartości zapisanej jak powyżej, używa się skróconego zapisu, który niezmiernie ułatwia pracę osobom projektującym stronę internetową. Za przykład niech znów nam posłuży kolor żółty. Jego zapis w formie szesnastkowej będzie wyglądać następująco – #FFFF00. W systemie HEX, wartością maksymalną będzie FF, natomiast najmniejszą – 00.

generator kolorów (Color Picker) - wybierz swój kolor HTML

Poniżej udostępniamy narzędzie, za pomocą którego możesz wygenerować kod swojego koloru HTML.

Paleta 256 kolorów bezpiecznych

Oto zestaw 256 kolorów. Korzystając z zestawu poniżej mamy pewność, że niezależnie od urządzenia i obsługiwanych kolorów, będą one wyświetlane w poprawny sposób dla wszystkich użytkowników.

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

Kolory HTML mają także swoje nazwy

Co równie ciekawe, nie jesteście zmuszeni korzystać z kodów HEX do wywołania koloru. Okazuje się że dla kilkudziesięciu kolorów, możecie wywoływać je po ich nazwie, bez wpisywania kodu HEX lub RGB. Pełne i pogrupowane zestawienie według grupy kolorów znajdziecie poniżej. Przykład poniżej:

<font color="lightsalmon"></font>

Odcienie koloru czerwonego

KolorHTML / CSS
nazwa
Kod Hex
#RRGGBB
Kod RGB
(R,G,B)
lightsalmon#FFA07Argb(255,160,122)
salmon#FA8072rgb(250,128,114)
darksalmon#E9967Argb(233,150,122)
lightcoral#F08080rgb(240,128,128)
indianred#CD5C5Crgb(205,92,92)
crimson#DC143Crgb(220,20,60)
firebrick#B22222rgb(178,34,34)
red#FF0000rgb(255,0,0)
darkred#8B0000rgb(139,0,0)

Odcienie koloru pomarańczowego

KolorHTML / CSS
nazwa
Kod Hex
#RRGGBB
Kod RGB
(R,G,B)
coral#FF7F50rgb(255,127,80)
tomato#FF6347rgb(255,99,71)
orangered#FF4500rgb(255,69,0)
gold#FFD700rgb(255,215,0)
orange#FFA500rgb(255,165,0)
darkorange#FF8C00rgb(255,140,0)

Odcienie koloru żółtego

KolorHTML / CSS
nazwa
Kod Hex
#RRGGBB
Kod RGB
(R,G,B)
lightyellow#FFFFE0rgb(255,255,224)
lemonchiffon#FFFACDrgb(255,250,205)
lightgoldenrodyellow#FAFAD2rgb(250,250,210)
papayawhip#FFEFD5rgb(255,239,213)
moccasin#FFE4B5rgb(255,228,181)
peachpuff#FFDAB9rgb(255,218,185)
palegoldenrod#EEE8AArgb(238,232,170)
khaki#F0E68Crgb(240,230,140)
darkkhaki#BDB76Brgb(189,183,107)
yellow#FFFF00rgb(255,255,0)

Odcienie koloru zielonego

KolorHTML / CSS
nazwa koloru
Kod HEX
#RRGGBB
Kod RGB
(R,G,B)
lawngreen#7CFC00rgb(124,252,0)
chartreuse#7FFF00rgb(127,255,0)
limegreen#32CD32rgb(50,205,50)
lime#00FF00rgb(0.255.0)
forestgreen#228B22rgb(34,139,34)
green#008000rgb(0,128,0)
darkgreen#006400rgb(0,100,0)
greenyellow#ADFF2Frgb(173,255,47)
yellowgreen#9ACD32rgb(154,205,50)
springgreen#00FF7Frgb(0,255,127)
mediumspringgreen#00FA9Argb(0,250,154)
lightgreen#90EE90rgb(144,238,144)
palegreen#98FB98rgb(152,251,152)
darkseagreen#8FBC8Frgb(143,188,143)
mediumseagreen#3CB371rgb(60,179,113)
seagreen#2E8B57rgb(46,139,87)
olive#808000rgb(128,128,0)
darkolivegreen#556B2Frgb(85,107,47)
olivedrab#6B8E23rgb(107,142,35)

Odcienie koloru błękitnego

KolorHTML / CSS
nazwa koloru
Kod Hex
#RRGGBB
Kod RGB
(R,G,B)
lightcyan#E0FFFFrgb(224,255,255)
cyan#00FFFFrgb(0,255,255)
aqua#00FFFFrgb(0,255,255)
aquamarine#7FFFD4rgb(127,255,212)
mediumaquamarine#66CDAArgb(102,205,170)
paleturquoise#AFEEEErgb(175,238,238)
turquoise#40E0D0rgb(64,224,208)
mediumturquoise#48D1CCrgb(72,209,204)
darkturquoise#00CED1rgb(0,206,209)
lightseagreen#20B2AArgb(32,178,170)
cadetblue#5F9EA0rgb(95,158,160)
darkcyan#008B8Brgb(0,139,139)
teal#008080rgb(0,128,128)

Odcienie koloru niebieskiego

KolorHTML / CSS
nazwa koloru
Kod Hex
#RRGGBB
Kod RGB
(R,G,B)
powderblue#B0E0E6rgb(176,224,230)
lightblue#ADD8E6rgb(173,216,230)
lightskyblue#87CEFArgb(135,206,250)
skyblue#87CEEBrgb(135,206,235)
deepskyblue#00BFFFrgb(0,191,255)
lightsteelblue#B0C4DErgb(176,196,222)
dodgerblue#1E90FFrgb(30,144,255)
cornflowerblue#6495EDrgb(100,149,237)
steelblue#4682B4rgb(70,130,180)
royalblue#4169E1rgb(65,105,225)
blue#0000FFrgb(0,0,255)
mediumblue#0000CDrgb(0,0,205)
darkblue#00008Brgb(0,0,139)
navy#000080rgb(0,0,128)
midnightblue#191970rgb(25,25,112)
mediumslateblue#7B68EErgb(123,104,238)
slateblue#6A5ACDrgb(106,90,205)
darkslateblue#483D8Brgb(72,61,139)

Odcienie koloru fioletowego

KolorHTML / CSS
nazwa koloru
Kod Hex
#RRGGBB
Kod RGB
(R,G,B)
lavender#E6E6FArgb(230,230,250)
thistle#D8BFD8rgb(216,191,216)
plum#DDA0DDrgb(221,160,221)
violet#EE82EErgb(238,130,238)
orchid#DA70D6rgb(218,112,214)
fuchsia#FF00FFrgb(255,0,255)
magenta#FF00FFrgb(255,0,255)
mediumorchid#BA55D3rgb(186,85,211)
mediumpurple#9370DBrgb(147,112,219)
blueviolet#8A2BE2rgb(138,43,226)
darkviolet#9400D3rgb(148,0,211)
darkorchid#9932CCrgb(153,50,204)
darkmagenta#8B008Brgb(139,0,139)
purple#800080rgb(128,0,128)
indigo#4B0082rgb(75,0,130)

Odcienie koloru różowego

KolorHTML / CSS
nazwa koloru
Kod Hex
#RRGGBB
Kod RGB
(R,G,B)
pink#FFC0CBrgb(255,192,203)
lightpink#FFB6C1rgb(255,182,193)
hotpink#FF69B4rgb(255,105,180)
deeppink#FF1493rgb(255,20,147)
palevioletred#DB7093rgb(219,112,147)
mediumvioletred#C71585rgb(199,21,133)

Odcienie koloru  białego

KolorHTML / CSS
nazwa koloru
Kod Hex
#RRGGBB
Kod RGB
(R,G,B)
white#FFFFFFrgb(255,255,255)
snow#FFFAFArgb(255,250,250)
honeydew#F0FFF0rgb(240,255,240)
mintcream#F5FFFArgb(245,255,250)
azure#F0FFFFrgb(240,255,255)
aliceblue#F0F8FFrgb(240,248,255)
ghostwhite#F8F8FFrgb(248,248,255)
whitesmoke#F5F5F5rgb(245,245,245)
seashell#FFF5EErgb(255,245,238)
beige#F5F5DCrgb(245,245,220)
oldlace#FDF5E6rgb(253,245,230)
floralwhite#FFFAF0rgb(255,250,240)
ivory#FFFFF0rgb(255,255,240)
antiquewhite#FAEBD7rgb(250,235,215)
linen#FAF0E6rgb(250,240,230)
lavenderblush#FFF0F5rgb(255,240,245)
mistyrose#FFE4E1rgb(255,228,225)

Odcienie koloru szarego

KolorHTML / CSS
nazwa koloru
Kod Hex
#RRGGBB
Kod RGB
(R,G,B)
gainsboro#DCDCDCrgb(220,220,220)
lightgray#D3D3D3rgb(211,211,211)
silver#C0C0C0rgb(192,192,192)
darkgray#A9A9A9rgb(169,169,169)
gray#808080rgb(128,128,128)
dimgray#696969rgb(105,105,105)
lightslategray#778899rgb(119,136,153)
slategray#708090rgb(112,128,144)
darkslategray#2F4F4Frgb(47,79,79)
black#000000rgb(0,0,0)

Odcienie koloru Brązowego

KolorHTML / CSS
nazwa koloru
Kod Hex
#RRGGBB
Kod RGB
(R,G,B)
cornsilk#FFF8DCrgb(255,248,220)
blanchedalmond#FFEBCDrgb(255,235,205)
bisque#FFE4C4rgb(255,228,196)
navajowhite#FFDEADrgb(255,222,173)
wheat#F5DEB3rgb(245,222,179)
burlywood#DEB887rgb(222,184,135)
tan#D2B48Crgb(210,180,140)
rosybrown#BC8F8Frgb(188,143,143)
sandybrown#F4A460rgb(244,164,96)
goldenrod#DAA520rgb(218,165,32)
peru#CD853Frgb(205,133,63)
chocolate#D2691Ergb(210,105,30)
saddlebrown#8B4513rgb(139,69,19)
sienna#A0522Drgb(160,82,45)
brown#A52A2Argb(165,42,42)
maroon#800000rgb(128,0,0)

Podsumowując

Takie oznaczenie kolorów które zapewnia paleta HTML, jedne lub drugie – sprawia, że można precyzyjnie oddać dany kolor, zgodnie z życzeniem osoby projektującej stronę. Pamiętajmy jednak, że nawet najlepsze oddanie barwy za pomocą liczb, może być przekłamane w sposób jaki wyświetlamy je na monitorze. Każdy monitor jest bowiem inny i odrobinę inaczej oddaje kolory. Dla wielu osób jest to różnica niezauważalna, dla niektórych jednak jest istotna. Weźmy to pod uwagę projektując stronę internetową, czy też zlecając to komuś – w ten sposób można uniknąć wielu nieporozumień.

Wieści z Rozładowani.pl