Úvod do barevných názvů HTML
Barevné názvy HTML jsou v odstavci správně označeny. Barvy jsou důležité, nejenže se používají k ozdobení webové stránky, ale v některých případech můžete chtít změnit barvu textu, aby bylo dosaženo lepšího kontrastu na pozadí stránky. Vzhledem k tomu, že HTML je psáno v textové podobě, nemůžete pouze zabarvit kód podle svých představ a očekávat, že webový prohlížeč při vykreslování stránky použije stejnou barvu. Místo toho se budete muset uchýlit k používání značek a atributů a sdělit prohlížeči, jakou barvu použít.
Barvy v HTML
V názvech barev HTML lze barvy označit pomocí jejich hexadecimální hodnoty nebo názvu. HTML má podporu pro většinu běžných barev, v tomto článku se s vámi podělím o 140 jmen a hex hodnot těchto barev.
Jedna věc, kterou je třeba mít na paměti, je, že se nemusíte omezovat na tyto barvy, můžete použít jakýkoli nástroj pro výběr barvy k nalezení hexadecimální hodnoty jakékoli barvy, kterou chcete, a použít ji na své webové stránce.
Používání barevných názvů HTML
Implementace barev na vaší webové stránce je snadná a lze ji provést inline i prostřednictvím samostatné šablony stylů CSS.
Pokud na stránce budete opakovaně používat stejná barevná jména HTML, je lepší definovat a nastavit barvy pomocí listu CSS. Naopak, pokud potřebujete použít barvu pouze jednou nebo dvakrát, je lepší použít metodu inline.
1. Použití HTML Color Inline
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. Implementace v CSS
h1 ( color: Brown; )
p ( color: Gainsboro; )
Různé barevné názvy HTML
Nyní, když víte, jaké jsou barevné názvy HTML a jak je můžete použít na svých stránkách, zde je odkaz názvů barev, které můžete ve svých projektech uložit do záložek a použít:
1. Šedé a černé barevné názvy HTML
Šedé a černé barvy jsou ve většině případů perfektní pro barvu textu stránky oproti bílému pozadí. Tyto barvy mají nejlepší čitelnost. Jednou zajímavou věcí, kterou je třeba mít na paměti, je, že moderní telefony s OLED displejem potřebují jakoukoli baterii, aby zobrazovaly černou barvu, pokud bude vaše publikum na mobilu, je moudré používat černou jako barvu pozadí a bílé nebo jiné světlo barvy jako barva popředí.
Kód | Barva |
# 000000 | Černá |
# 0C090A | Noc |
# 2C3539 | Gunmetal |
# 2B1B17 | Půlnoc |
# 34282C | Dřevěné uhlí |
# 25383C | Dark Slate Grey |
# 3B3131 | Olej |
# 413839 | Černá kočka |
# 3D3C3A | Iridium |
# 463E3F | Černý úhoř |
# 4C4646 | Černá kráva |
# 504A4B | Šedý vlk |
# 565051 | Upír Gray |
# 5C5858 | Šedý delfín |
# 625D5D | Uhlíková šedá |
# 666362 | Ash Gray |
# 6D6968 | Zataženo šedá |
# 726E6D | Smokey Gray |
# 736F6E | Šedá |
# 837E7C | Žula |
# 848482 | Bitevní loď Grey |
# B6B6B4 | Šedý mrak |
# D1D0CE | Grey Goose |
# E5E4E2 | Platina |
# BCC6CC | Kovové stříbro |
# 98AFC7 | Modrá Šedá |
# 6D7B8D | Světle břidlicová šedá |
# 657383 | Břidlicová šedá |
# 616D7E | Jet Gray |
2. Modré názvy barev HTML
Modrý podtržený text je považován za odkaz, protože se jedná o výchozí styl odkazu pro většinu webových prohlížečů, měli byste se vyhnout použití modrého pro veškerý text na stránce, protože jej mohou návštěvníci zaměnit za hypertextové odkazy.
# 646D7E | Mlha Modrá |
# 566D7E | Mramorová modrá |
# 737CA1 | Břidlicová modrá |
# 4863A0 | Ocelová modrá |
# 2B547E | Blue Jay |
# 2B3856 | Dark Slate Blue |
# 151B54 | Půlnoční modrá |
# 000080 | Námořnická modrá |
# 342D7E | Modrá velryba |
# 15317E | Lapis Blue |
# 151B8D | Džínovina tmavě modrá |
# 0000A0 | Země modrá |
# 0020C2 | Kobaltová modř |
# 0041C2 | Blueberry Blue |
# 2554C7 | Safírově modrá |
# 1569C7 | Modré oči |
# 2B60DE | Královská modrá |
# 1F45FC | Modrá orchidej |
# 6960EC | Blue Lotus |
# 736AFF | Světle břidlicová modrá |
# 357EC7 | Windows Blue |
# 368BC1 | Ledový modrý led |
# 488AC7 | Hedvábná modrá |
# 3090C7 | Modrý břečťan |
# 659EC7 | Blue Koi |
# 87AFC7 | Columbia Blue |
# 95B9C7 | Baby Blue |
# 728FCE | Světle ocelová modrá |
# 2B65EC | Ocean Blue |
# 306EFF | Modrá stužka |
# 157DEC | Modré šaty |
# 1589FF | Dodger Blue |
# 6495ED | Chrpa modrá |
# 6698FF | Modrá obloha |
# 38ACEC | Motýl modrý |
# 56A5EC | Ledovec |
# 5CB3FF | Křišťálově modrá |
# 3BB9FF | Deep Sky Blue |
# 79BAEC | Denim Blue |
# 82CAFA | Světle modrá obloha |
# 82CAFF | Denní Sky Blue |
# A0CFEC | Džíny modré |
# B7CEEC | Modrý anděl |
# B4CFEC | Pastelově modrá |
# C2DFFF | Mořská modrá |
# C6DEFF | Modrý prášek |
#AFDCEC | Coral Blue |
#ADDFFF | Světle modrá |
#BDEDFF | Robin Egg Blue |
#CFECEC | Bledě modrá lilie |
# E0FFFF | Lehká azurová |
# EBF4FA | Voda |
# F0F8FF | AliceBlue |
# F0FFFF | Blankyt |
#CCFFFF | Lehká břidlice |
# 93FFE8 | Lehký akvamarín |
# 9AFEFF | Elektrická modrá |
# 7FFFD4 | Akvamarín |
# 00FFFF | Azurová nebo Aqua |
# 7DFDFE | Tron Blue |
# 57FEFF | Modrý zirkon |
# 8EEBEC | Modrá laguna |
# 50EBEC | Celeste |
# 4EE2EC | Modrý diamant |
# 81D8D0 | Tiffany Blue |
# 92C7C7 | Azurová neprůhledná |
# 77BFC7 | Modrá Hosta |
# 78C7C7 | Polární záře modrá |
# 48CCCD | Střední tyrkysová |
# 43C6DB | Tyrkysový |
# 46C7C7 | Medúza |
# 7BCCB5 | Modrá zelená |
3. Zelené barvy HTML
Na webech souvisejících s přírodou, penězi, životním prostředím atd. Může být zelená dobrá volba barvy, kterou lze použít jako pozadí.
# 43BFC7 | Papoušek modrá zelená |
# 3EA99F | Světle mořská zelená |
# 3B9C9C | Tmavě tyrkysová |
# 438D80 | Mořská želva zelená |
# 348781 | Střední akvamarín |
# 307D7E | Zelenkavě modrá |
# 5E7D7E | Šedá tyrkysová |
# 4C787E | Brouk zelený |
# 008080 | Šedozelená |
# 4E8975 | Zelené moře |
# 78866B | Kamufláž Zelená |
# 848b79 | Šedozelená barva |
# 617C58 | Hazel Green |
# 728C00 | Venom Green |
# 667C26 | Fern Green |
# 254117 | Dark Forest Green |
# 306754 | Středně mořská zelená |
# 347235 | Střední lesní zelená |
# 437C17 | Mořské řasy zelené |
# 387C44 | Borovice zelená |
# 347C2C | Jungle Green |
# 347C17 | Shamrock Green |
# 348017 | Střední jarní zelená |
# 4E9258 | Lesní zelená |
# 6AA121 | Zelená cibule |
# 4AA02C | Jarní zelená |
# 41A317 | Limetkově zelená |
# 3EA055 | Jetel zelený |
# 6CBB3C | Zelený had |
# 6CC417 | Alien Green |
# 4CC417 | Zelené jablko |
# 52D017 | Žluto zelená |
# 4CC552 | Kelly Green |
# 54C571 | Zombie Green |
# 99C68E | Žába zelená |
# 89C35C | Zelený hrášek |
# 85BB65 | Dolar Bill Green |
# 8BB381 | Dark Sea Green |
# 9CB071 | Leguán zelený |
# B2C248 | Avokádo Zelená |
# 9DC209 | Pistáciová zelená |
# A1C935 | Salát zelený |
# 7FE817 | Kolibřík zelený |
# 59E817 | Mlhovina zelená |
# 57E964 | Svítí zeleně |
# 64E986 | Zelené řasy |
# 5EFB6E | Jade Green |
# 00FF00 | Zelený |
# 5FFB17 | Smaragdová zeleň |
# 87F717 | Trávník zelený |
# 8AFB17 | Chartreuse |
# 6AFB92 | Dragon Green |
# 98FF98 | mátově zelená |
# B5EAAA | Zelený palec |
# C3FDB8 | Světlo Jade |
# CCFB5D | Zelený čaj |
# B1FB17 | Zelená žlutá |
# BCE954 | Slizově zelená |
# EDDA74 | Goldenrod |
# EDE275 | Sklizeň zlata |
# FFE87C | Sun Yellow |
4. Žlutá HTML barevná jména
Žlutou lze použít k nastavení nezávažné nálady, ukázat kreativitu a optimismus na stránce. Mějte na paměti, že žlutá funguje lépe jako pozadí a barva textu.
# FFFF00 | Žlutá |
# FFF380 | Kukuřice žlutá |
# FFFFC2 | Pergamen |
#FFFFCC | Krém |
# FFF8C6 | Citron šifon |
# FFF8DC | Cornsilk |
# F5F5DC | Béžový |
# FBF6D9 | Blondýnka |
# FAEBD7 | AntiqueWhite |
# F7E7CE | Šampaňské |
#FFEBCD | BlanchedAlmond |
# F3E5AB | Vanilka |
# ECE5B6 | Tan Brown |
# FFE5B4 | Broskev |
# FFDB58 | Hořčice |
# FFD801 | Rubber Ducky Yellow |
# FDD017 | Světlé zlato |
# EAC117 | zlatavě hnědá |
# F2BB66 | Makaróny a sýr |
# FBB917 | Šafrán |
# FBB117 | Pivo |
# FFA62F | Ananasový meloun |
# E9AB17 | Bee Yellow |
5. Hnědé barvy HTML
Hnědé pozadí může ztížit čtení bílého nebo černého textu, můžete se uchýlit k uživatelům jiných barev, které mají dobrý kontrast proti vašemu odstínu hnědé.
# E2A76F | Hnědý cukr |
# DEB887 | BurlyWood |
# FFCBA4 | Deep Peach |
# C9BE62 | Ginger Brown |
# E8A317 | Školní autobus žlutá |
# EE9A4D | Sandy Brown |
# C8B560 | Fall Leaf Brown |
# D4A017 | Oranžové zlato |
# C2B280 | Písek |
# C7A317 | Cookie Brown |
# C68E17 | Karamel |
# B5A642 | Mosaz |
# ADA96E | Khaki |
# C19A6B | Velbloudí hnědá |
# CD7F32 | Bronz |
# C88141 | Tiger Orange |
# C58917 | Skořice |
# AF9B60 | Bullet Shell |
# AF7817 | Dark Goldenrod |
# B87333 | Měď |
# 966F33 | Dřevo |
# 806517 | Oak Brown |
# 827839 | Mokasín |
# 827B60 | Army Brown |
# 786D5F | Pískovec |
# 493D26 | Moka |
# 483C32 | Taupe |
# 6F4E37 | Káva |
# 835C3B | Medvěd hnědý |
# 7F5217 | Červená špína |
# 7F462C | Sépie |
6. Oranžové barvy HTML
Orange pracuje skvěle na zvýraznění bodu, kdy se barva používá jako pozadí, a může vyvolat pocit nadšení a tepla, aniž by byl příliš lepkavý.6. Oranžové barvy HTML
# C47451 | Oranžový losos |
# C36241 | Rez |
# C35817 | Červená Liška |
# C85A17 | Čokoláda |
# CC6600 | Sedona |
# E56717 | Papája oranžová |
# E66C2C | Halloween Orange |
# F87217 | Dýňová oranžová |
# F87431 | Stavební kužel Orange |
# E67451 | Sunrise Orange |
# FF8040 | Mango oranžová |
# F88017 | Tmavě oranžová |
# FF7F50 | Korál |
# F88158 | Basket Ball Orange |
# F9966B | Lehký losos |
# E78A61 | Mandarinka |
# E18B6B | Tmavý losos |
# E77471 | Lehký Coral |
# F75D59 | Bean Red |
# E55451 | Valentine červená |
# E55B3C | Šokující Orange |
7. Červené barevné kódy HTML
U některých prohlížečů je červeně podtržený text používán jako navštívené odkazy, neměli byste jej používat k tomu, aby nezaváděli návštěvníky.
# FF0000 | Červené |
# FF2400 | Scarlet |
# F62217 | Rubínově červený |
# F70D1A | Ferrari Red |
# F62817 | Fire Engine Red |
# E42217 | Láva červená |
# E41B17 | Láska červená |
# DC381F | Grapefruit |
# C34A2C | Kaštanová červená |
# C24641 | Třešňově červený |
# C04000 | Mahagon |
# C11B17 | Čili paprička |
# 9F000F | Brusinka |
# 990012 | Červené víno |
# 8C001A | burgundské |
# 954535 | Kaštan |
# 7E3517 | Krvavě rudý |
# 8A4117 | Sienna |
# 7E3817 | Sangria |
# 800517 | Firebrick |
# 810541 | Maroon |
# 7D0541 | Švestkový koláč |
# 7E354D | Velvet Maroon |
# 7D0552 | Švestka Velvet |
# 7F4E52 | Rosy Finch |
# 7F5A58 | Puce |
# 7F525D | Dull Purple |
# B38481 | Rosy Brown |
# C5908E | Khaki Rose |
8. Růžové barevné kódy HTML
Podle vědy o barvě, Pink a jeho odstíny mohou být použity, pokud chcete, aby návštěvník měl pocit sebevědomí, sofistikovanosti a vřelosti v jejich podvědomí.
# C48189 | Růžový luk |
# C48793 | Rtěnka růžová |
# E8ADAA | Růže |
# ECC5C0 | Rose Gold |
# EDC9AF | Pouštní písek |
# FDD7E4 | Prase růžová |
#FCDFFF | Cukrová vata |
#FFDFDD | Pink Bubble Gum |
# FBBBB9 | Misty Rose |
#FAAFBE | Růžový |
#FAAFBA | Světle růžová |
# F9A7B0 | Plameňák růžový |
# E7A1B0 | Růžová růže |
# E799A3 | Pink Daisy |
# E38AAE | Cadillac Pink |
# F778A1 | Karafiát růžový |
# E56E94 | Červenat červená |
# F660AB | Hot Pink |
# FC6C85 | Meloun růžový |
# F6358A | Fialová červená |
# F52887 | Sytě růžová |
# E45E9D | Růžový košíček |
# E4287C | Růžová limonáda |
# F535AA | Neon Pink |
# FF00FF | Purpurová |
# E3319D | Dimorphotheca Magenta |
# F433FF | Bright Neon Pink |
# D16587 | Světle fialová červená |
# C25A7C | Tulipánová růžová |
# CA226B | Střední fialová červená |
# C12869 | Rogue Pink |
# C12267 | Spálená růžová |
# C25283 | Bashful Pink |
# C12283 | Dark Carnation Pink |
# B93B8F | Švestka |
9. Fialové a bílé barevné kódy HTML
Používání barvy bílého textu proti Bílému pozadí způsobí, že uživatelé nebudou číst, a kromě toho, že nebudou uživatelsky přívětiví, můžete pro svůj web získat pokutu SEO, proto vždy používejte bílé a jiné světlé barvy proti tmavému pozadí.
# 7E587E | Viola Purple |
# 571B7E | Purple Iris |
# 583759 | Plum Purple |
# 4B0082 | Indigo |
# 461B7E | Purple Monster |
# 4E387E | Fialová mlha |
# 614051 | Lilek |
# 5E5A80 | Hroznový |
# 6A287E | Purple Jam |
# 7D1B7E | Dark Orchid |
# A74AC7 | Fialový květ |
# B048B5 | Střední orchidej |
# 6C2DC7 | Fialový ametyst |
# 842DCE | Dark Violet |
# 8D38C9 | fialový |
# 7A5DC7 | Purple Sage Bush |
# 7F38EC | Krásné fialové |
# 8E35EF | Nachový |
# 893 BFF | Aztech Purple |
# 8467D7 | Střední fialová |
# A23BEC | Jasmine Purple |
# B041FF | Fialový narcis |
# C45AEC | Tyrian Purple |
# 9172EC | Crocus Purple |
# 9E7BFF | Purpurová Mimosa |
# D462FF | Heliotrope Purple |
# E238EC | Karmínový |
# C38EC7 | Fialový drak |
# C8A2C8 | Šeřík |
# E6A9EC | Červenavě růžová |
# E0B0FF | Nafialovělý |
# C6AEC7 | Wisteria Purple |
# F9B7FF | Blossom Pink |
# D2B9D3 | Bodlák |
# E9CFEC | Brčál |
# EBDDE2 | Levandule Pinocchio |
# E3E4FA | Levandule modrá |
# FDEEF4 | Perla |
# FFF5EE | Mušle |
#FEFCFF | Mléčná bílá |
#FFFFFF | Bílý |
Některé nejpoužívanější barevné kódy HTML
To jsou některé z populárních barev používaných na webu, dal jsem je do samostatné tabulky, aby je bylo možné rychle najít.
Červené | # FF0000 | Bílý | #FFFFFF |
Tyrkysová | # 00FFFF | stříbrný | # C0C0C0 |
Modrý | # 0000FF | Šedá nebo šedá | # 808080 |
Tmavě modrá | # 0000A0 | Černá | # 000000 |
Světle modrá | # ADD8E6 | oranžový | # FFA500 |
Nachový | # 800080 | Hnědý | # A52A2A |
Žlutá | # FFFF00 | Maroon | # 800000 |
Limetka | # 00FF00 | Zelený | # 008000 |
Purpurová | # FF00FF | Olivový | # 808000 |
Závěr
Nyní, když máte rychlé referenční tabulky běžných barev HTML, byste na své stránce měli mít možnost použít libovolnou barvu. Z kreativního hlediska byste se měli vyhnout použití tvrdých barev, pokud je to možné, a při práci s frontendem webu je také důležité udržovat grafiku pozadí nebo barvy, aby byl zajištěn správný kontrast.
Doporučené články
Toto je průvodce barevnými názvy HTML. Zde diskutujeme o tom, jak implementovat barvy na webové stránce pomocí různých barev HTML. Další informace naleznete také v dalších navrhovaných článcích -
- Styly písem HTML
- Atributy HTML
- HTML styly
- Jak funguje HTML
- Barvy v Matlabu | Jak změnit styl v Matlabu?