Вступ до імен кольорів HTML
Імена кольорів HTML належним чином позначені у абз. Кольори важливі, вони не тільки використовуються для прикраси веб-сторінки, але в деяких випадках ви можете змінити колір тексту, щоб забезпечити кращий контраст на тлі сторінки. Зважаючи на те, що HTML є написаним у текстовій формі, ви не можете просто розфарбувати код на свій смак і очікувати, що веб-браузер використовуватиме той самий колір при візуалізації сторінки. Натомість вам доведеться вдатися до використання тегів та атрибутів, щоб вказати браузеру, який колір використовувати.
Кольори в HTML
У назвах кольорів HTML кольори можна позначати, використовуючи їх шістнадцяткове значення або його ім'я. У HTML є підтримка найбільш поширених кольорів, у цій статті я поділюся з вами 140 іменами та шістнадцятковими значеннями цих кольорів.
Слід пам’ятати, що вам не потрібно обмежувати себе цими кольорами, ви можете використовувати будь-який інструмент вибору кольору, щоб знайти шістнадцяткове значення будь-якого кольору і використовувати його на своїй веб-сторінці.
Використання імен кольорів HTML
Реалізація кольорів на вашій веб-сторінці легко і може бути виконана як вбудованим, так і за допомогою окремого CSS-таблиці стилів.
Коли ви будете використовувати одні і ті ж назви кольорів HTML на сторінці кілька разів, краще визначити CSS Sheet для визначення та встановлення кольорів. І навпаки, якщо вам доведеться використовувати колір лише один або два рази, використання вбудованого методу вважається кращим.
1. Використання 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. Реалізація в CSS
h1 ( color: Brown; )
p ( color: Gainsboro; )
Імена кольорів HTML
Тепер, коли ви знаєте, що таке назви кольорів HTML, і як ви можете використовувати їх на своїх сторінках, ось посилання Кольорових імен, які ви можете робити закладки та використовувати у своїх проектах:
1. Сірі та чорні назви кольорів HTML
Сірий і чорний кольори в більшості випадків ідеально підходять для тексту тексту сторінки, оскільки на білому тлі ці кольори мають найкращу читабельність. Цікаво пам'ятати, що сучасні телефони з виконаними OLED-дисплеями потребують енергії акумулятора, щоб відобразити чорний колір, якщо ваша аудиторія буде мобільною, це розумна ідея використовувати чорний колір у якості кольорів фону та білого чи іншого світла кольори як колір переднього плану.
Код | Колір |
# 000000 | Чорний |
# 0C090A | Ніч |
# 2C3539 | Ганметал |
# 2B1B17 | Опівночі |
# 34282С | Деревне вугілля |
# 25383С | Темний шифер сірий |
# 3B3131 | Нафта |
# 413839 | Чорна кішка |
# 3D3C3A | Іридій |
# 463E3F | Чорний вугор |
# 4C4646 | Чорна корова |
# 504A4B | Сірий Вовк |
# 565051 | Вампір Грей |
# 5C5858 | Сірий Дельфін |
# 625D5D | Вуглецевий сірий |
# 666362 | Еш Грей |
# 6D6968 | Хмарно-сірий |
# 726E6D | Смокі Грей |
# 736F6E | Сірий |
# 837E7C | Граніт |
# 848482 | Лінійний корабель Сірий |
# B6B6B4 | Сіра Хмара |
# D1D0CE | Сірий гусак |
# E5E4E2 | Платина |
# BCC6CC | Металеве срібло |
# 98AFC7 | Синій сірий |
# 6D7B8D | Світлий шифер сірий |
# 657383 | Шифер сірий |
# 616D7E | Джет Грей |
2. Імена кольорів синього HTML
Синій підкреслений текст вважається посиланням, оскільки це стиль посилання за замовчуванням для більшості веб-браузерів, вам слід уникати використання синього для всього тексту на сторінці, оскільки відвідувачі можуть помилитися з ним за гіперпосилання.
# 646D7E | Туман блакитний |
# 566D7E | Мармуровий блакитний |
# 737CA1 | Шифер блакитний |
# 4863A0 | Сталевий синій |
# 2B547E | Blue Jay |
# 2B3856 | Темний шифер блакитний |
# 151B54 | Полуночний синій |
# 000080 | Темно-синій |
# 342D7E | Синій кит |
# 15317E | Lapis Blue |
# 151B8D | Джинсовий темно-синій |
# 0000A0 | Земля синя |
# 0020C2 | Кобальт синій |
# 0041C2 | Чорничний блакитний |
№2554С7 | Сапфіровий блакитний |
# 1569С7 | Блакитні очі |
# 2B60DE | Королівський синій |
# 1F45FC | Блакитна орхідея |
# 6960EC | Блакитний лотос |
# 736АФФ | Світлий блакитний шифер |
# 357EC7 | Windows Blue |
# 368BC1 | Льодовиковий блакитний лід |
# 488AC7 | Шовково-блакитний |
# 3090C7 | Синій Плющ |
# 659EC7 | Синій Кой |
№ 87AFC7 | Columbia Blue |
# 95B9C7 | Дитячий блакитний |
# 728FCE | Світло-сталевий синій |
№2B65EC | Океанський блакитний |
# 306EFF | Блакитна стрічка |
№157DEC | Синє плаття |
# 1589FF | Додж Блю |
# 6495ED | Волошка синя |
# 6698FF | Блакитне небо |
# 38ACEC | Метелик синій |
# 56A5EC | Айсберг |
# 5CB3FF | Кришталево-синій |
№3BB9FF | Глибокий Небесний |
# 79BAEC | Джинсовий блакитний |
# 82CAFA | Світло-блакитний |
# 82CAFF | День небо-синій |
# A0CFEC | Джинси блакитні |
# B7CEEC | Синій ангел |
# B4CFEC | Пастельно-синій |
# C2DFFF | Морський блакитний |
# C6DEFF | Порошковий синій |
#AFDCEC | Коралово-синій |
#ADDFFF | Блакитний |
#BDEDFF | Робін Яйце Блакитний |
#CFECEC | Блідо-блакитна лілія |
# E0FFFF | Світло-блакитний |
# EBF4FA | Вода |
# F0F8FF | AliceBlue |
# F0FFFF | Лазурний |
#CCFFFF | Легкий шифер |
# 93FFE8 | Легкий аквамарин |
# 9AFEFF | Електричний синій |
# 7FFFD4 | Аквамарин |
# 00FFFF | Циан або Аква |
# 7DFDFE | Трон Блакитний |
№ 57FEFF | Синій циркон |
# 8EEBEC | Блакитна лагуна |
# 50EBEC | Селесте |
# 4EE2EC | Блакитний діамант |
# 81D8D0 | Тіффані Блю |
# 92C7C7 | Cyan Opaque |
# 77BFC7 | Синя Хоста |
# 78C7C7 | Північне сяйво синє |
# 48CCCD | Середній бірюзовий |
# 43C6DB | Бірюза |
# 46C7C7 | Медузи |
# 7BCCB5 | Синьо-зелений |
3. Зелені кольори HTML
На сайтах, пов’язаних з природою, грошима, довкіллям тощо, зелений колір може бути хорошим вибором кольору для використання в якості фону.
# 43BFC7 | Ара синя зелена |
# 3EA99F | Морський зелений |
# 3B9C9C | Темна бірюза |
# 438D80 | Морська черепаха зелена |
# 348781 | Середній аквамарин |
# 307D7E | Зелено-блакитний |
# 5E7D7E | Сіруватий бірюзовий |
# 4C787E | Жук зелений |
# 008080 | Тіл |
# 4E8975 | Морський зелений |
# 78866B | Камуфляж зелений |
# 848b79 | Шавлія зелений |
# 617C58 | Горіхова зелена |
# 728C00 | Venom Green |
# 667C26 | Папороть зелений |
№254117 | Темно-лісовий зелений |
# 306754 | Середній морський зелений |
# 347235 | Середній лісовий зелений |
# 437C17 | Водорості зелені |
# 387C44 | Сосново-зелений |
# 347C2C | Джунглі зелені |
# 347C17 | Шемрок Грін |
# 348017 | Середня весна зелена |
# 4E9258 | Лісовий зелений |
# 6AA121 | Зелена цибуля |
# 4AA02C | Весняний зелений |
# 41A317 | Зелений лайм |
# 3EA055 | Конюшина зелена |
# 6CBB3C | Зелена змія |
# 6CC417 | Чужий зелений |
# 4CC417 | Зелене яблуко |
# 52D017 | Жовтий зелений |
# 4CC552 | Келлі Грін |
# 54C571 | Zombie Green |
# 99C68E | Жаба зелена |
# 89C35C | Зелений горошок |
# 85BB65 | Долар Білл Зелений |
# 8BB381 | Темноморський зелений |
# 9CB071 | Ігуана Грін |
# B2C248 | Авокадо зелений |
# 9DC209 | Фісташка зелена |
# A1C935 | Салат зелений |
# 7FE817 | Колібрі зелені |
# 59E817 | Туманність зелена |
# 57E964 | Stoplight Go Green |
# 64E986 | Водорості зелені |
# 5EFB6E | Джейд Грін |
# 00FF00 | Зелений |
# 5FFB17 | Смарагдовий зелений |
# 87F717 | Газон зелений |
# 8AFB17 | Шартрез |
# 6AFB92 | Дракон Зелений |
# 98FF98 | М’ята зелена |
# B5EAAA | Зелений великий палець |
# C3FDB8 | Легкий нефрит |
# CCFB5D | Чай зелений |
# B1FB17 | Зелений жовтий |
# BCE954 | Слиз зелений |
# EDDA74 | Голденрод |
# EDE275 | Золото врожаю |
# FFE87C | Сонячно-жовтий |
4. Назви кольорів жовтого HTML
Жовтий можна використовувати для встановлення несерйозного настрою, проявлення творчості та оптимізму на сторінці. Майте на увазі, що жовтий працює краще як фон, ніж колір тексту.
# FFFF00 | Жовтий |
# FFF380 | Кукурудза жовта |
# FFFFC2 | Пергамент |
#FFFFCC | Крем |
# FFF8C6 | Лимонний шифон |
# FFF8DC | Кукурудзяна каша |
# F5F5DC | Бежевий |
# FBF6D9 | Блондинка |
# FAEBD7 | AntiqueWhite |
# F7E7CE | Шампанське |
#FFEBCD | Бланшований Алмонд |
# F3E5AB | Ваніль |
# ECE5B6 | Тан Браун |
# FFE5B4 | Персик |
# FFDB58 | Гірчиця |
# FFD801 | Гума Ducky Yellow |
# FDD017 | Яскраве золото |
# EAC117 | золотисто-коричневий |
# F2BB66 | Макарони і сир |
# FBB917 | Шафран |
# FBB117 | Пиво |
# FFA62F | Канталупа |
# E9AB17 | Бджола жовта |
5. Коричневі HTML кольори
Коричневий фон може ускладнити читання білого або чорного тексту, ви можете вдатися до інших кольорів, які добре контрастують з вашим відтінком коричневого.
# E2A76F | Коричневий цукор |
# DEB887 | BurlyWood |
# FFCBA4 | Глибокий персик |
# C9BE62 | Імбир Браун |
# E8A317 | Шкільний автобус жовтий |
# EE9A4D | Сенді Браун |
# C8B560 | Осіннє листя коричневе |
# D4A017 | Помаранчевий золото |
# C2B280 | Пісок |
# C7A317 | Печиво Браун |
# C68E17 | Карамель |
# B5A642 | Латунь |
# ADA96E | Хакі |
# C19A6B | Верблюд коричневий |
# CD7F32 | Бронза |
# C88141 | Тигровий апельсин |
# C58917 | Кориця |
# AF9B60 | Кульова оболонка |
# AF7817 | Темний Голденрод |
# B87333 | Мідь |
# 966F33 | Деревина |
# 806517 | Дуб коричневий |
# 827839 | Мокасин |
# 827B60 | Армія Браун |
# 786D5F | Пісковик |
# 493D26 | Мокко |
# 483C32 | Taupe |
# 6F4E37 | Кава |
# 835C3B | Бурий ведмідь |
# 7F5217 | Червоний бруд |
# 7F462C | Сепія |
6. Помаранчеві кольори HTML
Помаранчевий чудово працює, щоб виділити крапку, коли колір використовується як фон, і він може викликати відчуття ентузіазму та тепла, не будучи занадто липким.6. Помаранчеві кольори HTML
# C47451 | Апельсиновий лосось |
# C36241 | Іржа |
# C35817 | Червона лисиця |
# C85A17 | Шоколад |
# CC6600 | Седона |
# E56717 | Папайя апельсин |
# E66C2C | Хеллоуїн апельсин |
# F87217 | Гарбузовий апельсин |
# F87431 | Конструкція конус помаранчевий |
# E67451 | Помаранчевий схід сонця |
# FF8040 | Манго апельсин |
# F88017 | Темно-помаранчевий |
# FF7F50 | Коралів |
# F88158 | Помаранчевий м'яч кошик |
# F9966B | Легкий лосось |
# E78A61 | Мандарин |
# E18B6B | Темний лосось |
# E77471 | Легкий корал |
# F75D59 | Квасоля червона |
# E55451 | Валентина Червона |
# E55B3C | Шокуюча помаранчева |
7. Червоні кольорові коди HTML
У деяких веб-переглядачах червоний підкреслений текст використовується як відвідувані посилання, вам слід уникати його використання, щоб не бентежити відвідувачів.
# FF0000 | Червоний |
# FF2400 | Червона |
# F62217 | Рубін червоний |
# F70D1A | Ferrari Red |
# F62817 | Пожежна машина червоного кольору |
# E42217 | Лава Червона |
# E41B17 | Люблю червоне |
# DC381F | Грейпфрут |
# C34A2C | Каштан червоний |
# C24641 | Вишнево-червоний |
# C04000 | Червоне дерево |
# C11B17 | Перець чилі |
# 9F000F | Журавлина |
# 990012 | Червоне вино |
# 8C001A | Бургундія |
# 954535 | Каштан |
# 7E3517 | Кров червона |
# 8A4117 | Сієна |
# 7E3817 | Сангрія |
# 800517 | Firebrick |
# 810541 | Maroon |
# 7D0541 | Сливовий пиріг |
# 7E354D | Оксамитовий бордовий |
# 7D0552 | Сливовий оксамит |
# 7F4E52 | Рози Фінч |
# 7F5A58 | Пуче |
# 7F525D | Тупий фіолетовий |
# B38481 | Розі Браун |
# C5908E | Хакі троянда |
8. Кольорові коди рожевого HTML
За даними кольорознавства, Рожевий та його відтінки можна використовувати, якщо ви хочете, щоб відвідувач мав почуття впевненості, витонченості та теплоти у своїй підсвідомості.
# C48189 | Рожевий лук |
# C48793 | Помада рожева |
# E8ADAA | Роза |
# ECC5C0 | Розове золото |
# EDC9AF | Пустельний пісок |
# FDD7E4 | Свиня рожева |
#FCDFFF | Цукрова вата |
#FFDFDD | Рожева жувальна гумка |
# FBBBB9 | Туманна троянда |
#FAAFBE | Рожевий |
#FAAFBA | Світло-рожевий |
# F9A7B0 | Фламінго рожевий |
# E7A1B0 | Рожева троянда |
# E799A3 | Рожева ромашка |
# E38AAE | Кадилак рожевий |
# F778A1 | Гвоздика рожева |
# E56E94 | Рум'янець червоний |
# F660AB | Яскраво-рожевий |
# FC6C85 | Кавун рожевий |
# F6358A | Фіолетовий червоний |
# F52887 | Глибоко рожевий |
# E45E9D | Рожевий кекс |
# E4287C | Рожевий лимонад |
# F535AA | Неоновий рожевий |
# FF00FF | Пурпуровий |
# E3319D | Dimorphotheca Magenta |
# F433FF | Яскравий неоновий рожевий |
# D16587 | Блідо-фіолетовий червоний |
# C25A7C | Тюльпан рожевий |
# CA226B | Середній фіолетовий червоний |
# C12869 | Рожевий рожевий |
# C12267 | Спалений рожевий |
# C25283 | Барвистий рожевий |
# C12283 | Темна гвоздика рожева |
# B93B8F | Слива |
9. Кольорові коди фіолетового та білого кольорів
Використання білого тексту тексту на білому тлі зробить його нечитабельним для користувачів, окрім того, що він не є зручним для користувачів, ви можете отримати SEO-покарання для свого сайту, таким чином, завжди використовуйте білий та інші світлі кольори на темному тлі.
# 7E587E | Віола фіолетова |
# 571B7E | Фіолетовий ірис |
# 583759 | Слива фіолетова |
# 4B0082 | Індиго |
# 461B7E | Фіолетовий монстр |
# 4E387E | Purple Haze |
# 614051 | Баклажани |
# 5E5A80 | Виноград |
# 6A287E | Фіолетове варення |
# 7D1B7E | Темна орхідея |
# A74AC7 | Фіолетовий квітка |
# B048B5 | Середня орхідея |
# 6C2DC7 | Фіолетовий Аметист |
# 842DCE | Темна фіалка |
# 8D38C9 | Фіолетовий |
# 7A5DC7 | Фіолетовий шавлія кущовий |
# 7F38EC | Прекрасний фіолетовий |
# 8E35EF | Фіолетовий |
# 893BFF | Aztech Purple |
# 8467D7 | Середній фіолетовий |
# A23BEC | Жасмін фіолетовий |
# B041FF | Фіолетовий нарцис |
# C45AEC | Тирійський фіолетовий |
# 9172EC | Крокус фіолетовий |
# 9E7BFF | Фіолетова Мімоза |
# D462FF | Геліотроп фіолетовий |
# E238EC | Багряний |
# C38EC7 | Фіолетовий Дракон |
# C8A2C8 | Бузок |
# E6A9EC | Рум’яна рум'яна |
# E0B0FF | Мов |
# C6AEC7 | Вістерія фіолетова |
# F9B7FF | Цвітіння рожеве |
# D2B9D3 | Розторопша |
# E9CFEC | Periwinkle |
# EBDDE2 | Лавандовий Буратіно |
# E3E4FA | Лаванда синя |
# FDEEF4 | Перлина |
# FFF5EE | SeaShell |
#FEFCFF | Молоко біле |
#FFFFFF | Білий |
Деякі найбільш використовувані HTML кольорові коди
Це деякі популярні кольори, які використовуються в Інтернеті, я помістив їх в окрему таблицю, щоб їх можна було швидко знайти.
Червоний | # FF0000 | Білий | #FFFFFF |
Синя | # 00FFFF | Срібло | # C0C0C0 |
Синій | # 0000FF | Сірий або сірий | # 808080 |
Темно-синій | # 0000A0 | Чорний | # 000000 |
Блакитний | # ADD8E6 | Помаранчевий | # FFA500 |
Фіолетовий | # 800080 | Коричневий | # A52A2A |
Жовтий | # FFFF00 | Maroon | # 800000 |
Вапно | # 00FF00 | Зелений | # 008000 |
Пурпуровий | # FF00FF | Оливкова | # 808000 |
Висновок
Тепер, коли у вас є короткі довідкові таблиці загальних HTML-кольорів, ви повинні мати можливість використовувати будь-який колір, який ви хочете на своїй сторінці. З творчої точки зору вам слід уникати різких кольорів, якщо ви можете та під час роботи з лицьовим кінцем сайту, збереження фонової графіки чи кольорів також важливо для забезпечення належного контрасту.
Рекомендовані статті
Це посібник з назви кольорів HTML. Тут ми обговорюємо, як реалізувати кольори на веб-сторінці, використовуючи різні кольори HTML з прикладами. Ви також можете ознайомитися з іншими запропонованими нами статтями, щоб дізнатися більше -
- Стилі шрифтів HTML
- Атрибути HTML
- Таблиці стилів HTML
- Як працює HTML
- Кольори в Матлабі | Як змінити стиль в Matlab?