Фоновий колір CSS: як змінити колір фону у HTML

Ви розпочали створювати свою сторінку HTML та хочете надати їй трішки кольору. Можливо, ви захотіли змінити колір тексту або встановити хороший фон. Як це зробити?

У цій публікації я покажу, як змінити фоновий колір сторінки декількома способами.

Як змінити фоновий колір елемента HTML

Ви можете змінити фоновий колір елемента HTML, використавши CSS-властивість background-color та надавши їй значення кольору.

Наприклад, цей код зробить так, що усі елементи абзацу у файлі HTML матимуть рожевий фон, оскільки властивість background-color має значення pink .

Існує більше 140 кольорів, які ви можете використати. Наприклад, teal , hotpink , indigo та інші.

Деякі кольори, які ви можете використати

Примітка: якщо ви надасте background-color елементу та не побачите змін, це може бути помилкою синтаксису або елемент не має висоти чи ширини. Спробуйте надати йому якогось вмісту або надайте ширини та висоти, використовуючи CSS-властивості width та height .

Насправді існує більше 16,8 мільйона кольорів, які ви можете використати. Ці кольори застосовуються зі значенням RGB. Існують й кольори HSL, яких нараховують 3,7 мільйона. У наступному розділі ви дізнаєтесь про різні шляхи створення кольорів.

Різні системи позначення кольорів

Властивість background-color приймає кольори як можливі значення. Зараз ми розглянемо чотири системи позначення кольорів.

Першим способом є імена кольорів, для яких існує приблизно 140 ключових слів. Це найпростіший спосіб вибрати колір, оскільки він не вимагає певного позначення. Однак тут обмежена палітра.

Другим і третім способами є значення RGB та шістнадцяткові значення. У цих системах кольори ідентифікуються кількістю червоного, зеленого та синього у них.

Це залежить від того, як екран створює колір. Екран складається з пікселів, і кожен піксель освітлюється світлодіодами трьох різних кольорів (зелений, синій та червоний), які можуть світити з різною інтенсивністю.

Четвертою системою є кольори HSL, або Hue-Saturation-Lightness (укр. відтінок-насиченість-освітленість). Це позначення походить від графічного дизайну, оскільки воно відображає природніший спосіб людського уявлення про колір: чистий колір (відтінок), насиченість і освітленість якого можна змінювати.

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

Імена кольорів HTML

У першій версії HTML існує 16 базових кольорів, а сьогодні ви можете використовувати більше 140.

body надано чорний фон завдяки цьому CSS Приклад сторінки HTML, де body надано background-color зі значенням black

Вкінці публікації є додаток з усіма іменами кольорів.

Кольори RGB

RGB означає Red-Green-Blue (укр. червоний-зелений-синій). У такому форматі кольори записують як rgb(0,0,0) , де кожне значення між 0 та 255 предаставляє кількість червоного, зеленого та синього, використаних для створення кожного кольору.

Наприклад, якщо ви маєте rgb(0,0,0) , ви отримаєте чорний.

Щоб отримати червоний, напишіть rgb(255,0,0) зі значеннями 255 для червоного, 0 для синього та 0 для зеленого.

Ви можете отримати інші варіації червоного завдяки малим кількостям зеленого та/або синього і меншій кількості червоного. Наприклад, ви отримаєте цинобровий колір із rgb(255,69,0) та кармазиновий із rgb(139,0,0) .

Кольори значень rgb, представлених вище

Елементам div надано кармазиновий фон Приклад сторінки HTML, де елементу div надано background-color зі значенням rgb(139,0,0)

Нижче наведено приклад того, як змінюється колір, коли ви налаштовуєте два значення RGB: верхній лівий кут кольорового квадрата дорівнює rgb(0,0,0) , верхній правий — rgb(0,0,255) , нижній лівий кут — rgb(0,255,0) , а нижній правий кут — rgb(0,255,255) .

На щастя, вам не потрібно вгадувати числа, щоб отримати потрібний колір. В інтернеті можна знайти безліч відбірників кольору, які дозволяють вибрати колір за допомогою повзунків (або іншими методами) і надають вам потрібне значення RGB.

Шістнадцяткові кольори

Шістнадцяткові кольори є іншим способом написання кольорів RGB. Шістнадцяткові також мають три числа для кожного кольору із 256 можливими значеннями.

Однак у такому випадку кожен колір має два символи від 0 до F (тобто 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 та A , B , C , D , E , F ). Один символ має 16 можливих значень, а два символи мають 256 можливих значень від 00 до FF (255).

Перед значенням шістнадцяткового кольору пишеться # . Наприклад, червоний записують як #FF0000 , кармазиновий — #8B0000 , а цинобровий — #FF4500 .

Кольори, згадані у розділі вище

Елементам h1 надано цинобровий фон. Приклад сторінки HTML, де елементу h1 надано background-color зі значенням #FF4500

Щоб отримати шістнадцяткове значення, також можна використати відбірник кольору.

Скорочення шістнадцяткових

Шістнадцяткові числа можна написати у скороченій формі, використовуючи лише три символи замість шести. Наприклад, ви можете записати червоний як #F00 . Це зменшує кількість можливих кольорів до трохи більше 4000, але це скорочена форма, яка іноді важливіша.

Кожен символ відповідає за два ідентичні символи, тому ми не можемо написати #8B0000 у скороченій формі, оскільки 8 та B не ідентичні. Але ми можемо написати #800 , яке дорівнює #880000 , та дуже схоже до кармазинового. А цинобровим може бути #F40 (замість #FF4400 ).

Кольори, згадані у розділі вище

Кольори HSL

HSL означає Hue-Saturation-Lightness (укр. відтінок-насиченість-освітленість) і це зовсім інший метод написання кольорів.

Кольори HSL представлені трьома числами: відтінок від 0 до 360 , а насиченість і освітленість від 0 до 100 .

Відтінок визначає базовий колір, а його значенням є градус на колірному колі. У цьому разі червоним є 0 , зеленим — 120 , синім — 240 , та знову червоним — 360 .

Усі можливі кольори змінюються лише за відтінком, з відтінком 0 ліворуч та 360 праворуч

Насиченість починається з 0 (сірого кольору) та закінчується на 100 (повний колір).

Варіація насиченості для червоного, 0% зліва та 100% справа.

Освітленість — це кількість доданого чорного чи білого до кольору. 0 є чорним, 50 — сам колір, а 100 — білий.

Варіація освітленості для червоного, 0% зліва та 100% справа.

Наприклад, ви б написали червоний як hsl(0,100%,50%) , цинобровий — hsl(16,100%,50%) , а кармазиновий — hsl(0,100%,27%) .

За допомогою HSL легше знайти подібні кольори, ніж за допомогою інших колірних схем. У прикладі ви бачили, що для отримання темнішого червоного ви можете просто змінити відсоток освітленості, а змішування червоного з іншим кольором достатньо, щоб трохи змінити його відтінок.

Розглянемо це в дії із шістнадцятковим, наприклад, помаранчевим ( #FFA500 або rgb(255,166,0) ), записаним у HSL як hsl(39,100%,50%) . Світліший колір можна отримати, просто збільшивши освітленість.

Наприклад, ви можете написати hsl(39,100%,65%) , щоб отримати світліший помаранчевий. В інших системах вам би довелось писати rgb(255,193,77) або #FFC14D .

Приклад сторінки HTML, де елементу main надано background-color зі значенням hsl(39, 100%, 65%)

Для кольорів HSL також можна використовувати відбірники кольору.

Скорочена властивість

Ви також можете встановити фоновий колір за допомогою скороченої властивості background .

CSS-властивості, які ми вже бачили, але написані із скороченою властивістю background Приклад сторінки HTML, де всім елементам надано фоновий колір.

Це набагато гнучкіша властивість, оскільки вона є скороченням для багатьох властивостей background , як-от background-image та background-position . Коли ви використовуєте її зі значенням кольору, вона працює точно так само, як background-color .

Висновок

Ви дізнались, як надати фоновий колір своїм елементам HTML, використовуючи властивість background-color та її скорочення background , а також про різні системи позначення кольорів.

Тепер ви маєте всі інструменти, необхідні для додавання кольорів до вебсторінок. Насолоджуйтесь!

Додаток

Усі 140+ імен кольорів

Варіації правопису

Імена кольорів зі словом «Gray» можна писати як «Grey», як показано нижче.

Як відкрити та використовувати керування кольором у Windows 11

У цій публікації ми покажемо вам як відкрити та використовувати керування кольором у Windows 11. Керування кольором є вбудованою функцією Windows 11 що допомагає налаштувати спеціальний колірний профіль для різних пристроїв, таких як монітор, сканер, принтер тощо, підключених до вашого комп’ютера. За замовчуванням, Windows автоматично встановлює кольоровий профіль за замовчуванням для пристроїв, який підходить у більшості випадків. Але, наприклад, якщо ви вважаєте, що відображення кольорів виглядає дивним, блідим або неточним на вашому дисплеї, це може бути через неправильний колірний профіль, встановлений для цього пристрою. У такому випадку функцію «Керування кольором» можна використати для встановлення спеціального колірного профілю для отримання точніших кольорів.

Якщо вами встановлено правильний колірний профіль, кольори на дисплеї виглядатимуть природніше. Подібним чином ви можете використовувати керування кольором для принтера, щоб друкувати з кращим відображенням кольору, якщо кольоровий профіль за замовчуванням не дає очікуваного результату. Ви можете зв’язати кілька колірних профілів для різних пристроїв на своєму Windows 11 систему, а потім установіть будь-який встановлений колірний профіль за замовчуванням, а також скиньте налаштування в будь-який час за допомогою керування кольором Windows 11. Тепер давайте спочатку перевіримо, як відкрити цю функцію.

Як відкрити керування кольором у Windows 11

Існує кілька способів відкрийте Керування кольором у Windows 11. Це:

1. Відкрийте вікно керування кольором за допомогою поля пошуку
2. Відкрийте «Керування кольором» за допомогою програми «Налаштування».
3. Запустіть вікно керування кольором через панель керування
4. Використовуйте Провідник файлів, щоб відкрити вікно керування кольором
5. Перейдіть до вікна керування кольором за допомогою папки System32
6. Запустіть вікно «Керування кольором» за допомогою вікна «Виконати команду».
7. Відкрийте вікно керування кольором через диспетчер завдань
8. Скористайтесь Windows Термінал для запуску керування кольором
9. Створіть ярлик на робочому столі, щоб відкрити керування кольором.

Давайте перевіримо всі ці способи один за іншим.

1] Відкрийте вікно керування кольором за допомогою поля пошуку

Найшвидший спосіб відкрити керування кольором – це скористатися Windows 11 Поле пошуку. Просто введіть керування кольором у полі пошуку Windows 11 і натисніть доступний результат, щоб відкрити його.

2] Відкрийте Керування кольором за допомогою програми Налаштування

• Використовувати Win + I клавішу швидкого доступу, щоб відкрити програму Налаштування
• тип керування кольором у вікні пошуку у верхньому лівому куті
• Натисніть Що натомість? Створіть віртуальну версію себе у ключ

3] Запустіть вікно керування кольором через панель керування

Відкрийте вікно Панелі керування та змініть Перегляд по режим від Категорія до Великі значки or маленькі іконки, натисніть на Управління кольором і відкриється його вікно.

4] Використовуйте Провідник файлів, щоб відкрити вікно керування кольором

Натисніть Win + E гарячу клавішу, щоб відкрити вікно Провідника файлів. В адресному рядку Провідника файлів введіть colorcpl, і використовуйте Що натомість? Створіть віртуальну версію себе у щоб відкрити вікно керування кольором.

5] Відкрийте вікно керування кольором за допомогою папки System32

Команда System32 папка — це розташування, де зберігається файл програми EXE вікна керування кольором. Отже, ви можете отримати доступ до вікна керування кольором безпосередньо з його вихідного розташування. Для цього відкрийте вікно Провідника файлів і перейдіть до C:WindowsSystem32 папку. Там шукайте colorcpl.exe програму та двічі клацніть її.

6] Запустіть вікно «Керування кольором» за допомогою вікна «Виконати команду».

Відкрийте поле Виконати команду за допомогою Win + R гаряча клавіша. Тип colorcpl у текстовому полі та натисніть OK кнопку, щоб негайно запустити вікно керування кольором.

7] Відкрийте вікно керування кольором через диспетчер завдань

Подібно до вікна Виконати команду, у якому можна запустити нове завдання Windows 11 Task Manager і відкрийте звідти вікно керування кольором. Зробити це:

1. Використовувати Ctrl + Shift + Esc гарячу клавішу для запуску вікна диспетчера завдань
2. Натисніть на Виконайте нове завдання варіант. Відкриється окремий ящик
3. тип colorcpl у текстовому полі цього поля
4. Вдарте OK кнопки.

8] Використовується Windows Термінал для запуску керування кольором

Ти можеш використовувати Windows Додаток терміналу за допомогою командного рядка або PowerShell Windows 11 щоб відкрити вікно керування кольором. Кроки такі:

1. Клацніть правою кнопкою миші кнопку Пуск Windows 11
2. Виберіть термінал варіант і Windows Програма терміналу відкриється з профілем за замовчуванням
3. Скористайтеся піктограмою спадного меню, доступною на панелі заголовка
4. Відкрийте Командний рядок вікно або виберіть Windows PowerShell варіант
5. тип colorcpl і вдарив Що натомість? Створіть віртуальну версію себе у для виконання команди.

9] Створіть ярлик на робочому столі, щоб відкрити керування кольором

Якщо ви віддаєте перевагу ярлику на робочому столі, щоб відкрити вікно керування кольором, виконайте такі дії:

• Клацніть правою кнопкою миші на вашому Windows 11 робочий стіл
• Доступ Нові меню
• Виберіть найкоротший шлях варіант
• У майстрі ярликів на робочому столі введіть таке розташування вікна керування кольором у полі розташування:

C:WindowsSystem32colorcpl.exe

• Виберіть Далі button
• Додайте назву для цього ярлика (наприклад, Ярлик ColorManagement або що завгодно) у текстовому полі
• Натисніть обробка кнопки.

Тепер давайте продовжимо далі, щоб побачити, як використовувати цю функцію.

Як використовувати керування кольором у Windows 11?

У вікні «Керування кольором» є три основні вкладки (прилади, Усі профілі та Advanced), які охоплюють усе, що стосується використання вікна керування кольором. Використовуючи ці вкладки, ви можете виконувати наступні важливі дії:

1. Додайте або встановіть власні профілі кольорів для пристроїв
2. Видаліть спеціальний колірний профіль
3. Встановіть спеціальний колірний профіль за умовчанням для пристрою
4. Скинути параметри профілю кольорів до стандартних системних значень.

Давайте перевіримо всі ці варіанти.

1] Додайте або встановіть спеціальні профілі кольорів для пристроїв

Windows 11 опори Колірні профілі ICC (файли *.icc або *.icm), Профілі моделі відображення гами, Профілі моделі пристроютощо. Якщо ви вже завантажили кольорові профілі з веб-сайту виробника або надійного джерела, ви можете легко додати або встановити ці власні колірні профілі за допомогою вікна керування кольором.

Для цього перейдіть до Усі профілі у вікні керування кольором. Там ви побачите список попередньо встановлених профілів (профілі пристроїв WCS, профілі ICC тощо) у вашій системі. Усі щойно додані або встановлені колірні профілі також відображаються в цій категорії. Для кожного встановленого профілю ви можете побачити назву файлу, розширення файлу та Тип класу (Дисплей, принтер тощо). Дата створення, Колірний простір, Назва видавця вибраного кольорового профілю та іншу інформацію також видно. Тепер, щоб установити спеціальний колірний профіль:

• Натисніть додавати кнопки та Встановити профіль відкриється вікно
• У цьому вікні ви можете вибрати тип файлу (профілі ICC, профілі моделі відображення гами тощо) і перейти до розташування/папки, де зберігаються ваші профілі кольорів.
• Виберіть колірний профіль і натисніть додавати кнопку в цьому вікні.

Цей конкретний профіль буде додано до списку встановлених колірних профілів у Усі профілі вкладка. Таким же чином ви можете додати інші кольорові профілі.

2] Видаліть спеціальний колірний профіль

На випадок, якщо вам потрібно видалити спеціальний колірний профіль зі свого Windows 11 просто отримайте доступ до Усі профілі у вікні «Керування кольором» і виберіть колірний профіль. Натисніть Видалення і підтвердьте свою дію за допомогою продовжувати кнопки.

3] Встановіть спеціальний колірний профіль як стандартний для пристрою

Після додавання власних колірних профілів ви можете встановити будь-який із цих колірних профілів за умовчанням для пристрою. Для цього перейдіть на прилади у вікні керування кольором. Використовуйте спадне меню, щоб вибрати свій пристрій (дисплей, сканер, принтер тощо). Якщо до вас підключено кілька моніторів Windows 11 систему, потім спочатку натисніть кнопку Монітори ідентифікації кнопку для підтвердження. Після цього позначте галочкою Використовувати мої налаштування для цього пристрою варіант. Також встановіть Вибір профілю режим до Мануал.

Тепер профілі, які вже пов’язані з цим конкретним пристроєм, будуть видимі в середній частині. Ви не побачите нещодавно встановлені профілі кольорів, доки не пов’яжете їх із вибраним пристроєм. Для цього натисніть на Додати . кнопки та Асоційований колірний профіль вікно вискочить. Виберіть профіль і натисніть OK кнопку. Таким чином, ви можете асоціювати кілька колірних профілів з пристроєм.

Тепер серед кількох пов’язаних профілів для вибраного пристрою виберіть колірний профіль і натисніть Встановити за замовчуванням Профіль.

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

4] Скинути параметри профілю кольорів до стандартних системних значень

Якщо ви зіткнулися із занадто великою кількістю кольорових профілів для своїх пристроїв і вам потрібно все скинути, перейдіть до Advanced у вікні «Керування кольором» і встановіть для кожного доступного параметра (наприклад, «Профіль пристрою», «Металь відтворення за замовчуванням», «Бізнес-графіка» тощо) значення «Система» за замовчуванням. Це буде відновити налаштування кольору дисплея за замовчуванням для вашого Windows 11 системи.

Крім того, ви можете отримати доступ до прилади виберіть пристрій зі списку та поставте прапорець Використовуйте мої налаштування для цього пристрою варіант. Нарешті, натисніть на Профілі і використовуйте Скинути мої налаштування до системних значень за замовчуванням варіант.

Інші параметри, доступні в Керуванні кольором Windows 11

Деякі інші корисні опції також присутні в Windows 11 Керування кольором. До них належать:

1. Поєднайте налаштування колірного профілю для вибраного пристрою з системними параметрами за замовчуванням. Цей параметр можна отримати за допомогою Профілі кнопка наявна в прилади таб
2. Зберегти стандартні асоціації для вибраного пристрою, щоб ви могли завантажити їх пізніше, коли знадобиться. Цю опцію також можна використовувати з того самого Профілі button
3. Відкрийте Калібрування кольорів дисплея майстер, який допомагає змінити калібрування кольору, встановити основні параметри кольору, налаштувати гамму тощо.

Як увімкнути параметри кольору Windows 11?

Щоб змінити параметри кольору на вашому Windows 11 на комп’ютері відкрийте програму Налаштування (Win + I), і отримати доступ до Втілення категорія. Перейти до Кольори сторінки в цій категорії. Тепер ви можете вибрати колір акценту або використати спеціальний колір, відобразити колір акценту на панелі «Пуск» і панелі завдань, рядках заголовків відкритих windows, І т.д.

Схожі повідомлення: