Знаете, что меня всегда забавляет? Тот факт, что в CSS один и тот же цвет можно записать четырьмя разными способами, а браузер просто кивает и говорит: «Да, все правильно». Представьте, если бы вы могли писать «синий» как синей, сыний, сыный или синный, и учитель каждый раз ставил бы вам пятерку. Это именно то, что CSS делает с цветами.
Мой выбор — HEX-коды, потому что их легко писать и выглядят они довольно просто. Чего еще желать веб-разработчику?! Но недавно я начала разбираться, как на самом деле работают все форматы. Честно говоря, это очень увлекательно — до того, что из головы не идет вопрос: «Почему мне этого раньше никто не объяснил?».
Начнем с RGB. На первый взгляд, это выглядит как бессмыслица: три числа в скобках, разделенные запятыми. Но на самом деле — это просто рецепт. Red, green, blue — красный, зеленый, синий. Смешайте их в разных пропорциях — и вуаля! Любой цвет на вашем экране. Числа варьируются от нуля до 255, что звучит случайно, пока вы не поймете, что компьютеры обожают работать с 8-битными блоками. Восемь бит дают 256 возможных значений, поэтому ноль — это «нет света вообще», а 255 — «ударь меня максимальной яркостью».
Таким образом, написав rgb(255, 0, 0), вы потребовали: «Только красный, пожалуйста!», а rgb(0, 0, 0) — попросили: «Чистый черный!» (потому что света нет). Сложите их все вместе, как в rgb(255, 255, 255), и получите белый — потому что так работает свет. Внезапно эти числа перестают вас пугать и начинают обретать какой-то смысл.
Теперь, разобравшись с RGB, можно ознакомиться с его более крутым братом: RGBA. Буква «A» означает alpha (альфа), она управляет прозрачностью цвета. Это последнее число — по сути, ползунок прозрачности. Напишите rgba(255, 0, 0, 0.5), и вы получите красный цвет с половинной силой, смешивающийся с тем, что находится позади. Как будто наложили кальку на ваш цвет.
Термин «альфа» (alpha) выбран не случайно; он пришел из ранней компьютерной графики, когда разработчики решали, как накладывать одно изображение на другое.
Они придумали формулу, которая на первый взгляд выглядит пугающе:
// Уравнение альфа-смешения
result = alpha * foreground_color + (1 - alpha) * background_colorНо на самом деле все просто. Если альфа равна единице, виден только верхний слой. Если нулю — только нижний. Если что-то посередине — получается смесь. Это как делать смузи: один банан, половина манго, немного йогурта; только вместо фруктов — пиксели.
А еще есть HEX-коды. Это такие шестизначные «монстры Лабубу», начинающиеся с решетки: #FF5733 или #00FF00. Это просто еще один способ записать RGB, только в шестнадцатеричной системе (с основанием 16 вместо 10).
Не пугайтесь. Это всего лишь означает, что числа идут от нуля до пятнадцати, и, поскольку компьютеры одержимы степенями числа два, для них это имеет смысл. Для людей это менее интуитивно, зато выглядит аккуратно. FF — просто 255, а 00 — ноль. Поэтому #FFFFFF — это белый, а #000000 — черный.
Есть еще сокращенная запись, где #FFF волшебным образом превращается в #FFFFFF Это как писать «лол» вместо «не могу перестать смеяться». Удобно, но работает только для определенных цветов.
И наконец, есть HSL, что означает hue (тон), saturation (насыщенность) и lightness (светлость). Этот формат кажется более дружелюбным для человека, потому что вместо жонглирования пугающими цифрами, вы, по сути, описываете цвет, как объясняли бы его другу. Тон — это собственно цвет на радужном круге (красный, синий, зеленый и т. д.). Насыщенность — это его интенсивность (приглушенный пастельный или яркий неоновый). А светлость определяет, насколько он близок к черному, белому или чему-то среднему.
Так что, написав hsl(200, 100%, 50%), вы скажете: «Дай мне яркий, насыщенный синий». Уменьшите насыщенность до 20% — и вот ваш цвет уже мягкий, приглушенный голубой. Поднимите светлость до 90% — и вы выбрали пастельный тон. Это интуитивно, как крутить ручки на смесителе красок, а не высчитывать секретные робо-числа.
И вот главный вопрос: зачем CSS предоставляет нам все эти варианты? Честно говоря, все зависит от конкретной ситуации.
- Некоторые разработчики предпочитают RGB, потому что это ближе к тому, как «думает» компьютер.
- Дизайнеры часто выбирают HSL, потому что с ним проще подбирать цвет, не нарушая гармонию.
- HEX стал интернет-сокращением, потому что он компактный и его легко копировать (мой фаворит!).
- RGBA предназначен для тех случаев, когда нужна прозрачность без лишней головной боли.
За пределами CSS цветовое шоу не заканчивается. Принтеры используют CMYK, потому что они работают с краской, а не со светом. Ученые и хардкорные энтузиасты цвета предпочитают LAB, потому что он точнее соответствует человеческому зрению. А новые версии CSS даже вводят модные варианты вроде color() и lch() для сверхточных оттенков. Словно вселенная посмотрела на наши четыре варианта и решила: «Нет, этого недостаточно».
Так что можете выбрать свой стиль. Способов добиться результата — бесконечное множество. В конце концов, цвета в CSS — это что-то дикое, хаотичное, но и по-своему волшебное.
Какой бы путь вы ни выбрали, на экране получится один и тот же результат — просто окрашенный по-вашему. Это хорошее напоминание о том, что никогда не бывает одного «правильного» пути, и, по правде говоря, в этом и есть суть программирования. Просто посмотрите на совершенно разные ответы, которые люди публикуют на LeetCode.
Читайте также:
Читайте нас в Telegram, VK и Дзен
Перевод статьи Eliza Fury: CSS Colour Chaos
