Как работают сборщики цветов (2 части серии)
В этой части я объясню теорию за цветами и построить цветную панель HSL, это первый сборщик цвета, который я буду охватить.
Примечание: I буду нет Объясните математику за конверсиями цвета
Английский Википедия говорит Цвет – это визуальное восприятие, соответствующее людям к категориям, называемыми красными, желтыми, синими и т. Д.
В информатике, цвета определяются во многих разных способах, у нас есть цветные пространства, такие как RGB, CMYK, HSL, YCBCR и многое другое.
В этой части мы сосредоточимся на RGB и HSL.
Почему нет одного единого формата цвета?
Потому что это невозможно! Все цветные пространства имеют разные свойства, и они используются для разных вещей.
Давайте получим RGB и CMYK, например.
RGB.
RGB – это цветной формат, который использует красный зеленый и синий канал, чтобы представлять цвет с помощью добавки добавленного цвета. Это означает, что когда вы проецируете все три цвета, вы получите белый.
RGB в основном используется на дисплее, каждый пиксель разделен на 3 «подпиксели», которые являются R, G и B каналами. Дисплеи черные, когда выключены *, поэтому RGB хорош для задачи.
* Ну, черный отображается по-разному на разных типах экрана, OLED делает это, выключая отдельных пикселей, но светодиод не может сделать это, он имитирует черное, поэтому OLED-экраны могут добиться настоящей черноты
Почему красный, зеленый и синий?
Ответ прост, это из-за того, как наш глаз построен и как мы воспринимаем цвета. Я не вырожу детали, вы можете прочитать больше о RGB на очень сложном и подробном Статья Википедии
CMYK.
Cyan, Magenta, yellow и Key (черный)
С другой стороны, CMYK, с другой стороны, использует вычитающее цветовое перемешивание, вместо добавки, когда вы проектируете Cyan, Magenta и yellow, он даст черный цвет.
Вы можете увидеть, что на обоих изображениях вы можете отличить RGB и CMY.
Цветовое пространство CMYK используется в основном в печати, бумажные листы белые, поэтому вам не нужны чернила для белого цвета, но вам нужны все цвета, чтобы получить черный, поэтому RGB не будет работать на печать. CMYK – это причина, по которой вы не можете иногда печатать черный документ из-за отсутствия пурпурных чернил.
Могу поспорить, вы видели градиент, как где-то
Но как это сделано?
Позвольте мне представить вас с форматом HSL.
Это то, для чего зовут имя. Он отличается от RGB и CMYK, потому что каждое значение не описывает «отдельный цвет».
Hue – 0-360 ° – A чистый Пигмент, главная собственность Насыщенность – 0-100% (или 0-1) – Свойство борцы Легкость – 0-100% (или 0-1) – свойство цветной легкости, где 0 черное и 100 белый
Значения Hue:
Круто, но как насчет этого?
Это цветовое пространство идеально подходит для легко представлять данные в 2D пространстве. Мы можем связать координаты X и Y с значениями H и S. При этом мы можем достичь упомянутого градиента выше.
Я подготовил маленький Гист в Python, чтобы генерировать его.
from PIL import Image import colorsys width = 360 height = 100 image = Image.new("RGB", (width, height)) for y in range(height): for x in range(width): color = colorsys.hls_to_rgb(x / 359, abs((y/100) - 1), 1) image.putpixel((x,y), (int(color[0] * 255), int(color[1] * 255), int(color[2] * 255))) image.save("ColorPalette.png", "PNG")
Цвет рассчитывается на основе координат X и Y из HSL, преобразуется в RGB, а затем отображается на экране. Разве это не аккуратно?
Поэтому, когда пользователь нажимает на некоторую часть этого градиента, мы можем легко получить цвет на основе координат (X: Hue – 0-360, Y: Насыщенность – 0-100 и легкость 100%)
Мы можем создать практически любой другой виджет цвета, используя цветное пространство HSL.
Я описал почти все знания Необходимо понять однопанную панель HSL Color Picker , но есть гораздо больше, чтобы узнать о цветах, это огромная тема и стоит погрузиться.
Будьте на связи!
Как работают сборщики цветов (2 части серии)
Оригинал: “https://dev.to/flabbet/how-does-color-pickers-work-hsl-panel-2ff6”