Johdanto HTML-värinimiin
HTML-värinimet on merkitty oikein para-kohdassa. Värit ovat tärkeitä, niitä ei käytetä vain verkkosivun sisustamiseen, mutta joissain tapauksissa saatat haluta muuttaa tekstin väriä paremman kontrastin aikaansaamiseksi sivun taustaan nähden. Koska HTML on kirjoitettu tekstimuodossa, et voi vain värittää koodia haluamallasi tavalla ja odottaa selaimen käyttävän samaa väriä sivua renderoitaessa. Sen sijaan sinun on turvauduttava tunnisteiden ja määritteiden käyttämiseen kertoaksesi selaimelle, mitä väriä käytetään.
HTML-värit
HTML-värinimissä värit voidaan merkitä käyttämällä heksa-arvoa tai sen nimeä. HTML tukee yleisimpiä värejä, tässä artikkelissa jaan kanssasi näiden nimien 140 nimeä ja heksa-arvoja.
Yksi asia on pidettävä mielessä, että sinun ei tarvitse rajoittaa itseäsi näihin väreihin. Voit käyttää mitä tahansa värinvalintatyökalua löytääksesi haluamasi värin heksa-arvon ja käyttää sitä verkkosivustollasi.
HTML-värinimien käyttäminen
Värien käyttöönotto verkkosivustollasi on helppoa, ja se voidaan tehdä sekä sisäisesti että erillisen CSS-tyylitaulukon avulla.
Kun aiot käyttää samaa HTML-värinimeä sivulla useita kertoja, on parempi idea käyttää CSS-arkkia määrittämään ja asettamaan värejä. Toisaalta, jos joudut käyttämään väriä vain kerran tai kahdesti, sisäisen menetelmän käyttöä pidetään parempana.
1. HTML-värinsisäisen käyttö
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
2. Toteutus CSS: ssä
h1 ( color: Brown; )
p ( color: Gainsboro; )
Erilaiset HTML-värinimet
Nyt kun tiedät, mitä HTML-värinimet ovat ja kuinka voit käyttää niitä sivuillasi, tässä on linkki värinimistä, jotka voit lisätä kirjanmerkkeihin ja käyttää projekteissa:
1. Harmaan ja mustan HTML-värinimet
Harmaat ja mustat värit ovat useimmissa tapauksissa täydellisiä sivun tekstivärille, kun taas valkoisella taustalla nämä värit ovat parhaiten luettavissa. Yksi mielenkiintoinen asia pitää mielessä, että nykyaikaiset puhelimet, joissa on tehty OLED-näytöt, tarvitsevat akkuvirran mustan värin näyttämiseen, jos yleisösi aikoo olla mobiililaitteissa, on viisasta idea käyttää mustaa taustavärinä ja valkoisena tai muun valona värit etualan värinä.
Koodi | Väri |
# 000000 | Musta |
# 0C090A | Yö |
# 2C3539 | Gunmetal |
# 2B1B17 | keskiyö |
# 34282C | Puuhiili |
# 25383C | Tumma liuskekivi harmaa |
# 3B3131 | Öljy |
# 413839 | Musta kissa |
# 3D3C3A | Iridiumin |
# 463E3F | Musta ankerias |
# 4C4646 | Musta lehmä |
# 504A4B | Harmaasusi |
# 565051 | Vampire Grey |
# 5C5858 | Harmaa delfiini |
# 625D5D | Hiilenharmaa |
# 666362 | Ash Grey |
# 6D6968 | Pilvistä Harmaa |
# 726E6D | Savunharmaa |
# 736F6E | harmaa |
# 837E7C | Graniitti |
# 848482 | Taistelulaiva Harmaa |
# B6B6B4 | Harmaa pilvi |
# D1D0CE | Harmaa hanhi |
# E5E4E2 | Platina |
# BCC6CC | Metallinen hopea |
# 98AFC7 | Sininen harmaa |
# 6D7B8D | Vaalea liuskekivi harmaa |
# 657383 | Liuskekivi Harmaa |
# 616D7E | Jet Gray |
2. Sininen HTML-värinimi
Sinistä alleviivattua tekstiä pidetään linkinä, koska se on oletuslinkityyli useimmissa selaimissa. Sinun tulisi välttää sinisen käyttämistä koko sivun tekstissä, koska kävijät voivat erehtyä siihen hyperlinkkien vuoksi.
# 646D7E | Sumu sininen |
# 566D7E | Marmori sininen |
# 737CA1 | Liuskekivi sininen |
# 4863A0 | Teräs sininen |
# 2B547E | Sininen Jay |
# 2B3856 | Tumma liuskekivi sininen |
# 151B54 | Yönsininen |
# 000080 | Laivastonsininen |
# 342D7E | Sinivalas |
# 15317E | Lapis sininen |
# 151B8D | Denim tummansininen |
# 0000A0 | Maan sininen |
# 0020C2 | Koboltinsininen |
# 0041C2 | Mustikka sininen |
# 2554C7 | Safiirin sininen |
# 1569C7 | Siniset silmät |
# 2B60DE | Kuninkaallisen sininen |
# 1F45FC | Sininen orkidea |
# 6960EC | Sininen lootus |
# 736AFF | Vaalea liuske sininen |
# 357EC7 | Windows sininen |
# 368BC1 | Jäätikkö sininen jää |
# 488AC7 | Silkki sininen |
# 3090C7 | Sininen muratti |
# 659EC7 | Sininen Koi |
# 87AFC7 | Columbia Sininen |
# 95B9C7 | Vauva sininen |
# 728FCE | Kevyt teräs sininen |
# 2B65EC | Meren sininen |
# 306EFF | Sininen nauha |
# 157DEC | Sininen mekko |
# 1589FF | Dodger sininen |
# 6495ED | Rukkusukka sininen |
# 6698FF | Taivaansininen |
# 38ACEC | Perhonen sininen |
# 56A5EC | Jäävuori |
# 5CB3FF | Kristallin sininen |
# 3BB9FF | Syvä taivas sininen |
# 79BAEC | Denim Sininen |
# 82CAFA | Vaalea taivas sininen |
# 82CAFF | Päivä taivas sininen |
# A0CFEC | Farkut sininen |
# B7CEEC | Sininen enkeli |
# B4CFEC | Pastellinsininen |
# C2DFFF | Meri sininen |
# C6DEFF | Puuterinsininen |
#AFDCEC | Koralli sininen |
#ADDFFF | Vaaleansininen |
#BDEDFF | Robin muna sininen |
#CFECEC | Vaaleansininen lilja |
# E0FFFF | Vaalea syaani |
# EBF4FA | vesi |
# F0F8FF | AliceBlue |
# F0FFFF | Taivaansininen |
#CCFFFF | Kevyt liuskekivi |
# 93FFE8 | Kevyt akvamariini |
# 9AFEFF | Sähkösiniset |
# 7FFFD4 | Akvamariini |
# 00FFFF | Syaani tai Aqua |
# 7DFDFE | Tron sininen |
# 57FEFF | Sininen zirkoni |
# 8EEBEC | Sininen laguuni |
# 50EBEC | celeste |
# 4EE2EC | Sininen timantti |
# 81D8D0 | Tiffany Sininen |
# 92C7C7 | Syaani läpinäkymätön |
# 77BFC7 | Sininen Hosta |
# 78C7C7 | Revontulet sininen |
# 48CCCD | Keskikokoinen turkoosi |
# 43C6DB | Turkoosi |
# 46C7C7 | Meduusa |
# 7BCCB5 | Sinivihreä |
3. Vihreät HTML-värit
Luontoon, rahaan, ympäristöön jne. Liittyvillä sivustoilla vihreä voi olla hyvä valinta väreiksi, jota käytetään taustana.
# 43BFC7 | Ara sininen vihreä |
# 3EA99F | Vaaleanmeren vihreä |
# 3B9C9C | Tumma turkoosi |
# 438D80 | Merikilpikonna vihreä |
# 348781 | Keskikokoinen akvamariini |
# 307D7E | Vihertävän sininen |
# 5E7D7E | Harmahtava turkoosi |
# 4C787E | Kovakuoriaisvihreä |
# 008080 | tavi |
# 4E8975 | Meren vihreä |
# 78866B | Naamiointi vihreä |
# 848b79 | Sage Green |
# 617C58 | Hazel Green |
# 728C00 | Venom Green |
# 667C26 | Fern Green |
# 254117 | Tumma metsänvihreä |
# 306754 | Keskipitkä meri vihreä |
# 347235 | Keskikokoinen metsänvihreä |
# 437C17 | Merilevä vihreä |
# 387C44 | Mänty vihreä |
# 347C2C | Jungle Green |
# 347C17 | Shamrock Green |
# 348017 | Keskikokoinen keväänvihreä |
# 4E9258 | Metsänvihreä |
# 6AA121 | Vihreä sipuli |
# 4AA02C | Keväänvihreä |
# 41A317 | Limenvihreä |
# 3EA055 | Apila vihreä |
# 6CBB3C | Vihreä käärme |
# 6CC417 | Alien Green |
# 4CC417 | Vihreä omena |
# 52D017 | Keltainen vihreä |
# 4CC552 | Kelly Green |
# 54C571 | Zombie Green |
# 99C68E | Sammakko Vihreä |
# 89C35C | Vihreät herneet |
# 85BB65 | Dollar Bill Green |
# 8BB381 | Tumma meri vihreä |
# 9CB071 | Iguana Vihreä |
# B2C248 | Avokado vihreä |
# 9DC209 | Pistaasi vihreä |
# A1C935 | Salaattivihreä |
# 7FE817 | Kolibrinvihreä |
# 59E817 | Nebula Green |
# 57E964 | Stoplight Go Green |
# 64E986 | Levät vihreät |
# 5EFB6E | Jade Green |
# 00FF00 | Vihreä |
# 5FFB17 | Smaragdin vihreä |
# 87F717 | Nurmikko vihreä |
# 8AFB17 | Keltaisen vihreä |
# 6AFB92 | Dragon Green |
# 98FF98 | mintunvihreä |
# B5EAAA | Viherpeukalo |
# C3FDB8 | Kevyt Jade |
# CCFB5D | Tee vihreä |
# B1FB17 | Vihreä keltainen |
# BCE954 | Slime Green |
# EDDA74 | Kultapiisku |
# EDE275 | Sadonkorjuukulta |
# FFE87C | Aurinko keltainen |
4. Keltaiset HTML-värinimet
Keltaisella voidaan asettaa ei-vakava tunnelma, näyttää luovuus ja optimismi sivulla. Muista, että keltainen toimii paremmin taustana kuin tekstin väri.
# FFFF00 | Keltainen |
# FFF380 | Maissi keltainen |
# FFFFC2 | Pergamentti |
#FFFFCC | Kerma |
# FFF8C6 | Sitruuna-sifonki |
# FFF8DC | Cornsilk |
# F5F5DC | Beige |
# FBF6D9 | Vaalea |
# FAEBD7 | Antiikin |
# F7E7CE | Samppanja |
#FFEBCD | BlanchedAlmond |
# F3E5AB | Vanilja |
# ECE5B6 | Tan Brown |
# FFE5B4 | Persikka |
# FFDB58 | Sinappi |
# FFD801 | Kumi Ducky Keltainen |
# FDD017 | Kirkas kulta |
# EAC117 | kultaisen ruskea |
# F2BB66 | Juustomakaroni |
# FBB917 | Sahrami |
# FBB117 | Olut |
# FFA62F | verkkomeloni |
# E9AB17 | Mehiläinen keltainen |
5. Ruskeat HTML-värit
Ruskealla taustalla voi olla vaikeaa lukea valkoista tai mustaa tekstiä. Voit käyttää käyttäjää muihin väreihin, joilla on hyvä kontrasti ruskeasävysi kanssa.
# E2A76F | Fariinisokeri |
# DEB887 | oksainen puucolor |
# FFCBA4 | Syvä persikka |
# C9BE62 | Inkivääri ruskea |
# E8A317 | Koulubussi keltainen |
# EE9A4D | Sandy Brown |
# C8B560 | Syksyn lehti ruskea |
# D4A017 | Oranssi kulta |
# C2B280 | Hiekka |
# C7A317 | Eväste ruskea |
# C68E17 | Karamelli |
# B5A642 | Messinki |
# ADA96E | Khaki |
# C19A6B | Kamelinruskea |
# CD7F32 | Pronssi |
# C88141 | Tiikeri oranssi |
# C58917 | Kaneli |
# AF9B60 | Luodinkuori |
# AF7817 | Tumma Goldenrod |
# B87333 | Kupari |
# 966F33 | Puu |
# 806517 | Tammi Ruskea |
# 827839 | Mokkasiini |
# 827B60 | Armeijan ruskea |
# 786D5F | Hiekkakivi |
# 493D26 | mokkakahvi |
# 483C32 | taupe |
# 6F4E37 | kahvi |
# 835C3B | Ruskea karhu |
# 7F5217 | Punainen lika |
# 7F462C | Seepia |
6. Oranssit HTML-värit
Oranssi toimii hyvin korostamaan pistettä, kun väriä käytetään taustana, ja se voi herättää innostusta ja lämpöä olematta liian tahmea.6. Oranssit HTML-värit
# C47451 | Oranssi lohi |
# C36241 | Ruoste |
# C35817 | Punainen kettu |
# C85A17 | Suklaa |
# CC6600 | Sedona |
# E56717 | Papaija oranssi |
# E66C2C | Halloween Oranssi |
# F87217 | Kurpitsaoranssi |
# F87431 | Rakennuskartio oranssi |
# E67451 | Auringonnousu oranssi |
# FF8040 | Mango oranssi |
# F88017 | Tummanoranssi |
# FF7F50 | Koralli |
# F88158 | Koripallo oranssi |
# F9966B | Kevyt lohi |
# E78A61 | Tangeriini |
# E18B6B | Tumma lohi |
# E77471 | Vaalea koralli |
# F75D59 | Pavunpunainen |
# E55451 | Ystävänpäivä punainen |
# E55B3C | Shocking Orange |
7. Punaiset HTML-värikoodit
Joissakin selaimissa punaisena alleviivattua tekstiä käytetään vierailevina linkkeinä, sinun tulisi välttää sen käyttämistä hämmentämään vierailijoita.
# FF0000 | Punainen |
# FF2400 | tulipunainen |
# F62217 | Rubiinin punainen |
# F70D1A | Ferrari punainen |
# F62817 | Paloauto punainen |
# E42217 | Lava punainen |
# E41B17 | Rakasta punaista |
# DC381F | Greippi |
# C34A2C | Kastanja punainen |
# C24641 | Kirsikanpunainen |
# C04000 | Mahonki |
# C11B17 | Chili pippuri |
# 9F000F | Karpalo |
# 990012 | Punaviini |
# 8C001A | Bourgogne |
# 954535 | Kastanja |
# 7E3517 | Verenpunainen |
# 8A4117 | Sienna |
# 7E3817 | Sangria |
# 800517 | Tulenkestävä tiili |
# 810541 | Kastanjanruskea |
# 7D0541 | Luumu piirakka |
# 7E354D | Velvet Maroon |
# 7D0552 | Luumu Velvet |
# 7F4E52 | Rosy Finch |
# 7F5A58 | punaisenruskea |
# 7F525D | Tylsä violetti |
# B38481 | Rosy Brown |
# C5908E | Khaki Rose |
8. Pinkki HTML-värikoodit
Väritieteen mukaan vaaleanpunaista ja sen sävyjä voidaan käyttää, jos haluat, että vierailijalla on alitajunnassa itseluottamus, hienostuneisuus ja lämpö.
# C48189 | Vaaleanpunainen jousi |
# C48793 | Huulipuna vaaleanpunainen |
# E8ADAA | Ruusu |
# ECC5C0 | Ruusukulta |
# EDC9AF | Aavikon hiekka |
# FDD7E4 | Sian vaaleanpunainen |
#FCDFFF | Hattara |
#FFDFDD | Vaaleanpunainen kuplakumi |
# FBBBB9 | Misty Rose |
#FAAFBE | Pinkki |
#FAAFBA | Vaalea pinkki |
# F9A7B0 | Flamingo vaaleanpunainen |
# E7A1B0 | Pinkki ruusu |
# E799A3 | Vaaleanpunainen Daisy |
# E38AAE | Cadillac Pink |
# F778A1 | Neilikka vaaleanpunainen |
# E56E94 | Punertava punainen |
# F660AB | Kuuma pinkki |
# FC6C85 | Vesimeloni vaaleanpunainen |
# F6358A | Violetti punainen |
# F52887 | Syvä vaaleanpunainen |
# E45E9D | Vaaleanpunainen Cupcake |
# E4287C | Vaaleanpunainen limonadi |
# F535AA | Neon Pink |
# FF00FF | purppura |
# E3319D | Dimorphotheca Magenta |
# F433FF | Kirkas Neon Pink |
# D16587 | Vaalean violetti punainen |
# C25A7C | Tulip Pink |
# CA226B | Keskipitkän violetti punainen |
# C12869 | Rogue Pink |
# C12267 | Palanut vaaleanpunainen |
# C25283 | Bashful vaaleanpunainen |
# C12283 | Tumma neilikka vaaleanpunainen |
# B93B8F | Luumu |
9. Violetti ja valkoinen HTML-värikoodit
Valkoisen tekstin värin käyttäminen valkoista taustaa vasten tekee siitä käyttäjän lukemattoman, ja koska se ei ole käyttäjäystävällinen, voit saada SEO-rangaistuksen sivustollesi, joten käytä aina valkoisia ja muita vaaleita värejä tummaa taustaa vasten.
# 7E587E | Viola Violetti |
# 571B7E | Violetti iiris |
# 583759 | Luumu violetti |
# 4B0082 | Indigo |
# 461B7E | Violetti hirviö |
# 4E387E | Violetti usva |
# 614051 | Munakoiso |
# 5E5A80 | viinirypäle |
# 6A287E | Violetti hillo |
# 7D1B7E | Tumma orkidea |
# A74AC7 | Violetti kukka |
# B048B5 | Keskikokoinen orkidea |
# 6C2DC7 | Violetti ametisti |
# 842DCE | Tumman violetti |
# 8D38C9 | Violetti |
# 7A5DC7 | Purple Sage Bush |
# 7F38EC | Ihana violetti |
# 8E35EF | Violetti |
# 893BFF | Atsteekki violetti |
# 8467D7 | Keskipitkän violetti |
# A23BEC | Jasmine Violetti |
# B041FF | Violetti narsissin |
# C45AEC | Tyrian violetti |
# 9172EC | Crocus Violetti |
# 9E7BFF | Violetti Mimosa |
# D462FF | Heliotrope Violetti |
# E238EC | karmiininpunainen |
# C38EC7 | Violetti lohikäärme |
# C8A2C8 | Liila |
# E6A9EC | Poskipuna vaaleanpunainen |
# E0B0FF | malvanvärinen |
# C6AEC7 | Wisteria Violetti |
# F9B7FF | Kukka vaaleanpunainen |
# D2B9D3 | Ohdake |
# E9CFEC | Talvio |
# EBDDE2 | Laventeli Pinocchio |
# E3E4FA | Laventeli sininen |
# FDEEF4 | Helmi |
# FFF5EE | Kotilo |
#FEFCFF | Maitovalkoinen |
#FFFFFF | Valkoinen |
Joitakin eniten käytettyjä HTML-värikoodeja
Nämä ovat joitain suosituimpia värejä, joita käytetään verkossa, olen sijoittanut ne erilliseen taulukkoon, jotta ne löytyvät nopeasti.
Punainen | # FF0000 | Valkoinen | #FFFFFF |
syaani | # 00FFFF | Hopea | # C0C0C0 |
Sininen | # 0000FF | Harmaa tai harmaa | # 808080 |
Tummansininen | # 0000A0 | Musta | # 000000 |
Vaaleansininen | # ADD8E6 | Oranssi | # FFA500 |
Violetti | # 800080 | Ruskea | # A52A2A |
Keltainen | # FFFF00 | Kastanjanruskea | # 800000 |
Lime | # 00FF00 | Vihreä | # 008000 |
purppura | # FF00FF | Oliivi | # 808000 |
johtopäätös
Nyt kun sinulla on nopea viitetaulukko tavallisista HTML-väreistä, sinun pitäisi voida käyttää mitä tahansa haluamiasi värejä sivullesi. Luovasta näkökulmasta tulisi välttää ankarien värien käyttöä, jos pystyt ja työskennellessäsi sivuston etuosan kanssa, taustakuvien tai värien pitäminen on myös tärkeää, jotta varmistetaan oikea kontrasti.
Suositellut artikkelit
Tämä on opas HTML-värinimiin. Tässä keskustellaan siitä, kuinka värit toteutetaan verkkosivulla käyttämällä erilaisia HTML-värejä esimerkkien avulla. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -
- HTML-fonttityylit
- HTML-määritteet
- HTML-tyylisivut
- Kuinka HTML toimii
- Värit Matlabissa | Kuinka muuttaa tyyliä Matlabissa?