CSS function color-contrast

Опис

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

Функція color-contrast() в CSS є інструментом для роботи з контрастністю кольорів. Вона дозволяє динамічно вибирати кольори на основі контрасту з іншим заданим кольором. Це корисно для забезпечення читабельності тексту на різних фонових кольорах або створення візуальної гармонії між різними елементами сторінки.

Функція приймає два параметри: перший параметр визначає основний колір, а другий містить список кольорів для порівняння. Вона автоматично вибирає той колір зі списку, який має найвищий контраст до основного кольору. Це дозволяє автоматизувати процес вибору кольору, забезпечуючи візуальну злагодженість і чіткість.

Функція color-contrast() працює наступним чином:

• Приймає перше значення (color) - основний колір для порівняння.
• Приймає другий параметр (color-list) - список кольорів, який повинен містити принаймні два значення.
• Обчислює контрастність між першим значенням і кожним значенням у списку.
• Вибирає колір зі списку, який має найбільшу контрастність з першим значенням.
• Результатом є значення кольору зі списку, яке має найвищу контрастність.

Наприклад:

p {
  color: color-contrast(wheat vs tan, sienna, #d2691e);
}

У цьому випадку, функція вибере з кольорів (tan, sienna, #d2691e) той, який має найвищий контраст з коліром wheat. Такий підхід може бути корисним, наприклад, при автоматичному виборі кольору тексту, щоб забезпечити його видимість на різних фонових кольорах.

правити

Порада

Переконайтеся, що ви використовуєте функцію color-contrast() з валідними значеннями кольорів для отримання коректних результатів контрастності.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

color-contrast(<color> vs <color-list>);

Функція color-contrast може отримувати 2 значень:

<color>

Будь-яке валідне значення кольору.

автор: Bond

правити

<color-list>

Розділені комами значення кольорів, що містять принаймні два кольори для порівняння з першим значенням.

автор: Bond

правити

Переглядачі

Переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

Прикладів ще не додано