Flutter. Теория цвета с пакетом Colorfull

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Когда мы начинаем изучать цвета в Flutter, мы сталкиваемся со словами, значение которых неясно: hue, tint, shade, saturation, luminance и другие.

Первые три даже переводятся на русский одним и тем же словом.

В pub.dev появился новый пакет под названием Colorfull который определяет 11K цветов. Мы рассмотрим его позже, но я нашел его DEMO особенно полезным для объяснения основных цветовых терминов.

Основные цветовые термины

Оттенок (Hue)

Оттенок - это, по сути, цвет. Это те цвета, которые обычно отображаются на цветовых колесах. На изображении выше левое меню состоит из оттенков (Lime Green, Bright Green и так далее). В Flutter Material цвета Colors.green.shade500является оттенком. В пакете Colorfull lightGreen500является оттенком.

Яркость (Luminance)

Яркость - это количество света (белого) в цвете. lightGreen50 - это цвет с самой высокой яркостью. lightGreen950 - это цвет с самой низкой яркостью.

Светлота

Светлота - это концепция, связанная с яркостью, но отличающаяся. Яркость - это измеримая физическая характеристика, которую можно рассчитать. Светлота - это человеческое восприятие.

Тон (Tint)

Цвета от 50 до 450 называются тонами (конкретного оттенка). Они создаются путем смешивания оттенка и белого.

Оттенок (Shade)

Цвета от 550 до 950 называются оттенками (конкретного оттенка). Они создаются путем смешивания оттенка и черного.

👉Обратите внимание, что в Flutter MaterialColor и тона, и оттенки называются оттенками. Таким образом, есть оттенки от shade50до shade900.

Контраст

Цветовой контраст относится к разнице в яркости между цветами переднего плана и фона. Он измеряется коэффициентом контраста. Коэффициент контраста между lightGreen50(светлееший тон) и lightGreen950(самый темный оттенок) составляет 17.38 : 1. Максимально возможное значение (черный на белом и наоборот) составляет 21 : 1.

Насыщенность

Насыщенность - это количество цвета (оттенка) в тоне. На изображении выше lightGreen500(оттенок) имеет самую высокую насыщенность.

Хрома

Хрома - это концепция, связанная с насыщенностью; иногда они используются как синонимы, но они очень разные. Насыщенность относится к количеству серого в цвете. Чем меньше, тем более насыщенный. Хрома относится к тому, насколько ярко выглядит цвет. Это больше связано с человеческим восприятием цвета. Оттенок имеет более высокую хрому, чем его оттенки и тона, хотя они имеют одинаковую насыщенность. Например, цвет lightGreenJ500имеет более высокую хрому, чем lightGreenA900, несмотря на то, что последний имеет более высокую насыщенность.

Тон (Tone)

Цвета от A до S (последняя буква, которую мы видим, это J, но есть и другие) называются тонами. Они создаются путем смешивания оттенка и серого. По букве A тона с самой высокой насыщенностью. По букве S тона имеют самую низкую насыщенность.

По сути, это тона и оттенки серого. Без оттенка.

Образец (Swatch)

Образец - это пример (образец) конкретного цвета. Образец может представлять оттенок, тон, оттенок или тон. Термин образец может использоваться как: "Палитра содержит несколько образцов. Каждый из них - это разный оттенок синего."

Цветовое колесо

Основные цвета (оттенки) могут отображаться в виде колеса.

Изображение из https://www.sessions.edu/color-calculator/

Цветовые гармонии (комбинации)

Дополнительные

Цвета, находящиеся на противоположных сторонах колеса, называются дополнительными. Пример: синий - оранжевый.

Аналогичные

Цвета, которые являются соседями на цветовом колесе. Пример: синий - сине-фиолетовый - фиолетовый.

Триадные

Цвета в вершинах равностороннего треугольника. Пример: синий - красный - желтый.

Тетрадные (Квадратные)

Цвета в вершинах квадрата. Пример: синий - красно-фиолетовый - оранжевый - желто-зеленый.

Монохромные

Несколько оттенков (или тонов, или тонов) одного цвета (оттенка).

Разделенные дополнительные

Цвета, которые являются соседями дополнительных. Пример: желтый - сине-фиолетовый - красно-фиолетовый.

Основные, вторичные, третичные

В контексте классического цветового колеса RYB основными цветами являются: синий, красный и желтый, вторичными: зеленый, фиолетовый, оранжевый, а третичными: сине-зеленый, сине-фиолетовый, красно-фиолетовый, красно-оранжевый, желто-оранжевый, желто-зеленый.

👉Обратите внимание, что применительно к палитре и Flutter ColorScheme, значение основного, вторичного и третичного цветов полностью отличается. Основной цвет - это цвет, который используется чаще всего в приложении. Вторичный появляется реже, а третичный еще реже, чем вторичный. С рекомендуемым соотношением использования между основным, вторичным и третичным цветами 60:30:10. Третичный цвет палитры иногда называют акцентным.

Цветовое колесо с цветами Flutter

Цветовое колесо с основными цветами Flutter (без акцентов)

Обратите внимание, что в Flutter 16 основных цветов (показано на изображении выше), в отличие от классического цветового круга с 12 цветами.

Изображение выше — это фактически скриншот приложения Flutter. Метки я добавил вручную. Оно было сделано с использованием пакета flutter_color_picker_wheel. Пакет очень прост в использовании, но, возможно, я напишу отдельную статью.

Цвета Flutter с акцентами

Выше показан цветовой круг с акцентными цветами. Основные цвета на внутреннем кольце, они выглядят немного темнее.

Цветовой круг со всеми оттенками Flutter Material

Не удержался и сделал цветовой пикер. Покажу код в другой статье.

Пикер цветов со всеми цветами Flutter

Пакет Colorfull

Пакет colorfull тоже заслуживает отдельной статьи, но так как я использовал его скриншот для демонстрации, включу несколько слов здесь.

Colorfull определяет константы цветов похожим образом на класс Flutter Colors, но с некоторыми отличиями.

Класс Colors имеет 16 основных цветов по 10 оттенков каждый и 16 акцентов по 4 оттенка каждый. Всего 224 константы.

Colorfull имеет 29 основных цветов по 19 оттенков каждый. Всего 551 константа.

const amber50 = Color(0xffFFFAE5);
const amber100 = Color(0xffFFF5CC);
const amber150 = Color(0xffFFF0B3);
//и так далее...

Кроме того, Colorfull определяет константы для тонов, которых нет в Flutter. 20 уровней насыщенности для каждого оттенка дают нам 551 × 20 = 11020 констант.

const amberA50 = Color(0xffFEFAE6);
const amberA100 = Color(0xffFEF4CD);
const amberA150 = Color(0xffFDEFB4);
//и так далее...

Также есть 19 оттенков серого, 20 белых и 20 черных с разной прозрачностью.

Есть также очень полезный класс Swatch, который расширяет Color. Его можно создать из любой константы Material или Colorfull, или из hex-значения:

Он предоставляет геттеры sat, desat, darker и lighter.

Например, swatch1.darker50 создаст оттенок на 5% темнее, swatch1.lighter50 создаст оттенок на 5% светлее, а swatch1.desat50 создаст оттенок на 5% более серый.

Цветовой круг Colorfull с основными цветами (оттенками)

Цветовой круг Colorfull со всеми оттенками

Мы видим, что темные оттенки Colorfull намного темнее, чем цвета Material из Flutter.

Давайте исследуем какой-нибудь цвет. Например, синий.

https://colorable.jxnblk.com/2196f3/0000ff

Мы видим, что синий из пакета Colorfull — это настоящий синий с ожидаемой светимостью 0.5, в то время как "синий" из класса Colors Flutter — это своего рода художественное произведение дизайнеров Material от Google.

Проверим оттенок синего 600.

Опять же, мы видим, что цвет из Colorfull математически предсказуем с светимостью 0.4, в то время как цвет Material — это своего рода вымысел.

Последний — оттенок 900.

Опять же, blue900 из Colorfull имеет ожидаемую светимость 0.1.

Итак, мы получили ответ, почему цветовой круг Colorfull выглядит темнее, чем Material. Цвета Material — это не настоящие цвета; это художественные произведения. Их названия оттенков вводят в заблуждение, как мы видим, оттенок 900 имеет светимость 0.34 вместо 0.1.

Это плохо? Зависит от того, что нам нужно. Если мы полностью полагаемся на ColorScheme.fromSeed, цвета Material могут дать лучшие результаты, поскольку метод fromSeed был написан для использования именно этих цветов.

Но если мы хотим больше свободы и хотим создавать собственные ColorSchemes, вручную или написав метод-генератор, Colorfull предоставляет более предсказуемые цвета и гибкие методы для их манипуляции.

Спасибо за чтение!
Мысли, вопросы? Добро пожаловать в комментарии!