Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Веб дизайн


Дизайн Форум


Про дизайн и web дизайн




Главная     Галереи Дизайна (29)




  Статьи о дизайне





  Галереи дизайна

Промышленный дизайн, графический дизайн, гламурные картинки, иконки, аватары.

  Помощь Дизайнеру!

Советы по дизайну. Философия, психология и трудовые будни дизайнера.



  Безопасная палитра web, системные цвета Windows




Безопасная палитра (browser-safe palette)

Безопасная палитра, системные цвета Windows и прочая фигня

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

Web-дизайн, Безопасная палитра, системные цвета Windows

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

Обычно это происходит при попытках видеоадаптера в режиме 256 цветов показать оттенок High Color (16 бит) или True Color (24 бита). Кроме того, каждая операционная система резервирует и переопределяет эти цвета по-своему. Да еще это зависит от модели монитора, видеокарты и степени их старости.

Короче, чтобы небыло никаких проблем с правильным визуальным восприятием картинки НЕ ПОЛЬЗУЙТЕСЬ ДОИСТОРИЧЕСКИМ ЖЕЛЕЗОМ И СОФТОМ!

На самом деле мало кто сейчас использует только эти цвета в оформлении Web-проектов, потому как на одних безопасных цветах далеко не уедешь. А уж если пользуетесь видюхами на 256 цветов, то сами виноваты...

Формирование цвета на мониторе

Аддитивным способ представления цвета (основанный на сложении): смешиваются три луча √ красный (Red), зеленый (Green), синий (Blue). Сочетание всех лучей дает белый, а их отсутствие - черный цвета. Палитра RGB используется в Web-дизайне.
Сочетание только двух из трех лучей приводит к образованию одного из трех цветов субтрактивного (основанного на вычитании) способа представления - голубой (Cyan), пурпурный (Magenta) и желтый (Yellow). Палитра CMYK используется в цветной полиграфии.

Но есть цвета, передающиеся одинаково навсем и вся (кроме старинных мониторов) - это так называемая безопасная палитра. Безопасная палитра состоит из всех возможных сочетаний 6 оттенков красного, зеленого и синего (RGB) с равномерным шагом. Таких оттенков 6х6х6=216 (остальные 40 используются в качестве системных). При использовании цветов этой палитры можно быть уверенным в том, что каждый цвет будет передан без искажений и может быть использован для графики, текста и фонов.
Для обозначения цветов безопасной палитры используются 00, 33, 66, 99, CC,. FF - для шестнадцатеричного обозначения в html и 0, 51, 102, 153, 204, 255 - для графических редакторов. Правда, некоторые графические редакторы для указания цвета используют проценты. В этом случае ряд значений выглядит как 0%, 20%, 40%, 60%, 80%, 100%. При обозначении цветов в html-документах вначале ставят знак номера #.
Красный будет обозначаться как 255, 0, 0 в Photoshop-e и #FF0000 в html.

Цвета расположены в соответствии с каталогом Pantone Colorweb. Над каждым цветом даны два значения RGB - DEC (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML)

255.255.204 255.255.153 255.255.102 255.255.51 255.255.0 204.204.0
FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00
           

255.204.102 255.204.0 255.204.51 204.153.0 204.153.51 153.102.0
FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600
           

255.153.0 255.153.51 204.153.102 204.102.0 153.102.51 102.51.0
FF9900 FF9933 CC9966 CC6600 996633 663300
           

255.204.153 255.153.102 255.102.0 204.102.51 153.51.0 102.0.0
FFCC99 FF9966 FF6600 CC6633 993300 660000
           

255.102.51 204.51.0 255.51.0 255.0.0 204.0.0 153.0.0
FF6633 CC3300 FF3300 FF0000 CC0000 990000
           

255.204.204 255.153.153 255.102.102 255.51.51 255.0.51 204.0.51
FFCCCC FF9999 FF6666 FF3333 FF0033 CC0033
           

204.153.153 204.102.102 204.51.51 153.51.51 153.0.51 51.0.0
CC9999 CC6666 CC3333 993333 990033 330000
           

255.102.153 255.51.102 255.0.102 204.51.102 153.102.102 102.51.51
FF6699 FF3366 FF0066 CC3366 996666 663333
           

255.153.204 255.51.153 255.0.153 204.0.102 153.51.102 102.0.51
FF99CC FF3399 FF0099 CC0066 993366 660033
           

255.102.204 255.0.204 255.51.204 204.102.153 204.0.153 153.0.102
FF66CC FF00CC FF33CC CC6699 CC0099 990066
           

255.204.255 255.153.255 255.102.255 255.51.255 255.0.255 204.51.153
FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399
           

204.153.204 204.102.204 204.0.204 204.51.204 153.0.153 153.51.153
CC99CC CC66CC CC00CC CC33CC 990099 993399
           

204.102.255 204.51.255 204.0.255 153.0.204 153.102.153 102.0.102
CC66FF CC33FF CC00FF 9900CC 996699 660066
           

204.153.255 153.51.204 153.51.255 153.0.255 102.0.153 102.51.102
CC99FF 9933CC 9933FF 9900FF 660099 663366
           

153.102.204 153.102.255 102.0.204 102.51.204 102.51.153 51.0.51
9966CC 9966FF 6600CC 6633CC 663399 330033
           

204.204.255 153.153.255 102.51.255 102.0.255 51.0.153 51.0.102
CCCCFF 9999FF 6633FF 6600FF 330099 330066
           

153.153.204 102.102.255 102.102.204 102.102.153 51.51.153 51.51.102
9999CC 6666FF 6666CC 666699 333399 333366
           

51.51.255 51.0.255 51.0.204 51.51.204 0.0.153 0.0.102
3333FF 3300FF 3300CC 3333CC 000099 000066
           

102.153.255 51.102.255 0.0.255 0.0.204 0.51.204 0.0.51
6699FF 3366FF 0000FF 0000CC 0033CC 000033
           

0.102.255 0.102.204 51.102.204 0.51.255 0.51.153 0.51.102
0066FF 0066CC 3366CC 0033FF 003399 003366
           

153.204.255 51.153.255 0.153.255 102.153.204 51.102.153 0.102.153
99CCFF 3399FF 0099FF 6699CC 336699 006699
           

102.204.255 51.204.255 0.204.255 51.153.204 0.153.204 0.51.51
66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333
           

153.204.204 102.204.204 51.153.153 102.153.153 0.102.102 51.102.102
99CCCC 66CCCC 339999 669999 006666 336666
           

204.255.255 153.255.255 102.255.255 51.255.255 0.255.255 0.204.204
CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC
           

153.255.204 102.255.204 51.255.204 0.255.204 51.204.204 0.153.153
99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999
           

102.204.153 51.204.153 0.204.153 51.153.102 0.153.102 0.102.51
66CC99 33CC99 00CC99 339966 009966 006633
           

102.255.153 51.255.153 0.255.153 51.204.102 0.204.102 0.153.51
66FF99 33FF99 00FF99 33CC66 00CC66 009933
           

153.255.153 102.255.102 51.255.102 0.255.102 51.153.51 0.102.0
99FF99 66FF66 33FF66 00FF66 339933 006600
           

204.255.204 153.204.153 102.204.102 102.153.102 51.102.51 0.51.0
CCFFCC 99CC99 66CC66 669966 336633 003300
           

51.255.51 0.255.51 0.255.0 0.204.0 51.204.51 0.204.51
33FF33 00FF33 00FF00 00CC00 33CC33 00CC33
           

102.255.0 102.255.51 51.255.0 51.204.0 51.153.0 0.153.0
66FF00 66FF33 33FF00 33CC00 339900 009900
           

204.255.153 153.255.102 102.204.0 102.204.51 102.153.51 51.102.0
CCFF99 99FF66 66CC00 66CC33 669933 336600
           

153.255.0 153.255.51 153.204.102 153.204.0 153.204.51 102.153.0
99FF00 99FF33 99CC66 99CC00 99CC33 669900
           

204.255.102 204.255.0 204.255.51 204.204.153 102.102.51 51.51.0
CCFF66 CCFF00 CCFF33 CCCC99 666633 333300
           

204.204.102 204.204.51 153.153.51 153.153.102 153.153.0 102.102.0
CCCC66 CCCC33 999966 999933 999900 666600
           

255.255.255 204.204.204 153.153.153 102.102.102 51.51.51 0.0.0
FFFFFF CCCCCC 999999 666666 333333 000000
           







Системные цвета Windows

В операционной системе Windows зарезервировано 16 цветов VGA плюс четыре цвета SVGA - светло желтый, светло зеленый, светло синий и средне серый. Остальные 236 переопределяются системой или прикладными программами.
Таким образом, если вычесть 216 цветов безопасной палитры, остается еще 20 которые могут использоваться системой для отображения "небезопасных" оттенков. Например, цветов, содержащихся в GIFе, сохраненном с адаптивной палитрой. Эти оттенки не становятся безопасными, они могут быть искажены на других платформах, но иногда могут использоваться в среде Windows.

Чтобы убедиться в отсутствии искажений, просматривайте созданный htmlL-документ, переключив видеоадаптер в режим 256 цветов. А лучше делайте красивый визуал, наплевав на досадные ограничения и все будет OK, потому как научно -технический прогресс не стоит на месте и все больше людей пользуются его достижениями, а значит увидят вашу работу так, как она задумана. Кроме того, желателен просмотр хотя бы в двух распространенных броузерах - Internet Explorer-e и Netscape Navigator-e. Но на Netscape Navigator тоже можно наплевать, так как это сделали все продвинутые web-студии :) Потому, что это очень капризная программка и с ней каши не сваришь.

48 системных цветов установки "по умолчанию". Они расположены в том же порядке, что и в настройках (например, при выборе цветов фона и текста для окон и заголовков Windows). Каждый цвет описан в шестнадцати- и десятиричном виде для выбора сочетаний красного, зеленого или синего (R, G, B). Первый способ используется для указания цвета или оттенка в документах html. Второй - в графических редакторах, задающих оттенки значениями от 0 до 255 (Photoshop, CoreDraw и др.)

FF8080
R: 255
G: 128
B: 128
FFFF80
R: 255
G: 255
B: 128
80FF80
R: 128
G: 255
B: 128
00FF80
R: 000
G: 255
B: 128
80FFFF
R: 128
G: 255
B: 255
0080FF
R: 000
G: 128
B: 255
FF80C0
R: 255
G: 128
B: 192
FF80FF
R: 255
G: 128
B: 255
FF8080
R: 255
G: 000
B: 000
FFFF00
R: 255
G: 255
B: 000
80FF00
R: 128
G: 255
B: 000
00FF40
R: 000
G: 255
B: 064
00FFFF
R: 000
G: 255
B: 255
0080C0
R: 000
G: 128
B: 192
8080C0
R: 128
G: 128
B: 192
FF00FF
R: 255
G: 000
B: 255
804080
R: 128
G: 064
B: 064
FF8040
R: 255
G: 128
B: 064
00FF00
R: 000
G: 255
B: 000
008080
R: 000
G: 128
B: 128
004080
R: 000
G: 064
B: 128
8080FF
R: 128
G: 128
B: 255
800040
R: 128
G: 000
B: 064
FF0080
R: 255
G: 000
B: 128
800000
R: 128
G: 000
B: 000
FF8000
R: 255
G: 128
B: 000
00FF00
R: 000
G: 128
B: 000
008040
R: 000
G: 128
B: 064
0000FF
R: 000
G: 000
B: 255
0000A0
R: 000
G: 000
B: 160
800080
R: 128
G: 000
B: 128
8000FF
R: 128
G: 000
B: 255
400000
R: 064
G: 000
B: 000
804000
R: 128
G: 064
B: 000
004000
R: 000
G: 064
B: 000
004040
R: 000
G: 064
B: 064
000080
R: 000
G: 000
B: 128
000040
R: 000
G: 000
B: 064
400040
R: 064
G: 000
B: 064
400080
R: 064
G: 000
B: 128
000000
R: 000
G: 000
B: 000
808000
R: 128
G: 128
B: 000
808040
R: 128
G: 128
B: 064
808080
R: 128
G: 128
B: 128
408080
R: 064
G: 128
B: 128
C0C0C0
R: 192
G: 192
B: 192
400040
R: 064
G: 000
B: 064
FFFFFF
R: 255
G: 255
B: 255



  Смотри также:
Колористика
Компьютерная графика (теория)
Компьютерная графика (практика)
Web-дизайн - практические работы (проекты, ролики, баннеры, пиктограммы, кнопочки)








  Rambler's Top100  


Web дизайн и создание сайтов       Пользовательское соглашение

Карта сайта      Наверх