Атом

Палитра цветов в редакторе Atom

Палитра цветов в редакторе Atom
Дизайнеры и веб-разработчики часто используют HEX-код в своих файлах CSS, чтобы указать, какого цвета будет определенный элемент. У этого метода есть свои достоинства и недостатки. Это очень помогает, поскольку стандартизирует весь рабочий процесс между разными разработчиками.Вы можете использовать разные типы дисплеев с разной точностью цветопередачи и при этом без проблем придерживаться исходной цветовой палитры. Но часто бывает сложно использовать HEX-коды для представления цветов. Само по себе число ничего не значит для человека-разработчика и может помешать творчеству.Хотя вы можете использовать множество палитр цветов от Adobe до палитры цветов HTML W3Schools, переключение между ними и вашим редактором может нарушить концентрацию и значительно усложнить вашу жизнь.

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

Установка палитры цветов

Откройте Настройки [CTRL +,] в редакторе Atom и в Установить раздел поиск новых пакеты.

Установите подборщик цветов (версия 2.3.0 или новее), и после его установки не забудьте Давать возможность Это.

Как только все это будет сделано. Вы можете открыть новый текстовый файл, и мы можем начать его тестирование.

Различные варианты выбора цвета

Откройте новый файл внутри Atom и, открыв его, используйте сочетание клавиш [CTRL + ALT + C], если вы работаете в Windows или Linux, или [CMD + SHIFT + C], если вы используете Mac OSX.

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

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

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

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

Различные стандарты

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

Начнем с формата HEX, поскольку он используется довольно часто, по крайней мере, на уровне новичка.

Это просто шестнадцатеричная цифра (которая представляет собой систему счисления, которая идет от 0 до 9, а затем имеет а представляют 10, б представляют 11 и так далее, до 15, которое представлено с использованием ж). Выберите цвет с помощью пакета выбора цвета, нажмите кнопку HEX под виджетом, и вы увидите, что соответствующий шестнадцатеричный код для этого цвета вставлен в ваш редактор.

Следующий стандарт использует RGB, который показывает, какой процент цвета является красным, какой процент зеленым и сколько синим.

Тот же цвет, что и выше, имеет представление RGB следующим образом

Наконец, вам нужно знать о HSL, что означает оттенок, насыщенность и яркость.

Оттенок представляет, какой цвет имеет элемент. Он может варьироваться от красного конца спектра до синего, и он просто игнорирует цвета как комбинации красного, зеленого и синего (по крайней мере, с точки зрения разработчика).  Это часто описывается как цветовое колесо с красным, зеленым и синим цветом на расстоянии 60 градусов друг от друга, но палитра цветов открыла его до единственной полосы справа.

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

Яркость описывает, насколько яркими будут цвета. 100% светлые цвета неотличимы от белого, а 0% кажутся полностью черными. Например, если на вашем сайте много материалов для чтения, вам может потребоваться менее яркое решение, чтобы читателю было легче вовлекать его. Так это HSL.

Заключение

Такие редакторы, как код Atom и Visual Studio, имеют целый набор полезных пакетов и тем, построенных вокруг них. Палитра цветов - лишь один пример, который разработчик может использовать, чтобы отказаться от ненужных посещений W3Schools или Stack Overflow. Для использования палитры цветов по-прежнему требуется правильно откалиброванный дисплей с точной цветопередачей.

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

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