HTML-värit | verkkosivujen suunnittelussa käytettävät värit
Verkkovärit ovat verkkosivujen suunnittelussa käytettäviä värejä sekä tapoja kuvata ja luetella näitä värejä.
Verkkosivujen osien värien valintaan on useita tapoja. Värit voidaan ilmoittaa RGB-tripletina (kolmen numeron joukko) heksadesimaalimuodossa (heksatripletti). RGB-tripletti voi muodostaa 16 777 216 erilaista väriä. Monet yleiset värit voidaan valita myös niiden yleisten englanninkielisten nimien perusteella. Usein väriarvojen luomiseen käytetään värityökalua tai muuta grafiikkaohjelmaa.
Mosaicin ja Netscape Navigatorin ensimmäiset versiot käyttivät X11-värinimiä väriluetteloidensa pohjana. Tämä johtui siitä, että molemmat alkoivat X Window System -sovelluksina.
Jokaisella verkkovärillä on oma määritelmänsä, sRGB. Tämä liittyy yksittäisen fosforisarjan kromaattisuuteen, tiettyyn siirtokäyrään, adaptiiviseen valkoiseen pisteeseen ja katseluolosuhteisiin. Nämä on valittu siten, että ne vastaavat monia todellisia näyttöjä ja katseluolosuhteita. Jopa ilman värinhallintaa luodut värit ovat melko lähellä annettuja arvoja. Käyttäjäagentit voivat kuitenkin olla erilaisia sen suhteen, miten tarkasti ne näyttävät värit. Paremmat käyttäjäagentit käyttävät värinhallintaa luodakseen paremman väritarkkuuden. Tämä on tärkeää Web-tulostussovelluksille.
Heksatripletti
Heksatripletti on kuusinumeroinen, kolmen tavun numero, jota käytetään HTML-, CSS- ja SVG-ohjelmissa sekä muissa tietokoneohjelmissa värien esittämiseen. Tavut edustavat värin punaista, vihreää ja sinistä osaa. Yksi tavu edustaa numeroa alueella 00-FF tai 0-255 desimaalilukuna. Tämä edustaa kunkin värikomponentin pienimmästä (0) suurimpaan (255) intensiteettiä. Heksatripletti muodostetaan yhdistämällä kolme tavua heksadesimaalimuodossa seuraavassa järjestyksessä:
Tavu 1: punainen arvo (värityyppi punainen)
Tavu 2: vihreä arvo (värityyppi vihreä)
Tavu 3: sininen arvo (värityyppi sininen)
Tarkastellaan esimerkiksi väriä, jossa punaisen/vihreän/sinisen arvot ovat desimaalilukuja: punainen=36, vihreä=104, sininen=160 (harmaansininen väri). Desimaaliluvut 36, 104 ja 160 vastaavat numeroita 24, 68 ja A0. Heksadripletti saadaan yhdistämällä kuusi heksadesimaalilukua yhteen, tässä esimerkissä 2468A0.
HTML-verkkovärit
Vuonna 1997 kehitettyjä värejä oli alun perin 16. Oranssi lisättiin myöhemmin, jolloin värejä oli yhteensä 17. Alkuperäiset 16 olivat osa niin sanottua "Windows VGA -mallia", mikä tarkoittaa, että niitä värejä voidaan käyttää korostuksen kaltaisiin toimintoihin.
Väri | Heksadesimaaliluku | Väri | Heksadesimaaliluku | Väri | Heksadesimaaliluku | Väri | Heksadesimaaliluku |
aqua | #00FFFF | harmaa | #808080 | laivasto | #000080 | hopea | #C0C0C0 |
musta | #000000 | vihreä | #008000 | oliivi | #808000 | teal | #008080 |
sininen | #0000FF | kalkki | #00FF00 | violetti | #800080 | valkoinen | #FFFFFF |
fuksia | #FF00FF | punaruskea | #800000 | punainen | #FF0000 | keltainen | #FFFF00 |
Luettelo HTML-värin nimistä
Alla oleva taulukko sisältää kaikki 140 HTML-väriä. Kaikki nykyaikaiset selaimet tukevat niitä.
HTML-nimi | Hex | Desimaalikoodi R G B | Punaiset värit | Crimson | #DC143C | 220 20 60 | Vaalea koralli | #F08080 | 240 128 128 | Intian punainen | #CD5C5C | 205 92 92 | Palokivi | #B22222 | 178 34 34 | Ruskea | #A52A2A | 165 42 42 | Punainen | #FF0000 | 255 0 0 | Tummanpunainen | #8B0000 | 139 0 0 | Maroon | #800000 | 128 0 0 | Lohi | #FA8072 | 250 128 114 | Vaaleanpunainen & Rose värit | Vaaleanpunainen | #FFC0CB | 255 192 203 | Vaaleanpunainen | #FFB6C1 | 255 182 193 | Vaalean violetti punainen | #DB7093 | 219 112 147 | Kuuma vaaleanpunainen | #FF69B4 | 255 105 180 | Syvä vaaleanpunainen | #FF1493 | 255 20 147 | Oranssit värit | Persikka Puff | #FFDAB9 | 255 218 185 | Tumma lohi | #E9967A | 233 150 122 | Kevyt lohi | #FFA07A | 255 160 122 | Koralli | #FF7F50 | 255 127 80 | Tomaatti | #FF6347 | 255 99 71 | Oranssipunainen | #FF4500 | 255 69 0 | Papaija Whip | #FFEFD5 | 255 239 213 | Mokkasiini | #FFE4B5 | 255 228 181 | Tumman oranssi | #FF8C00 | 255 140 0 | Oranssi | #FFA500 | 255 165 0 | | | | Keltaiset värit | Vaalea kultapiiskun keltainen | #FAFAD2 | 250 250 210 | Vaalea kultapiisku | #EEE8AA | 238 232 170 | Kultajuuri | #DAA520 | 218 165 32 | Tumma kultapiisku | #B8860B | 184 134 11 | Kulta | #FFD700 | 255 215 0 | Sitruuna Chiffon | #FFFACD | 255 250 205 | Vaaleankeltainen | #FFFFE0 | 255 255 224 | Keltainen | #FFFF00 | 255 255 0 | Oliivi | #808000 | 128 128 0 | Khaki | #F0E68C | 240 230 140 | Tumma khaki | #BDB76B | 189 183 107 | Violetti, violetti ja magenta värit | Laventeli | #E6E6FA | 230 230 250 | Keskipitkän violetti | #9370DB | 147 112 219 | Sininen violetti | #8A2BE2 | 138 43 226 | Tumman violetti | #9400D3 | 148 0 211 | Indigo | #4B0082 | 75 0 130 | Keskikokoinen orkidea | #BA55D3 | 186 85 211 | Tumma orkidea | #9932CC | 153 &50 204 | Ohdake | #D8BFD8 | 216 191 216 | Luumu | #DDA0DD | 221 160 221 | Violetti | #EE82EE | 238 130 238 | Orkidea | #DA70D6 | 218 112 214 | Fuksia tai magenta | #FF00FF | 255 0 255 | Tumman magenta | #8B008B | 139 0 139 | Violetti | #800080 | 128 0 128 | Keskikokoinen violetti punainen | #C71585 | 199 21 133 | | HTML-nimi | Hex | Desimaalikoodi R G B | Vihreät värit | Keltainen Vihreä | #9ACD32 | 154 205 50 | Oliivinvärinen | #6B8E23 | 107 142 35 | Tumman oliivinvihreä | #556B2F | 85 107 47 | Vihreä Keltainen | #ADFF2F | 173 255 47 | Chartreuse | #7FFF00 | 127 255 0 | Nurmikon vihreä | #7CFC00 | 124 252 0 | Lime | #00FF00 | 0 255 0 | Vihreä | #008000 | 0 128 0 | Tummanvihreä | #006400 | 0 100 0 | Vaalean vihreä | #98FB98 | 152 251 152 | Vaaleanvihreä | #90EE90 | 144 238 144 | Lime vihreä | #32CD32 | 50 205 50 | Metsän vihreä | #228B22 | 34 139 34 | Keskikokoinen kevään vihreä | #00FA9A | 0 250 154 | Kevätvihreä | #00FF7F | 0 255 127 | Keskikokoinen meren vihreä | #3CB371 | 60 179 113 | Merivihreä | #2E8B57 | 46 139 87 | Tummanmeren vihreä | #8FBC8F | 143 188 143 | Syaanin värit | Akvamariini | #7FFFD4 | 127 255 212 | Keskikokoinen akvamariini | #66CDAA | 102 205 170 | Turkoosi | #40E0D0 | 64 224 208 | Keskikokoinen turkoosi | #48D1CC | 72 209 204 | Tumma turkoosi | #00CED1 | 0 206 209 | vaalean turkoosi | #AFEEEE | 175 238 238 | Vaalean meren vihreä | #20B2AA | 32 178 170 | Vaalean syaani | #E0FFFF | 224 255 255 | Aqua tai Cyan | #00FFFF | 0 255 255 | Tumman syaani | #008B8B | 0 139 139 | Teal | #008080 | 0 128 128 | Puuterin sininen | #B0E0E6 | 176 224 230 | Kadetti sininen | #5F9EA0 | 95 158 160 | Azure & Siniset värit | Vaaleansininen | #ADD8E6 | 173 216 230 | Taivaansininen | #87CEEB | 135 206 235 | Vaalean taivaansininen | #87CEFA | 135 206 250 | Deep Sky Blue | #00BFFF | 0 191 255 | Dodger Blue | #1E90FF | 30 144 255 | Vaalean teräksen sininen | #B0C4DE | 176 196 222 | Teräksen sininen | #4682B4 | 70 130 180 | Ruiskaunokin sininen | #6495ED | 100 149 237 | Kuninkaansininen | #4169E1 | 65 105 225 | Sininen | #0000FF | 0 0 255 | Keskikokoinen sininen | #0000CD | 0 0 205 | Tummansininen | #00008B | 0 0 139 | Laivasto | #000080 | 0 0 128 | Keskiyön sininen | #191970 | 25 25 112 | Keskikokoinen liuskekivi sininen | #7B68EE | 123 104 238 | liuskekivi sininen | #6A5ACD | 106 90 205 | Tumma liuskekivi sininen | #483D8B | 72 61 139 | | HTML-nimi | Hex | Desimaalikoodi R G B | Ruskeat värit | Cornsilk | #FFF8DC | 255 248 220 | Puhdistettu manteli | #FFEBCD | 255 235 205 | Bisque | #FFE4C4 | 255 228 196 | Navajo valkoinen | #FFDEAD | 255 222 173 | Vehnä | F5 DE B3 | 245 222 179 | Burlywood | DE B8 87 | 222 184 135 | Tan | D2 B4 8C | 210 180 140 | Rosy Brown | BC 8F 8F 8F | 188 143 143 | Sandy Brown | F4 A4 60 | 244 164 96 | Peru | CD 85 3F | 205 133 63 | Suklaa | D2 69 1E | 210 105 30 | Satula ruskea | 8B 45 13 | 139 69 19 | Sienna | A0 52 2D | 160 82 45 | Valkoiset värit | Valkoinen | FF FF FF FF | 255 255 255 | Lumi | FF FA FA FA | 255 250 250 | Honeydew | F0 FF F0 | 240 255 240 | Minttu kerma | F5 FF FA | 245 255 250 | Azure | F0 FF FF FF | 240 255 255 | Alice Blue | F0 F8 FF | 240 248 255 | Ghost White | F8 F8 FF | 248 248 255 | Valkoinen savu | F5 F5 F5 F5 | 245 245 245 | Seashell | FF F5 EE | 255 245 238 | Beige | F5 F5 DC | 245 245 220 | Vanhaa pitsiä | FD F5 E6 | 253 245 230 | Kukkainen valkoinen | FF FA F0 | 255 250 240 | Norsunluu | FF FF F0 | 255 255 240 | Antiikki valkoinen | FA EB D7 | 250 235 215 | Pellava | FA F0 E6 | 250 240 230 | Laventeli Blush | FF F0 F5 | 255 240 245 | Misty Rose | FF E4 E1 | 255 228 225 | Harmaat värit | Gainsboro | DC DC DC DC | 220 220 220 | Vaaleanharmaa | D3 D3 D3 D3 | 211 211 211 | Hopea | C0 C0 C0 C0 | 192 192 192 | Tummanharmaa | A9 A9 A9 A9 | 169 169 169 | Harmaa | 80 80 80 | 128 128 128 | Dim Gray | 69 69 69 | 105 105 105 | Vaalean liuskekiven harmaa | 77 88 99 | 119 136 153 | liuskekivi harmaa | 70 80 90 | 112 128 144 | Tumma liuskekivi harmaa | 2F 4F 4F 4F | 47 79 79 | Musta | 00 00 00 | 0 0 0 | |
X11-värit (muotoiltu vuonna 1987)
Näitä kutsutaan "X11-verkkoväreiksi", koska World Wide Web keksittiin vuonna 1991.
X11-nimi | Hex | Desimaalikoodi R G B | Punaiset värit | lightcoral | #F08080 | 240 128 128 | indianred | #CD5C5C | 205 92 92 | indianred1 | #FF6A6A | 255 106 106 | indianred2 | #EE6363 | 238 99 99 | indianred3 | #CD5555 | 205 85 85 | indianred4 | #8B3A3A | 139 58 58 | tulitiili | #B22222 | 178 34 34 | ruskea | #A52A2A | 165 42 42 | red1 | #FF0000 | 255 0 0 | red4 | #8B0000 | 139 0 0 | lohi | #FA8072 | 250 128 114 | Vaaleanpunainen & Rose värit | vaaleanpunainen | #FFC0CB | 255 192 203 | vaaleanpunainen | #FFB6C1 | 255 182 193 | hotpink | #FF69B4 | 255 105 180 | deeppink1 | #FF1493 | 255 20 147 | palevioletred | #DB7093 | 219 112 147 | punaruskea | #B03060 | 176 48 96 | Oranssit värit | peachpuff1 | #FFDAB9 | 255 218 185 | darksalmon | #E9967A | 233 150 122 | valolohi1 | #FFA07A | 255 160 122 | koralli | #FF7F50 | 255 127 80 | tomaatti1 | #FF6347 | 255 99 71 | orangered1 | #FF4500 | 255 69 0 | papayawhip | #FFEFD5 | 255 239 213 | mokkasiini | #FFE4B5 | 255 228 181 | darkorange | #FF8C00 | 255 140 0 | orange1 | #FFA500 | 255 165 0 | | | | Keltaiset värit | lightgoldenrodyellow | #FAFAD2 | 250 250 210 | lightgoldenrod1 | #FFEC8B | 250 250 210 | lightgoldenrod2 | #EEDC82 | 238 220 130 | lightgoldenrod3 | #CDBE70 | 205 190 112 | lightgoldenrod4 | #8B814C | 139 129 76 | palegoldenrod | #EEE8AA | 238 232 170 | kultapiisku | #DAA520 | 218 165 32 | kultapiisku1 | #FFC125 | 255 193 37 | kultapiisku2 | #EEB422 | 238 180 34 | kultapiisku3 | #CD9B1D | 205 155 29 | kultapiisku4 | #8B6914 | 139 105 20 | darkgoldenrod | #B8860B | 184 134 11 | darkgoldenrod1 | #FFB90F | 255 184 15 | darkgoldenrod2 | #EEAD0E | 238 173 14 | darkgoldenrod3 | #CD950C | 205 149 12 | darkgoldenrod4 | #8B6508 | 139 101 8 | gold1 | #FFD700 | 255 215 0 | gold2 | #EEC900 | 238 201 0 | gold3 | #CDAD00 | 205 173 0 | gold4 | #8B7500 | 139 177 0 | sitruunasifonki1 | #FFFACD | 255 250 205 | sitruunasifonki2 | #EEE9BF | 238 233 191 | sitruunasifonki3 | #CDC9A5 | 2O5 201 165 | sitruunasifonki4 | #8B8970 | 139 137 112 | vaaleankeltainen1 | #FFFFE0 | 255 255 224 | vaaleankeltainen2 | #EEEED1 | 238 238 209 | vaaleankeltainen3 | #CDCDB4 | 205 205 180 | vaaleankeltainen4 | #8B8B7A | 139 139 122 | yellow1 | #FFFF00 | 255 255 0 | yellow2 | #EEEE00 | 238 238 0 | yellow3 | #CDCD00 | 205 205 0 | yellow4 | #8B8B00 | 139 139 0 | khaki | #F0E68C | 240 230 140 | khaki1 | #FFF68F | 255 246 143 | khaki2 | #EEE685 | 238 230 133 | khaki3 | #CDC673 | 205 198 115 | khaki4 | #8B864E | 139 134 78 | darkkhaki | #BDB76B | 189 183 107 | Violetti, violetti ja magenta värit | laventeli | #E6E6FA | 230 230 250 | mediumpurple | #9370DB | 147 112 219 | blueviolet | #8A2BE2 | 138 43 226 | darkviolet | #9400D3 | 148 0 211 | violetti | #A020F0 | 160 32 240 | mediumorchid | #BA55D3 | 186 85 211 | darkorchid | #9932CC | 153 50 204 | ohdake | #D8BFD8 | 216 191 216 | luumu | #DDA0DD | 221 160 221 | violetti | #EE82EE | 238 130 238 | orkidea | #DA70D6 | 218 112 214 | magenta | #FF00FF | 255 0 255 | maroon1 | #FF34B3 | 255 52 179 | maroon2 | #EE30A7 | 238 48 167 | maroona3 | #CD2990 | 205 41 144 | maroon4 | #8B1C62 | 139 28 98 | mediumvioletred | #C71585 | 199 21 133 | violetred | #D02090 | 208 32 144 | | X11-nimi | Hex | Desimaalikoodi R G B | Vihreät värit | keltavihreä | #9ACD32 | 154 205 50 | olivedrab | #6B8E23 | 107 142 35 | darkolivegreen | #556B2F | 85 107 47 | greenyellow | #ADFF2F | 173 255 47 | chartreuse1 | #7FFF00 | 127 255 0 | lawngreen | #7CFC00 | 124 252 0 | vihreä1 | #00FF00 | 0 255 0 | green4 | #008B00 | 0 139 0 | tummanvihreä | #006400 | 0 100 0 | palegreen | #98FB98 | 152 251 152 | limegreen | #32CD32 | 50 205 50 | forestgreen | #228B22 | 34 139 34 | mediumspringgreen | #00FA9A | 0 250 154 | springgreen1 | #00FF7F | 0 255 127 | mediumseagreen | #3CB371 | 60 179 113 | merivihreä1 | #54FF9F | 46 139 87 | darkseagreen | #8FBC8F | 143 188 143 | Syaanin värit | akvamariini | #7FFFD4 | 127 255 212 | mediumaquamarine | #66CDAA | 102 205 170 | turkoosi | #40E0D0 | 64 224 208 | mediumturkoosi | #48D1CC | 72 209 204 | darkturquoise | #00CED1 | 0 206 209 | paleturkoosi | #AFEEEE | 175 238 238 | lightseagreen | #20B2AA | 32 178 170 | lightcyan1 | #E0FFFF | 224 255 255 | cyan1 | #00FFFF | 0 255 255 | cyan2 | #00EEEE | 0 238 238 | syaani3 | #00CDCD | 0 205 205 | cyan4 | #008B8B | 0 139 139 | powderblue | #B0E0E6 | 176 224 230 | cadetblue | #5F9EA0 | 95 158 160 | Azure & Siniset värit | vaaleansininen | #ADD8E6 | 173 216 230 | skyblue | #87CEEB | 135 206 235 | lightskyblue | #87CEFA | 135 206 250 | deepskyblue1 | #00BFFF | 0 191 255 | dodgerblue1 | #1E90FF | 30 144 255 | lightsteelblue | #B0C4DE | 176 196 222 | steelblue | #4682B4 | 70 130 180 | cornflowerblue | #6495ED | 100 149 237 | royalblue | #4169E1 | 65 105 225 | blue1 | #0000FF | 0 0 255 | blue2 | #0000EE | 0 0 238 | keskiruskea | #0000CD | 0 0 205 | blue4 | #00008B | 0 0 139 | navyblue | #000080 | 0 0 128 | midnightblue | #191970 | 25 25 112 | mediumslateblue | #7B68EE | 123 104 238 | slateblue | #6A5ACD | 106 90 205 | darkslateblue | #483D8B | 72 61 139 | | X11-nimi | Hex | Desimaalikoodi R G B | Ruskeat värit | cornsilk1 | FF F8 DC | 255 248 220 | blanchedalmond | FF EB CD | 255 235 205 | bisque1 | FF E4 C4 | 255 228 196 | navajowhite1 | FF DE AD | 255 222 173 | vehnä | F5 DE B3 | 245 222 179 | burlywood | DE B8 87 | 222 184 135 | tan | D2 B4 8C | 210 180 140 | rosybrown | BC 8F 8F 8F | 188 143 143 | sandybrown | F4 A4 60 | 244 164 96 | peru | CD 85 3F | 205 133 63 | suklaa | D2 69 1E | 210 105 30 | satulanruskea | 8B 45 13 | 139 69 19 | sienna | A0 52 2D | 160 82 45 | Valkoiset värit | valkoinen | FF FF FF FF | 255 255 255 | snow1 | FF FA FA FA | 255 250 250 | honeydew1 | F0 FF F0 | 240 255 240 | minttukreemi | F5 FF FA | 245 255 250 | azure1 | F0 FF FF FF | 240 255 255 | aliceblue | F0 F8 FF | 240 248 255 | ghostwhite | F8 F8 FF | 248 248 255 | whitesmoke | F5 F5 F5 F5 | 245 245 245 | simpukka1 | FF F5 EE | 255 245 238 | beige | F5 F5 DC | 245 245 220 | oldlace | FD F5 E6 | 253 245 230 | floralwhite | FF FA F0 | 255 250 240 | norsunluu1 | FF FF F0 | 255 255 240 | antiquewhite | FA EB D7 | 250 235 215 | pellava | FA F0 E6 | 250 240 230 | laventelipuna1 | FF F0 F5 | 255 240 245 | mistyrose1 | FF E4 E1 | 255 228 225 | Harmaat värit | gainsboro | DC DC DC DC | 220 220 220 | lightgray | D3 D3 D3 D3 | 211 211 211 | hopea | C0 C0 C0 C0 | 192 192 192 | darkgray | A9 A9 A9 A9 | 169 169 169 | harmaa | 80 80 80 | 128 128 128 | dimgray | 69 69 69 | 105 105 105 | lightslategray | 77 88 99 | 119 136 153 | slategray | 70 80 90 | 112 128 144 | darkslategray | 2F 4F 4F 4F | 47 79 79 | musta | #000000 | 0 0 0 | |
Valittujen verkkovärien kaavio
Tässä taulukossa esitetään valitut HTML- ja X11-värit sekä valitut epäviralliset konsensusvärit, jotka verkkosuunnittelijat ovat kehittäneet vuodesta 2002 lähtien. Epävirallisia värejä käyttävää koodia syötettäessä on ilmoitettava värin heksakoodi sen sijaan, että kirjoitettaisiin värin nimi.
Kysymyksiä ja vastauksia
K: Mitä ovat verkkovärit?
V: Verkkovärit ovat verkkosivujen suunnittelussa käytettäviä värejä sekä tapoja kuvata ja luetella näitä värejä.
K: Kuinka monta erilaista väriä voidaan luoda RGB-kolmioilla?
V: RGB-kolmioilla voidaan luoda 16 777 216 erilaista väriä.
K: Onko joillekin näistä väreistä olemassa yleisiä englanninkielisiä nimiä?
V: Kyllä, monet yleiset värit voidaan valita myös niiden yleisten englanninkielisten nimien perusteella.
K: Mitä ohjelmistoa käytetään yleensä väriarvojen luomiseen?
V: Väriarvojen luomiseen käytetään usein värityökalua tai muuta grafiikkaohjelmistoa.
K: Mihin alkuperäiset Mosaic- ja Netscape Navigator -väriluettelot perustuivat?
V: Mosaicin ja Netscape Navigatorin ensimmäiset versiot käyttivät X11-värinimiä väriluetteloidensa pohjana, koska molemmat alkoivat X Window System -sovelluksina.
K: Mihin sRGB liittyy, kun on kyse web-väreistä?
V: Jokaisella verkkovärillä on oma määritelmänsä, sRGB, joka liittyy yhden fosforisarjan kromaattisuuteen, tiettyyn siirtokäyrään, mukautuvaan valkoiseen pisteeseen ja katseluolosuhteisiin.
K: Miten käyttäjäagentit näyttävät nämä värit tarkasti?
V: Paremmat käyttäjäagentit käyttävät värinhallintaa parempaan väritarkkuuteen, mikä on tärkeää Web-tulostussovelluksissa.