Одна из самых больших вещей, заметная невооруженным глазом, в material design — это использование ярких и смелых цветов.
Если вы решили выбрать палитру для своего проекта в стиле материального дизайна от гугл, то вам помогут эти инструменты.
1. Material Palette
В данном инструменте вы выбираете основной цвет для вашей палитры, после этого выбераете цвет акцента. После этого инструмент сам предложит вам цветовую палитру на основе двух ваших цветов, а так же предложит различные способы для загрузки палитры
Перейти к инструменту
2. Material UI’s Material Design Colors
Это довольно-таки простая шпаргалка, которая представляет на своей странице все цвета материального дизайна.
Перейти к инструменту
3. Random Material Generator
Если вы хотите жоверить подбор цветовой схемы для вашего проекта случайным числам, то этот инструмент для вас.
Перейти к инструменту
4. Material Design Palette Generator
Если вы заинтересованы в создании собственной палитры материального дизайна — попробуйте этот интсрумент. В первую очередь вы должны выбрать свой цвет, отличный от официальных цветов палитры material design, а инструмент, в свою очередь, предложит вам палитру на основе выбранного цвета.
Перейти к инструменту
5. Material Mixer
Данный инструмент покажет вам все цвета доступные в палитре материального дизайна в виде удобно скомпонованной сетки. Для создания палитры нужно выбрать основной и акцентирующий цвет.
Перейти к инструменту
6. Material Colors
Этот инструмент отображает только 500 и А200 цвета materila design.
Перейти к инструменту
7. MaterialUp’s Material Design Colors
Это довольно-таки простой инструмент — служит для визуализации цветов . При кике на колонку с цветом — оказывает все образцы цвета, которые связаны с выбранным.
Перейти к инструменту
8. Tint UI’s Material Design
Данный инструмент показывает только 500 цвета
Перейти к инструменту
css3-html5.ru
Как поменять цвет и на что ориентироваться начинающему дизайнеру и сайтостроителю
Давайте на практике посмотрим, как обозначается цвет в коде. Все очень просто. Для этого используют тег 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 оттенки и не заморачиваться.
Яндекс
Еще один вариант – помощник от Яндекс. Это очень быстрый способ определения кода. Вы просто вставляете название цвета в поисковую строчку и жмете «Поиск».
А вот и желанный шифр.
Вы можете переходить от одного оттенка к другому кликом внутри этой палитры.
Сервис неплох, но обладает одним существенным недостатком. Думаю, что совсем скоро может что-то измениться, но пока, чтобы перейти к красному или любому другому цвету, вам нужно заново вводить в поисковую строчку новый запрос. Поэтому, я бы не рекомендовал его использовать для решения дизайнерских задач. Слишком много лишний движений.
Есть и другой, похожий, интересный и забавный ресурс.
Getcolor
Если помимо самого цвета и кода, вам интересны еще и названия, то рекомендую сервис www.getcolor.ru.
Заходите на сайт. Сначала выбираете по основному кругу справа, затем внутри квадрата оттенок.
Под плашкой с выбранным оттенком находится вся основная информация о нем.
Можно кликнуть на тот, на который похож выбранный цвет и вам покажут 100% вариант.
Иногда можно увидеть забавнейшие названия.
start-luck.ru
- Яндекс.Карты для MoDx Revo
Mapex — Лучшее дополнение для MODX Revolution…
- Эффект цвета в маркетинге
Цветовые схемы и психологические реакции клиентов…
- Центрирование в CSS
Центрирование элементов — самая популярная причина…
- Цветовой профиль Photoshop для верстальщика
Простыми словами о том как грамотно настроить…
- Цветовая схема для сайта
Коллекция сервисов для подбора или коррекции…
- Функция Php для удаления лишних символов из строки
Здесь представлена функция, которая вычищает…
- Список HTML шрифтов
Таблица как показываются шрифты Web в разных…
- Социальные кнопки для сайта (без AdBlock)
Единственные кнопки «поделиться» в Рунете, которые…
- Сервисы для тестирования сайта на разных гаджетах
Список сервисов для тестирования и презентации…
- Разноплановые и необычные CSS и SVG меню
На данной странице мы собираем красивые и необычные…
- Перевод аудио в текст
Как перевести речевой аудио-файл в текст с помощью…
- Маркетинг ручной работы
Эта краткая статья поможет тем, кто хочет увеличить…
- Макрос для CorelDraw — Curve info
Удобный и практичный макрос площади, периметра…
- Лучшая адаптивная галерея Fotorama
Fotorama — мощная и многофункциональная галерея,…
- Как избежать штрафа о хранении и обработке персональных данных
С 1 июля 2017 года вступают в силу поправки к…
- Как вставить Google forms на сайт
Как сделать из обычной формы гугл — точную копию…
- Горячие клавиши браузеров
Горячие клавиши при работе с браузером, которые…
- Всплывающие окна popup при загрузке страницы
2 простейших рабочих варианта всплывающих окон…
- Все meta-tags на вашем сайте
Метатеги, которые используются для хранения информации…
- Seo — настройка MoDx Revo
В данной статье дано кратко все что нужно для…
- ReCaptchaV2 для MoDx Revolution
Описание установки ReCaptcha 2 от Google на сайт…
- Open Server и Dr.Web — разрешаем файл Hosts
Как разрешить на запись файл HOSTS для настройки…
- MoDx обновление 2.6.5
С 19 июля 2018 года произошла большая атака на…
- MODX — Карта сайта и Robots.txt
В этой статье простым языком написано как установить…
- meta — теги для сайта MoDx Revo
Для того чтобы у каждой страницы вашего сайта…
- LESS на стороне клиента
Использование на стороне клиента (в самом браузере)…
- Iconogen — сервис автоматической генерации Favicon
Это сервис поможет вам быстро сгенерировать favicon…
- HTML5 аудио-плеер с плейлистом
Аудио-плеер на основе технологии HTML5. Он состоит…
- HSL — цветовая палитра и прозрачность
Значения цвета HSLA являются расширением значений…
- FormIt на MoDx Revolution
FORMIT — это приложение для обработки формы в…
- Eurowebcart — CMS для создания магазина
Система управления сайтом Eurowebcart позволяет…
oceana.nichost.ru
В первой части книги, в некоторых примерах мы уже демонстрировали, как установить цвет текста в CSS. Здесь нет ничего сложного: вам понадобится свойство color и значение того цвета, которым вы желаете окрасить текст.
Пример:
p { color: #211C18; }
В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.
Шестнадцатеричные цвета (hex)
Шестнадцатеричная система счисления (hexadecimal, hex) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB, где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.
Сокращенная запись hex-цветов
Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB. Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.
Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.
Примеры сокращенной записи hex-цветов:
| HEX-код | Сокращенная запись |
|---|---|
| #FFDD66 | #FD6 |
| #8833FF | #83F |
| #333333 | #333 |
| #cccccc | #ccc |
Цветовая модель RGB
Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb, а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:
p { color: rgb(0, 255, 0); }
А вот желтовато-горчичный оттенок имеет такое значение:
color: rgb(94, 81, 3); /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */ color: #5E5103;
Значение черного цвета записывается как (0, 0, 0), а белого – (255, 255, 255). Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:
color: rgb(100%, 100%, 100%);
Где искать значения цветов
Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC.
Цветовая модель RGBA
Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:
p { color: rgba(94, 81, 3, .9); }
Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:
p { color: rgb(94, 81, 3); color: rgba(94, 81, 3, .9); }
Первое свойство в примере предназначено для браузера IE8, который отобразит текст нужным цветом, но без прозрачности. А те браузеры, которые понимают RGBA, применят к элементу второе свойство, с прозрачностью.
Цветовые модели HSL (HSLA)
Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:
p { color: hsl(165, 100%, 50%); }
Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:
Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.
Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:
p { color: hsla(165, 100%, 50%, .6); }
HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.
Стандартные цвета HTML
Еще один способ представления цветов в веб – это ключевые слова, при помощи которых можно указать цвет для элемента. Пример:
p { color: black; }
Существует 16 стандартных цветов, которые можно записать в значении свойства color:
| Ключевое слово цвета | HEX-код | RGB |
|---|---|---|
| red | #FF0000 | 255, 0, 0 |
| maroon | #800000 | 128, 0, 0 |
| yellow | #FFFF00 | 255, 255, 0 |
| olive | #808000 | 128, 128, 0 |
| lime | #00FF00 | 0, 255, 0 |
| green | #008000 | 0, 128, 0 |
| aqua | #00FFFF | 0, 255, 255 |
| teal | #008080 | 0, 128, 128 |
| blue | #0000FF | 0, 0, 255 |
| navy | #000080 | 0, 0, 128 |
| fuchsia | #FF00FF | 255, 0, 255 |
| purple | #800080 | 128, 0, 128 |
| white | #FFFFFF | 255, 255, 255 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| black | #000000 | 0, 0, 0 |
Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C.
Использование таких ключевых слов допустимо, но есть риск, что какое-нибудь слово не воспримется браузером. Поэтому рекомендуется вместо ключевых слов записывать шестнадцатеричный код цвета.
Итоги
В CSS цвет текста задается с помощью свойства color, а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.
Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.
Далее в книге вы узнаете, как задать размер шрифта CSS.
idg.net.ua