Wprowadzenie do nazw kolorów HTML
Nazwy kolorów HTML są odpowiednio oznaczone w par. Kolory są ważne, nie tylko służą do ozdabiania strony internetowej, ale w niektórych przypadkach możesz chcieć zmienić kolor tekstu, aby zapewnić lepszy kontrast na tle strony. Biorąc pod uwagę, że HTML jest napisany w formie tekstowej, nie można po prostu pokolorować kodu według własnych upodobań i oczekiwać, że przeglądarka internetowa będzie używać tego samego koloru podczas renderowania strony. Zamiast tego będziesz musiał użyć tagów i atrybutów, aby powiedzieć przeglądarce, jakiego koloru użyć.
Kolory w HTML
W nazwach kolorów HTML kolory można oznaczać przy użyciu ich wartości szesnastkowej lub nazwy. HTML obsługuje większość popularnych kolorów, w tym artykule podzielę się z wami 140 nazwami i wartościami szesnastkowymi tych kolorów.
Należy pamiętać, że nie musisz ograniczać się do tych kolorów, możesz użyć dowolnego narzędzia próbnika kolorów, aby znaleźć wartość szesnastkową dowolnego koloru i użyć go na swojej stronie internetowej.
Używanie nazw kolorów HTML
Wdrażanie kolorów na twojej stronie internetowej jest łatwe i można to zrobić zarówno bezpośrednio, jak i za pomocą osobnego arkusza stylów CSS.
Jeśli zamierzasz używać tych samych nazw kolorów HTML na stronie wiele razy, lepiej jest użyć arkusza CSS do zdefiniowania i ustawienia kolorów. I odwrotnie, jeśli trzeba użyć koloru tylko raz lub dwa razy, zastosowanie metody inline uważa się za lepsze.
1. Używanie 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. Implementacja w CSS
h1 ( color: Brown; )
p ( color: Gainsboro; )
Różne nazwy kolorów HTML
Teraz, gdy wiesz, czym są nazwy kolorów HTML i jak możesz ich używać na swoich stronach, oto link nazw kolorów, które możesz dodać do zakładek i używać w swoich projektach:
1. Szare i czarne nazwy kolorów HTML
Kolory szary i czarny są w większości przypadków idealne dla koloru tekstu strony, ponieważ na białym tle kolory te mają najlepszą czytelność. Jedną interesującą rzeczą, o której należy pamiętać, jest to, że nowoczesne telefony z wykonanymi wyświetlaczami OLED wymagają zasilania z baterii w celu wyświetlenia koloru czarnego, jeśli publiczność zamierza korzystać z telefonu komórkowego, rozsądnym pomysłem jest użycie czerni jako koloru tła i bieli lub innego światła kolory jako kolor pierwszego planu.
| Kod | Kolor |
| # 000000 | czarny |
| # 0C090A | Noc |
| # 2C3539 | Brąz |
| # 2B1B17 | Północ |
| # 34282C | Węgiel drzewny |
| # 25383C | Ciemny Łupkowy Szary |
| # 3B3131 | Olej |
| # 413839 | Czarny kot |
| # 3D3C3A | Iryd |
| # 463E3F | Czarny węgorz |
| # 4C4646 | Czarna krowa |
| # 504A4B | Szary Wilk |
| # 565051 | Wampir Szary |
| # 5C5858 | Szary Delfin |
| # 625D5D | Carbon Grey |
| # 666362 | Ash Grey |
| # 6D6968 | Pochmurno Szary |
| # 726E6D | Smokey Grey |
| # 736F6E | Szary |
| # 837E7C | Granit |
| # 848482 | Pancernik Gray |
| # B6B6B4 | Grey Cloud |
| # D1D0CE | szara gęś |
| # E5E4E2 | Platyna |
| # BCC6CC | Srebrny metalik |
| # 98AFC7 | Niebieski szary |
| # 6D7B8D | Jasny Łupkowy Szary |
| # 657383 | Popielaty |
| # 616D7E | Jet Grey |
2. Niebieskie nazwy kolorów HTML
Podkreślony na niebiesko tekst jest uważany za link, ponieważ jest to domyślny styl linków w większości przeglądarek internetowych, dlatego należy unikać używania niebieskiego dla całego tekstu na stronie, ponieważ użytkownicy mogą pomylić go z hiperłączami.
| # 646D7E | Mist Blue |
| # 566D7E | Marmurowy Niebieski |
| # 737CA1 | Odcień niebieskiego |
| # 4863A0 | Stalowo - niebieski |
| # 2B547E | Modrosójka Błękitna |
| # 2B3856 | Ciemnoniebieski łupek |
| # 151B54 | Niebieska północ |
| # 000080 | Ciemnoniebieski |
| # 342D7E | Płetwal błękitny |
| # 15317E | Lapis Blue |
| # 151B8D | Denim Dark Blue |
| # 0000A0 | Earth Blue |
| # 0020C2 | Kobaltowy niebieski |
| # 0041C2 | Blueberry Blue |
| # 2554C7 | Szafirowy niebieski |
| # 1569C7 | Niebieskie oczy |
| # 2B60DE | Królewski niebieski |
| # 1F45FC | Niebieska Orchidea |
| # 6960EC | Blue Lotus |
| # 736AFF | Jasny niebieski łupek |
| # 357EC7 | Windows Blue |
| # 368BC1 | Lodowaty niebieski lód |
| # 488AC7 | Silk Blue |
| # 3090C7 | Blue Ivy |
| # 659EC7 | Blue Koi |
| # 87AFC7 | Columbia Blue |
| # 95B9C7 | Baby Blue |
| # 728FCE | Jasny Stalowy Niebieski |
| # 2B65EC | Niebieski ocean |
| # 306EFF | Niebieska wstążka |
| # 157DEC | Niebieska sukienka |
| # 1589FF | Dodger Blue |
| # 6495ED | Chabrowy |
| # 6698FF | Niebieskie niebo |
| # 38ACEC | Niebieski motyl |
| # 56A5EC | Góra lodowa |
| # 5CB3FF | Krystaliszny niebieski |
| # 3BB9FF | Deep Sky Blue |
| # 79BAEC | Dżinsowy niebieski |
| # 82CAFA | Jasny Błękitny |
| # 82CAFF | Day Sky Blue |
| # A0CFEC | Niebieskie dżinsy |
| # B7CEEC | Niebieski Anioł |
| # B4CFEC | Pastelowy niebieski |
| # C2DFFF | Morski niebieski |
| # C6DEFF | Powder Blue |
| #AFDCEC | Coral Blue |
| #ADDFFF | Jasny niebieski |
| #BDEDFF | Robin Egg Blue |
| #CFECEC | Jasnoniebieska lilia |
| # E0FFFF | Jasnobłękitny |
| # EBF4FA | woda |
| # F0F8FF | AliceBlue |
| # F0FFFF | Lazur |
| #CCFFFF | Lekki łupek |
| # 93FFE8 | Lekki akwamaryn |
| # 9AFEFF | Elektryczny błękit |
| # 7FFFD4 | Akwamaryn |
| # 00FFFF | Cyjan lub Aqua |
| # 7DFDFE | Tron Blue |
| # 57FEFF | Niebieska cyrkonia |
| # 8EEBEC | Błękitna Laguna |
| # 50EBEC | Celeste |
| # 4EE2EC | Niebieski diament |
| # 81D8D0 | Tiffany Blue |
| # 92C7C7 | Cyjan Nieprzezroczysty |
| # 77BFC7 | Blue Hosta |
| # 78C7C7 | Northern Lights Blue |
| # 48CCCD | Średni turkus |
| # 43C6DB | Turkus |
| # 46C7C7 | Meduza |
| # 7BCCB5 | Niebieski zielony |
3. Zielone kolory HTML
W witrynach związanych z przyrodą, pieniędzmi, środowiskiem itp. Zielony może być dobrym wyborem koloru jako tła.
| # 43BFC7 | Ara Niebieski Zielony |
| # 3EA99F | Jasna zieleń morska |
| # 3B9C9C | Ciemny turkus |
| # 438D80 | Żółw Morski |
| # 348781 | Medium Aquamarine |
| # 307D7E | Zielonkawo-niebieski |
| # 5E7D7E | Szaro-turkusowy |
| # 4C787E | Beetle Green |
| # 008080 | Cyraneczka |
| # 4E8975 | Zielone morze |
| # 78866B | Zielony kamuflaż |
| # 848b79 | Sage Green |
| # 617C58 | Hazel Green |
| # 728C00 | Venom Green |
| # 667C26 | Paproć Zielona |
| # 254117 | Dark Forest Green |
| # 306754 | Średnia morska zieleń |
| # 347235 | Średnia leśna zieleń |
| # 437C17 | Wodorosty zielone |
| # 387C44 | Sosna Zielona |
| # 347C2C | Jungle Green |
| # 347C17 | Shamrock Green |
| # 348017 | Średnia wiosenna zieleń |
| # 4E9258 | Zielony las |
| # 6AA121 | Zielona cebula |
| # 4AA02C | Wiosenna zieleń |
| # 41A317 | Limonkowy |
| # 3EA055 | Clover Green |
| # 6CBB3C | Zielony wąż |
| # 6CC417 | Alien Green |
| # 4CC417 | Zielone jabłko |
| # 52D017 | Żółty zielony |
| # 4CC552 | Kelly Green |
| # 54C571 | Zombie Green |
| # 99C68E | Żaba Zielona |
| # 89C35C | Zielony groszek |
| # 85BB65 | Dollar Bill Green |
| # 8BB381 | Ciemnozielona zieleń |
| # 9CB071 | Iguana Green |
| # B2C248 | Avocado Green |
| # 9DC209 | Pistacjowy Zielony |
| # A1C935 | Sałatka Zielona |
| # 7FE817 | Koliber Zielony |
| # 59E817 | Mgławica Zielona |
| # 57E964 | Stoplight Go Green |
| # 64E986 | Algi zielone |
| # 5EFB6E | Jade Green |
| # 00FF00 | Zielony |
| # 5FFB17 | Szmaragdowo-zielony |
| # 87F717 | Lawn Green |
| # 8AFB17 | Chartreuse |
| # 6AFB92 | Dragon Green |
| # 98FF98 | miętowo-zielony |
| # B5EAAA | Zielony kciuk |
| # C3FDB8 | Light Jade |
| # CCFB5D | Herbata Zielona |
| # B1FB17 | Zielony żółty |
| # BCE954 | Slime Green |
| # EDDA74 | Nawłoć |
| # EDE275 | Zbierz złoto |
| # FFE87C | Sun Yellow |
4. Żółte nazwy kolorów HTML
Żółty może być użyty do stworzenia niepoważnego nastroju, wykazania kreatywności i optymizmu na stronie. Pamiętaj, że żółty jest lepszy jako tło niż kolor tekstu.
| # FFFF00 | Żółty |
| # FFF380 | Żółty kukurydziany |
| # FFFFC2 | Pergamin |
| #FFFFCC | Krem |
| # FFF8C6 | Cytrynowy Szyfon |
| # FFF8DC | Kukurydza |
| # F5F5DC | Beżowy |
| # FBF6D9 | Blond |
| # FAEBD7 | Antyczna biel |
| # F7E7CE | szampan |
| #FFEBCD | BlanchedAlmond |
| # F3E5AB | Wanilia |
| # ECE5B6 | Tan Brown |
| # FFE5B4 | Brzoskwinia |
| # FFDB58 | Musztarda |
| # FFD801 | Rubber Ducky Yellow |
| # FDD017 | Jasne złoto |
| # EAC117 | złoto-brązowy |
| # F2BB66 | Makaron z serem |
| # FBB917 | Szafran |
| # FBB117 | piwo |
| # FFA62F | Kantalupa |
| # E9AB17 | Bee Yellow |
5. Brązowe kolory HTML
Brązowe tło może utrudniać odczytanie białego lub czarnego tekstu, możesz użyć innych kolorów, które mają dobry kontrast z odcieniem brązu.
| # E2A76F | Brązowy cukier |
| # DEB887 | BurlyWood |
| # FFCBA4 | Deep Peach |
| # C9BE62 | Ginger Brown |
| # E8A317 | Autobus szkolny żółty |
| # EE9A4D | Sandy Brown |
| # C8B560 | Fall Leaf Brown |
| # D4A017 | Pomarańczowe złoto |
| # C2B280 | Piasek |
| # C7A317 | Cookie Brown |
| # C68E17 | Karmel |
| # B5A642 | Mosiądz |
| # ADA96E | Khaki |
| # C19A6B | Wielbłąd brązowy |
| # CD7F32 | Brązowy |
| # C88141 | Tygrys Pomarańczowy |
| # C58917 | Cynamon |
| # AF9B60 | Łuska pocisku |
| # AF7817 | Dark Goldenrod |
| # B87333 | Miedź |
| # 966F33 | Drewno |
| # 806517 | Dąb brązowy |
| # 827839 | Mokasyn |
| # 827B60 | Army Brown |
| # 786D5F | Piaskowiec |
| # 493D26 | Mokka |
| # 483C32 | Kolor ciemnoszary |
| # 6F4E37 | Kawa |
| # 835C3B | Brązowy niedźwiedź |
| # 7F5217 | Czerwony brud |
| # 7F462C | Sepia |
6. Pomarańczowe kolory HTML
Kolor pomarańczowy świetnie podkreśla punkt, w którym kolor jest używany jako tło, i może wywoływać entuzjazm i ciepło, nie będąc zbyt tandetnym. Pomarańczowe kolory HTML
| # C47451 | Łosoś pomarańczowy |
| # C36241 | Rdza |
| # C35817 | Czerwony lis |
| # C85A17 | Czekolada |
| # CC6600 | Sedona |
| # E56717 | Papaja Pomarańczowa |
| # E66C2C | Halloweenowy Pomarańczowy |
| # F87217 | Dyniowa Pomarańcza |
| # F87431 | Stożek budowlany Pomarańczowy |
| # E67451 | Sunrise Orange |
| # FF8040 | Pomarańcza mango |
| # F88017 | Ciemna pomarańcza |
| # FF7F50 | Koral |
| # F88158 | Basket Ball Orange |
| # F9966B | Lekki Łosoś |
| # E78A61 | Mandarynka |
| # E18B6B | Ciemny Łosoś |
| # E77471 | Jasny koral |
| # F75D59 | Czerwona fasola |
| # E55451 | Valentine Red |
| # E55B3C | Shocking Orange |
7. Czerwone kody kolorów HTML
W niektórych przeglądarkach jako odwiedzane linki używany jest czerwony podkreślony tekst, należy unikać używania go, aby nie mylić odwiedzających.
| # FF0000 | Czerwony |
| # FF2400 | Szkarłat |
| # F62217 | Rubinowo czerwony |
| # F70D1A | Ferrari Red |
| # F62817 | Fire Engine Red |
| # E42217 | Lava Red |
| # E41B17 | Love Red |
| # DC381F | Grejpfrut |
| # C34A2C | Kasztanowy Czerwony |
| # C24641 | Wiśniowo-czerwony |
| # C04000 | Mahoń |
| # C11B17 | Papryczka chilli |
| # 9F000F | Żurawina |
| # 990012 | Czerwone wino |
| # 8C001A | Burgundia |
| # 954535 | kasztan |
| # 7E3517 | Krwistoczerwony |
| # 8A4117 | Sjena |
| # 7E3817 | Sangria |
| # 800517 | Cegła ognista |
| # 810541 | Kasztanowaty |
| # 7D0541 | Śliwkowe Ciasto |
| # 7E354D | Velvet Maroon |
| # 7D0552 | Śliwkowy aksamit |
| # 7F4E52 | Różowa Finch |
| # 7F5A58 | Kolor brązowofioletowy |
| # 7F525D | Nudny Fiolet |
| # B38481 | Rosy Brown |
| # C5908E | Khaki Rose |
8. Różowe kody kolorów HTML
Zgodnie z naukami o kolorze, Różu i jego odcieni można używać, jeśli chcesz, aby odwiedzający miał poczucie pewności siebie, wyrafinowania i ciepła w podświadomości.
| # C48189 | Różowy łuk |
| # C48793 | Pomadka Różowa |
| # E8ADAA | Róża |
| # ECC5C0 | Różowe złoto |
| # EDC9AF | Pustynny piasek |
| # FDD7E4 | Pig Pink |
| #FCDFFF | Wata cukrowa |
| #FFDFDD | Różowa guma do żucia |
| # FBBBB9 | Mglista Róża |
| #FAAFBE | Różowy |
| #FAAFBA | Jasnoróżowy |
| # F9A7B0 | Flamingo Pink |
| # E7A1B0 | Różowa róża |
| # E799A3 | Pink Daisy |
| # E38AAE | Cadillac Pink |
| # F778A1 | Goździk Różowy |
| # E56E94 | Rumieniec czerwony |
| # F660AB | Gorący róż |
| # FC6C85 | Arbuz Różowy |
| # F6358A | Fioletowy Czerwony |
| # F52887 | Głęboki róż |
| # E45E9D | Różowa Babeczka |
| # E4287C | Różowa lemoniada |
| # F535AA | Neonowy róż |
| # FF00FF | Magenta |
| # E3319D | Dimorphotheca Magenta |
| # F433FF | Jasny różowy neon |
| # D16587 | Jasnofioletowy czerwony |
| # C25A7C | Tulipan Różowy |
| # CA226B | Medium Violet Red |
| # C12869 | Rogue Pink |
| # C12267 | Burnt Pink |
| # C25283 | Lękliwy róż |
| # C12283 | Dark Carnation Pink |
| # B93B8F | Śliwka |
9. Fioletowe i białe kody kolorów HTML
Użycie koloru białego tekstu na białym tle sprawi, że będzie on nieczytelny dla użytkowników, a poza tym, że nie będzie przyjazny dla użytkownika, możesz uzyskać karę SEO za swoją stronę, dlatego zawsze używaj białego i innych jasnych kolorów na ciemnym tle.
| # 7E587E | Viola Purple |
| # 571B7E | Purple Iris |
| # 583759 | Śliwkowy Fiolet |
| # 4B0082 | Indygo |
| # 461B7E | Purple Monster |
| # 4E387E | Purple Haze |
| # 614051 | Bakłażan |
| # 5E5A80 | Winogrono |
| # 6A287E | Purple Jam |
| # 7D1B7E | Dark Orchid |
| # A74AC7 | Fioletowy kwiat |
| # B048B5 | Średnia orchidea |
| # 6C2DC7 | Fioletowy ametyst |
| # 842DCE | Ciemny Fiolet |
| # 8D38C9 | Fioletowy |
| # 7A5DC7 | Purple Sage Bush |
| # 7F38EC | Cudowny Fiolet |
| # 8E35EF | Fioletowy |
| # 893BFF | Aztech Purple |
| # 8467D7 | Średni fiolet |
| # A23BEC | Jasmine Purple |
| # B041FF | Fioletowy żonkil |
| # C45AEC | Tyrian Purple |
| # 9172EC | Krokus Fioletowy |
| # 9E7BFF | Purple Mimosa |
| # D462FF | Heliotrop Fioletowy |
| # E238EC | Karmazynowy |
| # C38EC7 | Purple Dragon |
| # C8A2C8 | Liliowy |
| # E6A9EC | Rumieniec Różowy |
| # E0B0FF | Fiołkoworóżowy |
| # C6AEC7 | Wisteria Purple |
| # F9B7FF | Blossom Pink |
| # D2B9D3 | Oset |
| # E9CFEC | Barwinek |
| # EBDDE2 | Lawendowy Pinokio |
| # E3E4FA | Lawendowy niebieski |
| # FDEEF4 | Perła |
| # FFF5EE | Muszla |
| #FEFCFF | Mleczna biel |
| #FFFFFF | Biały |
Niektóre najczęściej używane kody kolorów HTML
Są to niektóre z popularnych kolorów używanych w Internecie, umieściłem je w osobnej tabeli, aby można je było szybko znaleźć.
| Czerwony | # FF0000 | Biały | #FFFFFF |
| Cyjan | # 00FFFF | Srebro | # C0C0C0 |
| niebieski | # 0000FF | Szary lub szary | # 808080 |
| Ciemny niebieski | # 0000A0 | czarny | # 000000 |
| Jasny niebieski | # ADD8E6 | Pomarańczowy | # FFA500 |
| Fioletowy | # 800080 | brązowy | # A52A2A |
| Żółty | # FFFF00 | Kasztanowaty | # 800000 |
| Limonka | # 00FF00 | Zielony | # 008000 |
| Magenta | # FF00FF | Oliwa | # 808000 |
Wniosek
Teraz, gdy masz szybkie tabele referencyjne typowych kolorów HTML, powinieneś być w stanie użyć dowolnego koloru na swojej stronie. Z kreatywnego punktu widzenia należy unikać używania ostrych kolorów, jeśli jest to możliwe, a podczas pracy z interfejsem witryny zachowanie grafiki lub kolorów tła jest również ważne, aby zapewnić odpowiedni kontrast.
Polecane artykuły
To jest przewodnik po nazwach kolorów HTML. Tutaj omawiamy przykłady implementacji kolorów na stronie przy użyciu różnych kolorów HTML. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -
- Style czcionek HTML
- Atrybuty HTML
- Arkusze stylów HTML
- Jak działa HTML
- Kolory w Matlabie | Jak zmienić styl w Matlabie?