Выбор цветов, охватывающий диапазон цветового спектра RGB?

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

У меня есть 40 плиток, расположенных 8x5. Я разделил цветовой спектр RGB примерно из 16 миллионов цветов на 40 и преобразовал это значение в шестнадцатеричное, чтобы оно применялось к плиткам.

Выцветание/смешивание от голубого к красному явно не является подходом, который охватывает все части спектра RGB. Что я пропустил, или как я могу это сделать?

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

Как указывает Джон, чтобы покрыть диапазон RGB, вам нужно использовать RG&B. Вы используете только R&G.

Ответы (3)

RGB является трехмерным, поэтому для понимания проблемы полезно представить цветовое пространство RGB как трехмерную форму. Классический способ — это куб, основанный на суммах трех измерений: красного, зеленого и синего:

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

(изображения взяты из Digital Color Design with the RGB Color Cube: Visualization and Color Coordinate Activity , журнальная статья, на которую я наткнулся, когда писал это, и которую стоит прочитать всем, кто заинтересован)

Куб с черным и белым в противоположных углах, красно-зеленым и синим в углах рядом с черным и смесями - желтым, голубым, пурпурным - в углах, соединенных с белым. Во втором примере «вверх» добавляется зеленый, «вниз-влево» добавляется красный, «вниз-вправо» добавляется синий.

Как превратить куб в плоскость? Это как превратить плоский лист бумаги в куб, только наоборот...

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

... вы можете сделать это, сплющив куб в виде складного плана (как на верхнем правом изображении) или вырезав из куба кусочки (как на верхнем среднем изображении). Затем у вас есть свои цвета, и то, как вы их расставите, зависит от вас.


Но не хватает одного - серого. Все эти цвета очень насыщенные. Если вы хотите представить все цветовое пространство RGB, включая оттенки серого и частично ненасыщенные цвета, вам нужно использовать другой набор трех измерений для создания куба RGB: HSL (оттенок, насыщенность и яркость) или HSB (оттенок, насыщенность). и яркость AKA HSV, значение).

Это сравнение (из wikimedia) показывает кубы на основе RGB, затем HSL, затем HSB:

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

(обратите внимание, что все они являются цветами RGB - HSL и HSB - это просто разные способы понимания цветового пространства)


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

Имейте в виду, что с 3 измерениями и всего 40 фигурами у вас не будет много шагов. Например, у вас может быть 2 уровня насыщенности (насыщенный, сероватый) , 3 уровня яркости (бледный, средний, темный) и 6 уровней оттенка (синий, голубой, зеленый, желтый, красный, пурпурный) , и это даст у вас 36 цветов, осталось только 4 для крайностей (белый, черный, светло-серый, темно-серый)

Hm, hsb и hsl являются производными rgb. Вы не можете хорошо видеть значения серого в таблице для 216 веб-безопасных цветов, которые я связал, но они там есть. 51,51,51 = темно-серый. 204, 204, 51 = hsl 60, 60, 50. В кубе значения серого прячутся по диагонали от белого к черному.
Сплющивание куба не соответствует моему ответу. Из-за этого вы утверждаете, что не хватает серых, что не соответствует действительности. Я не понимаю, как это предложение сосредоточить внимание на разных видах ценностей (в торговле другими) полезно в контексте этого вопроса.
Сглаживание куба не должно соответствовать вашему ответу, и я никогда не говорил, что в вашем подходе будут отсутствовать оттенки серого. Это ответ, призванный помочь людям понять, что значит перемещаться по всему цветовому пространству, и что для этого существует несколько способов. Это не комментарий к вашему ответу.
Но сглаживание куба — это не то, как вы должны ориентироваться в трехмерном (относительном) цветовом пространстве. Ваш источник не годится, даже если он с сайта .edu. Если пользователь Vlad запрашивает «наиболее значимые цвета из всего цветового спектра», как вы можете предположить, что он хочет, например, исключить оранжевый?
Я не предполагаю, что он хочет исключить оранжевый... но он сказал, что у него всего 40 цветов, поэтому в зависимости от того, на чем именно он хочет сосредоточиться, где-то может потребоваться компромисс, например, меньше разных оттенков позволяет больше варьировать. в яркости или насыщенности, наоборот, и т. д. и т. д. Я не говорю, что какой-то один подход является правильным или неправильным, я просто показываю несколько способов думать о цветовом пространстве, чтобы он мог найти подход, который лучше всего соответствует конкретным потребностям пользователя. его приложение.
Сплющить сферу и изобразить ее в виде диска — это тоже просто способ показать, как вы можете думать о земле.
Что ж, ребята, я могу изменить количество плиток, если я умещаю все возможные цвета на экране 800 на 1280 пикселей :) Но сначала я должен проанализировать ответы. Очень продуманно :) Не ожидал такого
Оба ответа хороши, оставьте мне время на выбор

В цветовой модели RGB у вас есть три канала reg, зеленый и синий со значениями в диапазоне от 0 до 255 (вы это знали!).

Чтобы охватить весь спектр, вы комбинируете три канала с определенным количеством опций стоимости.

Таким образом, если у вас есть x вариантов значения количества для каждого канала, вы получите x * x * x = x^3 значения цвета.

Для двух вариантов, например 0 и 255, вы получаете 2 ^ 3 = 8 цветов.

Для шести вариантов, составляющих пять (= 6 - 1) сегментов, у вас есть значения
0 * (255/5), 1 * (255/5), 2 * (255/5), 3 * (255/5) , 4 * (255/5), 5 * (255/5)
, что дает 6^3 = 216 цветов, что вы можете увидеть в качестве примера здесь .

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

При этом вы строите свой двумерный массив:

0, 0, 0
51, 0, 0
102, 0, 0
...

Думаю, вы поняли. Если нет, вам придется задать этот вопрос в Stack Overflow (и указать мне на него).

Мне нравится визуализировать вещи, поэтому я попытался собрать базовый код, который запускает это - jsbin.com/inuzoy/3 - это точная иллюстрация вашего ответа?
Переработано, чтобы соответствовать расположению в связанной статье в Википедии (и исправить опечатку...) jsbin.com/inuzoy/4
Да. Является ли jsbin.com/uruhir/2 точной иллюстрацией вашего ответа?

Вот как бы я это сделал - это может быть похоже на то, что предлагал другой Джон, но менее уравненно.

Таким образом, каждый цвет RGB идет от 0 до 255. Выясните, сколько образцов вы хотите для каждого цвета, для этого очень простого примера я скажу 3, что равно 0, 128, 255 (128 — это округленная половина пути) .

Теперь проработайте все возможные комбинации:

0, 0, 0 | 0, 0, 128 | 0, 0, 255 | 0, 128, 0 | 0, 255, 0 | 0, 128, 128 | 0, 128, 255 | 0, 255, 128 | 0, 255, 255 | 128, 0, 0 | 255, 0, 0 | 128, 128, 0 | 128, 255, 0 | 128, 128, 128 | 128, 128, 255 | 128, 255, 128 | 128, 255, 255 | 255, 255, 255