Цветовые коды html: HTML CSS Палитра цветов

Цветовые коды HTML — HEX, RGB, RGBA, HSL и HSLA

• Aspose.HTML
• .NET
• Основы HTML
• Цветовые коды HTML

Contents

[ Hide Show ]

Для получения дополнительной информации о том, как изменить цвет текста, фона или границы, обратитесь к статьям раздела Статьи с практическими рекомендациями. Статьи в этой главе отвечают на популярные вопросы и содержат примеры C#, предоставляющие необходимую информацию об использовании библиотеки классов Aspose.HTML для решения конкретных задач.

Цвета HTML

Цвета HTML — это цвета, используемые для отображения веб-страниц в Интернете. Они тесно связаны с методами описания и определения этих цветов с использованием соответствующих цветовых кодов. Например, цвета HTML могут быть указаны как общепринятые английские имена цветов или с помощью значений HEX, триплетов RGB, значений HSL, RGBA и HSLA.

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

HTML-имена цветов

W3C спецификация имен цветов различает базовые и расширенные цвета. 16 основных цветов: цвет морской волны, черный, синий, фуксия, серый, зеленый, салатовый, темно-бордовый, темно-синий, оливковый, фиолетовый, красный, серебристый, бирюзовый, белый и желтый. Современные браузеры поддерживают 147 имен цветов HTML.

На рисунке показаны 16 основных цветов с кодами HEX и RGB:

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

Цветовые коды HTML — это средство представления цветового формата, который компьютер может читать и отображать. Цветовые коды используются в HTML и CSS для создания цветовых схем веб-дизайна. Они в основном используются веб-дизайнерами, фронтенд-разработчиками, программистами и цифровыми иллюстраторами.

Цвета RGB

RGB (Red, Green, Blue) — это аддитивная цветовая модель, которая описывает, как любой цвет кодируется с помощью трех основных. 3 = 16 777 216 различных цветов RGB. Смешивание этих трех цветов даст вам цветовой код RGB, представленный, например, как этот RGB(125,50,210).

Одним из наиболее типичных способов передачи цвета являются визуальные системы, такие как диаграммы или графические модели, где каждый цвет имеет свой индивидуальный набор координат. Например, цветовую систему RGB можно представить в виде куба с 255 дискретными точками на каждой стороне:

Шестнадцатеричные цвета

HEX-коды являются наиболее часто используемыми цветовыми кодами. HEX-коды представляют собой трехбайтовые шестнадцатеричные числа (шесть переменных). Шестизначный номер цвета состоит из трех групп по две цифры, которые определяют количество красного, зеленого и синего в аддитивном цвете. Каждая шестнадцатеричная пара из двух цифр может иметь значение от 00 до FF. Это дает более 16 миллионов возможных цветов.

Код выражается следующим образом: #RRGGBB, где каждое из двузначных значений представляет собой диапазон каждого из трех цветов (Red, Green, Blue), с помощью которого вы выбираете окончательное значение, представляющее каждый цвет. Например, #00FF00 отображается зеленым, потому что для зеленого компонента установлено максимальное значение (FF), а для остальных установлено значение 00.

Цвета RGBA

Цветовые значения RGBA(Red, Green, Blue, Alpha) являются расширением цветовых значений RGB с альфа-каналом, определяющим непрозрачность цвета. Альфа-параметр представляет собой число от 0,0, что означает «полностью прозрачный», до 1,0, что означает «полностью непрозрачный». Например, rgba(255, 0, 0) отображается как чистый красный цвет, rgba(255, 0, 0, 0,5) отображается как красный цвет с непрозрачностью 50%.

На рисунке показаны значения RGBA названия цвета «YellowGreen» с разной прозрачностью:

Для значения RGBA, в отличие от значений RGB, нет шестнадцатеричной записи.

Цвета HSL

Многие люди считают цветовой код RGB неинтуитивным и аппаратно-ориентированным. Цветовая модель HSL (Hue, Saturation, Lightness) была разработана в 1970-х годах исследователями компьютерной графики, чтобы более точно соответствовать тому, как человеческое зрение воспринимает атрибуты, производящие цвет. В модели HSL цвета каждого оттенка располагаются в радиальном срезе вокруг центральной оси нейтральных цветов, начиная от черного внизу и заканчивая белым вверху. Представление HSL изменяет цвета, чтобы сделать их более интуитивными, чем представление RGB. Он часто используется для приложений компьютерной графики, таких как средства выбора цвета и анализ изображений.

На рисунке показана трехмерная графическая интерпретация модели HSL (а), изображение взято с сайта commons.wikimedia.org/wiki/. На рисунке (b) показана двухмерная графическая интерпретация модели HSL для значения яркости 50%.

HSL — это представление цветовой модели RGB в цилиндрических координатах. Оттенок (Hue) определяет основной цвет. Оттенок — это практически любой цвет на цветовом круге; это градус на цветовом круге от 0 до 360. Итак, 0 — красный, 120 — зеленый, 240 — синий. Насыщенность (Saturation) — это интенсивность или чистота цвета. Она определяет, насколько ярким будет цвет. Ноль процентов — серый, а 100 процентов — полностью насыщенный цвет. Яркость (Lightness) – это количество яркости или света в цвете. Яркость определяет, насколько черный или белый оттенок имеет цвет. Например, 50 процентов не имеют оттенка, ноль процентов — полностью черный, а 100 процентов — полностью белый.

Примеры цветов HSL

В таблице ниже представлен один оттенок. Красный цвет был выбран из цветового круга. Оттенок (Hue)=0. Ось X таблицы представляет насыщенность (Saturation) (100%, 75%, 50%, 25%, 0%). Ось Y представляет Lightness. 50% — это «нормально».

Цвета HSLA

Цветовые значения HSLA(Hue, Saturation, Lightness, Alpha) являются расширением цветовых значений HSL с альфа-каналом, определяющим непрозрачность цвета. Значение цвета HSLA указывается с оттенком, насыщенностью, яркостью и альфа-каналом, где параметр альфа определяет непрозрачность. Альфа-параметр представляет собой число от 0,0, что означает «полностью прозрачный», до 1,0, что означает «полностью непрозрачный». Например, hsla(0, 100%, 50%, 1) отображается чисто красным, hsla(0, 100%, 50%, 0,5) отображается красным с непрозрачностью 50%:

Заключение

Цвета HTML можно определить по имени, значениям RGB, RGBA, HEX, HSL или HSLA и применить к фону или тексту в документах HTML.

На рисунке ниже показано, как указать бирюзовый цвет по имени, значениям RGB, RGBA, HEX, HSL и HSLA:

Aspose.HTML предлагает бесплатную онлайн-программу Color Wheel Picker, которая позволяет создавать наборы цветов в цветовом коде HEX. Вы можете использовать это бесплатное онлайн-приложение, чтобы найти цветовые гармонии, используя правила сочетания цветов, но также важно экспериментировать с цветом. Color Wheel Picker предлагает отличный способ поэкспериментировать с цветом и самостоятельно создавать захватывающие цветовые комбинации. Приложение работает для компьютеров, планшетов и мобильных устройств. Так что создавайте свою уникальную палитру для любого проекта!

Основы HTML Что такое HTML DOM?

Цветовые коды HTML — онлайн и бесплатно

Цветовые коды HTML — онлайн и бесплатно PhotoRetrica

Выберите редактор

App 1App 2App 3 На весь экран

Как получить цветовой код HTML

1

Выберите приложение

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

2

Следуйте шагам

Теперь вы можете использовать приложение внутри редактора для получения цветового кода HTML. Следуйте инструкциям, которые вы увидите внутри приложения. Если вам не нравится это приложение, попробуйте другое.

3

Наслаждайтесь результатом

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

Какие цветовые форматы используются в HTML

Цвета HTML — это специальные ключевые слова, используемые для обозначения цветов в HTML и CSS в макете Интернет-сайтов. В коде HTML цвет определяется 6-значным кодом RRGGBB (красный, красный, зеленый, зеленый, синий, синий), а в JavaScript или CSS — 6-значным кодом или словом RRGGBB (на английском языке). Цвета HTML указываются с использованием предопределенных названий цветов или значений RGB, Hex, HSL, RGBA, HSLA. В цветах HTML вы можете использовать HEX-код, а также название цвета на английском языке. Например, в тегах HTML вы можете использовать красный цвет вместо # FF0000. На мой взгляд, использование названий цветов в текстовой форме (словах) не очень разумно. Ведь гораздо проще дать шестнадцатеричное или десятичное представление, и тогда человек, который будет их редактировать для себя, будет вам очень благодарен, потому что в повседневной жизни очень мало людей знают эту таблицу наизусть.

С помощью цвета мы можем сосредоточить внимание наших посетителей на определенном тексте или блоке сайта. Обратите внимание, что состояние HTML-ссылок также определяется с помощью цвета таким образом, чтобы пользователь мог понять, по какой ссылке он щелкнул, на какой еще не заходил и на какой HTML-странице он находится в данный момент. В языках html и css, чтобы страницы не были серыми и однотипными, можно раскрашивать документы. Для этого обычно используют модель RGB — аббревиатуру из трех английских слов — названия цветов: красный, зеленый и синий.

Все инструменты цвета

Выбери цвет

Подберите цвет в Интернете в два клика. Наша бесплатная онлайн-палитра цветов позволит вам получить цвет из пикселя с помощью пипетки.

Открыть приложение

Палитра цветов HEX

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

Открыть приложение

Цветовое колесо

Онлайн и бесплатное цветовое колесо. Использование палитры на цветовом круге позволяет выбрать сочетание цветов по всем правилам колористики и цветовой гаммы.

Открыть приложение

Генератор палитры

Найдите отличные цветовые палитры бесплатно и в Интернете. Генератор палитр цветов и оттенков поможет подобрать удачное сочетание 2, 3, 4 и более цветов.

Открыть приложение

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

Получите цветовые коды HTML в Интернете. Цвета HTML — это специальные ключевые слова, используемые для обозначения цветов в HTML и CSS в макете Интернет-сайтов.

Открыть приложение

Вам нравится PhotoRetrica? Помогите нам расти!

Мы стараемся создать максимально удобный и универсальный редактор для всего, что связано с фотографиями и изображениями. Мы нуждаемся в твоей помощи. Добавьте нас в закладки или на главный экран вашего устройства. Поделитесь ссылкой на наш сайт в своих социальных сетях. Спасибо!

↑

Руководство для начинающих по цветовым кодам HTML

Анна Фицджеральд

Обновлено: 03 июня 2022 г.

Опубликовано:

01 марта 2020 г.

Добавление цвета на ваш сайт может вызвать эмоции, создать атмосферу и сделать общий дизайн более целостным.

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

Начнем с определения цветовых кодов HTML.

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

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

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

Чтобы избежать этой неточности в Интернете, мы используем цветовые коды HTML. Компьютеры могут интерпретировать цветовые коды HTML для отображения соответствующего цвета. Эти коды могут иметь различные форматы, включая шестнадцатеричные цветовые коды. Давайте подробнее рассмотрим этот формат ниже.

Шестнадцатеричные цветовые коды HTML

Шестнадцатеричные цветовые коды — наиболее популярный формат HTML, используемый на веб-сайтах и ​​в других программных приложениях. Каждый шестнадцатеричный код состоит из трех байтовых шестнадцатеричных чисел, которым предшествует хэштег.

Байт — это пара символов в шестнадцатеричном коде, которые представляют интенсивность трех основных цветов (красного, зеленого и синего) в цвете. Значения варьируются от 00 (самая низкая интенсивность основного цвета) до FF (самая высокая интенсивность основного цвета).

Это означает, что каждый шестнадцатеричный код состоит из трех пар или всего шести символов. Эти шесть символов могут быть любой комбинацией из десяти цифр (0-9) и шести букв (a-f). Эта 16-символьная система счисления известна как шестнадцатеричный код. Всего существует 16 777 216 возможных комбинаций. Попробуем разобраться в некоторых из них.

Чтобы вычислить шестнадцатеричный код белого цвета, учтите, что вам нужно смешать каждый из трех основных цветов с полной интенсивностью. Это означает, что шестнадцатеричный код белого цвета — #FFFFFF. Поскольку у черного цвета отсутствует основной цвет, его шестнадцатеричный код цвета равен #000000. Если вам нужен красный цвет, вам нужна самая высокая интенсивность красного и самая низкая интенсивность двух других основных цветов. Таким образом, шестнадцатеричный код красного цвета будет #FF0000. Взгляните на диаграмму ниже для нескольких других комбинаций.

Источник

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

Источник

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

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

Источник

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

Теперь, когда вы понимаете, что такое цветовые коды HTML и, в частности, шестнадцатеричные коды, давайте посмотрим, как вы можете использовать цветовые коды HTML.

Как использовать цветовые коды HTML

Вы можете добавить шестнадцатеричные коды в HTML вашего сайта, чтобы изменить цвет отдельных элементов.

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

 
    Красный текст абзаца
 

 

Используя этот код, я мог преобразовать вступление этого сообщения в блоге, сделав первый абзац красным. Во внешнем интерфейсе это будет выглядеть примерно так:

Источник

Вы также можете разделить HTML и CSS и добиться того же результата.

Вот код CSS, который вы бы поместили в заголовок документа: 

 
    тело { 
 
 цвет:#FF0000; 
 
 } 
 

 

Вот HTML-код, который вы должны поместить в основной раздел документа:

 
    
Красный текст абзаца
 

 

Используя тот же процесс, вы можете изменить цвет фона, текста и других элементов на вашем сайте.

Создание сайта в цвете

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

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

Не забудьте поделиться этим постом!

Связанные статьи

• hubspot.com/marketing/color-theory-design»>

  Теория цвета 101: полное руководство по цветовым кругам и цветовым схемам

  25 ноября 2022 г.

• Таргетированная реклама: простое руководство по привлечению клиентов

  27 мая 2022 г.

• hubspot.com/marketing/design-tips-beginners»>

  Хотите научиться графическому дизайну? 9 советов и рекомендаций для начинающих

  23 авг. 2021 г.

• Все, что вам нужно знать о принципах и типах дизайна

  09 марта 2021 г.

• hubspot.com/marketing/design-ethics»>

  «Этика», о которой вы не знали, в дизайне

  11 декабря 2020 г.

• 27 ярких примеров минималистского дизайна, которые дадут толчок вашему творческому процессу

  11 сент. 2020 г.

• hubspot.com/marketing/how-to-design-logo»>

  Как создать логотип [Пошаговое руководство]

  07 нояб. 2019 г.

• Как визуальный язык может обеспечить успех вашей следующей маркетинговой кампании

  08 окт. 2019 г.

• No related posts.