100 цветовых кодов HTML с именами, шестнадцатеричными кодами, значениями RGB и HSL –

Существуют миллионы цветов, которые можно получить путем смешивания основных красных, зеленых и синих цветов в различных комбинациях. Однако использование безопасного цветового кода HTML важно при разработке веб-сайтов, приложений и других элементов пользовательского интерфейса. Это помогает обеспечить единообразие и приятные цвета на всех устройствах и в браузерах. В этой статье мы рассмотрим тщательно подобранный список из 100 веб-безопасных цветов HTML, каждый из которых имеет свое уникальное имя цвета, шестнадцатеричный код, код RGB и значение HSL. Независимо от того, являетесь ли вы веб-разработчиком или энтузиастом дизайна, использование этих цветов в ваших проектах обеспечит безупречный и визуально привлекательный опыт для вашей аудитории. Также ознакомьтесь с цветовыми кодами плоского пользовательского интерфейса для своих проектов и цветовыми кодами для брендов социальных сетей.

100 цветовых кодов HTML

В таблице указаны шестнадцатеричные коды, RGB и HSL для каждого названия цвета. Используйте поле поиска, чтобы отфильтровать и найти подходящие цвета.

• Шестнадцатеричный код Шестизначный шестнадцатеричный код цвета, начинающийся со знака #.
• RGB-код представляет собой комбинацию красного, зеленого и синего цветов от 0 до 255 значений.
• HSL-код имеет формат (оттенок, насыщенность%, яркость%) и округляется до ближайшего значения в процентах.

Цветовые коды HTML

Название цветаШестнадцатеричный кодRGB-кодHSL-код Antique White#FAEBD7rgb(250, 235, 215)hsl(34, 78%, 91%) Aqua#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%) Aqua Marine#7FFFD4rgb (127, 255, 212)hsl(160, 100%, 74%) Azure#F0FFFFrgb(240, 255, 255)hsl(180, 100%, 97%) Бежевый#F5F5DCrgb(245, 245, 220)hsl(60 , 56%, 91%) Бисквит#FFE4C4rgb(255, 228, 196)hsl(33, 100%, 88%) Черный#000000rgb(0, 0, 0)hsl(0, 0%, 0%) Бланшированный миндаль# FFEBCDrgb(255, 235, 205)hsl(36, 100%, 90%) Синий#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%) Синий Фиолетовый#8A2BE2rgb(138, 43, 226)hsl (271, 76%, 53%) Коричневый#A52A2Argb(165, 42, 42)hsl(0, 59%, 41%) Кадет Синий#5F9EA0rgb(95, 158, 160)hsl(182, 25%, 50%) Коралл#FF7F50rgb(255, 127, 80)hsl(16, 100%, 66%) Цветок кукурузы Синий#6495EDrgb(100, 149, 237)hsl(219, 79%, 66%) Кукурузный шелк#FFF8DCrgb(255, 248, 220)hsl(48, 100%, 93%) Багровый#DC143Crgb(220, 20, 60)hsl(348, 83%, 47%) Голубой#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50) %) Темно-синий#00008Brgb(0, 0, 139)hsl(240, 100%, 27%) Темно-голубой#008B8Brgb(0, 139, 139)hsl(180, 100%, 27%) Темно-золотой жезл#B8860Brgb( 184, 134, 11)hsl(43, 89%, 38%) Темный хаки#BDB76Brgb(189, 183, 107)hsl(56, 38%, 58%) Темно-пурпурный#8B008Brgb(139, 0, 139)hsl( 300, 100%, 27%) Темно-оливковый#556B2Frgb(85, 107, 47)hsl(82, 39%, 30%) Темно-оранжевый#FF8C00rgb(255, 140, 0)hsl(33, 100%, 50% ) Темная орхидея#9932CCrgb(153, 50, 204)hsl(280, 61%, 50%) Темно-красная#8B0000rgb(139, 0, 0)hsl(0, 100%, 27%) Темный лосось#E9967Argb(233, 150, 122)hsl(15, 72%, 70%) Темно-зеленый#8FBC8Frgb(143, 188, 143)hsl(120, 25%, 65%) Темно-сланцевый синий#483D8Brgb(72, 61, 139)hsl( 248, 39%, 39%) Темно-сланцево-серый#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 24%) Темно-бирюзовый#00CED1rgb(0, 206, 209)hsl(181, 100%, 41% ) Темно-фиолетовый#9400D3rgb(148, 0, 211)hsl(282, 100%, 41%) Темно-розовый#FF1493rgb(255, 20, 147)hsl(322, 100%, 54%) Глубокий небесно-голубой#00BFFFrgb(0 , 191, 255)hsl(195, 100%, 50%) Dodger Blue#1E90FFrgb(30, 144, 255)hsl(210, 100%, 56%) Fire Brick#B22222rgb(178, 34, 34)hsl(0 , 68%, 42%) Золото#FFD700rgb(255, 215, 0)hsl(51, 100%, 50%) Золотой жезл#DAA520rgb(218, 165, 32)hsl(43, 74%, 49%) Серый# 808080rgb(128, 128, 128)hsl(0, 0%, 50%) Зеленый#008000rgb(0, 128, 0)hsl(120, 100%, 25%) Honeydew#F0FFF0rgb(240, 255, 240)hsl( 120, 100%, 97%) Ярко-розовый#FF69B4rgb(255, 105, 180)hsl(330, 100%, 71%) Индийский красный#CD5C5Crgb(205, 92, 92)hsl(0, 53%, 58%) Индиго#4B0082rgb(75, 0, 130)hsl(275, 100%, 25%) Хаки#F0E68Crgb(240, 230, 140)hsl(54, 77%, 75%) Лаванда#E6E6FArgb(230, 230, 250) hsl(240, 67%, 94%) Лавандовые румяна#FFF0F5rgb(255, 240, 245)hsl(340, 100%, 97%) Лимонный шифон#FFFACDrgb(255, 250, 205)hsl(54, 100%, 90) %) Светло-синий#ADD8E6rgb(173, 216, 230)hsl(195, 53%, 79%) Светло-коралловый#F08080rgb(240, 128, 128)hsl(0, 79%, 72%) Светло-голубой#E0FFFFrgb(224) , 255, 255)hsl(180, 100%, 94%) Светло-желтый золотисто-желтый#FAFAD2rgb(250, 250, 210)hsl(60, 80%, 90%) Светло-розовый#FFB6C1rgb(255, 182, 193)hsl (351, 100%, 86%) Светло-лососевый#FFA07Argb(255, 160, 122)hsl(17, 100%, 74%) Светло-морской зеленый#20B2AArgb(32, 178, 170)hsl(177, 70%, 41) %) Светло-голубой#87CEFArgb(135, 206, 250)hsl(203, 92%, 75%) Лаймовый#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%) Пурпурный#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%) Бордовый#800000rgb(128, 0, 0)hsl(0, 100%, 25%) Средний Аквамарин#66CDAArgb(102, 205, 170)hsl(160, 51) %, 60%) Средний синий#0000CDrgb(0, 0, 205)hsl(240, 100%, 40%) Средняя орхидея#BA55D3rgb(186, 85, 211)hsl(288, 59%, 58%) Средний фиолетовый# 9370DBrgb(147, 112, 219)hsl(260, 59%, 65%) Средний SlateBlue#7B68EErgb(123, 104, 238)hsl(248, 79%, 67%) Средний Бирюзовый#48D1CCrgb(72, 209, 204) hsl(177, 60%, 55%) Средне-фиолетовый красный#C71585rgb(199, 21, 133)hsl(322, 81%, 43%) Полуночно-синий#191970rgb(25, 25, 112)hsl(240, 64%, 27%) Мятно-кремовый#F5FFFArgb(245, 255, 250)hsl(150, 100%, 98%) Мокасины#FFE4B5rgb(255, 228, 181)hsl(38, 100%, 85%) Белый навахо#FFDEADrgb(255) , 222, 173)hsl(35, 100%, 83%) Navy#000080rgb(0, 0, 128)hsl(240, 100%, 25%) Olive#808000rgb(128, 128, 0)hsl(60, 100) %, 25%) Оливково-серый#6B8E23rgb(107, 142, 35)hsl(82, 60%, 35%) Оранжевый#FFA500rgb(255, 165, 0)hsl(39, 100%, 50%) Оранжевый Красный#FF4500rgb (255, 69, 0)hsl(16, 100%, 50%) Орхидея#DA70D6rgb(218, 112, 214)hsl(302, 59%, 65%) Бледно-золотой жезл#EEE8AArgb(238, 232, 170)hsl (55, 67%, 80%) Бледно-бирюзовый#AFEEEErgb(175, 238, 238)hsl(180, 64%, 81%) Бледно-фиолетовый красный#DB7093rgb(219, 112, 147)hsl(340, 60%, 65) %) Персиковый слоеный#FFDAB9rgb(255, 218, 185)hsl(28, 100%, 86%) Розовый#FFC0CBrgb(255, 192, 203)hsl(351, 100%, 88%) Сливовый#DDA0DDrgb(221, 160) , 221)hsl(300, 47%, 74%) Синий#B0E0E6rgb(176, 224, 230)hsl(187, 52%, 80%) Фиолетовый#800080rgb(128, 0, 128)hsl(300, 100% , 25%) Красный#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%) Королевский синий#4169E1rgb(65, 105, 225)hsl(225, 73%, 57%) Лосось#FA8072rgb(250) , 128, 114)hsl(6, 93%, 71%) Серебристый#C0C0C0rgb(192, 192, 192)hsl(0, 0%, 75%) Небесно-голубой#87CEEBrgb(135, 206, 235)hsl(197, 71%, 73%) Шиферно-синий#6A5ACDrgb(106, 90, 205)hsl(248, 53%, 58%) Стальной синий#4682B4rgb(70, 130, 180)hsl(207, 44%, 49%) Бирюзовый# 008080rgb(0, 128, 128)hsl(180, 100%, 25%) Чертополох#D8BFD8rgb(216, 191, 216)hsl(300, 24%, 79%) Помидор#FF6347rgb(255, 99, 71)hsl( 9, 100%, 64%) Бирюзовый#40E0D0rgb(64, 224, 208)hsl(174, 72%, 56%) Фиолетовый#EE82EErgb(238, 130, 238)hsl(300, 76%, 72%) Пшеница# F5DEB3rgb(245, 222, 179)hsl(39, 77%, 83%) Белый#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%) Желтый#FFFF00rgb(255, 255, 0)hsl( 60, 100%, 50%) Желтый Зеленый#9ACD32rgb(154, 205, 50)hsl(80, 61%, 50%) Топ-100 цветового кода HTML

Использование цветовых кодов HTML в CSS

Существуют разные способы использования этих цветов в CSS: либо как встроенный код для одного элемента, либо как внешний файл, влияющий на все элементы на странице. Ниже приведен пример использования темно-бордового фона для элемента абзаца в HTML.

< title>Пример темно-бордового фона

​​Насыщенный и глубокий оттенок бордового создает основу для жирного шрифта и эффектный дизайн. Этот цвет фона с его шестнадцатеричным кодом #800000, кодом RGB (128, 0, 0) и кодом HSL (0, 100%, 25%) добавляет вашему контенту нотку изысканности и элегантности. Независимо от того, используется ли бордовый в качестве акцента или доминирующего цвета, он может вызвать ощущение силы и стиля в ваших веб-проектах.

Код создаст абзац с темно-бордовым фоном, как показано ниже:

Насыщенный и глубокий оттенок Maroon создает основу для смелого и эффектного дизайна. Этот цвет фона с его шестнадцатеричным кодом #800000, кодом RGB (128, 0, 0) и кодом HSL (0, 100%, 25%) добавляет вашему контенту нотку изысканности и элегантности. Независимо от того, используется ли бордовый в качестве акцента или доминирующего цвета, он может вызвать ощущение силы и стиля в ваших веб-проектах.

Использование палитр цветов

Существуют различные палитры цветов, которые облегчат вашу жизнь вместо того, чтобы запоминать цвета.

Для онлайн-использования

Вы можете использовать наш бесплатный онлайн-инструмент выбора цвета, чтобы перетаскивать и визуально получать значения цветового кода для любых цветов.

Инструмент выбора цвета

Кроме того, вы можете выполнить поиск любого цветового кода в Google Search, чтобы просмотреть палитру цветов и получить его коды RGB, HEX, HSL и HSV (оттенок, насыщенность, значение).

Выбор цвета в поиске Google

На ПК с Windows вы можете использовать такие приложения, как Microsoft PowerToys, чтобы открыть палитру цветов. Это приложение помогает открывать инструмент выбора цвета в любое время с помощью сочетания клавиш. Mac поставляется со встроенным приложением Digital Color Meter. Просто наведите указатель мыши на любой цвет на экране, и приложение покажет значения его кода.

Цифровой измеритель цвета Mac