Hex веб-цвета - PullRequest
       56

Hex веб-цвета

4 голосов
/ 24 апреля 2010

Привет, я показываю цвет как шестнадцатеричное значение в php. Можно ли изменить оттенок цвета, вычитая число из шестнадцатеричного значения? То, что я хочу сделать, это отображать яркие веб-безопасные цвета, но если выбрано, я хочу тусклый или светлый цвет. Я знаю, что могу использовать только два оттенка цвета, но я могу сотню потенциальных цветов.

, чтобы быть ясным # 66cc00 ярко-зеленый и # 99ffcc очень бледно-зеленый. Что мне вычесть, чтобы получить второй цвет? Есть ли какая-то формула, потому что я просто могу ее получить.

Спасибо за любую помощь

Приветствия

Ответы [ 6 ]

5 голосов
/ 24 апреля 2010

Шестнадцатеричные цвета состоят из 6 шестнадцатеричных цифр. Первые две цифры обозначают красный оттенок, вторые две - зеленый, а последние две - синий. В пределах оттенков 00 - это отсутствие цвета, а FF - это самое высокое значение цвета. Итак, # FF0000 будет ярко-красным без зеленого или синего цвета, а # 00CCFF будет очень синим и немного зеленым без красного.

Примеры цветов, которые вы даете, на самом деле имеют различную косметику красного, зеленого и синего цветов. # 66CC00 в основном зеленый с небольшим количеством красного, а # 99FFCC в основном зеленый с небольшим количеством синего и красного.

Вы должны разбить свои цвета на их красные, зеленые и синие компоненты, прежде чем преобразовать их в десятичные, усреднить их, а затем преобразовать обратно:

# 66 CC 00 -> 102 204 0

# 99 FF CC -> 153 255 204

Среднее между двумя: 128 230 102 : # 80E666

Найдя промежуточный цвет, вы можете приблизить ближайший к сети безопасный цвет: # 99FF66

Конвертер между шестнадцатеричным и десятичным, чтобы сделать это самостоятельно, можно найти здесь .

Вот скрипт PHP , который делает то, что вам нужно. Вот скрипт JavaScript, основанный на методе, описанном выше (связанное преобразование шестнадцатеричного в десятичное в JS ):

color1 = "#66CC00";
color2 = "#99FFCC";

r1 = parseInt(color1.substring(1,3), 16);
g1 = parseInt(color1.substring(3,5), 16);
b1 = parseInt(color1.substring(5,7), 16);
r2 = parseInt(color2.substring(1,3), 16);
g2 = parseInt(color2.substring(3,5), 16);
b2 = parseInt(color2.substring(5,7), 16);

r3 = (Math.round((r1 + r2)/2)).toString(16);
g3 = (Math.round((g1 + g2)/2)).toString(16);
b3 = (Math.round((b1 + b2)/2)).toString(16);

color3 = "#" + r3 + g3 + b3;
2 голосов
/ 24 апреля 2010

Чтобы объяснить это далее:

Взять #FFFFFF, полностью белый.

На самом деле он состоит из 3 отдельных значений цвета: красный, зеленый и синий.

FF (255, полностью красный), FF (255, полностью зеленый), FF (255, полностью синий)

Если вы хотите получить полный красный цвет, вы бы вместо этого использовали #FF0000 (255, 0, 0)

Значения цвета изменяются от 0 до 255, и вы комбинируете значения цвета для получения окончательного цвета.

1 голос
/ 24 апреля 2010

Это действительно помогает понять, что происходит с цветами, но если вы просто заинтересованы в затенении цвета, здесь - это то, что я нашел на php.net. Еще не пробовал (пока), надеюсь, он подойдет вам.

0 голосов
/ 25 апреля 2010

Веб-цвета в RGB. Чтобы повлиять на насыщенность и значение цвета, не влияя на оттенок, необходимо преобразовать в цветовое пространство HSV.

RGB в HSV в PHP

Получив HSV, измените компонент V, чтобы сделать цвет темнее или светлее, а компонент S - более или менее насыщенным или бледным. После настройки S и V конвертируются обратно в RGB. Чтобы сделать цвета веб-безопасными, округлите каждый канал RGB до значения, кратного 51 или 0x33.

0 голосов
/ 24 апреля 2010

Веб-цвета определяются их красным, зеленым и синим значениями. Каждый компонент имеет значение от 00 (0) до FF (255). Чем больше компонента, тем ярче будет этот компонент. Если все три компонента одинаковы, вы получаете оттенки серого от черного (#000000) до белого (#ffffff).

Итак, в вашем первом примере есть немного красного и много зеленого. В вашу секунду больше каждого цвета, который делает весь цвет светлее. Зеленый по-прежнему является основным компонентом, поэтому он бледный.

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

Чего вы хотите добиться, чтобы получить от первого до второго цвета?

0 голосов
/ 24 апреля 2010

Это называется шестнадцатеричным основанием:

1 2 3 4 5 6 7 8 9 A B C D E F

"E" в шестнадцатеричной (16) основе - "14" в десятичной (10) основе

66cc00 (16) == 6736896 (10)

99ffcc (16) == 10092492 (10)

...