Ресурс для именования цветов. Переменные цветов SCSS, CSS

В процессе создания сайтов у нас может возникнуть проблема: как правильно назвать цвет? Нужно грамотное именование переменных!

Name that Color

Допустим, что на сайте пять оттенков зеленого. Как называть переменные цветов в SCSS, чтобы не путать? $color-green, $color-dark-green, $color-darken-green, $color-light-green — не самые удачные названия, т.к. мы сами будем путаться, какой цвет для чего нужен.

Существует чудесный ресурс Name that Color, которым я пользуюсь последнее время. Вы вводите цвет в поле «Your Color» (например, #619444), или выбираете нужный цвет в интерактивной палитре:

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

Мгновенно вам выдают название цвета. В данном случае «Hippie Green»:

Название цвета

Следовательно, переменная, означающая данный цвет, будет выглядеть так: $color-hippie-green: #619444. Другой оттенок зеленого будет иметь другое название — всё логично 🙂

То есть, именование переменных цветов с данным сайтом помогает верстальщику ориентироваться в цветах, с которыми он работает. Ресурс Name that Color очень удобен и полезен, а так же экономит время, ведь вам не нужно будет тратить силы и напрягать фантазию, придумывая названия цветов!