Кольори CSS

Модуль Кольорів CSS визначає кольори, колірні типи, змішування кольорів, непрозорість та те, як ці кольори та ефекти можна застосовувати до вмісту HTML.

Попри те, що цей модуль вміщає лише дві властивості CSS, color і opacity, понад 20 властивостей CSS і SVG, зображень CSS, директив і правил @media залежать від цих двох властивостей.

Кольори в дії

Перетворювач колірного синтаксису нижче демонструє значення поточного вибраного кольору в колірних форматах CSS червоному-зеленому-синьому (RGB), шістнадцятковому (HEX), барві, насиченості та світності (HSL) та барві, білизні та чорноті (HWB). Усі колірні значення тут, RGB, HEX, HSL та HWB, хоча і записані по-різному, представляють одне й те ж колірне значення.

Вибір кольору за допомогою інтерфейсу вибору кольору та непрозорості за допомогою повзуна оновлює значення RGB, HEX, HSL та HWB. Коли обирається новий колір або значення непрозорості, то колір фону та повзуна оновлюється за допомогою властивостей CSS background-color та accent-color відповідно.

Щоб побачити код цього перетворювача колірного синтаксису, перегляньте вихідний код на GitHub.

Довідкові матеріали

Властивості

Директиви та дескриптори

Функції

Типи даних

Терміни глосарія та ключові слова

Інтерфейси

  • CSSColorProfileRule

Посібники

Застосування кольору до елементів HTML за допомогою CSS

Посібник з використання CSS для застосування кольору до різноманітного вмісту; містить усі властивості CSS, що приймають <color> як значення.

Колірні значення CSS

Огляд колірних просторів і різних функційних записів <color>, доступних у CSS.

Мудре використання кольорів

Колірна теорія та ресурси, включно з пошуком доречних кольорів для створення доступної колірної палітри, контрастом і кольоровим друком.

Застосування відносних кольорів

Ця стаття пояснює синтаксис відносних кольорів CSS, показує, які є варіанти, та розглядає деякі ілюстративні приклади.

Розуміння кольору та світності

Сприйняття кольору та використання кольорів для потреб нечутливих до кольору (колірно-сліпих) користувачів, користувачів зі зниженим зором та користувачів з вестибулярними або іншими неврологічними порушеннями.

WCAG 1.4.1: Колірний контраст

Пояснення вимог до контрасту між заднім і переднім планами для забезпечення читабельності.

Споріднені концепції

Специфікації

Специфікація
CSS Color Module Level 4 (CSS Color 4)
CSS Color Module Level 5 (CSS Color 5)

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.