Палитра цветов css

  • Яндекс.Карты для 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

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

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

1. Material Palette

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

Палитра цветов css

Перейти к инструменту

2. Material UI’s Material Design Colors

Это довольно-таки простая шпаргалка, которая представляет на своей странице все цвета материального дизайна.

Палитра цветов css

Перейти к инструменту

3. Random Material Generator

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

Палитра цветов css

Перейти к инструменту

4. Material Design Palette Generator

Если вы заинтересованы в создании собственной палитры материального дизайна — попробуйте этот интсрумент. В первую очередь вы должны выбрать свой цвет, отличный от официальных цветов палитры material design, а инструмент, в свою очередь, предложит вам палитру на основе выбранного цвета.

Палитра цветов css

Перейти к инструменту

5. Material Mixer

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

Палитра цветов css

Перейти к инструменту

6. Material Colors

Этот инструмент отображает только 500 и А200 цвета materila design.

Палитра цветов css

Перейти к инструменту

7. MaterialUp’s Material Design Colors

Это довольно-таки простой инструмент — служит для визуализации цветов . При кике на колонку с цветом — оказывает все образцы цвета, которые связаны с выбранным.

Палитра цветов css

Перейти к инструменту

8. Tint UI’s Material Design

Данный инструмент показывает только 500 цвета

Палитра цветов css

Перейти к инструменту

css3-html5.ru

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

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

Палитра цветов css

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

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

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

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

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

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

Палитра цветов css

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

Палитра цветов css

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

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

Палитра цветов css

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

Палитра цветов css

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

Colorshame

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

Яндекс

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

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

Getcolor

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

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

Палитра цветов css

start-luck.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). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:

Цветовой круг HSL

Второе и третье числа в скобках означают насыщенность (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

You May Also Like

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.