Шестнадцатеричные веб-цвета

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

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

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

Ваше здоровье


person Mick    schedule 24.04.2010    source источник


Ответы (6)


Шестнадцатеричные цвета состоят из 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, основанный на методе, описанном выше (связанный hex to десятичное преобразование в 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;
person Trey Hunner    schedule 24.04.2010
comment
безопасные веб-цвета остались в прошлом. Это пережиток того времени, когда можно было отображать только 256 цветов. - person Jacco; 25.04.2010
comment
Это правда. Проектирование для аппаратного обеспечения, которое обрабатывает только безопасные веб-цвета, эквивалентно разработке немобильного веб-сайта с разрешением 800 x 600. - person Trey Hunner; 25.04.2010

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

Берем #FFFFFF, полностью белый.

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

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

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

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

person Jonas B    schedule 24.04.2010

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

person nc3b    schedule 24.04.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)

person Thiago Belem    schedule 24.04.2010

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

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

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

Чего вы пытаетесь достичь, чтобы перейти от первого ко второму цвету?

person ChrisF    schedule 24.04.2010

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

RGB в HSV в PHP

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

person drawnonward    schedule 24.04.2010