Вибір кольорів HTML - Програма для створення HTML-вибору кольорів (приклад)

• Вступ до HTML

Вступ до HTML

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

Код кольору в HTML працює як ідентифікатор, який ідентифікує та представляє цей колір в Інтернеті. Зазвичай кольорове кодування є HEX, що представляє код "шістнадцятковий" для цього кольору. Аналогічно, існують і інші коди кольорів, такі як короткий RGB для "Червоний, Зелений, Синій". Ще один кольоровий код під назвою HSL - скорочення «Відтінок, насиченість, легкість». 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" для введення. Цю ФОРМУ, коли її подано, наш 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 () повертає HEX-код, тобто шістнадцятковий код для вибраного кольору нашим кольором. Коли код виконується, наступним є наш вихід.

Вищенаведений вихід у HEX-коді. Шість номерів представляють включення червоного, зеленого та синього кольорів, що призводить до обраного кольору. Цей 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 Колір вибору вихідного коду разом з кодами. Ви також можете ознайомитися з іншими запропонованими нами статтями, щоб дізнатися більше -

1. Атрибут стилю HTML
2. Текстове посилання HTML
3. Теги зображень HTML
4. Що таке HTML5?
5. Встановіть Колір фону в HTML із прикладом