Какие факторы разделяют эти цвета?

Цвета ниже, похоже, имеют какой-то «тон» вместе. Например, такие цвета кажутся слишком яркими, чтобы вписаться в эту группу .

Что именно делает этот «тон»? Мне нужна техническая информация, чтобы, если я захочу добавить фиолетовый в эту группу или создать другую группу цветов, я мог найти точные цветовые коды HTML, которые мне нужны.

введите описание изображения здесь

Скриншот взят отсюда

Я считаю, что все они имеют одинаковый уровень насыщенности.
О, я знаю это! Все пять находятся на снимке экрана, который вы отправили на вопрос! Я выиграл, разве я ??? :)
Нет, @Scott, как ответил бы Клифф Клавин: «Каких пяти цветов никогда не было на моей кухне, Алекс?»

Ответы (3)

Я сделаю снимок. В отображаемых вами цветах нет ничего уникального — они похожи в том, что все они попадают в небольшой диапазон как насыщенности, так и яркости, но у них нет похожего тона или оттенка, и они не находятся под какой-либо определенной цветовой гармонией. (по крайней мере я в курсе)

В качестве мысленного эксперимента я возьму те же цвета, которые вы предоставили, и поверну все значения оттенков на 45 градусов.

Оригинал повернут на 45 градусов

Итак, теперь у нас есть цвета с той же насыщенностью и яркостью, что и раньше, однако мы изменили их оттенок.

Сравнение

Как вы можете видеть, между первым и вторым цветами существует одинаковое количество взаимосвязей, они не вписываются в особую цветовую гармонию, и, честно говоря, мне так же неудобно говорить, что первые связаны, как я говорю, что вторые связаны. связанные с.

Вам лучше создавать из известных цветовых гармоний, таких как цветовая гармония Тетрада. Их также легче изменить программно, потому что они основаны на заданных вариациях оттенков между цветами. Что касается генерации шестнадцатеричного кода, вам нужно будет создать алгоритм, который преобразует значения hsl в шестнадцатеричный, или просто использовать hsl, которые поддерживаются в CSS, хотя у вас есть проблема с IE8 и ниже. (Есть полифилы, которые обеспечивают поддержку, которую можно найти с помощью поиска Google)

тетрада Тетрадное колесо

Спасибо. Тетрады дают только четыре цвета. Так что я, вероятно, могу сдвинуть тетрады, чтобы создать другие цвета, которые мне нужны?
Существует много цветовых гармоний, общим является то, что они обычно имеют заданное значение оттенка друг от друга. Что сложно, так это то, что вы пытаетесь применить программный подход к более объективному вопросу о том, «соответствуют» ли цвета друг другу. Лучший совет, который я могу дать, — найти палитру или гармонию, которые, по вашему мнению, работают, и попробовать изменить оттенок всех цветов, чтобы увидеть, подходят ли они по-прежнему.
ИМО, ваша повернутая палитра имеет гораздо более очевидные различия в насыщенности и яркости, чем оригинал. Я предполагаю, что это связано с тем, что программное обеспечение, которое вы использовали для его поворота, не использовало гамма-коррекцию и/или визуально однородное цветовое пространство.
Насыщенность между цветами не меняется, меняется только значение оттенка. Я перепроверил, и относительные значения насыщенности и яркости были одинаковыми. Однако вы правы, вращение оттенка немного изменит уровни гаммы отдельных цветов. +1, если вы объясните важность изменения гаммы в воспринимаемой яркости, потому что, честно говоря, я не совсем понимаю это технически.

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

Одна из причин, по которой это не обязательно очевидно из представления цветов RGB или даже HSL/HSV , заключается в том, что даже HSL/HSV является довольно неоднородным с точки зрения восприятия цветовым пространством: цвета, которые имеют одно и то же значение «яркости» HSL, могут иметь очень разные значения. видимая светлота в зависимости от их оттенка, и наоборот.

Проблема усугубляется тем фактом, что необработанные значения цвета RGB, которые у вас есть, скорее всего, имеют гамма-кодирование и сначала должны быть преобразованы в линейное цветовое пространство, прежде чем вы сможете выполнять с ними какую-либо полезную колориметрию.

Если вы хотите найти дополнительный цвет, который имеет такую ​​же воспринимаемую яркость и насыщенность, как и ваши исходные цвета, у вас есть два основных варианта:

  1. Просто на глаз. Начните с простого представления HSL/HSV, измените значение оттенка на то, что вы хотите, а затем вручную отрегулируйте яркость и насыщенность, пока все не будет выглядеть хорошо. Я подозреваю, что это то, что сделал первоначальный дизайнер палитры.

  2. Преобразуйте цвета в однородное для восприятия цветовое пространство, такое как CIECAM02 (при необходимости, после гамма-декодирования), и поверните оттенок в этом цветовом пространстве. Это должно дать результаты, требующие гораздо меньше ручной настройки, но, к сожалению, требует поиска программного обеспечения, поддерживающего такую ​​цветовую модель (или самостоятельного выполнения довольно нетривиальных математических расчетов).

Это изменение параметра Hue в цветовой системе HSB .

ваше изображение с настройкой оттенка

введите описание изображения здесь

Откуда берутся эти цифры? Все эти цвета имеют разные значения HSB.
это очень сложно объяснить, но РАССТОЯНИЕ между параметрами почти одинаково по цветам на основном изображении. Я думаю, если вы хотите сделать похожий "тон" - вы берете любой из цветов на картинке и играете с параметром Hue....
хотя это не линейная зависимость
Спасибо, но мне нужно это сложное объяснение, чтобы я мог найти точные HTML-коды. Вот почему я начал этот вопрос. Я инженер-программист, а не дизайнер, поэтому почти ничего не знаю о теории цвета.
вероятно, самый простой способ - установить цвет HSB, который вам нравится, а затем преобразовать его в числа RGB, получив шестнадцатеричный код RGB для HTML... ps. Я уверен, что вы скоро получите очень подробное объяснение...
Возможно, я неправильно понял, но этот пост вполне может ответить на ваш вопрос? Или вам нужно сгенерировать шестнадцатеричный цвет? graphicdesign.stackexchange.com/questions/352/…
Да, я хочу сгенерировать точный цветовой код HEX, который имеет один и тот же «тон». Я не знаю, как этот «тон» официально называется, так что пока я его называю именно так.
@CookieMonster насыщенность и яркость близки в «похожих» цветах групп (как в вопросе), поэтому игра с параметром оттенка, вероятно, является самым простым способом найти подходящий дополнительный цвет и преобразовать HSB в шестнадцатеричный RGB.
@lian, спасибо за комментарий. Но я ищу математический способ вычисления точного цветового кода HEX. Я не хочу угадывать, потому что мне нужно закодировать это в своем приложении.
@CookieMonster У меня есть сомнения, что код, который вы ищете, существует ... извините
может ли быть так, что они на самом деле имеют линейную зависимость в исходном цветовом пространстве только потому, что преобразование профиля испортило его?