Tumma minkä värinen. Tyylien värit voidaan määrittää eri tavoin: heksadesimaaliarvolla, nimellä, RGB-, RGBA-, HSL-, HSLA-muodossa. RGB:n käyttö

CSS-värimoduulissa on yksityiskohtaisia ​​arvoja, joiden avulla kirjoittajat voivat määrittää html-elementtien värit ja peittävyyden sekä väriominaisuuden arvot.

värin ominaisuus

1. Ensisijaiset värit: väriominaisuus

Ominaisuus määrittää fontin värin käyttämällä erilaisia ​​järjestelmiä värintoisto. Ominaisuus kuvaa elementin tekstisisällön väriä. Lisäksi sitä käytetään antamaan mahdollinen epäsuora arvo (currentColor) kaikille muille väriarvoja hyväksyville ominaisuuksille.

Omaisuus on perinnöllinen.

2. Väriarvot

2.1. Tärkeimmät avainsanat

Pääavainsanojen luettelo sisältää seuraavat merkitykset:

Nimi HEX RGB Väri
musta #000000 0,0,0
hopea #C0C0C0 192,192,192
harmaa #808080 128,128,128
valkoinen #FFFFFF 255,255,255
kastanjanruskea #800000 128,0,0
punainen #FF0000 255,0,0
violetti #800080 128,0,128
fuksia #FF00FF 255,0,255
vihreä #008000 0,128,0
lime #00FF00 0,255,0
oliivi #808000 128,128,0
keltainen #FFFF00 255,255,0
laivasto #000080 0,0,128
sininen #0000FF 0,0,255
sinivihreä #008080 0,128,128
aqua #00FFFF 0,255,255

Värien nimissä ei ole merkitystä.

Syntaksi

Väri: sinivihreä;

2.2. Numeeriset väriarvot

2.2.1. RGB mallin värit

RGB-arvon heksadesimaalimuoto on #-merkki, jota seuraa välittömästi kolme tai kuusi heksadesimaalimerkkiä. Kolminumeroinen RGB-merkintä #rgb muunnetaan kuusinumeroiseen muotoon #rrggbb kopioimalla numerot nollien lisäämisen sijaan. Esimerkiksi #fb0 laajenee muotoon #ffbb00 . Tämä varmistaa, että valkoinen #ffffff voidaan määrittää lyhyessä #ffff-merkinnässä, ja poistaa kaikki riippuvuudet näytön värisyvyydestä.

RGB-arvon muoto funktionaalisessa merkinnässä on rgb (seuraa pilkuilla eroteltu luettelo kolmesta numeerisesta arvosta (joko kolme kokonaislukuarvoa tai kolme prosenttiarvoa), jota seuraa symboli). Kokonaisluku 255 vastaa 100 % ja F tai FF heksadesimaalimuodossa:

Rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF

Numeeristen arvojen ympärillä saa olla välilyöntejä.

HTML-värit on merkitty kuudella merkillä vinoviivamerkin jälkeen - esimerkiksi #000000. Nämä kuusi symbolia edustavat eri värien (punainen, vihreä, sininen) suhteita lopullisessa värissä. Tietokoneen näytöllä kuva muodostuu valtavasta määrästä pisteitä, joita kutsutaan pikseleiksi. Jokainen pikseli on pieni valonlähde, kutsutaan sitä "taskulamoksi", joka puolestaan ​​koostuu kolmesta taskulampusta - punaisesta, vihreästä ja sinisestä. Vähentämällä tai lisäämällä yksittäisten värillisten taskulamppujen hehkua saamme halutun värin.

HTML-värikoodit

HTML:n värit esitetään punaisen, sinisen ja vihreän (RGB) heksadesimaalimerkinnällä (HEX).

Pienin väriarvo on 0 (heksadesimaali 00). Suurin väriarvo on 255 (heksa FF).

Heksadesimaaliväriarvo on kolme numeroa alkaen #-merkistä.

Värikoodit (merkitykset)

Väri HEX-koodi RGB-koodi
#000000 rgb(0,0,0)
#FF0000 rgb(255;0;0)
#00FF00 rgb(0;255;0)
#0000FF rgb(0;0;255)
#FFFF00 rgb(255 255,0)
#00FFFF rgb(0 255 255)
#FF00FF rgb(255;0;255)
#C0C0C0 rgb(192 192 192)
#FFFFFF rgb(255 255 255)

16 miljoonaa sävyä

Yhdistämällä punaisen, sinisen ja vihreän arvot välillä 0-255 kunkin värin prosenttiosuudelle saadaan yhteensä yli 16 miljoonaa sävyä (256 x 256 x 256).

Useimmat nykyaikaiset näytöt pystyvät näyttämään vähintään 16 384 eri sävyä (LCD-näytöt pystyvät yleensä näyttämään 262 tuhatta 16 miljoonaa (päivitetty lokakuussa 2013) värit, ja CRT-näytöt voivat näyttää lähes rajattoman määrän värejä).

Alla oleva väritaulukko näyttää punaisen osuuden muutoksen 0:sta 255:een sinisen ja vihreän nolla-arvoilla:

Punainen HEX-koodi RGB-koodi
#000000 rgb(0,0,0)
#080000 rgb(8;0;0)
#100000 rgb(16;0;0)
#180000 rgb(24;0;0)
#200000 rgb(32;0;0)
#280000 rgb(40;0;0)
#300000 rgb(48;0;0)
#380000 rgb(56;0;0)
#400000 rgb(64;0;0)
#480000 rgb(72;0;0)
#500000 rgb(80;0;0)
#580000 rgb(88;0;0)
#600000 rgb(96;0;0)
#680000 rgb(104;0;0)
#700000 rgb(112;0;0)
#780000 rgb(120;0;0)
#800000 rgb(128;0;0)
#880000 rgb(136;0;0)
#900000 rgb(144;0;0)
#980000 rgb(152;0;0)
#A00000 rgb(160;0;0)
#A80000 rgb(168;0;0)
#B00000 rgb(176;0;0)
#B80000 rgb(184;0;0)
#C00000 rgb(192;0;0)
#C80000 rgb(200;0;0)
#D00000 rgb(208;0;0)
#D80000 rgb(216;0;0)
#E00000 rgb(224;0;0)
#E80000 rgb(232;0;0)
#F00000 rgb(240;0;0)
#F80000 rgb(248;0;0)
#FF0000 rgb(255;0;0)

Harmaan sävyt

Harmaan sävyjen saamiseksi käytetään yhtä suuria osuuksia kaikista väreistä. Jotta oikean värin valitseminen olisi helpompaa, tarjoamme sinulle harmaan sävykoodit

Harmaan sävyt HEX-koodi RGB-koodi
#000000 rgb(0,0,0)
#080808 RGB(8;8;8)
#101010 rgb(16;16;16)
#181818 rgb(24;24;24)
#202020 rgb(32;32;32)
#282828 rgb(40;40;40)
#303030 rgb(48;48;48)
#383838 rgb(56;56;56)
#404040 rgb(64;64;64)
#484848 rgb(72;72;72)
#505050 rgb(80;80;80)
#585858 rgb(88;88;88)
#606060 RGB(96;96;96)
#686868 rgb(104 104 104)
#707070 rgb(112 112 112)
#787878 rgb(120 120 120)
#808080 rgb(128 128 128)
#888888 rgb(136 136 136)
#909090 rgb(144 144 144)
#989898 rgb(152 152 152)
#A0A0A0 rgb(160 160 160)
#A8A8A8 rgb(168 168 168)
#B0B0B0 rgb(176 176 176)
#B8B8B8 rgb(184 184 184)
#C0C0C0 rgb(192 192 192)
#C8C8C8 rgb(200 200 200)
#D0D0D0 rgb(208 208 208)
#D8D8D8 rgb(216 216 216)
#E0E0E0 rgb(224 224 224)
#E8E8E8 rgb(232 232 232)
#F0F0F0 rgb(240 240 240)
#F8F8F8 rgb(248 248 248)
#FFFFFF rgb(255 255 255)

Selainten väliset (kaikki selaimet) html-värien nimet

Kokoelma 150 värin nimeä html-muodossa, tuettu kaikissa selaimissa.

Standardoidut värinimet

W3C listaa 16 kelvollista värinimeä HTML:lle ja CSS:lle: vesi, musta, sininen, fuksia, harmaa, vihreä, lime, kastanjanruskea (kastanja), navy (ultramariini), oliivi (oliivi), violetti (violetti), punainen (punainen) , hopea (hopea), tavi (harmaa), valkoinen (valkoinen) ja keltainen (keltainen).

Käytettäessä värejä, jotka eivät sisälly tähän luetteloon, on oikeampaa käyttää niiden heksadesimaalikoodia (HEX) tai RGB-koodia.

Turvalliset värit

Useita vuosia sitten, kun tietokoneet pystyivät tukemaan enintään 256 eri väriä, ehdotettiin luetteloa 216 "Web Safe Colors" -väristä, joista 40 oli varattu järjestelmälle.

Tämä 216 värin paletti luotiin näyttämään värit oikein 256 värin palettitilassa.

Tällä ei nyt ole väliä, koska useimmat tietokoneet ympäri maailmaa tukevat miljoonia värisävyjä. Joka tapauksessa tässä on luettelo näistä väreistä:

000000 000033 000066 000099 0000CC 0000 FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300cc 3300 FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33 FF00 33FF33 33FF66 33 FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600 FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66 FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900 FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99 FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
3300 FF FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
9900 FF FF9933 FF9966 9999 FF FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Tällä sivulla on taulukko avainsanoja, joita voidaan käyttää osoittamaan värejä sellaisilla Web-kehittäjäkielillä kuin: HTML, CSS, JavaScript, Flash jne.

WC3-konsernin vanhoissa spesifikaatioissa oli määritelty vain 16 avainsanaa, joiden avulla värit asetettiin HTML:ssä ja CSS:ssä. Edelleen, nykyaikaisempiin määrityksiin lisättiin vielä 130 avainsanaa osoittamaan värien nimiä. Seuraava taulukko sisältää värien nimet sekä heksa- ja RGB-koodit, joita ne vastaavat.

Mukaisesti CSS-säännöt värien nimet eivät ole kirjainkoolla. Värimerkinnät IndianRed ja indianred ovat vastaavia.

On myös syytä huomata, että taulukon 146 avainsanasta siinä on itse asiassa vähemmän värejä. Tämä johtuu siitä, että jotkut avainsanat viittaavat samaan väriin. Siten nimet Harmaa ja Harmaa edustavat 50 % harmaata värikoodia #808080, ja sana Magenta on synonyymi HTML-värille Fuchsia, joka vastaa heksadesimaalikoodia #FF00FF. Synonyymejä ovat myös sanat Aqua ja Cyan, ne vastaavat koodia #00FFFF.

Värin nimi HTML:ssä ja CSS:ssä HEX RGB
Punaiset sävyt:
Intianpunainen#CD5C5C205, 92, 92
Vaalea koralli#F08080240, 128, 128
Lohi#FA8072250, 128, 114
DarkSalmon#E9967A233, 150, 122
Vaalea lohi#FFA07A255, 160, 122
Crimson#DC143C220, 20, 60
Punainen#FF0000255, 0, 0
Tulenkestävä tiili#B22222178, 34, 34
Tummanpunainen#8B0000139, 0, 0
Vaaleanpunaiset sävyt:
Vaaleanpunainen#FFC0CB255, 192, 203
Vaalea pinkki#FFB6C1255, 182, 193
Kuuma pinkki#FF69B4255, 105, 180
Deep Pink#FF1493255, 20, 147
Keskiviolettipunainen#C71585199, 21, 133
Vaalean violettipunainen#DB7093219, 112, 147
Oranssin sävyt:
Vaalea lohi#FFA07A255, 160, 122
Koralli#FF7F50255, 127, 80
Tomaatti#FF6347255, 99, 71
Oranssinpunainen#FF4500255, 69, 0
Tummanoranssi#FF8C00255, 140, 0
Oranssi#FFA500255, 165, 0
Keltaiset sävyt:
Kulta#FFD700255, 215, 0
Keltainen#FFFF00255, 255, 0
Vaaleankeltainen#FFFFE0255, 255, 224
Sitruunasifonki#FFFACD255, 250, 205
Vaalea kultainen keltainen#FAFAD2250, 250, 210
PapayaWhip#FFEFD5255, 239, 213
Mokkasiini#FFE4B5255, 228, 181
PeachPuff#FFDAB9255, 218, 185
Vaalea kultainen#EEE8AA238, 232, 170
Khaki#F0E68C240, 230, 140
Tumma khaki#BDB76B189, 183, 107
Violetin sävyt:
Laventeli#E6E6FA230, 230, 250
Ohdake#D8BFD8216, 191, 216
Luumu#DDA0DD221, 160, 221
Violetti#EE82EE238, 130, 238
Orkidea#DA70D6218, 112, 214
fuksia#FF00FF255, 0, 255
Magenta#FF00FF255, 0, 255
Keskikokoinen orkidea#BA55D3186, 85, 211
Medium Purppura#9370DB147, 112, 219
Sininen violetti#8A2BE2138, 43, 226
Tummanvioletti#9400D3148, 0, 211
DarkOrchid#9932CC153, 50, 204
Tummanmagenta#8B008B139, 0, 139
Violetti#800080 128, 0, 128
Indigo#4B008275, 0, 130
SlateBlue#6A5ACD106, 90, 205
Tumma SlateBlue#483D8B72, 61, 139
Ruskean sävyt:
Cornsilkki#FFF8DC255, 248, 220
Blanšoitu manteli#FFEBCD255, 235, 205
Äyriäiskeitto#FFE4C4255, 228, 196
Navajovalkoinen#FFDEAD255, 222, 173
Vehnä#F5DEB3245, 222, 179
BurlyWood#DEB887222, 184, 135
Tan#D2B48C210, 180, 140
Ruusuruskea#BC8F8F188, 143, 143
SandyBrown#F4A460244, 164, 96
Kultapuikko#DAA520218, 165, 32
Tumma Kultainen Rod#B8860B184, 134, 11
Peru#CD853F205, 133, 63
Suklaa#D2691E210, 105, 30
Satulanruskea#8B4513139, 69, 19
Sienna#A0522D160, 82, 45
Ruskea#A52A2A165, 42, 42
Kastanjanruskea#800000 128, 0, 0
Päävärit:
Musta#000000 0, 0, 0
harmaa#808080 128, 128, 128
Hopea#C0C0C0192, 192, 192
Valkoinen#FFFFFF255, 255, 255
fuksia#FF00FF255, 0, 255
Violetti#800080 128, 0, 128
Punainen#FF0000255, 0, 0
Kastanjanruskea#800000 128, 0, 0
Keltainen#FFFF00205, 92, 92
Oliivi#808000 240, 128, 128
Lime#00FF00250, 128, 114
Vihreä#008000 233, 150, 122
Aqua#00FFFF205, 92, 92
Sinivihreä#008080 240, 128, 128
Sininen#0000FF250, 128, 114
Laivasto#000080 233, 150, 122
Värin nimi HTML:ssä ja CSS:ssä HEX RGB
Vihreät sävyt:
Vihreä keltainen#ADFF2F173, 255, 47
Keltaisen vihreä#7FFF00127, 255, 0
Nurmikonvihreä#7CFC00124, 252, 0
Lime#00FF000, 255, 0
Limenvihreä#32CD3250, 205, 50
Vaaleanvihreä#98FB98152, 251, 152
Vaaleanvihreä#90EE90144, 238, 144
Medium Spring Green#00FA9A0, 250, 154
Keväänvihreä#00FF7F0, 255, 127
MediumSea Green#3CB37160, 179, 113
Meren vihreä#2E8B5746, 139, 87
Metsänvihreä#228B2234, 139, 34
Vihreä#008000 0, 128, 0
Tummanvihreä#006400 0, 100, 0
Keltainen Vihreä#9ACD32154, 205, 50
Oliivinvihreä#6B8E23107, 142, 35
Oliivi#808000 128, 128, 0
Tumman oliivinvihreä#556B2F85, 107, 47
Keskikokoinen akvamariini#66CDAA102, 205, 170
Tummanmerenvihreä#8FBC8F143, 188, 143
Vaalea Merenvihreä#20B2AA32, 178, 170
Tumma syaani#008B8B0, 139, 139
Sinivihreä#008080 0, 128, 128
Siniset sävyt:
Aqua#00FFFF0, 255, 255
Syaani#00FFFF0, 255, 255
Vaalea syaani#E0FFFF224, 255, 255
Vaalea turkoosi#MAKSUT175, 238, 238
Akvamariini#7FFFD4127, 255, 212
Turkoosi#40E0D064, 224, 208
Keskikokoinen turkoosi#48D1CC72, 209, 204
Tumma turkoosi#00CED10, 206, 209
Kadetinsininen#5F9EA095, 158, 160
SteelBlue#4682B470, 130, 180
VaaleaSteelBlue#B0C4DE176, 196, 222
Puuterinsininen#B0E0E6176, 224, 230
Vaaleansininen#ADD8E6173, 216, 230
Taivaansininen#87CEEB135, 206, 235
Vaalea taivaansininen#87CEFA135, 206, 250
DeepSkyBlue#00BFFF0, 191, 255
DodgerBlue#1E90FF30, 144, 255
Ruiskukansininen#6495ED100, 149, 237
Medium SlateBlue#7B68EE123, 104, 238
Kuninkaallisen sininen#4169E165, 105, 225
Sininen#0000FF0, 0, 255
Keski sininen#0000CD0, 0, 205
Tummansininen#00008B0, 0, 139
Laivasto#000080 0, 0, 128
Yönsininen#191970 25, 25, 112
Valkoiset sävyt:
Valkoinen#FFFFFF255, 255, 255
Lumi#FFFAFA255, 250, 250
Mesikaste#F0FFF0240, 255, 240
MintCream#F5FFFA245, 255, 250
Taivaansininen#F0FFFF240, 255, 255
AliceBlue#F0F8FF240, 248, 255
GhostWhite#F8F8FF248, 248, 255
Valkoinen savu#F5F5F5245, 245, 245
Kotilo#FFF5EE255, 245, 238
Beige#F5F5DC245, 245, 220
Vanha Lace#FDF5E6253, 245, 230
Kukkavalkoinen#FFFAF0255, 250, 240
Norsunluu#FFFFFF0255, 255, 240
Antiikkivalkoinen#FAEBD7250, 235, 215
Liinavaatteet#FAF0E6250, 240, 230
LavenderBlush#FFF0F5255, 240, 245
MistyRose#FFE4E1255, 228, 225
Harmaan sävyt:
Gainsboro#DCDCDC220, 220, 220
Vaalean harmaa#D3D3D3211, 211, 211
Vaalean harmaa#D3D3D3211, 211, 211
Hopea#C0C0C0192, 192, 192
Tumman harmaa#A9A9A9169, 169, 169
Tummanharmaa#A9A9A9169, 169, 169
harmaa#808080 128, 128, 128
harmaa#808080 128, 128, 128
DimGray#696969 105, 105, 105
Himmeäharmaa#696969 105, 105, 105
Vaalea SlateGray#778899 119, 136, 153
Vaalea SlateGrey#778899 119, 136, 153
Liuskeenharmaa#708090 112, 128, 144
Liuskeenharmaa#708090 112, 128, 144
Tumma SlateGray#2F4F4F47, 79, 79
Tumma SlateGrey#2F4F4F47, 79, 79
Musta#000000 0, 0, 0

Heksadesimaalilukuja käytetään värien määrittämiseen. Heksadesimaalijärjestelmä, toisin kuin desimaalijärjestelmä, perustuu nimensä mukaisesti numeroon 16. Numerot ovat seuraavat: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Numerot 10-15 korvataan latinalaisilla kirjaimilla. Lukuja, jotka ovat suurempia kuin 15 heksadesimaalijärjestelmässä, muodostetaan yhdistämällä kaksi numeroa yhdeksi. Esimerkiksi numero 255 tuumaa desimaalijärjestelmä vastaa lukua FF heksadesimaalimuodossa. Sekaannusten välttämiseksi numerojärjestelmän määrittämisessä, ennen heksadesimaaliluku laita hash-symboli #, esimerkiksi #666999. Jokainen kolmesta väristä - punainen, vihreä ja sininen - voi saada arvot välillä 00 - FF. Siten värisymboli on jaettu kolmeen osaan #rrggbb, joissa kaksi ensimmäistä symbolia osoittavat värin punaista komponenttia, kaksi keskimmäistä - vihreää ja kaksi viimeistä - sinistä. On sallittua käyttää lyhennettä #rgb, jossa jokainen merkki tulee kaksinkertaistaa. Näin ollen merkintää #fe0 on pidettävä muodossa #ffee00.

Nimeltä

Internet Explorer Kromi Ooppera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Selaimet tukevat joitain värejä niiden nimellä. Taulukossa 1 näyttää nimet, heksadesimaalikoodin, RGB-, HSL-arvot ja kuvauksen.

Pöytä 1. Värien nimet
Nimi Väri Koodi RGB HSL Kuvaus
valkoinen #ffffff tai #ffff rgb(255 255 255) hsl(0,0 %, 100 %) Valkoinen
hopea #c0c0c0 rgb(192 192 192) hsl (0,0 %, 75 %) Harmaa
harmaa #808080 rgb(128 128 128) hsl (0,0 %, 50 %) Tummanharmaa
musta #000000 tai #000 rgb(0,0,0) hsl (0,0 %, 0 %) Musta
kastanjanruskea #800000 rgb(128;0;0) hsl (0,100 %, 25 %) Tummanpunainen
punainen #ff0000 tai #f00 rgb(255;0;0) hsl(0,100%,50%) Punainen
oranssi #ffa500 rgb(255;165;0) HSL(38,8 100 %, 50 %) Oranssi
keltainen #ffff00 tai #ff0 rgb(255 255,0) hsl(60 100 %, 50 %) Keltainen
oliivi #808000 rgb(128;128;0) hsl (60 100 %, 25 %) Oliivi
lime #00ff00 tai #0f0 rgb(0;255;0) hsl(120 100 %, 50 %) Vaaleanvihreä
vihreä #008000 rgb(0;128;0) hsl(120 100 %, 25 %) Vihreä
aqua #00ffff tai #0ffff rgb(0 255 255) hsl(180 100 %, 50 %) Sininen
sininen #0000ff tai #00f rgb(0;0;255) hsl(240 100 %, 50 %) Sininen
laivasto #000080 rgb(0;0;128) hsl(240 100 %, 25 %) Tummansininen
sinivihreä #008080 rgb(0 128 128) hsl(180 100 %, 25 %) Sinivihreä
fuksia #ff00ff tai #f0f rgb(255;0;255) hsl(300,100%,50%) Vaaleanpunainen
violetti #800080 rgb(128;0;128) hsl(300,100%,25%) Violetti

RGB:n käyttö

Internet Explorer Kromi Ooppera Safari Firefox Android iOS
5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Voit määrittää värin käyttämällä punaista, vihreää ja sinistä arvoa desimaalilukuina. Jokainen kolmesta värikomponentista saa arvon 0 - 255. On myös mahdollista asettaa väri prosentteina, jolloin 100 % vastaa numeroa 255. Osoita ensin avainsana rgb , ja sitten värikomponentit ilmoitetaan suluissa pilkuilla erotettuina, esimerkiksi rgb(255, 128, 128) tai rgb(100%, 50%, 50%).

RGBA

Internet Explorer Kromi Ooppera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

RGBA-muoto on syntaksilta samanlainen kuin RGB, mutta sisältää alfakanavan, joka määrittää elementin läpinäkyvyyden. Arvo 0 on täysin läpinäkyvä, 1 on läpinäkymätön ja väliarvo, kuten 0,5, on puoliläpinäkyvä.

RGBA lisättiin CSS3:een, joten CSS-koodi on tarkistettava tätä versiota vastaan. On huomattava, että CSS3-standardi on edelleen kehitteillä ja jotkin ominaisuudet saattavat muuttua. Esimerkiksi RGB-muodossa oleva taustaväri-ominaisuuteen lisätty väri vahvistetaan, mutta tausta-ominaisuuteen lisätty väri ei ole enää voimassa. Samaan aikaan selaimet ymmärtävät molempien ominaisuuksien värin oikein.

HSL

Internet Explorer Kromi Ooppera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

HSL-muodon nimi on johdettu ensimmäisten kirjainten Hue (sävy), Saturate (saturation) ja Lightness (vaaleus) yhdistelmästä. Sävy on väripyörän väriarvo (kuva 1) ja se ilmoitetaan asteina. 0° vastaa punaista, 120° vihreää ja 240° sinistä. Sävyarvo voi vaihdella välillä 0 - 359.

Riisi. 1. Väripyörä

Kylläisyys on värin intensiteetti ja se mitataan prosentteina välillä 0 % - 100 %. Arvo 0 % tarkoittaa, että väriä ei ole ja harmaasävyä, 100 % on kylläisyyden maksimiarvo.

Vaaleus määrittää, kuinka kirkas väri on, ja se määritetään prosentteina välillä 0 % - 100 %. Pienet arvot tekevät väristä tummemman ja korkeat arvot vaaleamman; ääriarvot 0% ja 100% vastaavat mustaa ja valkoista.

HSLA

Internet Explorer Kromi Ooppera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

HSLA-muoto on syntaksilta samanlainen kuin HSL, mutta sisältää alfakanavan elementin läpinäkyvyyden määrittämiseksi. Arvo 0 on täysin läpinäkyvä, 1 on läpinäkymätön ja väliarvo, kuten 0,5, on puoliläpinäkyvä.

Väriarvot sisään RGBA-muodot, HSL ja HSLA on lisätty CSS3:een, joten kun käytät näitä muotoja, tarkista koodisi version oikeellisuus.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

värit

Varoitus

Kaikki sivustolla luetellut leijonanpyyntimenetelmät ovat teoreettisia ja perustuvat laskennallisiin menetelmiin. Tekijät eivät takaa turvallisuuttasi käyttäessäsi niitä eivätkä ole vastuussa tuloksista. Muista, että leijona on saalistaja ja vaarallinen eläin!

Arrrgh!

Tulos tämä esimerkki esitetty kuvassa. 2.

Riisi. 2. Värit verkkosivulla

CSS:n värikoodeja käytetään värien määrittämiseen. Tyypillisesti värikoodeja tai väriarvoja käytetään värin asettamiseen joko elementin etualan värille (esim. tekstin väri, linkin väri) tai elementin taustavärille (taustaväri, lohkon väri). Niitä voidaan käyttää myös painikkeen, reunuksen, merkin, osoittimen ja muiden koristetehosteiden värin vaihtamiseen.

Voit määrittää väriarvosi eri muodoissa. Seuraavassa taulukossa luetellaan kaikki mahdolliset muodot:

Luetellut muodot kuvataan tarkemmin alla.

CSS-värit - Hex-koodit

Heksadesimaalinen värikoodi on kuusinumeroinen esitys väristä. Kaksi ensimmäistä numeroa (RR) edustavat punaista arvoa, kaksi seuraavaa vihreää arvoa (GG) ja kaksi viimeistä sinistä arvoa (BB).

CSS-värit - Lyhyet heksadesimaalikoodit

Lyhyt kuusiokoloinen värikoodi on lyhyempi muoto kuuden merkin merkinnöistä. Tässä muodossa jokainen numero toistetaan vastaavan kuusinumeroisen väriarvon tuottamiseksi. Esimerkiksi: #0F0 muuttuu #00FF00.

Heksadesimaaliarvo voidaan ottaa mistä tahansa grafiikasta ohjelmisto, kuten Adobe Photoshop, Core Draw jne.

Jokaista heksadesimaalivärikoodia CSS:ssä edeltää hash-merkki "#". Alla on esimerkkejä heksadesimaalimerkintöjen käytöstä.

CSS-värit - RGB-arvot

RGB-arvo on värikoodi, joka asetetaan rgb()-ominaisuuden avulla. Tämä ominaisuus ottaa kolme arvoa: yksi punaiselle, vihreälle ja siniselle. Arvo voi olla kokonaisluku 0-255 tai prosenttiosuus.

Huomautus: Kaikki selaimet eivät tue rgb()-väriominaisuutta, joten sen käyttöä ei suositella.

Alla on esimerkki useista väreistä RGB-arvoilla.

Värikoodigeneraattori

Palvelumme avulla voit luoda miljoonia värikoodeja.

Selaimen turvalliset värit

Alla on taulukko 216 väristä, jotka ovat turvallisimpia ja tietokoneista riippumattomimpia. Nämä värit CSS:ssä vaihtelevat 000000:sta FFFFFF-heksadesimaalikoodiin. Ne ovat turvallisia käyttää, koska ne varmistavat, että kaikki tietokoneet näyttävät värit oikein käytettäessä 256 väripalettia.

CSS:n "turvallisten" värien taulukko
#000000 #000033 #000066 #000099 #0000CC#0000FF
#003300 #003333 #003366 #003399 #0033CC#0033FF
#006600 #006633 #006666 #006699 #0066CC#0066FF
#009900 #009933 #009966 #009999 #0099CC#0099FF
#00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF
#00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF
#330000 #330033 #330066 #330099 #3300CC#3300FF
#333300 #333333 #333366 #333399 #3333CC#3333FF
#336600 #336633 #336666 #336699 #3366CC#3366FF
#339900 #339933 #339966 #339999 #3399CC#3399FF
#33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF
#33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF
#660000 #660033 #660066 #660099 #6600CC#6600FF
#663300 #663333 #663366 #663399 #6633CC#6633FF
#666600 #666633 #666666 #666699 #6666CC#6666FF
#669900 #669933 #669966 #669999 #6699CC#6699FF
#66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF
#66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF
#990000 #990033 #990066 #990099 #9900CC#9900FF
#993300 #993333 #993366 #993399 #9933CC#9933FF
#996600 #996633 #996666 #996699 #9966CC#9966FF
#999900 #999933 #999966 #999999 #9999CC#9999FF
#99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF
#99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF
#CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF
#CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF
#CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF
#CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF
#CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF
#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF
#FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF
#FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF
#FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF
#FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF
#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF
#FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF