CSS Academy · Урок

color-mix() и относительный синтаксис цвета

Смешивайте цвета и создавайте их варианты с помощью современных цветовых функций CSS.

Урок 4 из 412 шагов

«color-mix() и относительный синтаксис цвета» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Функция color-mix()

color-mix() смешивает два цвета в заданном цветовом пространстве. Она позволяет создавать варианты цветов на основе токенов дизайна без Sass или JavaScript.

  <button class="button-hover">Hover-mixed button</button>

Синтаксис color-mix()

Полный синтаксис: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). Сумма процентов должна составлять 100%.

  <div class="mix-equal">Equal mix</div>
  <div class="mix-weighted">Weighted mix</div>

Цветовые пространства в color-mix()

Цветовое пространство влияет на результат смешивания. Современные перцептивные пространства, такие как oklch, дают более визуально однородный результат, чем srgb:

  <div class="oklch-mix">OKLCH mix</div>
  <div class="srgb-mix">sRGB mix</div>

Создание цветовых шкал с color-mix()

Создайте согласованную цветовую палитру на основе одного фирменного цвета:

  <span class="swatch swatch-100"></span>
  <span class="swatch swatch-300"></span>
  <span class="swatch swatch-700"></span>
  <span class="swatch swatch-900"></span>

Относительный синтаксис цветов

Относительные цвета позволяют получить новый цвет из существующего, изменив определённые каналы. Используйте ключевое слово from:

  <p class="darker">20% darker text</p>
  <p class="desaturated">Half saturation text</p>

Прозрачный вариант с относительным цветом

Создайте прозрачный вариант фирменного цвета, не зная его значений RGB:

  <div class="overlay">Overlay</div>

Осветление и затемнение

Добавляйте или вычитайте светлоту в oklch, чтобы создавать оттенки и варианты цвета:

  <div class="card demo-active">Card</div>

Обзор цветового пространства OKLCH

OKLCH — это перцептивно однородное цветовое пространство:

l — светлота (от 0 до 1)
c — цветность/насыщенность (от 0 до 0.4+)
h — угол оттенка (от 0 до 360)

Изменение l даёт предсказуемо однородные светлые и тёмные варианты цвета.

Поддержка браузерами

color-mix() поддерживается в Chrome 111+, Firefox 113+, Safari 16.2+. Относительный синтаксис цветов (ключевое слово from) поддерживается в Chrome 119+, Safari 16.4+ и Firefox 128+. Актуальную информацию о поддержке проверяйте на caniuse.com.

Будущее color-contrast()

color-contrast() — предлагаемая функция, которая автоматически выбирает наиболее читаемый цвет из списка для заданного фона. Пока она не поддерживается браузерами, но разработана для темизации с учётом доступности.

Быстрая проверка

Какое цветовое пространство color-mix() обеспечивает наиболее перцептивно однородный результат смешивания?

Ответь в интерактивном уроке

Итоги

color-mix(in oklch, color1 %, color2 %) смешивает цвета в заданном пространстве — идеально подходит для создания светлых, тёмных и прозрачных вариантов на основе одного фирменного цвета. Относительный синтаксис цветов (oklch(from var(--brand) calc(l+0.2) c h)) создаёт новые цвета, изменяя отдельные каналы. OKLCH — лучшее цветовое пространство для перцептивно однородных результатов.

Можно начать бесплатно

Изучай CSS с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 40
Уроки: 159

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «color-mix() и относительный синтаксис цвета» бесплатный?

Да — полный текст урока «color-mix() и относительный синтаксис цвета» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «color-mix() и относительный синтаксис цвета»?

Смешивайте цвета и создавайте их варианты с помощью современных цветовых функций CSS. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «color-mix() и относительный синтаксис цвета»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

calc() для динамических вычислений
min(), max() и clamp() для плавных значений
repeat() и minmax() в Grid
color-mix() и относительный синтаксис цвета

← Назад к CSS Academy