Цвета html палитра: HTML CSS Палитра цветов

Палитра цветов HTML и CSS для сайта: онлайн и в фотошопе

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

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

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

Как поменять цвет и на что ориентироваться начинающему дизайнеру и сайтостроителю

Давайте на практике посмотрим, как обозначается цвет в коде. Все очень просто. Для этого используют тег font, если речь идет о форматировании текста. У него есть множество атрибутов. Одни отвечают за выравнивание слева или по центру, другие за шрифт, «color» за цвет. Он-то нам сейчас и нужен.

Вообще, этот атрибут применим не только для текстов в html, но и в документе CSS, который отвечает за стиль. Так что, если вы когда-нибудь увидите в скрипте «color», то далее будет значение, которое можно поменять на свое, и где-то обязательно преобразуется цвет. Если не забудете сохранить.

Как вы видите на моем примере, в кавычках стоит значение Red – красный и страничка в браузере сейчас выглядит так.

Можно поменять этот показатель на Yellow (желтый).

Сохраним страницу и обновляем ее в браузере при помощи клавиши F5. Как вы видите, цвет изменился.

Если вас заинтересовало, то можете скачать документ, который я использовал для скриншотов. Для того чтобы внести свои правки откройте его при помощи Notepad++, Adobe Dreamweaver или стандартного блокнота.

Скачать документ >>

Если это ваш первый опыт и вам просто хочется попробовать свои силы и что-то новенькое, то советую не бежать скачивать новые программы, а для начала поработать в обычном блокноте. Сделайте изменения цвета, прямо в этом документе, затем сохраните. Теперь, в папке, где он хранится, наведите курсор и нажмите на правую кнопку мыши. Выберите «Открыть с помощью», а далее кликните по любому браузеру, какой больше нравится.

Страница изменится, как и все правки, которые вы применили. Если впоследствии вас заинтересует работа с кодом, то могу порекомендовать вам два очень крутых и бесплатных курса. Один по Html. Благодаря ему можно научиться работе с тестовыми формами — «Бесплатный курс по HTML (33 видеоурока!)»

Второй по CSS. Он тоже бесплатный и научит работать с дизайном. «Бесплатный курс по CSS (45 видеоуроков!)». Не буду вдаваться в подробности различий, если уж заинтересует, оставьте комментарий к этой статье и я вам все объясню. Или скачивайте, это не будет стоить вам ни копейки. Везде есть вводная часть, в которой все подробно излагается.

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

Как определить значения цветов. Еще 4 способа

Существует два вида значения цвета в html. О первом вы уже узнали – это кодовое или ключевое слово. Все довольно просто, вставляете слово и цвет меняется. Многие браузеры знают даже такие цвета как лаймовый. Осталось дело за малым, чтобы дизайнер знал английский. С этим, как правило, сложнее.

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

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

Код – этот состоит из решетки и шести символов: цифры или буквы «A», «B», «C», «D», «E», «F». Решетку можно не использовать, но некоторые браузеры могут не среагировать на ваш запрос и не поставить нужного оттенка, поэтому рекомендую все-таки ее вставлять.

На сайте это обозначение будет выглядеть вот так.

Как определить какой код соответствует определенному цвету? Для этого существует масса способов. О некоторых из них я сейчас вам расскажу.

Colorshame

Мой любимый онлайн сервис для работы с цветами www.colorscheme.ru. Он бесплатный и на русском языке. Что еще нужно для счастья дизайнеру?

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

Щелкаете по значению и можно скопировать.

Подсказки также вылезают и при наведении на понравившийся оттенок.

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

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

Вот так выглядит таблица.

Вы можете работать по ней и вставлять как буквенные значения, из первой колонки.

Так и с кодом из второй.

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

Яндекс

Еще один вариант – помощник от Яндекс. Это очень быстрый способ определения кода. Вы просто вставляете название цвета в поисковую строчку и жмете «Поиск».

А вот и желанный шифр.

Вы можете переходить от одного оттенка к другому кликом внутри этой палитры.

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

Есть и другой, похожий, интересный и забавный ресурс.

Get-color

Если помимо самого цвета и кода, вам интересны еще и названия, то рекомендую сервис www.get-color.ru.

Заходите на сайт. Сначала выбираете по основному кругу справа, затем внутри квадрата оттенок.

Под плашкой с выбранным оттенком находится вся основная информация о нем.

Можно кликнуть на тот, на который похож выбранный цвет и вам покажут 100% вариант.

Иногда можно увидеть забавнейшие названия.

Фотошоп

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

Можно выставить галочку напротив веб-цветов, чтобы не видеть лишнего.

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

Ну вот и все, теперь у вас есть вся необходимая информация. Если вам понравилась эта статья – подписывайтесь на рассылку и узнавайте больше о заработке в интернете.

До новых встреч и удачи в ваших начинаниях.

seodon.ru | Цвета HTML — Безопасные цвета HTML

Опубликовано: 05.03.2011 Последняя правка: 08.12.2015

На этой странице представлена таблица безопасных цветов HTML в формате RGB (для CSS и разных приложений) и HEX (для HTML и CSS). Используя эти цвета, вы можете быть уверены, что они будут одинаково отображены любыми старыми и новыми устройствами, на которых будут просматривать ваш сайт (мониторы, мобильные телефоны и т. д.) и всеми браузерами. При указании кода цвета в HTML перед ним необходимо поставить знак решетка (#). Все представленные ниже цвета допускается задавать в сокращенном виде, например #F3C вместо #FF33CC или #333 вместо #333333, а некоторые из них указывать по имени цвета.

255,204,102255,204,51255,204,0204,153,0153,102,0
FFCC66FFCC33FFCC00CC9900996600
     
255,204,153204,153,102204,153,51153,102,51102,51,0
FFCC99CC9966CC9933996633663300
     
255,153,102255,153,51255,153,0204,102,51204,102,0
FF9966FF9933FF9900CC6633CC6600
     
255,102,51255,102,0255,51,0204,51,0153,51,0
FF6633FF6600FF3300CC3300993300
     
255,204,204204,153,153 153,102,102102,51,5151,0,0
FFCCCCCC9999996666663333330000
     
255,153,153204,102,102204,51,51153,51,51102,0,0
FF9999CC6666CC3333993333660000
     
255,102,102255,51,51255,0,0204,0,0153,0,0
FF6666FF3333FF0000CC0000990000
     
255,102,153255,51,102255,0,51204,0,51153,0,51
FF6699FF3366FF0033CC0033
990033
     
255,153,204204,102,153204,51,102153,51,102102,0,51
FF99CCCC6699CC3366993366660033
     
255,51,153255,0,153255,0,102204,0,102153,0,102
FF3399FF0099FF0066CC0066990066
     
255,102,204255,51,204255,0,204204,51,153204,0,153
FF66CCFF33CCFF00CCCC3399CC0099
     
255,204,255 204,153,204153,102,153102,51,10251,0,51
FFCCFFCC99CC996699663366330033
     
255,153,255204,102,204204,51,204153,51,153102,0,102
FF99FFCC66CCCC33CC993399660066
     
255,102,255255,51,255255,0,255204,0,204153,0,153
FF66FFFF33FFFF00FFCC00CC990099
     
204,102,255204,51,255204,0,255153,0,204102,0,153
CC66FFCC33FFCC00FF9900CC660099
     
204,153,255153,102,204153,51,204102,51,15351,0,102
CC99FF9966CC9933CC663399330066
     
153,102,255153,51,255153,0,255102,51,204102,0,204
9966FF9933FF9900FF6633CC6600CC
     
102,51,255102,0,25551,0,25551,0,20451,0,153
6633FF6600FF3300FF3300CC330099
     
204,204,255153,153,204102,102,15351,51,1020,0,51
CCCCFF9999CC666699333366000033
     
153,153,255102,102,20451,51,20451,51,153
9999FF6666CC3333CC333399000066
     
102,102,25551,51,2550,0,2550,0,2040,0,153
6666FF3333FF0000FF0000CC000099
     
102,153,25551,102,2550,51,2550,51,2040,51,153
6699FF
3366FF
0033FF0033CC003399
     
153,204,255102,153,20451,102,20451,102,1530,51,102
99CCFF6699CC3366CC336699003366
     
51,153,2550,153,2550,102,2550,102,2040,102,153
3399FF0099FF0066FF0066CC006699
     
102,204,25551,204,2550,204,25551,153,2040,153,204
66CCFF33CCFF00CCFF3399CC0099CC
     
204,255,255153,204,204102,153,15351,102,1020,51,51
CCFFFF99CCCC669999336666003333
     
153,255,255102,204,20451,204,20451,153,1530,102,102
99FFFF66CCCC33CCCC339999006666
     
102,255,25551,255,2550,255,2550,204,2040,153,153
66FFFF33FFFF00FFFF00CCCC009999
     
102,255,20451,255,2040,255,2040,204,1530,153,102
66FFCC33FFCC00FFCC00CC99009966
     
153,255,204102,204,15351,204,15351,153,1020,102,51
99FFCC66CC9933CC99339966006633
     
102,255,15351,255,1530,255,15351,204,1020,104,102
66FF9933FF9900FF9933CC6600CC66
     
51,255,1020,255,1020,255,510,204,510,153,51
33FF6600FF6600FF3300CC33009933
      
153,255,153153,204,153102,153,10251,102,510,51,0
99FF9999CC99669966336633003300
     
204,255,204102,204,10251,204,5151,153,510,102,0
CCFFCC66CC6633CC33339933006600
     
102,255,10251,255,510,255,00,204,00,153,0
66FF6633FF3300FF0000CC00009900
     
153,255,102102,255,5151,255,051,204,051,153,0
99FF6666FF3333FF0033CC00339900
     
204,255,153153,204,102102,204,51102,153,5151,102,0
CCFF9999CC6666CC33669933336600
     
153,255,51153,255,0102,255,0102,204,0102,153,0
99FF3399FF0066FF0066CC00669900
     
204,255,102204,255,51204,255,0153,204,51153,204,0
CCFF66CCFF33CCFF0099CC3399CC00
     
255,255,204204,204,153153,153,102102,102,5151,51,0
FFFFCCCCCC99999966666633333300
     
255,255,153204,204,102204,204,51153,153,51102,102,0
FFFF99CCCC66CCCC33999933666600
     
255,255,102255,255,51255,255,0204,204,0153,153,0
FFFF66FFFF33FFFF00CCCC00999900
     
255,255,255204,204,204153,153,153102,102,10251,51,510,0,0
FFFFFFCCCCCC999999666666333333000000
      

Каждый HEX-код состоит из трех пар шестнадцатеричных значений: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий. Коды безопасной палитры могут состоять только из пар — 00, 33, 66, 99, СС и FF. Если код цвета содержит какое-либо другое значение, то этот цвет не из безопасной палитры.

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

Генератор цветовой палитры Data Viz (для диаграмм и информационных панелей)

  • Палитра
  • Один оттенок
  • Дивергент

Количество цветов

3 4 5 6 7 8

Цвет фона

Светлый Темный 9. Это полезно для многих визуализаций данных, таких как круговые диаграммы, сгруппированные гистограммы и карты.

Примечание. Помимо режима палитры, есть еще два режима: обратите внимание на шкалы одного оттенка и расходящиеся шкалы.

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

Например, Google Analytics делает ужасную работу с этим:

Просто попробуйте использовать этот ключ. Попробуй.

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

Ах! Намного лучше.

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

Вот несколько советов, как получить наилучшую палитру:

  • Попробуйте выбрать очень разных конечных цветов – напр. один теплый, один прохладный; один светлый, один темнее — чтобы ваша палитра покрывала более широкий диапазон
  • Если вы используете фирменный цвет для одной конечной точки, не бойтесь немного изменить насыщенность и яркость , если это создаст более приятную палитру. Пользователи узнают ваш фирменный цвет по его оттенку гораздо больше , чем по его точной насыщенности/яркости.
  • Для визуализации данных, где вы показываете сила одного значения , попробуйте вместо этого использовать Генератор палитры одного оттенка.

О, и…

Подробнее о цвете

Если вы не знакомы с цветом в дизайне пользовательского интерфейса, я настоятельно рекомендую следующие ресурсы:

  • Цветовая система HSB: учебник для практикующих
  • Цвет в дизайне пользовательского интерфейса: практическая основа
  • Design Hacks, мой электронный бюллетень, в котором я отправляю оригинальные советы и тактики дизайна более чем 50 000 моих ближайших друзей.

Как бы то ни было, я создал этот инструмент для создания палитр визуализации данных. Есть ли еще одна особенность, которую вы хотели бы видеть в нем? Дайте мне знать.

Количество цветов

3 4 5 6 7 8 9

Изменить цветовую шкалу

Яркость

Интенсивность цвета

Цвет фона

Свет Темный

Действия

Копировать HEX-значенияЭкспортировать как SVG

В контексте

Как использовать

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

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

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

Вот несколько советов для получения наилучшей шкалы одного оттенка:

  • Для перехода к конечной точке плоского серого установите «Интенсивность цвета» на ноль
  • Для перехода к конечной точке белого установите «Яркость» на полную и «Интенсивность цвета» на ноль
  • Если ваша цветовая шкала действительно показывает переменную, которая переходит от одного конца к нейтральной средней точке 9от 0028 до еще один конец , попробуйте генератор расходящихся шкал (например, от республиканца до умеренного до демократа; от более горячего до той же температуры до более холодного)

Количество цветов

5 7 9 11 13

Изменить цвет средней точки

Яркость

Интенсивность цвета

Цвет фона

Свет Темный

Действия

Копировать HEX-значенияЭкспортировать как SVG

В контексте

Как использовать

Генератор расходящейся цветовой шкалы наиболее полезен для визуализаций, где вы показываете переход от (а) одной крайности через (б) нейтральная середина и, наконец, (c) противоположная крайность.

Возможно, наиболее распространенным примером этого является диаграмма «насколько демократическим/республиканским является каждый штат в США».

Беззастенчиво заимствован (?) из Five Thirty-Eight

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

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

Цветовая палитра — фирменный стиль и бренд

Основная палитра

Синий и белый

Фирменный синий и белый цвета UB восходит к 1886 году, через 40 лет после основания Медицинской школы. Медицинский факультет в то время перевязывал свои дипломы белыми лентами. Когда Фармацевтическая школа готовилась к выпуску первого класса, она стремилась отличиться и вместо этого использовала голубые ленты. По мере появления других факультетов и увеличения числа студентов возникла необходимость в создании символики университетского духа. Ленты дипломов были восприняты как характерное цветовое сочетание, не конфликтующее с лентами других университетов. Наши синий и белый претерпели множество итераций за последние 130 с лишним лет, но они существуют и по сей день, представляя Университет в Буффало на самом высоком уровне.

UB Blue*

CMYK: 100/53/0/0
PMS: 2935
RGB: 0/91/187
HEX: #005bbb  

9 0192 Hayes Hall White

CMYK: 0/0 /0/0
PMS: белый
RGB: 255/255/255
HEX: #ffffff  

Дополнительная палитра

Поддерживающие цвета

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

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

* Цвета, отмеченные звездочкой, подходят для использования в тексте на белом фоне в Интернете.

Посмотреть все доступные сочетания текста и цветов

Letchworth Autumn

CMYK: 0/72/70/0
PMS: 7416
RGB: 229/106/84
HEX: #e56a54

Solar Strand

CMYK: 0/19/89/0
PMS: 123
RGB: 255/199/44
HEX: #ffc72c   9001 3

Зеленый Greiner

CMYK: 10 /0/95/0
PMS: 396
RGB: 235/236/0
HEX: #ebec00  

Lake LaSalle

CMYK: 66/0/39/0
PMS: 326 5
RGB: 0/166 /156
HEX: #00a69c

Capen Brick*

CMYK: 8/92/100/33
PMS: 484
RGB: 153/0/0
HEX: #9

 

Бронзовый буйвол

CMYK: 9/35/98/30
PMS: 1255
RGB: 173/132/31
HEX: #ad841 f  

Зеленый Олмстед

CMYK: 56 /2/78/5
PMS: 7489
RGB: 109/160/75
HEX: #6da04b

Niagara Whirlpool*

CMYK: 96/9/32/29
P МС: 7474
RGB: 0/ 101/112
HEX: #006570

Victor E. Blue

CMYK: 67/2/0/0
PMS: 298
RGB: 47/159/208
HEX: #2f9fd0

Harriman Blue*

CMYK: 100/30/19/76
PMS: 3035
RGB: 0/47/86 9018 9 HEX: #002f56

Baird Point

CMYK: 5/11/8/12
PMS: 434
RGB: 228/228/228
HEX: #e4e4e4

Таунсенд Грей*

90 012 CMYK: 30/22/17/57
PMS: COOL GREY 9
RGB: 102/102/102
HEX: #666666  

Нельзя использовать никакие значения, кроме перечисленных на этой странице. Оттенки и оттенки этих цветов не допускаются.

Загрузка цветовой палитры

Этот загружаемый файл состоит из наших основных и дополнительных цветовых палитр CMYK, PMS и RGB/HEX, упакованных в файл ASE для вашего удобства. При разработке фирменного контента загрузите эти цветовые палитры, чтобы убедиться в правильности значений цветов.

Примечание. Файлы Adobe Swatch Exchange (ASE) используются для сохранения набора цветов, к которым можно получить доступ через палитру образцов в большинстве программ Adobe Creative Suite.

Цветовые палитры ASE:

Загрузить Zip-архив

Совместимо только с программами Adobe Creative Suite

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

University Communications по адресу [email protected] или 716-645-6969

Цифровая цветовая палитра

Когда зрители сталкиваются с UB в цифровом мире м, наша специальная палитра делает его постоянным опытом.

Наши зрители обычно впервые знакомятся с UB в цифровом виде, задолго до того, как столкнутся с ним лично. Чтобы вдумчиво перевести наш бренд для наших цифровых коммуникаций, мы создали специальные веб-значения для нашей цветовой палитры, используя варианты HEX и RGB, перечисленные ниже. Они были оптимизированы для цифрового использования и никоим образом не должны изменяться.

Посмотреть все доступные комбинации текста и цветов

Обеспечить высокую контрастность

Обратите особое внимание при использовании светло-серого, оранжевого и желтого цветов. Проверьте уровни контрастности с помощью инструмента цветового контраста WAVE.

Дизайн для доступности

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

Не полагайтесь только на цвет

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *