Кольори 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.

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

Властивості

• color
• opacity

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

• @color-profile
  • Дескриптор components
  • Дескриптор rendering-intent
  • Дескриптор src

Функції

• Колірні функції:
  • rgb() та її псевдонім rgba()
  • hsl() та її псевдонім hsla()
  • hwb()
  • lab()
  • lch()
  • oklab()
  • oklch()
  • color()
• color-contrast()
• color-mix()
• device-cmyk()
• light-dark()

Типи даних

• <color>
• <color-function>
• hex-color
• named-color
• alpha-value
• hue
• system-color
• <colorspace-params>

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

• колірний простір
• currentcolor
• інтерполяція
• RGB
• transparent

Інтерфейси

• CSSColorProfileRule

Посібники

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

Посібник з використання CSS для застосування кольору до різноманітного вмісту. Торкається всіх властивостей CSS, пов'язаних з кольором.

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

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

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

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

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

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

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

• Властивості CSS, що входять до інших специфікацій:
  • accent-color
  • background-color
  • background-image
  • border-color
  • box-shadow
  • caret-color
  • color
  • color-scheme
  • column-rule-color
  • outline-color
  • scrollbar-color
  • text-decoration-color
  • text-emphasis-color
  • text-shadow
  • -webkit-tap-highlight-color
• Колірні властивості SVG, що входять до інших специфікацій:
  • fill
  • flood-color
  • lighting-color
  • stop-color
  • stroke
• Атрибут SVG color
• Термін глосарія Колірне коло
• Термін глосарія Інтерполяція
• Дескриптор override-colors директиви @font-palette-values
• Директива @color-profile
• Можливість @media color-gamut
• Можливість @media forced-colors

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

{{Specifications}}

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

• Модуль Налаштування кольору CSS і властивість print-color-adjust.
• Модуль Зображень CSS, у якому визначені зображення CSS <gradient>.
• Інтерфейс VideoColorSpace
• Елемент SVG <feColorMatrix>
• API полотна: застосування стилів і кольорів
• Інструмент вибору кольору – Завдяки цьому інструменту легко створювати, налаштовувати та експериментувати зі власними кольорами.