Базовый список сочетания всех цветов. Палитра красивых цветов

восемь правил подбора цветовой палитры, которые должны знать все / Блог компании Everyday Tools / Хабрахабр

Взаимодействие человека с компьютером во многом опирается на графические элементы интерфейса, и цвет играет в этом процессе не последнюю роль. Как однажды сказал Pierre Bonnard: «Цвет не просто делает дизайн приятным для глаз, но и подкрепляет его».

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

1. Ограничьте количество цветов

При добавлении цветов в дизайн крайне важно выдерживать баланс; и чем их больше, тем сложнее становится этого добиться. Результат получится лучше, если вы будете придерживаться правила «максимум три основных цвета», формируя палитру. В ходе исследования от специалистов из Торонтского университета, посвященного тому, как люди пользуются Adobe Color CC, большинство респондентов сказали, что предпочитают простые сочетания на основе двух-трех цветов.

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

Как выстроить палитру

Но как выбрать эти два-три цвета? Тут вам поможет цветовой круг.

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

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

— Одноцветные палитры

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

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

— Палитры из родственных цветов

Родственные цвета — это те, которые располагаются рядом друг с другом на круге.

Такие гаммы строятся на базе родственных цветов: один из них становится опорным, а остальные используются, чтобы обогатить палитру. Здесь все тоже достаточно просто, но фокус заключается в том, чтобы правильно выбрать яркость используемых цветов — она будет задавать тон для всей гаммы. Например, Clear, утилита для организации списка дел с жестовым управлением, использует кричащие цвета, чтобы визуально привлечь внимание к тем задачам, которые пользователь выполняет в данный момент. Напротив, в приложении для медитации Calm предпочтение отдается паре родственных цветов «синий+зеленый», чтобы создать у пользователей ощущение покоя и умиротворения.

— Палитры из комплементарных цветов

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

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

— Кастомизированные палитры

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

Создать собственную палитру не так трудно, как думают многие. Есть очень простой способ, которым вы можете воспользоваться, чтобы получить отличный вариант: просто добавьте яркие акценты в нейтральную гамму (то есть такую, которую обычно называют черно-белой). Полученная палитра будет смотреться очень эффектно.

2. Черпайте вдохновение в природе

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

Природа создает лучшие сочетания цветов. Из этой фотографии может получиться отличная цветовая схема.

3. Старайтесь придерживаться пропорции 6/3/1

При составлении палитры вам также пригодится вечно актуальное правило от дизайнеров интерьеров: пропорция 6/3/1 позволяет создать идеальный баланс цветов в любом пространстве.

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

4. Сначала проектируйте в черно-белой гамме

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

Вводите цвет в последнюю очередь и очень целенаправленно.

Яркое пятно на сером фоне — простой и эффективный способ направить взгляд на нужный объект.

5. Избегайте черного цвета

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

Если добавить в ваш комплект тщательно отобранных цветов черный, он «задавит» собой все остальные. Он так сильно бросается в глаза именно потому, что не воспринимается как естественный. Многие приложения, которыми мы пользуемся изо дня в день, добавляют в интерфейс якобы черные цвета, которые на самом деле темно-серые. Например, самый темный цвет в верхней панели приложения Asos — не #000000, а #242424. Так что не забывайте регулировать насыщенность.

6. Выстраивайте визуальную иерархию при помощи контраста

Цвет — это инструмент, который направляет взгляд по нужной траектории. Чем сильнее вам нужно привлечь внимание к объекту, тем больше следует полагаться на контраст. Обычно высокую контрастность приберегают для самой важной информации или ключевых элементов. Если хотите, чтобы ваши пользователи что-то заметили или куда-то нажали, нужно, чтобы оно бросалось в глаза!

Благодаря контрасту одна область экрана заметно отличается от остальных.

7. Используйте цвет, чтобы воздействовать на эмоциональное состояние пользователя

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

При составлении палитры для интерфейса мало думать только, как все будет смотреться — нужно позаботиться и о том, как он будет восприниматься. Выбранные цвета могут как подкреплять тот образ бренда, который вы пытаетесь создать, так и противоречить ему. Чтобы было, с чего начать, я составил для вас небольшую памятку с базовыми ассоциациями для каждого цвета (в западной культуре).

Красный, Оранжевый, Желтый

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

Оранжевый (озорной, бодрый, привлекательный, дешевый): Оранжевый — теплый и яркий цвет. Он создает атмосферу бодрости и навевает на пользователей чувство тепла и уюта. Некоторые исследователи утверждают, что оранжевый выражает идею дешевизны.

Желтый (веселый, приветливый, стимулирующий, привлекает внимание): Желтый — крайне разносторонний цвет, который объединяет в себе оттенки с разными значениями. Так, светло-желтый ассоциируется с солнцем, то есть с чем-то позитивным и дружелюбным. Более насыщенные тона оставляют впечатление древних времен и монументальности. Их часто применяют, когда нужно показать что-то незыблемым и мудрым.

Зеленый, Синий, Фиолетовый

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

Синий (спокойный, ответственный, заслуживающий доверия, надежный): Синий цвет обычно ассоциируется с чувствами покоя и умиротворения, а также с силой и надежностью, что в общем дает ощущение профессионализма и возбуждает доверие. Синий внушает нам, что мы в безопасности. По этой причине его активно используют банки и IT-компании. У многих титанов на рынке социальных сетей (Facebook, Twitter, LinkedIn) в интерфейсе также фигурирует синий.

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

Розовый, Черный, Белый, Серый

Розовый (женственность, невинность, юность): Наиболее широко известная ассоциация с розовым цветом — это женственность.

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

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

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

Здесь важно отметить, что значения цветов могут сильно меняться в зависимости от обстоятельств и культурного контекста. Чтобы глубже ознакомиться с этой темой, прочитайте статью Symbolism Of Colors And Color Meanings Around The World.

8. Сделайте дизайн доступным

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

Не используйте цвет в качестве единственного индикатора

Примерно 8% мужчин и 0.5% женщин страдают той или иной формой дальтонизма — то есть каждый двенадцатый мужчина и каждая двухсотая женщина. Существуют разные его типы, однако самый распространенный — слепота на красный и зеленый. У человека, подверженного дальтонизму, обычно возникают сложности с различением любых оттенков этих двух цветов.Слева направо: цветовой круг глазами обычного человека — Цветовой круг глазами человека с дейтеранопическим типом дальтонизма — Цветовой круг глазами человека с протанопическим типом дальтонизма.

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

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

Делайте текст как можно контрастнее

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

Отслеживайте контрастность, чтобы быть уверенными, что цвет текста будет в достаточной степени выделяться относительно фонового цвета и даже человек с дальтонизмом или очень слабым зрением сможет различать слова. Коэффициент контраста — это математическое выражение того, насколько один цвет отличается от другого (обычно он записывается так: 1:1, 21:1). Чем больше разница между числами, тем сильнее цвета отличаются по яркости. На W3C рекомендуют следующие соотношения между яркостью текста и изображений:

Если текст мелкий, соотношение должно быть не меньше 4.5:1;
Для крупного текста (то есть 14 pt и выше для жирного шрифта, 18 pt и выше — для обычного) оптимально соотношение 3:1 и больше.

Но есть хорошая новость: вам не придется проверять все вручную. При помощи Color Contrast Checker рассчитать коэффициент можно в несколько кликов.

Бонус: Инструменты, необходимые для UX дизайнера

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

Adobe Color CC Adobe Color CC (раннее известный как Kuler) — отличное решение, чтобы находить, редактировать и создавать палитры. Вы можете модифицировать каждый цвет, входящий в состав гаммы, или устанавливать его в качестве опорного буквально в пару кликов. Готовые палитры можно сохранять и добавлять в библиотеку; кроме того, в открытом доступе на сайте находится большое количество цветовых гамм, созданных другими членами сообщества.

Dribbble Search-by-color Если хотите посмотреть, как другие дизайнеры применяют тот или иной цвет в своих проектах, перейдите по адресу dribbble.com/colors и выберите нужный оттенок.

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

Colorzilla Colorzilla — расширение для браузеров Google Chrome и Mozilla Firefox, которое включает целую кучу инструментов для работы с цветом, включая пипетку с возможностью захвата цвета, генератор градиентов CSS и функцию просмотра палитр.

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

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

Симулятор дальтонизма в Adobe Photoshop Photoshop позволяет проверить, насколько ваш дизайн универсально доступен. Достаточно перейти на вкладку View > Proof Setup и выбрать интересующий ваш тип (Protanopia type или Deuteranopia type).

NoCoffee Vision Simulator for Chrome Чтобы удостовериться, что ваш дизайн доступен для всех, неплохо бы на себе испытать дальтонизм в процессе проектирования. NoCoffee Vision Simulator обеспечивает возможность создать для любого интерфейса симуляцию, показывающую, как она выглядит для людей с цветовой слепотой или слабым зрением. Например, применив фильтр «Deuteranopia» во вкладке «Color Deficiency», вы увидите веб-сайт в тонах серого. Это поможет вам адаптировать интерфейс под потребности людей, у которых проблемы с глазами.

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

habrahabr.ru

Индивидуальная палитра на основе цветов вашей внешности

Я решила с сентября поменять формат индивидуальной палитры в он лайн разборах, сделать ее более практичной=) И пока предлагаю вместе с читателями сообщества ВК потренироваться =) https://vk.com/pathtoyourcharm

Я покажу на своем примере.

✨Индивидуальная палитра на основе цветов внешности✨

Итак, вам понадобится:

1) ваше фото с максимально естественной цветопередачей

2) фото вашего глаза крупным планом

3) графический редактор, хотя бы стандартный paint

4) Терпение, дочитать это до конца =)

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

Сначала заполняем первые 10 квадратиков - это собственно цвета вашей внешности.

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

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

1-4 - это цвета ваших глаз.

1 - кольцо вокруг радужки глаза, как правило самый темный цвет вашей внешности.

2 - белок глаза- самый светлый цвет вашей внешности, один из вариантов белого для вас.

3 - общий фон радужки

4 - рисунок в радужке

5-6 - это цвет ваших волос (и бровей, если волосы окрашены)

5 - волосы у корней

6 - волосы на протяжении их длины, выгоревшие

7-8 - цвет вашей кожи

7- самые светлые участки

8- самые темные (можно также румянец, пигментные пятнышки, веснушки, родинки)

9-10 - цвет ваших губ

9- основной фон - ваш идеальный розовый

10 - около кромки внутри - ваш идеальный красный

Теперь заполняем остальные 15 квадратиков - это производные от цветов внешности.

11 и 12 - производные цветов 1 и 2 в черно - белом варианте. чтобы их сделать, нужно отдельно сохранить квадраты 1 и 2 и перевести их в черно-белый. Долго и нудновато, но имеет двойную пользу=)

- вы получаете ваши идеальные черный и белый

- по ним можно узнать контрастность - чем ближе они на шкале серого друг к другу, тем меньше контраст вашей внешности.

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

13 - цвет комплиментарный 3

15 - комплиментарный 4.

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

поэтому 14 - производный от 3, темнее или светлее, на ваш выбор.

16 - производный от 4, темнее или светлее.

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

17 и 18 подчеркивают оттенок волос

17 - комплиментарный 5, можно сделать его светлее\темнее в зависимости от темноты волос, чтобы подчеркивал, а не сливался. Темное подчеркивается светлым и наоборот.

18- комплиментарный 6.

19 и 20 подчеркивают оттенок кожи. Ваши идеальные синий и голубой.

19 - комплиментарный 7. Чтобы кожа казалась светлее, можно сделать его темнее, но не темнее цвета в 1 квадратике.

20 - комплиментарный 8. Подчеркивает загар и темноту, можно сделать его на шаг светлее или на шаг ярче. (ярче цвет делается примерно также как темнее- только двигаем в сторону яркости).

21 - производный от 7 - чуть затемненный 7. как правило - основной фон кожи, где-то между 7 и 8, предполагаемый цвет тональной основы, ваш nude.

22 - 23 - ваши идеальные зеленые. Комплиментарные 9 и 10 соответственно.

24 и 25 пригодятся для вашей помады - для эффекта my lips but better (мой естественный цвет губ, только лучше).

24- производный 9 - оттенок слегка ярче.

25 - производный 10 оттенок слегка темнее.

Итак, в результате для моей палитры:

1, 2, 5, 6, 7, 8, 21, 11, 12 - мои базовые цвета

11 - мой идеальный черный,

12 - мой идеальный белый

Контраст светлоты средне- высокий

13 и 14 -чтобы глаза казались сероватой морской волной

15 и 16 - чтобы глаза казались зелеными

9 - идеальный розовый, 10 - идеальный красный

22 и 23 - мои зеленые

19 и 20 - мой синий и голубой

21 - тональная основа

24 и 25 - помада

PS По индивидуальной палитре можно предположить направление цветотипа, но в духе "кто-то темный и мягкий" или "какая-то осень".

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

Все цвета индивидуальной палитры можно при желании найти в вашей расширенной палитре сезона (основной колорит + дополнительные цвета).

color-harmony.livejournal.com

Базовый список сочетания всех цветов - Ярмарка Мастеров

ТОП-30 от белого до чёрного: базовый список сочетания всех цветов!

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

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

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

Распределяйте цвета на три категории: базовый цвет – преобладающий, второй подчеркнёт или оттенит базовый, и третий акцентирующий, как правило очень яркий, присущ мелким деталям. Следует учитывать также насыщенность цвета, собственные внешние данные и типаж. Учитывая все выше перечисленные факторы, можно с уверенностью сказать, сочетание цветов в одежде это целая наука, в которой просто не существует идеальной формулы цветовой палитры.

1. Белый: сочетается со всем. Наилучшее сочетание с синим, красным и черным.

2. Бежевый: с голубым, коричневым, изумрудным, черным, красным, белым. Показать полностью..

3. Серый – базовый цвет, хорошо сочетается с капризными цветами: фуксия, красный, фиолетовый, розовый, синий.

4. Розовый – с коричневым, белым, цветом зеленой мяты, оливковым, серым, бирюзовым, нежно - голубым.

5. Фуксия (темно – розовый) – с серым, желто-коричневым, зеленым лаймом, зеленой мятой, коричневый.

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

7. Томатно – красный: голубой, зеленая мята, песчаный, сливочно – белый, серый.

8. Вишнево-красный: лазурный, серый, светло-оранжевый, песчаный, бледно-желтый, бежевый.

9. Малиново-красный: белый, черный, цвет дамасской розы.

10. Коричневый: ярко-голубой, кремовый, розовый, палевый, зеленый, бежевый.

11. Светло-коричневый: бледно-желтый, кремово-белый, синий, зеленый, пурпурный, красный.

12. Темно-коричневый: лимонно-желтый, голубой, зеленая мята, пурпурно-розовый, зеленый лайм.

13. Рыжевато-коричневый: розовый, темно-коричневый, синий, зеленый, пурпурный.

14. Оранжевый: голубой, синий, лиловый, фиолетовый, белый, черный.

15. Светло – оранжевый: серый, коричневый, оливковый.

16. Темно –оранжевый: бледно – желтый, оливковый, коричневый, вишнёвый.

17. Желтый: синий, лиловый, светло-голубой, фиолетовый, серый, черный.

18. Лимонно-желтый: вишнево-красный, коричневый, синий, серый.

19. Бледно-желтый: фуксия, серый, коричневый, оттенки красного, желтовато-коричневый, синий, пурпурный.

20. Золотисто-желтый: серый, коричневый, лазурный, красный, черный.

21. Оливковый: апельсиновый, светло-коричневый, коричневый.

22. Зеленый: золотисто-коричневый, оранжевый, салатный, желтый, коричневый, серый, кремовый, черный, сливочно-белый.

23. Салатовый цвет: коричневый, желтовато-коричневый, палевый, серый, темно-синий, красный, серый.

24. Бирюзовый: фуксия, вишнево-красный, желтый, коричневый, кремовый, темно-фиолетовый.

25. Электрик красив с золотисто-желтым, коричневым, светло-коричневым, серым или серебряным.

26. Голубой: красный, серый, коричневый, оранжевый, розовый, белый, желтый.

27. Темно-синий: светло-лиловый, голубой, желтовато-зеленый, коричневый, серый, бледно-желтый, оранжевый, зеленый, красный, белый.

28. Лиловый: оранжевый, розовый, темно-фиолетовый, оливковый, серый, желтый, белый.

29. Темно-фиолетовый: золотисто-коричневый, бледно-желтый, серый, бирюзовый, зеленая мята, светло-оранжевый.

30. Черный универсален, элегантен, смотрится во всех сочетаниях, лучше всего с оранжевым, розовым, салатным, белым, красным, сиреневатым или желтым.

www.livemaster.ru

Безопасные цвета для Веб. Таблица из 216 цветов, рекомендуемых для экранного дизайна — ColorScheme.Ru

· Инструмент для подбора цветов и генерации цветовых схем ·

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

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

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

Безопасные цвета были выведены математически, а не потому, что они кому-то больше пришлись по душе. Для получения безопасного цвета из Красного, Зелёного и Синего, нужно использовать только данные десятичные значения: 0, 51, 102, 153, 204, 255 — и никакие другие. Каждое из трёх шестнадцатеричных значений не должно отличаться от 00, 33, 66, 99, CC, FF.

Таблица Безопасных Веб-цветов

Палитра состоит из 216 безопасных веб-цветов. Под каждым цветом указаны два значения — RGB, для создания цвета в графическом редакторе, и его шестнадцатеричных HEX-код, для обозначения цвета в HTML.