Рубрики
Без рубрики

Как работают сборщики цвета? – HSL панель

Введение в этой части, я объясню теорию за цветами и построить HSL Color P … Теги с ColorPicker, учебником, цветами, Python.

Как работают сборщики цветов (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”