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

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ä.

KoodiVäri
# 000000Musta
# 0C090A
# 2C3539Gunmetal
# 2B1B17keskiyö
# 34282CPuuhiili
# 25383CTumma liuskekivi harmaa
# 3B3131Öljy
# 413839Musta kissa
# 3D3C3AIridiumin
# 463E3FMusta ankerias
# 4C4646Musta lehmä
# 504A4BHarmaasusi
# 565051Vampire Grey
# 5C5858Harmaa delfiini
# 625D5DHiilenharmaa
# 666362Ash Grey
# 6D6968Pilvistä Harmaa
# 726E6DSavunharmaa
# 736F6Eharmaa
# 837E7CGraniitti
# 848482Taistelulaiva Harmaa
# B6B6B4Harmaa pilvi
# D1D0CEHarmaa hanhi
# E5E4E2Platina
# BCC6CCMetallinen hopea
# 98AFC7Sininen harmaa
# 6D7B8DVaalea liuskekivi harmaa
# 657383Liuskekivi Harmaa
# 616D7EJet 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.

# 646D7ESumu sininen
# 566D7EMarmori sininen
# 737CA1Liuskekivi sininen
# 4863A0Teräs sininen
# 2B547ESininen Jay
# 2B3856Tumma liuskekivi sininen
# 151B54Yönsininen
# 000080Laivastonsininen
# 342D7ESinivalas
# 15317ELapis sininen
# 151B8DDenim tummansininen
# 0000A0Maan sininen
# 0020C2Koboltinsininen
# 0041C2Mustikka sininen
# 2554C7Safiirin sininen
# 1569C7Siniset silmät
# 2B60DEKuninkaallisen sininen
# 1F45FCSininen orkidea
# 6960ECSininen lootus
# 736AFFVaalea liuske sininen
# 357EC7Windows sininen
# 368BC1Jäätikkö sininen jää
# 488AC7Silkki sininen
# 3090C7Sininen muratti
# 659EC7Sininen Koi
# 87AFC7Columbia Sininen
# 95B9C7Vauva sininen
# 728FCEKevyt teräs sininen
# 2B65ECMeren sininen
# 306EFFSininen nauha
# 157DECSininen mekko
# 1589FFDodger sininen
# 6495EDRukkusukka sininen
# 6698FFTaivaansininen
# 38ACECPerhonen sininen
# 56A5ECJäävuori
# 5CB3FFKristallin sininen
# 3BB9FFSyvä taivas sininen
# 79BAECDenim Sininen
# 82CAFAVaalea taivas sininen
# 82CAFFPäivä taivas sininen
# A0CFECFarkut sininen
# B7CEECSininen enkeli
# B4CFECPastellinsininen
# C2DFFFMeri sininen
# C6DEFFPuuterinsininen
#AFDCECKoralli sininen
#ADDFFFVaaleansininen
#BDEDFFRobin muna sininen
#CFECECVaaleansininen lilja
# E0FFFFVaalea syaani
# EBF4FAvesi
# F0F8FFAliceBlue
# F0FFFFTaivaansininen
#CCFFFFKevyt liuskekivi
# 93FFE8Kevyt akvamariini
# 9AFEFFSähkösiniset
# 7FFFD4Akvamariini
# 00FFFFSyaani tai Aqua
# 7DFDFETron sininen
# 57FEFFSininen zirkoni
# 8EEBECSininen laguuni
# 50EBECceleste
# 4EE2ECSininen timantti
# 81D8D0Tiffany Sininen
# 92C7C7Syaani läpinäkymätön
# 77BFC7Sininen Hosta
# 78C7C7Revontulet sininen
# 48CCCDKeskikokoinen turkoosi
# 43C6DBTurkoosi
# 46C7C7Meduusa
# 7BCCB5Sinivihreä

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.

# 43BFC7Ara sininen vihreä
# 3EA99FVaaleanmeren vihreä
# 3B9C9CTumma turkoosi
# 438D80Merikilpikonna vihreä
# 348781Keskikokoinen akvamariini
# 307D7EVihertävän sininen
# 5E7D7EHarmahtava turkoosi
# 4C787EKovakuoriaisvihreä
# 008080tavi
# 4E8975Meren vihreä
# 78866BNaamiointi vihreä
# 848b79Sage Green
# 617C58Hazel Green
# 728C00Venom Green
# 667C26Fern Green
# 254117Tumma metsänvihreä
# 306754Keskipitkä meri vihreä
# 347235Keskikokoinen metsänvihreä
# 437C17Merilevä vihreä
# 387C44Mänty vihreä
# 347C2CJungle Green
# 347C17Shamrock Green
# 348017Keskikokoinen keväänvihreä
# 4E9258Metsänvihreä
# 6AA121Vihreä sipuli
# 4AA02CKeväänvihreä
# 41A317Limenvihreä
# 3EA055Apila vihreä
# 6CBB3CVihreä käärme
# 6CC417Alien Green
# 4CC417Vihreä omena
# 52D017Keltainen vihreä
# 4CC552Kelly Green
# 54C571Zombie Green
# 99C68ESammakko Vihreä
# 89C35CVihreät herneet
# 85BB65Dollar Bill Green
# 8BB381Tumma meri vihreä
# 9CB071Iguana Vihreä
# B2C248Avokado vihreä
# 9DC209Pistaasi vihreä
# A1C935Salaattivihreä
# 7FE817Kolibrinvihreä
# 59E817Nebula Green
# 57E964Stoplight Go Green
# 64E986Levät vihreät
# 5EFB6EJade Green
# 00FF00Vihreä
# 5FFB17Smaragdin vihreä
# 87F717Nurmikko vihreä
# 8AFB17Keltaisen vihreä
# 6AFB92Dragon Green
# 98FF98mintunvihreä
# B5EAAAViherpeukalo
# C3FDB8Kevyt Jade
# CCFB5DTee vihreä
# B1FB17Vihreä keltainen
# BCE954Slime Green
# EDDA74Kultapiisku
# EDE275Sadonkorjuukulta
# FFE87CAurinko 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.

# FFFF00Keltainen
# FFF380Maissi keltainen
# FFFFC2Pergamentti
#FFFFCCKerma
# FFF8C6Sitruuna-sifonki
# FFF8DCCornsilk
# F5F5DCBeige
# FBF6D9Vaalea
# FAEBD7Antiikin
# F7E7CESamppanja
#FFEBCDBlanchedAlmond
# F3E5ABVanilja
# ECE5B6Tan Brown
# FFE5B4Persikka
# FFDB58Sinappi
# FFD801Kumi Ducky Keltainen
# FDD017Kirkas kulta
# EAC117kultaisen ruskea
# F2BB66Juustomakaroni
# FBB917Sahrami
# FBB117Olut
# FFA62Fverkkomeloni
# E9AB17Mehilä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.

# E2A76FFariinisokeri
# DEB887oksainen puucolor
# FFCBA4Syvä persikka
# C9BE62Inkivääri ruskea
# E8A317Koulubussi keltainen
# EE9A4DSandy Brown
# C8B560Syksyn lehti ruskea
# D4A017Oranssi kulta
# C2B280Hiekka
# C7A317Eväste ruskea
# C68E17Karamelli
# B5A642Messinki
# ADA96EKhaki
# C19A6BKamelinruskea
# CD7F32Pronssi
# C88141Tiikeri oranssi
# C58917Kaneli
# AF9B60Luodinkuori
# AF7817Tumma Goldenrod
# B87333Kupari
# 966F33Puu
# 806517Tammi Ruskea
# 827839Mokkasiini
# 827B60Armeijan ruskea
# 786D5FHiekkakivi
# 493D26mokkakahvi
# 483C32taupe
# 6F4E37kahvi
# 835C3BRuskea karhu
# 7F5217Punainen lika
# 7F462CSeepia

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

# C47451Oranssi lohi
# C36241Ruoste
# C35817Punainen kettu
# C85A17Suklaa
# CC6600Sedona
# E56717Papaija oranssi
# E66C2CHalloween Oranssi
# F87217Kurpitsaoranssi
# F87431Rakennuskartio oranssi
# E67451Auringonnousu oranssi
# FF8040Mango oranssi
# F88017Tummanoranssi
# FF7F50Koralli
# F88158Koripallo oranssi
# F9966BKevyt lohi
# E78A61Tangeriini
# E18B6BTumma lohi
# E77471Vaalea koralli
# F75D59Pavunpunainen
# E55451Ystävänpäivä punainen
# E55B3CShocking 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.

# FF0000Punainen
# FF2400tulipunainen
# F62217Rubiinin punainen
# F70D1AFerrari punainen
# F62817Paloauto punainen
# E42217Lava punainen
# E41B17Rakasta punaista
# DC381FGreippi
# C34A2CKastanja punainen
# C24641Kirsikanpunainen
# C04000Mahonki
# C11B17Chili pippuri
# 9F000FKarpalo
# 990012Punaviini
# 8C001ABourgogne
# 954535Kastanja
# 7E3517Verenpunainen
# 8A4117Sienna
# 7E3817Sangria
# 800517Tulenkestävä tiili
# 810541Kastanjanruskea
# 7D0541Luumu piirakka
# 7E354DVelvet Maroon
# 7D0552Luumu Velvet
# 7F4E52Rosy Finch
# 7F5A58punaisenruskea
# 7F525DTylsä violetti
# B38481Rosy Brown
# C5908EKhaki 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ö.

# C48189Vaaleanpunainen jousi
# C48793Huulipuna vaaleanpunainen
# E8ADAARuusu
# ECC5C0Ruusukulta
# EDC9AFAavikon hiekka
# FDD7E4Sian vaaleanpunainen
#FCDFFFHattara
#FFDFDDVaaleanpunainen kuplakumi
# FBBBB9Misty Rose
#FAAFBEPinkki
#FAAFBAVaalea pinkki
# F9A7B0Flamingo vaaleanpunainen
# E7A1B0Pinkki ruusu
# E799A3Vaaleanpunainen Daisy
# E38AAECadillac Pink
# F778A1Neilikka vaaleanpunainen
# E56E94Punertava punainen
# F660ABKuuma pinkki
# FC6C85Vesimeloni vaaleanpunainen
# F6358AVioletti punainen
# F52887Syvä vaaleanpunainen
# E45E9DVaaleanpunainen Cupcake
# E4287CVaaleanpunainen limonadi
# F535AANeon Pink
# FF00FFpurppura
# E3319DDimorphotheca Magenta
# F433FFKirkas Neon Pink
# D16587Vaalean violetti punainen
# C25A7CTulip Pink
# CA226BKeskipitkän violetti punainen
# C12869Rogue Pink
# C12267Palanut vaaleanpunainen
# C25283Bashful vaaleanpunainen
# C12283Tumma neilikka vaaleanpunainen
# B93B8FLuumu

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.

# 7E587EViola Violetti
# 571B7EVioletti iiris
# 583759Luumu violetti
# 4B0082Indigo
# 461B7EVioletti hirviö
# 4E387EVioletti usva
# 614051Munakoiso
# 5E5A80viinirypäle
# 6A287EVioletti hillo
# 7D1B7ETumma orkidea
# A74AC7Violetti kukka
# B048B5Keskikokoinen orkidea
# 6C2DC7Violetti ametisti
# 842DCETumman violetti
# 8D38C9Violetti
# 7A5DC7Purple Sage Bush
# 7F38ECIhana violetti
# 8E35EFVioletti
# 893BFFAtsteekki violetti
# 8467D7Keskipitkän violetti
# A23BECJasmine Violetti
# B041FFVioletti narsissin
# C45AECTyrian violetti
# 9172ECCrocus Violetti
# 9E7BFFVioletti Mimosa
# D462FFHeliotrope Violetti
# E238ECkarmiininpunainen
# C38EC7Violetti lohikäärme
# C8A2C8Liila
# E6A9ECPoskipuna vaaleanpunainen
# E0B0FFmalvanvärinen
# C6AEC7Wisteria Violetti
# F9B7FFKukka vaaleanpunainen
# D2B9D3Ohdake
# E9CFECTalvio
# EBDDE2Laventeli Pinocchio
# E3E4FALaventeli sininen
# FDEEF4Helmi
# FFF5EEKotilo
#FEFCFFMaitovalkoinen
#FFFFFFValkoinen

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# FF0000Valkoinen#FFFFFF
syaani# 00FFFFHopea# C0C0C0
Sininen# 0000FFHarmaa tai harmaa# 808080
Tummansininen# 0000A0Musta# 000000
Vaaleansininen# ADD8E6Oranssi# FFA500
Violetti# 800080Ruskea# A52A2A
Keltainen# FFFF00Kastanjanruskea# 800000
Lime# 00FF00Vihreä# 008000
purppura# FF00FFOliivi# 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 -

  1. HTML-fonttityylit
  2. HTML-määritteet
  3. HTML-tyylisivut
  4. Kuinka HTML toimii
  5. Värit Matlabissa | Kuinka muuttaa tyyliä Matlabissa?