Введение в HTML

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

Цветовой код в HTML работает как идентификатор, который идентифицирует и представляет этот цвет в сети. Обычно используется цветовая кодировка HEX, представляющая шестнадцатеричный код для этого цвета. Точно так же существуют другие цветовые коды, такие как RGB, сокращенно «Красный, Зеленый, Синий». Другой цветовой код называется HSL, сокращение от «Hue, Saturation, Lightness». HSL является дополнительным преимуществом при выборе цвета по вашему выбору.

Так как обычно использование шестнадцатеричных кодов является предпочтительным, мы объяснили шестнадцатеричные коды в наших силах. Шестнадцатеричные цветовые коды содержат символ, хэш (#) и набор из шести цифр или цифр. Они находятся в шестнадцатеричной системе счисления. Таким образом, «FF» является наибольшим числом и представляет « 255» из шестнадцатеричной системы счисления.

Эти шесть цифр содержат три пары, представляющие код цвета RB. Из этих шести цифр первая пара из двух цифр представляет интенсивность вашего «красного» цвета. Таким образом, «FF» для места нашей первой пары будет представлять красный цвет с максимальной интенсивностью. «00» используется для наименьшей интенсивности и «FF» для наибольшей. Для получения «зеленого» цвета средняя пара представляет интенсивность.

Аналогично для «Blue» последняя пара представляет интенсивность.

  • Таким образом, шестнадцатеричное число, такое как # FF0000, приведет к
  • Шестнадцатеричное число, такое как # 00FF00, приведет к
  • И шестнадцатеричное число, такое как # 0000FF, приведет к
  • Чтобы получить желтый цвет, который представляет собой комбинацию «Красный» и «Зеленый», создается аналогичное шестнадцатеричное число, например # FFFF00.

Выбор цвета HTML

Палитра цветов при создании позволяет пользователю « выбирать» цвет по своему выбору. Наиболее стандартная палитра цветов используется в приложениях Windows, таких как MS Word, Paint и других. Вы все знакомы с палитрой цветов, вы можете потрясти память, посмотрев на картинку ниже:

Тип ввода как «цвет » используется для создания полей ввода, которые будут содержать цвет. Но некоторые браузеры, такие как Internet Explorer 11 и более ранние версии, не поддерживают этот тип ввода. Таким образом, в зависимости от браузера появляется палитра цветов, когда вы используете тип ввода. Некоторые браузеры просто превращают это поле ввода в текстовое поле, как показано ниже:

Таким образом, при использовании поддерживаемого браузера тот же код приведет к следующей палитре выбора цвета

И когда щелкает по этой цветной коробке, появляется цветовая палитра. Здесь я использую версию Google Chrome '78.0.3904.97', которая поддерживает цветовой атрибут типа ввода.

Код для создания такой палитры цветов будет объяснен в следующем разделе.

Исходный код для создания палитры цветов

Ниже приведено объяснение создания простейшего средства выбора цвета в HTML. Смотрите код ниже:

Код


Select your favorite color:

Приведенный выше HTML-код содержит элемент FORM, который использует тип ввода с именем 'color'. Этот тип ввода цвета создает и отображает простейшую палитру цветов, стандартную палитру цветов Windows. Это позволяет пользователю выбрать цвет по своему выбору.

Тип ввода в виде цвета создает текстовое поле или более кнопку, которая имеет «Черный» в качестве цвета фона по умолчанию. Когда мы нажимаем на него, он отображает выбор цветов для пользователя.

Обратите внимание на работу этого палитры цветов, приведенную ниже:

Шаг 1: Нажав на кнопку с черным в качестве цвета фона по умолчанию.

Приведенный выше код просто создает кнопку, как показано выше.

Шаг 2: Нажмите и выберите ваш новый цвет.

Шаг 3 : Мы выбрали ярко-зеленый цвет для демонстрации. Нажмите на кнопку «ОК» .

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

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

В следующем примере я увеличил приведенный выше пример и изменил его с некоторыми включениями.

Следующий пример представляет собой комбинацию HTML и Javascript. В этом примере есть элемент FORM, который использует тэг типа color «input». Эта ФОРМА, когда отправлено, наш JAVASCRIPT запущен.

Обратите внимание на исходный код элемента FORM ниже:

Код:


Select your favorite color:

Мы добавили новую строку в нашу предыдущую программу. Кнопка отправки. При нажатии этой кнопки отправки запускается наш Java-скрипт, который приведен ниже:

function ReturnColor(c)
(
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code.
document.write(str+c);
)

При нажатии кнопки «Отправить» наша функция в javascript запускается. Вышеупомянутая функция ReturnColor () возвращает наш шестнадцатеричный код, то есть шестнадцатеричный код для выбранного цвета, выбранным нашей палитрой цветов. Когда код выполняется, следующий вывод.

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

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

Ниже приведен полный код с неизменным телом HTML:


function ReturnColor(c)
(
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code
document.write(str+c);
document.write("
");
//A HEX color code can be converted into RGB code
var R=c.slice(1, 3);
var G=c.slice(3, 5);
var B=c.slice(5);
//Displaying the corresponding RGB code
document.write("In RGB format, RGB("
+ parseInt(R, 16) + ", "
+ parseInt(G, 16) + ", "
+ parseInt(B, 16) + ")");
document.write("
");
//Setting our selected color as Font color
var color = c;
var str1 = "Your color will appear as this font color";
var str2 = str1.fontcolor(c);
document.write(str2);
//Setting our selected color as Background color
document.write(" ");
)

Это наш полный сценарий. Когда код выполнен и выбран цвет, выводится следующий вывод.

Вывод

Есть много способов и много комбинаций, которые могут помочь вам создать палитру цветов, которая слишком умная. Например, сочетая HTML5 и CSS вместе с JavaScript, вы можете использовать еще один элемент, называемый «canvas», который имеет свои собственные библиотеки, которые помогают создавать легкий, маленький и кроссбраузерный инструмент выбора цвета. Но это в другой раз.

Рекомендуемые статьи

Это руководство по палитре цветов HTML. Здесь мы обсуждаем Введение, HTML Color Picker, Исходный код вместе с кодами. Вы также можете просмотреть наши другие предлагаемые статьи, чтобы узнать больше -

  1. Атрибут HTML стиля
  2. HTML текстовая ссылка
  3. HTML-теги изображений
  4. Что такое HTML5?
  5. Установить цвет фона в HTML с примером

Категория:

Инструменты веб-разработки