Лаборатория цвета

Эксперименты с цветом

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

RED	GREEN	BLUE

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

Еще один пример позволит тебе поэкспериментировать как с цветами фона, так и с цветами текста.

Двойной щелчок на этом тексте заставит изменять цвета фона и текста в случайном порядке.

Но давай отбросим баловство в сторону и посмотрим, как изменяется цвет на нашем мониторе.

Мы уже узнали, что цвета изменяются в зависимости от интенсивности трех лучей — красного, зеленого и синего, — изменяющих свой уровень сигнала от 0 до 255. Так, например, если уровень сигнала равный 255 (FF в шестнадцатиричной системе счисления) соответствует наибольшей яркости свечения пикселя, то уровень сигнала равный 0 вообще никак не высвечивает пиксель. Это касается любого из трех лучей.

Ниже представлена таблица, где шаг за шагом убирается по одной единице синего цвета.

FFFFFF	FFFFFE	FFFFFD	FFFFFC	FFFFFB	FFFFFA	FFFFF9	FFFFF8
FFFFF7	FFFFF6	FFFFF5	FFFFF4	FFFFF3	FFFFF2	FFFFF1	FFFFF0

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

Ну, и какой же, спрашивается, вывод из всего этого следует? Да никакого! Просто человеческий глаз различает разницу между цветами, если она (разница) равна восьми. Причем, неважно по какому цвету — красному, зеленому или синему. Посмотри сам на следующих примерах, где так же, как и в примере выше, постепенно по одной единице убирается красный и зеленый цвета.

FFFFFF	FEFFFF	FDFFFF	FCFFFF	FBFFFF	FAFFFF	F9FFFF	F8FFFF
F7FFFF	F6FFFF	F5FFFF	F4FFFF	F3FFFF	F2FFFF	F1FFFF	F0FFFF

FFFFFF	FFFEFF	FFFDFF	FFFCFF	FFFBFF	FFFAFF	FFF9FF	FFF8FF
FFF7FF	FFF6FF	FFF5FF	FFF4FF	FFF3FF	FFF2FF	FFF1FF	FFF0FF

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

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

FFFFFF
FEFEFE	FDFDFD	FCFCFC	FBFBFB	FAFAFA	F9F9F9	F8F8F8	F7F7F7

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

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

Здесь в каждой ячейке уменьшается интенсивность красного цвета.

F7FFFF	EFFFFF	E7FFFF	DFFFFF	D7FFFF	CFFFFF	C7FFFF	BFFFFF
B7FFFF	AFFFFF	A7FFFF	9FFFFF	97FFFF	8FFFFF	87FFFF	7FFFFF
77FFFF	6FFFFF	67FFFF	5FFFFF	57FFFF	4FFFFF	37FFFF	3FFFFF
37FFFF	2FFFFF	27FFFF	1FFFFF	17FFFF	0FFFFF	07FFFF	00FFFF

Здесь уменьшается зеленый цвет.

FFF7FF	FFEFFF	FFE7FF	FFDFFF	FFD7FF	FFCFFF	FFC7FF	FFBFFF
FFB7FF	FFAFFF	FFA7FF	FF9FFF	FF97FF	FF8FFF	FF87FF	FF7FFF
FF77FF	FF6FFF	FF67FF	FF5FFF	FF57FF	FF4FFF	FF47FF	FF3FFF
FF37FF	FF2FFF	FF27FF	FF1FFF	FF17FF	FF0FFF	FF07FF	FF00FF

А здесь — синий.

FFFFF7	FFFFEF	FFFFE7	FFFFDF	FFFFD7	FFFFCF	FFFFC7	FFFFBF
FFFFB7	FFFFAF	FFFFA7	FFFF9F	FFFF97	FFFF8F	FFFF87	FFFF7F
FFFF77	FFFF6F	FFFF67	FFFF5F	FFFF57	FFFF4F	FFFF47	FFFF3F
FFFF37	FFFF2F	FFFF27	FFFF1F	FFFF17	FFFF0F	FFFF07	FFFF00

Во всех вышеприведенных таблицах, убирая один цвет, мы оставляли остальные два и, в любом случае, они, смешиваясь, в результате давали производные цвета. А как же, интересно, ведут себя "чистые" цвета? Что ж, давай посмотрим, составив еще три соответствующие таблицы, тем более, что опыт в этом у нас уже есть.

F70000	EF0000	E70000	DF0000	D70000	CF0000	C70000	BF0000
B70000	AF0000	A70000	9F0000	970000	8F0000	870000	7F0000
770000	6F0000	670000	5F0000	570000	4F0000	370000	3F0000
370000	2F0000	270000	1F0000	170000	0F0000	070000	000000

00F700	00EF00	00E700	00DF00	00D700	00CF00	00C700	00BF00
00B700	00AF00	00A700	009F00	009700	008F00	008700	007F00
007700	006F00	006700	005F00	005700	004F00	004700	003F00
003700	002F00	002700	001F00	001700	000F00	000700	000000

0000F7	0000EF	0000E7	0000DF	0000D7	0000CF	0000C7	0000BF
0000B7	0000AF	0000A7	00009F	000097	00008F	000087	00007F
000077	00006F	000067	00005F	000057	00004F	000047	00003F
000037	00002F	000027	00001F	000017	00000F	000007	000000

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

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

Надеюсь, дорогой читатель, ты догадался, что необязально использовать значения цветов, указанные в таблицах, которые приведены только лишь для того, чтобы показать разницу между цветами при различии в их значениях минимум в восемь единиц. Конечно же значения цветов могут быть произвольными, как и разница между ними (значениями). Не стоит и оригинальничать с написанием кода цвета - типа "ABCDEF", "FAFAFA" или "BEBEBE" в ущерб цветовой гамме своего сайта.

Кстати, о разнице. Если ты обратил внимание на эту разницу между RGB-значениями в безопасной палитре цветов, которая приведена в размышлениях о цвете, то, наверное, заметил, что цвета в таблице следуют друг за другом через 51-у единицу, что, в свою очередь, значительно снижает плавность перехода из цвета в цвет. Кроме того, эта палитра не позволяет найти тот цвет, который нам так необходим для создания пастельной гаммы наших сайтом. Но об этом мы с тобой, дорогой читатель, поговоримв следующей теме о пастелях.

Сайт создан в системе uCoz

Лаборатория цвета

Эксперименты с цветом

Размышления