Палитра цвета html — BEST SEO BLOG
Палитра цвета RGB, как правильно задавать цвета в CSS и Html .
Как известно, для решения задач по цветовому оформлению текста применяют общепринятое построение RGB ( то есть, Red — Красный, Green – Зеленый, и соответственно Blue — Синий)
Цветовая палитра RGB подразумевает использование лишь трех цветов, каждый из которых вполне может быть представлен с разным уровнем яркости. В CSS и Html коде для каждого цвета палитры можно определить один из 256 возможных цветовых градаций.
Таким образом, для оформления документа вы можете применить довольно большое количество цветов – 256-256-256. Например, чтобы в результате получить черный цвет, всем трем цветам RGB необходимо задать нулевой показатель яркости, и наоборот, если требуется белый цвет, то соответственно для всех цветов нужно установить максимальную яркость.
Давайте более детально разберемся с тем, как задать яркость цвета в Html. Настроить яркость можно двумя способами:
- Задав код цвета палитры для страницы в Html коде, определив яркость цветов RGB при помощи шестнадцатеричной системы исчисления
- Задав цвета в CSS по шестнадцатеричной системе счисления.
Разберемся с записью кода в шестнадцатеричной системе и гипертекстовой разметке. Для начала вспомним десятичную систему счисления – к примеру, если нам необходим белый цвет, то его код будет выглядеть как: 256 256 256, в случае с черным цветом: 0 0 0.
В отличие от десятичного кода, где присутствуют только цифры, шестнадцатеричная палитра содержит также и буквы латинского алфавита. То есть, в данном случае находит место своя определенная система представления цифр. Например, белый цвет в HTML задается как: #ffffff, а черный: #000000. Нетрудно заметить, что здесь 00 соответствует 0, а ff соответствует 256 (если перевести в десятеричную систему).
Таким образом, RGB палитра цвета Html, CSS поделена на каналы, каждому из которых отведено два шестнадцатеричных символа. Именно поэтому все цвета в Html коде построены из шести букв (приравненных к цифрам) и самих цифр. Следует отметить, что перед кодом ставится символ «#».
Разумеется, необходимость в ручном подборе кода цвета отсутствует – достаточно лишь запустить любой графический редактор, найти подходящий цвет, и в детальной информации увидеть код цвета в системе RGB. Есть и другой, более простой вариант – палитра цветов Html с кодами. Найти и скопировать ее себе.
Яндекс Цвета – выбор Html кода цвета в палитре RGB в Yandex выдаче.
Кроме всего прочего, выбрать цветовую схему для своего сайта можно и при помощи Яндекса. Для этого достаточно ввести в поисковую строку слово «цвет» или же само название необходимого вам цвета. В результате запроса, в выдаче будет отображена палитра Яндекс.Цвета. с помощью которой можно выполнить подбор цвета.
В правом же углу можно будет увидеть код цвета в RGB и шестнадцатеричной системе, который используется при построении web документа.
Данная опция от Яндекс существенно облегчает процесс работы. Все очень просто – вводите название цвета и получаете необходимый код.
Необходимо отметить, что некоторую часть цветов в гипертекстовой разметке вполне можно задать словом, например: «gray» — серый, «white» — белый, «black» — черный и т.п. Само собой, задать цвет в Html таким способом возможно лишь для не очень большого разнообразия цветов. Действительно, 16 млн. цветов RGB при помощи слов невозможно найти ни в одном справочнике или таблице.
В валидаторе W3C 4.01 (гипертекстовая разметка) представлена палитра из 16 основных оттенков, при помощи которых составлена таблица цветов CSS и Html и из которой видно, какие цвета можно задавать словами.
Остальные цвета необходимо задавать используя шестнадцатеричный код.
Название цветов палитры RGB в web-страницах, а также замена цвета самого текста при помощи атрибута color, примеры и методы использования цветовых кодов в CSS и Html.
Сейчас, внешний дизайн страниц оформляется с помощью CSS (таблицы каскадных стилей), но, тем не менее, довольно часто можно встретить случаи когда цвет указан в HTML.
Поэтому, ниже будет приведен пример указания цвета в HTML.
<body bgcolor=»#ffd700″ text=»purple»>страница вашего сайта</body>
В конечном результате у вас получится страница с пурпурным шрифтом на золотистом фоне.
Раньше в CSS для указания цвета текста в отдельно взятом участке, необходимо было прописывать тег «FONT» (не рекомендован W3C), а для того, чтобы задать цвет в него включали атрибут «color»:
<font color=»#ff0000″>текст, который нужно было окрасить в красный цвет</font>
Для того, чтобы окрасить некоторый элемент текста в нужный для вас цвет необходимо с помощью тега «FONT» прописать HTML код, который будет иметь следующий вид:
<font color=”#000bff”> Текст, цвет шрифт которого требуется заменить </p>
На данный момент, для того чтобы получить валидную верстку сайта, рекомендую при задании кода цвета использовать CSS.
По большому счету, правила вставки цветовых кодов в CSS не отличаются от рассмотренных выше.
Палитра цвета RGB, подбор и определение HTML кода при помощи приложений работающих с цветами.
Само собой, самостоятельно вычислять необходимый код вам не потребуется – для этого можно использовать самые различные программы работы с цветом. Здесь, получить требуемый цвет и его кодировку можно воспользовавшись стандартным инструментом «пипетка»
Немного ниже, мною будет приведен список программ для работы с цветом.
1. HTMLColor 2000
2. ColorPic
3. ColorMania
4. Just Color Picker
Для того чтобы просмотреть результат проведенной вами работы достаточно сохранить документ в формате html и открыть его при помощи любого Интернет-браузера.
Инструменты выбора цвета: HTML, CSS, RGB и др.
Работа с цветами — трудоемкая задача для веб-дизайнера. Чтобы ускорить процесс и сделать жизнь дизайнера намного проще, наша комада Designe-R подобрала для Вас ряд инструментов цвета, которіе помогут вам с легкостью выбирать и преобразовывать выбранные цвета для вашего следующего проекта веб-дизайна.
Вы когда-нибудь хотели использовать определенный цвет, но не могли найти его название или код? С помощью этих генераторов цвета вы можете найти именно тот цвет, который вам нужен. Есть несколько вариантов, которые помогут получить желаемый цвет. Например, вы можете выбрать цвет, похожий на тот, который вам нужен, а затем выбрать между альтернативными оттенками. Кроме того, вы можете настроить оттенок, насыщенность или яркость, пока не будете довольны результатом. После всех изменений вы получите шестнадцатеричный код, а также название цвета и интегрируете их в свой дизайн. Просто, правда ?!
Если вы начинаете работу над дизайном с нуля без каких-либо рекомендаций по бренду или цветового вдохновения, может быть сложно составить цветовую схему, которая будет работать. Генераторы цветовой палитры могут пригодиться во многих ситуациях. Несмотря на то, что они в основном используются в проектах веб-дизайна, генераторы цветовой палитры также могут быть полезны в различных других проектах, связанных с дизайном.
Вот несколько цветовых инструментов, которые помогут вам создать красивую комбинацию цветов, которая гарантированно подойдет.
1. ColourLovers
ColourLovers является домом для миллионов цветовых палитр, созданных пользователями. Просмотрите коллекцию и выберите те, которые вас вдохновляют, или найдите другие цвета, которые хорошо сочетаются с выбранным вами оттенком. Этот сайт может действительно пригодиться в будущем.
Перейти
2. Adobe Color CC
Это еще один замечательный генератор цветовой палитры, который вы можете использовать для создания красивых цветовых палитр. Вы также можете войти в систему и сохранить свои палитры для будущего использования.
Перейти
3. Просто палитра цветов
Just Color Picker — это умный инструмент, который позволяет вам раскрасить код в буфер обмена одним щелчком мыши.
Перейти
4.
Paletton — конструктор цветовых схемПознакомьтесь с этим замечательным генератором цветовой палитры, который позволяет создавать различные цветовые комбинации.
Перейти
5. Цветная охота
Вот аккуратный генератор цветовой палитры, который включает в себя несколько цветовых палитр на выбор. Кроме того, вы можете сохранить избранное и использовать позже, когда этого потребует ситуация.
Перейти
6. Sip — Генератор цветовой палитры
Sip — потрясающее приложение, которое отлично работает на iPhone и Mac. Это приложение позволяет быстро создавать цветовые схемы из изображений, а затем сохранять, систематизировать и публиковать созданные вами палитры.
Перейти
7. Генератор цветовой палитры Palettr
Здесь у вас есть замечательный источник, где вы можете найти различные цветовые палитры, созданные из изображений. Вы можете искать любую тему или слово, и вы получите выдающиеся результаты.
Перейти
8. Цветовые комбинации
Этот инструмент может помочь вам легко создавать потрясающие цветовые палитры с нуля. Взгляните, откройте для себя его особенности и узнайте, что он может предложить.
Перейти
9. Генератор цветовой палитры Colrd
Вот вам замечательный веб-сайт, с помощью которого вы можете создавать красивые цветовые палитры. Этот инструмент также включает в себя удобный конструктор градиентов и инструмент поиска.
Перейти
10. Палитра цветов от WebpageFX
Это отличный источник, который можно использовать для создания цветовых палитр. Перейдите по ссылке ниже и посмотрите, какие цветовые комбинации вы можете создать.
Перейти
11. Цветовой код
Это еще один отличный генератор цветовой палитры, основанный на курсоре. Вы можете использовать его для создания различных цветовых палитр, а затем экспортировать их в различные форматы файлов: SCSS, LESS или PNG.
Перейти
12. Цветовая гамма — генератор цветовой палитры
Здесь у вас есть выдающаяся шестнадцатеричная цветовая палитра, которую вы можете использовать для создания различных цветовых смесей. Идеально подходит для любого веб-дизайнера или других творческих людей.
Перейти
13. color.hailpixel.com
Color.hailpixel.com — простой, но очень полезный инструмент, который позволяет сканировать окно браузера в поисках идеального цвета, а затем копировать шестнадцатеричный код одним щелчком мыши.
Перейти
14. Названия цветов CSS
Если случайные названия цветов вам не подходят, возможно, этот список из 147 описательных названий цветов будет немного легче запомнить в ваших таблицах стилей. Просматривайте весь выбор или просматривайте случайное значение при каждом щелчке мыши.
Перейти
15. Сфера
Инструмент визуализации теории цвета под названием Sphere дает вам приятный и простой интерфейс для выбора оттенков и оттенков на цветовом круге. Выберите желаемый стиль палитры, чтобы ограничить выбор цветов для согласования значений.
Перейти
16. Color Scheme Designer
Создайте свою собственную цветовую схему с помощью Color Scheme Designer. Поверните и отрегулируйте цветовое колесо, чтобы выбрать базовый цвет, а затем просмотрите автоматически сгенерированные значения в зависимости от типа палитры.
Перейти
17. CSS Drive: генератор палитры изображений в цвета
Это еще один замечательный генератор цветовой палитры, который вы можете использовать для создания различных цветовых палитр на основе ваших собственных изображений.
Перейти
18. Ultimate CSS Gradient Generator
Как известно, градиенты CSS3 сложно записать в код. Вам не только нужно знать различные значения цвета, вам также необходимо добавить различные префиксы поставщиков, чтобы он работал в нескольких браузерах. Ultimate CSS Gradient Generator упрощает задачу, предоставляя вам интерфейс в стиле Photoshop для настройки градиента, а затем предоставляет вам код для копирования / вставки.
19. Калькулятор цвета Hex 2 RGBA
Преобразование шестнадцатеричного значения в RGB или даже в RGBa несложно, это просто утомительно, когда каждое значение задается отдельно, что означает как минимум три клика, чтобы скопировать числа. Калькулятор Hex 2 RGBA от Devoth упрощает процесс: полное значение CSS копируется одним щелчком мыши.
Перейти
20. 0to255
Выберите свой цвет и посмотрите полную серию вариантов, что сделает его идеальным для наведения, градиентов и границ.
Перейти
21. Color Hexa
Color Hexa — это энциклопедия цвета! Введите выбранный цвет в любое желаемое значение, и он отобразит описание вместе с некоторыми полезными фактами. Прямое преобразование из Hex или RGB в ближайшее значение CMYK также особенно полезно для дизайнеров печати.
Перейти
22. Генератор цветовой палитры материального дизайна
Это еще один отличный генератор, который автоматически генерирует потрясающие цветовые палитры, которые вы можете загрузить и сохранить для будущих дизайнов.
Перейти
Узнать больше интересного:
Поделиться ссылкой:
Понравилось это:
Нравится Загрузка…
Материальный дизайн — Цвет — CSS-LIVE
Перевод раздела Color официальной документации Google: http://www.google.com/design/spec/material-design/.
Цвет в материальном дизайне пропитан духом смелых оттенков, стоящих бок о бок с приглушенным окружением, глубокими тенями и яркими светлыми участками. В качестве примеров использовались современная архитектура, дорожные знаки, маркировочная лента тротуаров и спортивные площадки. Используйте неожиданные и полные жизни цвета.
Цветовая палитра
Данная цветовая палитра содержит основные и акцентные цвета, которые могут быть использованы для отоображения или развития цветов вашего бренда. Эти цвета подобраны так, чтобы гармонично дополнять друг друга.
Данная цветовая палитра начинается с основных цветов и заполняет весь спектр, создавая полноценную палитру, пригодную для использования в Android, iOS и в Сети. Google рекомендует в качестве основных цветов вашего приложения использовать оттенки с насыщенностью 500, а остальные – в качестве акцентных цветов.
Скачать цветовые образцы
Использование цветов в UI
Выберите палитру
Чтобы ограничить свою цветовую выборку выберите три оттенка из основной палитры и один акцентный цвет из вспомогательной палитры.
Пример основной цветовой палитры
Пример вспомогательной палитры
Используйте непрозрачность для текста, иконок и разделителей
Чтобы сообщить пользователю, насколько важна определенная информация относительно остального текста, вы можете изменять непрозрачность текста.
Темный текст на светлом фоне
Если темный текст расположен на светлом фоне, непрозрачность основного текста должна составлять 87%. Вспомогательный текст, расположенный ниже в визуальной иерархии, должен иметь непрозрачность 54%. Текстовые подсказки для пользователей, вроде тех, что расположены в текстовых полях и в метках, имеют еще меньшую визуальную важность и непрозрачность 26%.
| Темный текст (#000000) | Непрозрачность |
| Основной текст | 87% |
| Вспомогательный текст | 54% |
| Подсказки (текстовые поля, метки) | 26% |
Светлый текст на темном фоне
Значения в таблице отражают относительную значимость светлого текста на темном фоне.
| Светлый текст (#FFFFFF) | Непрозрачность |
| Основной текст | 100% |
| Вспомогательный текст | 70% |
| Подсказки (текстовые поля, метки) | 30% |
Текст на цветном фоне
Для случаев расположения белого или черного текста на цветном фоне ознакомьтесь с этими таблицами цветовых палитр, в которых указаны оптимальные значения контраста и альфа-канала.
Прочие элементы
Прочие элементы, такие как иконки и разделители, тоже выигрывают, если в качестве величины цвета используют шестнадцатеричное значение черного или белого, поскольку это гарантирует, что они дадут желаемый результат на фоне любого цвета.
Панели инструментов и панели состояния
Панели инструментов и более крупные цветные блоки должны использовать основной оттенок (500) главного цвета вашего приложения. Панель состояния должна использовать более темный оттенок (700) вашего основного цвета.
Смелое использование цвета в больших полях поощряется в UI. Различные элементы в UI могут использовать различные части вашей цветовой темы.
Акцентный цвет
Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.
В плавающей кнопке действия используется акцентный цвет.
Переключатель, использующий акцентный цвет.
Правильно.
В основном тексте используйте акцентный цвет только для привлечения внимания к веб-ссылке.
Неправильно.
Не используйте акцентный цвет в качестве цвета основного текста.
Правильно
Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.
Неправильно.
Не используйте акцентный цвет для панелей своего приложения или для крупных цветных участков. Избегайте использования одного и того же цвета для плавающей кнопки действия и для фона.
Запасные акцентные цвета
Если выбранный вами акцентный цвет окажется слишком светлым или слишком темным для выбранного фона, то в качестве запасного варианта обычно используется более темный или светлый оттенок акцентного цвета. Если ваш акцентный цвет совершенно не подходит, используйте оттенок 500 вашего основного цвета на белом фоне. Если для цвета фона выбран оттенок 500 вашего основного цвета, используйте 100% белый или 54% черный.
Правильно
Если цветной фон окажется слишком светлым или слишком темным, используйте запасной акцентный цвет.
Неправильно.
Не используйте акцентный цвет на цветном фоне, если контраст недостаточно высок.
Темы
Темы позволяют вам задать приложению единый тон. Тема определяет, насколько темными будут поверхности, задает уровень тени и подходящую непрозрачность для элементов краски. Для продвижения идеи большей гармоничности приложений предложены две темы: Светлая и Темная.
Скачать темы
Светлая тема
- Панель состояния
- Панель приложения
- Фон
- Карточки/Диалоговые окна
Палитра светлой темы
Применение в UI
Темная тема
- Панель состояния
- Панель приложения
- Фон
- Карточки/Диалоговые окна
Палитра темной темы
Применение в UI
Палитра цветов HTML и CSS для сайта: онлайн и в фотошопе
Доброго времени суток, уважаемые читатели моего блога. Сегодня мы с вами поговорим о цветах. Они делают ярче не только нашу жизнь, но и любой сайт. Работа с палитрой совсем не сложная и позволяет сделать уникальным любой портал, даже тот, который вы создаете, используя шаблоны.
Каждый из нас, сам того не замечая, примерно представляет на какой ресурс он попал, просто увидев его цветовую гамму. Никому и в голову не придет делать розовым мужской сайт или использовать черные цвета для ресурса о новорожденных. Однако, сегодня пойдет не об этом. Все эти тонкости вы потихонечку можете узнавать из каждой новой моей статьи, мне не страшно делиться с вами опытом.
Сегодня вы также сможете узнать кое-что особенное. Самым главным преимуществом работы с цветами является ее простота. Только ленивый не разберется со сменой гаммы если знает, что такое палитра цветов html. Изучив эту статью, вы научитесь разбираться даже в самом сложном коде и редактировать его под себя.
Как поменять цвет и на что ориентироваться начинающему дизайнеру и сайтостроителю
Давайте на практике посмотрим, как обозначается цвет в коде. Все очень просто. Для этого используют тег 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 оттенки и не заморачиваться.
Яндекс
Еще один вариант – помощник от Яндекс. Это очень быстрый способ определения кода. Вы просто вставляете название цвета в поисковую строчку и жмете «Поиск».
А вот и желанный шифр.
Вы можете переходить от одного оттенка к другому кликом внутри этой палитры.
Сервис неплох, но обладает одним существенным недостатком. Думаю, что совсем скоро может что-то измениться, но пока, чтобы перейти к красному или любому другому цвету, вам нужно заново вводить в поисковую строчку новый запрос. Поэтому, я бы не рекомендовал его использовать для решения дизайнерских задач. Слишком много лишний движений.
Есть и другой, похожий, интересный и забавный ресурс.
Get-color
Если помимо самого цвета и кода, вам интересны еще и названия, то рекомендую сервис www.get-color.ru.
Заходите на сайт. Сначала выбираете по основному кругу справа, затем внутри квадрата оттенок.
Под плашкой с выбранным оттенком находится вся основная информация о нем.
Можно кликнуть на тот, на который похож выбранный цвет и вам покажут 100% вариант.
Иногда можно увидеть забавнейшие названия.
Фотошоп
Ну и напоследок, конечно же, фотошоп. Куда без него, когда дело касается цвета. Итак, открываете программу и щелкаете два раза по эскизу с цветом. Появляется дополнительное окно.
Можно выставить галочку напротив веб-цветов, чтобы не видеть лишнего.
Сначала выбираете основной оттенок в прямоугольнике справа, затем кликаете по нужному цвету в квадрате слева. Затем обращаете внимание на новый оттенок, чтобы не ошибиться, и можно копировать код. Он расположен внизу экрана.
Ну вот и все, теперь у вас есть вся необходимая информация. Если вам понравилась эта статья – подписывайтесь на рассылку и узнавайте больше о заработке в интернете.
До новых встреч и удачи в ваших начинаниях.
Html пастельные цвета. Цветовые коды в Minecraft
Влад Мержевич
В HTML цвет задается одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.
Шестнадцатеричные цвета
Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.
Типичный цвет, используемый в HTML, выглядит следующим образом.
Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.
Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.
Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.
- Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
- Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
- Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.
Рис. 6.1. Цветовой круг
Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 6.2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.
Рис. 6.2. Окно для выбора цвета в программе Photoshop
Веб-цвета
Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых — красной, зеленой и синей — устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.
Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.
Цвета по названию
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.
| Имя цвета | Цвет | Описание | Шестнадцатеричное значение |
|---|---|---|---|
| black | Черный | #000000 | |
| blue | Синий | #0000FF | |
| fuchsia | Светло-фиолетовый | #FF00FF | |
| gray | Темно-серый | #808080 | |
| green | Зеленый | #008000 | |
| lime | Светло-зеленый | #00FF00 | |
| maroon | Темно-красный | #800000 | |
| navy | Темно-синий | #000080 | |
| olive | Оливковый | #808000 | |
| purple | Темно-фиолетовый | #800080 | |
| red | Красный | #FF0000 | |
| silver | Светло-серый | #C0C0C0 | |
| teal | Сине-зеленый | #008080 | |
| white | Белый | #FFFFFF | |
| yellow | Желтый | #FFFF00 |
Не имеет значения, каким способом вы задаете цвет — по его имени или с помощью шестнадцатеричных чисел. По своему действию эти способы равны. В примере 6.1 показано, как установить цвет фона и текста веб-страницы.
Пример 6.1. Цвет фона и текста
ЦветаПример текста
В данном примере цвет фона задается с помощью атрибута bgcolor тега
, а цвет текста через атрибут text . Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal .Коды цветов в CSS используются для указания цвета. Как правило, коды цвета или цветовые значения используются для установки цвета либо для переднего плана элемента (например, цвет текста, ссылки), либо для фона элемента (цвет фона, блока). Они также могут использоваться для изменения цвета кнопки, границ, маркера, при наведении и других декоративных эффектов.
Вы можете задать свои значения цвета в различных форматах. В следующей таблице перечислены все возможные форматы:
Ниже более подробно описаны перечисленные форматы.
Цвета CSS — шестнадцатеричные коды
Шестнадцатеричный код цвета — это шестизначное представление цвета. Первые две цифры (RR) — представляют собой красное значение, следующие две — это зеленое значение (GG), а последние — синее значение (BB).
Цвета CSS — короткие шестнадцатеричные коды
Короткий шестнадцатеричный код цвета — это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.
Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.
Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.
Цвета CSS — RGB значения
RGB значение — это код цвета, который задается с помощью свойства rgb(). Это свойство принимает три значения: по одному для красного, зеленого и синего. Значение может быть целым числом, от 0 до 255, или процентом.
Примечание: не все браузеры поддерживают свойство rgb() цвета, поэтому не рекомендуется его использовать.
Ниже приведен пример, показывающий несколько цветов с использованием значений RGB.
Генератор цветовых кодов
Вы можете создавать миллионы цветовых кодов с помощью нашего сервиса .
Безопасные цвета браузера
Ниже представлена таблица из 216 цветов, которые наиболее безопасные и независимые от компьютера. Эти цвета в CSS варьируются от 000000 до FFFFFF шестнадцатеричного кода. Они безопасны в использовании, поскольку гарантируют, что все компьютеры будут правильно отображать цвет при работе с 256 цветовой палитрой.
| Таблица «безопасных» цветов в CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
CSS не понимают). Поэтому будущему веб-мастеру просто необходимо изучить средства HTML, которые позволяют изменять цвет, например для того, чтобы делать яркие и красочные e-mail рассылки, которые будут привлекать внимание целевой аудитории сайта.
Данная запись получилось довольно объемной, но из нее вы узнаете обо всех технических особенностях работы с цветом при помощи HTML. Начнем мы запись с того, что разберемся с вопрос: для чего нам нужно выделять цветом те или иные элементы HTML страницы. Затем мы поговорим про модель RGB, которая позволяет задавать цвета в HTML при помощи специальных кодов (попутно мы рассмотрим десятичные коды задания цвета и шестнадцатеричные значения HTML цветов). Также из данной записи вы узнаете про палитру цвета, а также поймете почему в HTML нет никакой палитры. И завершении этой публикации будут примеры изменения цвета фона, текста и ссылок .
Использование цветов в HTML
Страницы сайта были бы скучными и неинтересными без изображений, про мы говорили ранее и очень подробно. Но у изображений есть один существенный минус: каждое изображение – это дополнительный и, соответственно, дополнительная нагрузка на хостинг.
Отмечу, что для оформления своего WordPress блога я не использовал ни одной картинки, макет полностью оформлен при помощи цвета. Как раз-таки про цвета в HTML мы сегодня с вами и поговорим . Цвета в HTML используются для разных целей, например, мы можем оформлять макеты сайта, выделяя те или иные тем или иным цветом.
При помощи цвета мы можем акцентировать внимание наших посетителей на том или ином тексте или блоке сайта. Отметим, что так же определяется при помощи цвета таким образом, чтобы пользователь мог понять: на какую ссылку он уже нажимал, какую еще не посещал и на какой HTML странице он находится в данный момент.
Будьте аккуратны, используя цвета для оформления HTML документов , не все цвета сочетаются друг с другом и не каждый цвет будет приятен посетителям вашего сайта. Но об этих тонкостях вам лучше спросить у веб-дизайнеров, данная же статья поможет вам разобраться с техническими особенностями, позволяющими управлять цветом элементов HTML страниц.
Но вам не стоит забывать, что оформление должно быть отделено от содержимого, поэтому для манипуляции цветом на HTML страницах лучше использовать CSS, но об этом мы поговорим в другой публикации. Сейчас же мы посмотрим, какие средства есть в HTML для управления цветом на страницах сайта .
В отрасли IT для манипуляции цветом существует множество цветовых моделей. Самая широко распространённая модель представления цвета – это модель RGB. Про некоторые особенности данной модели мы поговорим здесь, а для более детального знакомства с RGB будет отдельная публикация. Ниже вы найдете список цветовых моделей, используемых в IT (не только в HTML и CSS):
- Модель RGB. Данная модель получила очень широкое распространение и, пожалуй, является одним из самых удобных и распространенных способов манипуляции цветом HTML элементов.
- Модель RGBA. Данная модель очень похожа на модель RGB, но включает в себя альфа-канал цвета. Особенность модели RGBA заключается в том, что она позволяет регулировать не только цвет HTML элемента, но и его прозрачность за счет наличия альфа-канала. Модель RGBA была добавлена в CSS3 и не поддерживается старыми браузерами.
- Модель HSL. Особенность модели HSL заключатся в том, что цвет мы задаем при помощи его параметров: оттенка, напыщенности и светлоты. Данная модель несколько более сложная в понимание, чем модель RGB.
- Модель HSLA. Данная модель очень похожа на модель HSL, но она так же, как и модель RGBA позволяет работать с альфа-каналом цвета, поэтому при помощи HSLA мы можем задавать не только цвет HTML элемента на странице, но и его прозрачность.
- Модель HSV (HSB). Данную модель не стоит путать с моделью HSL. Отметим, что первых четыре модели можно использовать в HTML или CSS для оформления веб-страниц, а вот модель HSV – нет. Модель HSV была разработана одним из основателей студии Pixar в 1978 году и очень похожа на HSL.
- Модель CMY или CMYK. Данная модель используется во всех цветных принтерах для печати. В основе модели CMYK лежит правило, заключающиеся в том, что печать происходит на белых листах бумаги. Любой цвет модели CMYK получается из смешения цветов Cyan (бледно-голубой, бирюзовый), Magenta (пурпурный) и желтого. У каждого цвета в модели CMY есть характеристика непрозрачности (количество краски), измеряющаяся в процентах. Но помимо трех перечисленных цветов, модель CMYK использует еще и черный цвет.
Все вышеперечисленные цветовые модели являются аппаратно-зависимыми, то есть если вы задаете цвет HTML элемента при помощи модели RGB или HSL , то нельзя с точностью утверждать, какой именно оттенок цвета увидит посетитель вашего сайта, так как мониторы у всех пользователей разные и передают они цвета по-разному. Также отметим, что в основе всех вышеперечисленных моделей лежит модель RGB и любой цвет, заданный в любой из моделей (кроме HSLA и RGBA из-за наличия альфа-канала), можно конвертировать в RGB.
Если говорить про аппаратно-независимые модели передачи цвета, то стоит отметить модель LAB. Итак, мы немного отвлеклись от работы с цветом в HTML, познакомившись с некоторыми цветовыми моделями. Отметим, что браузеры «понимают» только первых четыре модели: HSL, RGB, HSLA и RGBA. Поэтому цветом HTML элементов мы можем управлять только при помощи этих моделей.
Как формируется цвет HTML элемента: некоторые особенности модели RGB
Давайте разберемся с тем, как формируется цвет HTML элемента и с некоторыми особенностями модели RGB. Отметим, что про модель RGB, а также про другие модели, которые используются для оформления веб-страниц мы поговорим чуть позже в отдельных записях.
Итак, модель RGB расшифровывается, как Red, Green, Blue. В основе модели RGB лежит принцип аддитивности. Этот принцип заключается в том, что для получения какого-либо цвета происходит добавление цвета к черному. Для лучшего понимания представьте, что ваш экран – это черная стена и у вас есть три прожектора: первый светит красным цветом, второй светит зеленым, а третий синим. Яркость каждого прожектора вы можете регулировать при помощи линейки, на которой расположены цифры от 0 до 255. Соответственно, если вы установили для прожектора значение ноль, то он выключается и не светит, если значение 255, то прожектор дает максимально яркий цвет.
Таким образом получается, что если вы светите на одну и ту же точку красным и зеленым прожектором, то на черной стене вы заметите желтое пятно. Если комбинируете красный и синий, то получается пурпурный цвет, а если объединяете зеленый и синий, то световое пятно на черной стене будет цвета Cyan, но если вы направите все три прожектора на одну точку, то световое пятно будет белого цвета.
Описанный выше принцип лежит в основе модели RGB и применяется для манипуляции цветами в HTML элементов на странице в браузере .
HTML атрибуты для изменения цвета элементов: цвет фона элемента и цвет текста внутри элемента
Используются для того, чтобы сделать элементы страницы уникальными. При помощи HTML атрибутов мы можем манипулировать цветом элементов:
- HTML атрибут color. Данный атрибут позволяет изменять цвет текста, находящегося внутри HTML элемента. Атрибут может принимать значения в виде называний HTML цветов и при помощи кодов модели RGB в шестнадцатеричной системе счисления и в десятичной системе счисления. Атрибут color – это уникальный HTML атрибут, который позволяет менять цвет текста внутри некоторых HTML элементов.
- HTML атрибут text. Данный атрибут является уникальным атрибутом тэга . Тэг вместе с тэгами и образуют . Если вы помните, то внутри контейнера размещаются элементы, которые потом отображаются браузером в области просмотра. Атрибут text позволяет задать цвет текста по умолчанию для всей HTML страницы .
- HTML атрибут bgcolor. Также являет уникальным HTML атрибутом и позволяет изменять цвет фона некоторых HTML элементов.
- HTML атрибут vlink. Данный атрибут уникален и применяется только к тэгу , чтобы изменить цвет ссылки, которую уже посетил пользователь.
- HTML атрибут alink. Этот атрибут также уникален и применим только к тэгу . Атрибут alink меняет цвет активной HTML ссылки.
- HTML атрибут link. Атрибут link используется только вместе с тэгом и служит для изменения цвета ссылок HTML страницы, которые еще не посещал пользователь.
Обратите внимание: использовать атрибуты для изменения цвета HTML элементов не рекомендуется, так как есть каскадные таблицы стилей, которые позволяют отделить оформление веб-страницы от его содержимого.
Использование десятичных кодов цвета в HTML
Итак, мы говорили о том, что прожектору можно задавать яркость цвета при помощи специальной линейки, на которой расположены пронумерованные рисочки от 0 до 255. А теперь посмотрим, как это нам поможет изменять цвет HTML элементов. Дело всё в том, что цвет текста внутри HTML элемента или цвет фона в HTML мы можем изменять при помощи десятичного кода следующим образом:
Если вы создадите HTML документ, в котором контейнер body будет описан, как в примере, то увидите:
- Цвет фона HTML документа стал зеленым: bgcolor=”rgb (0,255,0)”.
- Цвет текста HTML страницы станет синим: text=”rgb (0,0,255)”.
- Цвет HTML ссылки, которую пользователь не посещал, будет белым: link=”rgb (255,255,255)”.
- Цветы ссылки, которая открыта в данный момент, будет черным: alink=”rgb (0,0,0)”.
- А цвет HTML ссылки, которую уже посещали, будет красным: vlink=”rgb (255,0,0)”.
Обратите внимание: никто не запрещает вам регулировать «мощность прожектора» по своему усмотрению, вы можете задать HTML цвет , например, таким образом:
И получите цвет детской неожиданности. В этом и заключается особенность, гибкость и удобство модели RGB. Ваш монитор – черная стена, на которую светят прожекторы, а вы можете регулировать мощность этих прожекторов и создавать всевозможные цвета фона, текста и ссылки при помощи HTML атрибутов в десятичной системе счисления или, еще можно сказать: при помощи десятичных кодов цвета .
На самом деле неправильно говорить десятичные коды цвета в HTML , правильнее будет сказать десятичные коды цвета RGB , поскольку данная модель используется не только для оформления веб-страниц в HTML и CSS.
Шестнадцатеричные значения HTML цветов
Задавать цвет HTML элементам десятичными кодами модели RGB не очень удобно (и на данный момент не все браузеры поддерживают такой способ манипуляции цветом), так как запись будет не самая компактная, намного удобнее задавать цвет HTML элементам при помощи шестнадцатеричных значений. На рисунке ниже вы можете увидеть, как десятичные значения конвертируются в шестнадцатеричные.
Для тех, кто не знаком с шестнадцатеричной системой счисления, следует дать небольшое пояснение, чтобы вы без труда могли манипулировать цветом HTML элементов при помощи шестнадцатеричных кодов модели RGB . Во-первых, десятичная система счисления названа так потому, что любое число можно получить комбинацией десяти цифр (терминология важна: между числом и цифрой есть разница): 0, 1, 2, 3, 5, 6, 7, 8, 9.
В шестнадцатеричной системе счисления любое число можно записать при помощи комбинации шестнадцати цифр: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Для простоты понимания можете считать, что a – это десять, а f – это пятнадцать. Например, число шестнадцать будет записано в шестнадцатеричной системе счисления следующим образом: 10. А число 255 будет записано, как ff.
А теперь давайте посмотрим, как мы можем задавать цвет HTML элементов при помощи шестнадцатеричных значений , повторим наш предыдущий пример, заменив десятичные коды цветов на их шестнадцатеричные аналоги:
#000000” link=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”> |
Обратите внимание: запись цвета в HTML в шестнадцатеричном формате несколько компактнее , чем в десятичном, это первое. Второе: мощность каждого прожектора задается числами от 0 до 255. Для записи числа 255 требуется две цифры в шестнадцатеричном формате (ff = 250), поэтому яркость каждого канала цвета (наши прожекторы правильно называть цветовой канал, канал цвета) задается двумя цифрами от 0 до f.
Обратите внимание: яркость каждого канала цвета задается отдельно, но если представить, что это одно число, то максимально возможное число в шестнадцатеричной системе счисления модели RGB равно ffffff, оно даст нам белый цвет, а десятичной системе это: 16 777 215. Такое количество цветов и оттенков позволяет задать/использовать модель RGB . Это число получается из того, что у каждого цветового канала есть 256 значений яркости (от 0 до 255), соответственно: 256*256*256 = 16 777 215.
Шестнадцатеричные значения HTML цветов более компактны и наглядны , большинство веб-дизайнеров и верстальщиков для манипуляции цветом в HTML используют именно шестнадцатеричные значения, поэтому рекомендуем вам не привыкать к десятичной форме записи цвета, а сразу использовать шестнадцатеричную.
Понятно, что начинающему дизайнеру или верстальщику поначалу будет трудно ориентироваться в шестнадцатеричной форме записи цвета, поэтому практически любой графический редактор имеет так называемую палитру цвета, которая позволяет выбрать нужный цвет и получить его код для разных цветовых моделей в разных системах счисления.
Некоторые текстовые редактора, такие как , и имеют расширения-палитры, которые очень удобны, когда вы хотите быстро выбрать цвет и изменить его. Про в этом плане я ничего сказать не могу.
Имена цветов в HTML
HTML атрибуты в качестве значения могут принимать не только десятичные коды и шестнадцатеричные значения , но и специальные имена цветов. Изменять цвет HTML элементов при помощи его имени – не самая удачная затея. Во-первых, за именем цвета в HTML кроется код модели RGB, во-вторых, каждый браузер отображает цвет HTML элемента, заданный при помощи имени, по-разному, это зависит лишь от желания разработчиков браузера.
Поэтому использование имени цвета в HTML не рекомендуется . Модель RGB является аппаратно-зависимой, а цвет, заданный при помощи имени, зависит от браузера и даже его версии. Давайте попробуем задать цвет элементам HTML страницы при помощи имени:
#white” vlink=”red” bgcolor=”green” text=”blue”> |
Как вы понимаете, цветов и оттенков очень много. Тут стоит отметить, что HTML атрибуты не позволяют задать градиент, такая возможность есть в CSS, но об этом мы поговорим в другой записи. И для многих цветов в HTML есть имена. Таблицу именем цветов в HTML и их RGB коды вы можете найти на моем сайте.
Таблица сверху демонстрирует какой цвет получит HTML элемент, если вы зададите его при помощи имени . В этой таблице собраны 16 цветов и их имена, которые одобрены консорциумом W3C и должны отображаться одинаково в любом браузере. Но на самом деле в HTML можно использовать порядка 200 имен цвета, которые поддерживают основные браузеры, такие как: Opera, Chrome, Firefox, Safari, Internet Expllorer (на счет последнего данное утверждение очень спорное).
Палитра цвета в HTML
На самом деле в HTML нет никакой палитры цветов . Давайте вспомним определение слова палитра. Палитра – это небольшая тонкая дощечка четырехугольной или овальной формы, на которой художник смешивает краски и получает всевозможные цвета. Иногда в палитре делают отверстие для большого пальца, чтобы ее было удобно держать. Изображение палитры вы найдете ниже. Поэтому в HTML палитры нет.
Но в различных текстовых редакторах есть плагины палитры цвета , которые помогают быстро подобрать цвет HTML элемента . Также палитра цвета есть в графических редакторах, ведь дизайнеру не очень удобно и весело сидеть и высчитывать: какой цвет получится при той или иной яркости того или иного канал. На рисунке ниже вы можете увидеть простейшую палитру редактора Paint.
Отметим, что многие модули и плагины палитры цвета позволяют получить код цвета не только в формате RGB/RGBA, но и в формате других моделей. Запомните, что в HTML палитры нет , ну разве что вы художник до мозга костей и называете палитрой цвета HTML страницы те цвета , которые использовались для ее оформления (ведь иногда палитрой называют цвета, которые использует тот или иной художник, или цвета, которые использовались в создании той или иной картине).
Учимся изменять цвет текста в HTML
Мы получили очень много теории про цвета в HTML , давайте перейдем к практике и попробуем поработать с цветами HTML элементов . Перовое, что мы научимся делать – изменять цвет текста в HTML документе при помощи специальных атрибутов и тэгов. Откройте любой редактор и напишите в нем следующий код:
Изменяем цвет текста в HTML документеМеняем цвет текста
Для изменения цвета текста мы можем использовать уникальный атрибут элемента BODY text, а также использовать элемент FONT и его атрибут color. Этот текст будет иметь серый цвет.
ИзменяемцветтекставHTML документе УчимсяработатьсцветомвHTML Меняемцветтекста Дляизмененияцветатекстамыможемиспользоватьуникальный атрибутэлементаBODY text , атакжеиспользоватьэлементFONT |
Данный файл я сохраню, как color.html и посоветую вам не забывать про . Запись цвета в десятичной системе счисления не поддерживает Chrome, Firefox и Opera, а вот IE такую запись цвета понимает и подсвечивает HTML заголовок зеленым цветом:
Правильно говорить не изменение цвета текста в HTML, а изменение цвета шрифта в HTML. Про
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
По названию
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.
| Имя | Цвет | Код | RGB | HSL | Описание |
|---|---|---|---|---|---|
| white | #ffffff или #fff | rgb(255,255,255) | hsl(0,0%,100%) | Белый | |
| silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Серый | |
| gray | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Темно-серый | |
| black | #000000 или #000 | rgb(0,0,0) | hsl(0,0%,0%) | Черный | |
| maroon | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Темно-красный | |
| red | #ff0000 или #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Красный | |
| orange | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Оранжевый | |
| yellow | #ffff00 или #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Желтый | |
| olive | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Оливковый | |
| lime | #00ff00 или #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Светло-зеленый | |
| green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Зеленый | |
| aqua | #00ffff или #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Голубой | |
| blue | #0000ff или #00f | rgb(0,0,255) | hsl(240,100%,50%) | Синий | |
| navy | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Темно-синий | |
| teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Сине-зеленый | |
| fuchsia | #ff00ff или #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Розовый | |
| purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Фиолетовый |
С помощью RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb , а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
HSL
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.
Рис. 1. Цветовой круг
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
ЦветаПредупреждение
Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Авторы не гарантируют вашей безопасности при их использовании и снимают с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!
Арррргх!
Результат данного примера показан на рис. 2.
Рис. 2. Цвета на веб-странице
В HTML цвет можно задавать тремя способами:
Задание цвета в HTML по его названию
Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:
Цвет текста – красный
Наиболее популярные цвета стандарта Консорциума Всемирной паутины (англ. World Wide Web Consortium, W3C):
| Цвет | Название | Цвет | Название | Цвет | Название | Цвет | Название |
|---|---|---|---|---|---|---|---|
| Black | Gray | Silver | White | ||||
| Yellow | Lime | Aqua | Fuchsia | ||||
| Red | Green | Blue | Purple | ||||
| Maroon | Olive | Navy | Teal |
Пример использования различных цветовых названий:
Пример: задание цвета по его названию
- Попробуй сам »
Заголовок на красном фоне
Заголовок на оранжевом фоне
Заголовок на фоне лайм
Белый текст на синем фоне
Заголовок на красном фоне
Заголовок на оранжевом фоне
Заголовок на фоне лайм
Белый текст на синем фоне
Задание цвета с помощью RGB
При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red) , G — зеленый (green) , В — синий (blue) . Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255. Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:
Пример: Задание цвета с помощью RGB
- Попробуй сам »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Задание цвета по шестнадцатеричному значению
Значения R G B также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки # , например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки # можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.
Пример: Цвет HEX
- Попробуй сам »
красный: #FF0000
зеленый: #00FF00
синий: #0000FF
красный: #FF0000
зеленый: #00FF00
синий: #0000FF
красный+зеленый=желтый: #FFFF00
красный+синий=фиолетовый: #FF00FF
зеленый+синий=голубой: #00FFFF
Список широко распространённых цветов (название, HEX и RGB):
| Английское название | Русское название | Образец | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amaranth | Амарантовый | #E52B50 | 229 | 43 | 80 | |
| Amber | Янтарный | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Сине-зеленый | #00FFFF | 0 | 255 | 255 | |
| Azure | Лазурный | #007FFF | 0 | 127 | 255 | |
| Black | Черный | #000000 | 0 | 0 | 0 | |
| Blue | Синий | #0000FF | 0 | 0 | 255 | |
| Bondi Blue | Вода пляжа Бонди | #0095B6 | 0 | 149 | 182 | |
| Brass | Латунный | #B5A642 | 181 | 166 | 66 | |
| Brown | Коричневый | #964B00 | 150 | 75 | 0 | |
| Cerulean | Лазурный | #007BA7 | 0 | 123 | 167 | |
| Dark spring green | Тёмный весенне-зелёный | #177245 | 23 | 114 | 69 | |
| Emerald | Изумрудный | #50C878 | 80 | 200 | 120 | |
| Eggplant | Баклажановый | #990066 | 153 | 0 | 102 | |
| Fuchsia | Фуксия | #FF00FF | 255 | 0 | 255 | |
| Gold | Золотой | #FFD700 | 250 | 215 | 0 | |
| Gray | Серый | #808080 | 128 | 128 | 128 | |
| Green | Зелёный | #00FF00 | 0 | 255 | 0 | |
| Indigo | Индиго | #4B0082 | 75 | 0 | 130 | |
| Jade | Нефритовый | #00A86B | 0 | 168 | 107 | |
| Lime | Лайм | #CCFF00 | 204 | 255 | 0 | |
| Malachite | Малахитовый | #0BDA51 | 11 | 218 | 81 | |
| Navy | Тёмно-синий | #000080 | 0 | 0 | 128 | |
| Ochre | Охра | #CC7722 | 204 | 119 | 34 | |
| Olive | Оливковый | #808000 | 128 | 128 | 0 | |
| Orange | Оранжевый | #FFA500 | 255 | 165 | 0 | |
| Peach | Персиковый | #FFE5B4 | 255 | 229 | 180 | |
| Pumpkin | Тыква | #FF7518 | 255 | 117 | 24 | |
| Purple | Фиолетовый | #800080 | 128 | 0 | 128 | |
| Red | Красный | #FF0000 | 255 | 0 | 0 | |
| Saffron | Шафрановый | #F4C430 | 244 | 196 | 48 | |
| Sea Green | Зелёное море | #2E8B57 | 46 | 139 | 87 | |
| Swamp green | Болотный | #ACB78E | 172 | 183 | 142 | |
| Teal | Сине-зелёный | #008080 | 0 | 128 | 128 | |
| Ultramarine | Ультрамариновый | #120A8F | 18 | 10 | 143 | |
| Violet | Фиолетовый | #8B00FF | 139 | 0 | 255 | |
| Yellow | Жёлтый | #FFFF00 | 255 | 255 | 0 | |
Коды цветов (фон) по насыщенности и оттенку.
Архивы HTML — ДАЙ СПИСАТЬ
Фронтенд разработка. С чего начать? Каждый начинающий фронтенд разработчик задается только одним вопросом — С чего начать изучение фронтенд разработки. Рассмотрим основные модули, которые нужно необходимо рассмотреть. Итак, приступим HTML5 HTML- язык гипертекстовой разметки, позволяющий представить абсолютно любую информацию на сайте во всевозможных вариациях как со стороны читабельности и понятности, так и с кучей… Читать далее »
Раздел: Web-программирование Метки: CSS, HTML, SEOПсевдоэлемент ::selection Очень часто новички задаются вопросом — Как сделать выделенный текст на сайте мышью другого цвета или поменять цвет его фона Для этого был придуман псевдоэлемент ::selection. Напомним что псевдоэлементом называется ключевое «свойство», которое расширяет возможности наших селекторов или позволяет стилизовать как раз выбранную часть текста на сайте. Ограничением данного псевдоэлемента является то, что не… Читать далее »
Раздел: CSS Метки: CSS, HTMLТаблица кодов цветов для сайта Представляем небольшой набор таблицы кодов цветовой палитры цветов для вашего сайта. Некоторые цветовые решения подобраны для использования одного стиля оформления. Название Отображение R G B HEX HTML Snow Snow 255 250 250 #FFFAFA GhostWhite GhostWhite 248 248 255 #F8F8FF WhiteSmoke WhiteSmoke 245 245 245 #F5F5F5 Gainsboro Gainsboro 220 220… Читать далее »
Раздел: HTML Метки: HTML, таблица цветовИстория тега «бегущая строка» <marquee> Бегущая строка на сайте позволяет обратить внимание пользователя на себя, тем самым привлечь к каким то действиям, например покупке или звонку. Данное внимание позволит организовать ПАРНЫЙ тег <marquee> Синтаксис довольно прост
<marquee>Бегущая строка</marquee>
<marquee>Бегущая строка</marquee> |
Для того что бы бегущая строка была под ваш дизайн нужно задать дополнительные стили. Например:
<marquee style=»color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»>Бегущий текст</marquee>
<marquee style=»color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»>Бегущий текст</marquee> |
Атрибуты тега <marquee> Атрибут… Читать далее »
Раздел: HTML Метки: HTML, тегиТаблица базовых цветов html, В одежде, в радуге, названия цветов
В HTML существуют несколько основных способов представления цветов:- В виде #112233.
Представление в виде трёх пар шестнадцатеричных цифр (Hex triplet), где каждая пара отвечает за свой цвет:
две первые цифры — красный (00 — FF)
две в середине — зелёный (00 — FF)
две последние цифры — синий (00 — FF)Возможно также краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.
Символ # обозначает шестнадцатеричное число (от 000000 до FFFFFF).
- Представление ключевыми словами, например green, black.
Во избежание случаев, когда указанное ключевое слово «не понимается» браузером, следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах. - В виде rgb( *, *, *),
где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета
(красный — Red, зелёный — Green , синий — Blue). - В виде rgba( *, *, *, *),
где первые 3 «*» — компоненты цвета, задающиеся в диапазоне 0 до 255,
а последняя «*» — уровень непрозрачности (альфа-канал), задающийся дробными числами от 0 до 1.
<html>Вариант 2. (тотже цвет бордовый)
<body color=#800000>
1) Данный текст, как и весь остальной текст на всей странице, будет отображаться бордовым цветом.
</body>
<html>
<html>Вариант 3. (тотже цвет бордовый)
<body color=Maroon>
2) Данный текст, как и весь остальной текст на всей странице, будет отображаться бордовым цветом.
</body>
<html>
<html>Вариант 4. (тотже цвет бордовый, но полупрозрачный)
<body color=rgb(128,0,0)>
3) Данный текст, как и весь остальной текст на всей странице, будет отображаться бордовым цветом.
</body>
<html>
<html>
<body color=rgba(128,0,0,0.6)>
4) Данный текст, как и весь остальной текст на всей странице, будет отображаться полупрозрачным бордовым цветом.
</body>
<html>
RGB (аббревиатура английских слов Red, Green, Blue — красный, зелёный, синий) — аддитивная цветовая
модель, которая построена на методе смешение цветов.
Цветовая модель RGB является зависимой от устройства (модели монитора).
Аддитивное смешение цветов:
- добавление красного до зеленого дает желтый;
- добавление красного до синего дает пурпурный;
- добавление зеленого до синего дает голубой;
- добавление всех трех основных цветов дает белый
В HTML определены следующие 16 ключевых цветов.
(В названии цвета можно
использовать как заглавные, так и строчные буквы)
Название цвета | Шестнадцатеричный код |
| white (белый) | #ffffff |
| silver (серебряный) | #c0c0c0 |
| gray (серый) | #808080 |
| black (чёрный) | #000000 |
| red (красный) | #ff0000 |
| maroon (тёмно-бордовый) | #800000 |
| yellow (жёлтый) | #ffff00 |
| olive (оливковый) | #808000 |
| lime (лайм) | #00ff00 |
| green (зелёный) | #008000 |
| aqua (морская волна) | #00ffff |
| teal (сине-зелёный) | #008080 |
| blue (синий) | #0000ff |
| navy (тёмно-синий) | #000080 |
| fuchsia (фуксия) | #ff00ff |
| purple (пурпурный) | #800080 |
Цвета в радуге
Видимый солнечный спектр
7 основных спектральных цветов видны в радуге.
Цвета в радуге расположены в последовательности, соответствующей спектру видимого света.
- Каждый охотник желает знать, где сидит фазан.
- Как однажды Жак-звонарь головой сломал фонарь.
В одежде
10 идеальных цветовых сочетаний
Лучшая бесплатная цветовая палитра Генератор палитр 🎨 — Готовы к использованию или сгенерируйте свои собственные! 🤘
Вы хотите, чтобы ваш бренд сохранял свою индивидуальность? Затем вы должны проверить следующий список генераторов цветовой палитры, которые могут быть полезны для вашего будущего проекта.
Независимо от того, выбираете ли вы яркие, приглушенные или полноцветные цвета, цветовая палитра, которую вы выбираете для своего веб-сайта или приложения, не только делает интерфейс визуально привлекательным, но и помогает раскрыть всю идентичность вашего бренда.Следовательно, необходимо создать идеальное сочетание цветов.
Ну, настроить контраст, насыщенность, яркость, оттенок и т. Д. Сложно и может стать головной болью для дизайнеров. Именно здесь генератор цветовой палитры помогает облегчить нагрузку. Онлайн-генераторы цветовой палитры помогают дизайнерам определить, какие цвета будут идеально сочетаться с их брендом и видением.
Прежде чем перейти к списку, рассмотрим генератор цветовой палитры.
Что такое генератор цветовой палитры?
В основном цветовая палитра — это широкий спектр соответствующих и подходящих цветов, который позволяет вам вручную создавать палитру, которая может использоваться для различных целей дизайна, включая:
- Логотип
- Полная идентификация бренда
- Дизайн сайта
- Мобильные приложения
- Инфографика
Преимущества:
- Делает бренд узнаваемым
- Помогает создавать привлекательные визуальные эффекты и пользовательский интерфейс.
- Помогает завоевать доверие клиентов
- Доставляет послание бренда с помощью подходящих цветов.
В основном есть 4 типа,
- Дополнительные : Дополнительные палитры состоят из цветов, противоположных друг другу в цветовом круге.
- Монохроматический : Монохромные цветовые палитры — это те, которые вы создаете с использованием разных оттенков одного цвета. Их довольно легко сделать. Их обычно используют многие популярные бренды.
- Triadic : Палитры Triadic состоят из трех основных цветов. Эти цветовые палитры лучше всего подходят для создания четко видимого контраста в дизайне.
- Аналог : Аналогичные палитры состоят из цветов, близких друг к другу на цветовом круге. Если вы выберете основной цвет, то цвета рядом с ним можно будет выбрать как второстепенные цвета для этого типа палитр.
Чем это полезно для разработчиков и дизайнеров? 🧐
Будь то дизайнеры или разработчики, такие инструменты, как генераторы цветовой палитры, всегда полезны.Генератор цветовой палитры может быть полезен для выбора идеальной цветовой палитры для наиболее творческого воплощения идеи продукта и быстрого обзора продукта с помощью настройки подходящей цветовой схемы. Это помогает обеспечить визуально привлекательный интерфейс продукта.
Ниже приведены лучшие генераторы цветовой палитры, включающие все упомянутые типы. Вы можете выбрать подходящий и подходящий для вашего будущего проекта. Мы подготовили этот список, чтобы вам не приходилось искать подходящие генераторы палитры тут и там.🙂
1. Coolors: создавайте идеальную палитру или вдохновляйтесь тысячами красивых цветовых схем.
Coolors позволяет организовать ваши палитры в проектах или коллекциях. Здесь их можно найти еще быстрее и проще. Вы можете легко создавать палитры, содержащие меньше или больше пяти цветов. С помощью Collage Maker вы также можете создавать красивые коллажи из вашей фотографии и извлеченной палитры. Есть несколько удивительных стилей, которые могут использовать дизайнеры.Вы также можете создать свой градиент с помощью Gradient Maker.
2. Цвета Muzli: создавайте красивые цветовые схемы, которые работают.
Muzli color — это генератор цветовой палитры и библиотека, в которой вы можете найти множество идей и удивительных цветовых схем. Вы также можете найти лучшие источники вдохновения для веб-дизайна, лучшие веб-сайты, лучшие логотипы, веб-тренды, лучшие мобильные сайты и приложения, минималистичные веб-сайты, бруталистские веб-сайты, инновационные иллюстрации, особенности дизайна, уникальные веб-сайты, фотопроекты и визуальное искусство, а также мнения и статьи экспертов по дизайну в Интернете и со всего мира.
Вы можете загрузить изображение и выбрать цвет или просто выбрать его из опций. Это бесконечный источник идей для дизайнеров и творческих профессионалов.
от InVision
3. Цвета и шрифты: тщательно подобранная библиотека цветов, шрифтов и ресурсов.
С помощью цветов и шрифтов вы можете найти сочетания цветов и типографики, готовые для копирования и вставки одним щелчком мыши, и найти полезные ресурсы для вашего рабочего процесса.Предлагает следующее:
Майк Андреуцца
4. Цветовые коды HTML: получение цветовых кодов HTML, шестнадцатеричных цветовых кодов, значений RGB и HSL с помощью палитры цветов, цветовой диаграммы и названий цветов HTML.
Цветовые коды HTML — это палитра цветов, которая дает вам коды HEX, RGB и HSL, цветовые диаграммы для поиска идеальных комбинаций градиентов, список всех названий цветов HTML и даже коллекцию руководств по HTML и CSS. Это определенно полезный ресурс, который нужно держать под рукой при проектировании!
5.Color Hunt: бесплатная и открытая платформа для вдохновения цветов с тысячами модных цветовых палитр, подобранных вручную.
Color Hunt — это бесплатная открытая платформа для вдохновения цветов с тысячами модных цветовых палитр, подобранных вручную. Color Hunt предлагает тысячи цветовых схем для самых разных целей дизайна и искусства. Цветовые палитры полезны для графических дизайнеров, художников, иллюстраторов, веб-разработчиков, модельеров, маркетологов, дизайнеров интерьера и т. Д.Это действительно помогает получить вдохновение от цвета и найти идеальную палитру для своих проектов. Любой желающий может сохранять свои любимые палитры, управлять своей личной коллекцией и иметь быстрый доступ для копирования цветовых кодов.
6. Список палитр: выберите 2 цвета, которые вам нравятся, и инструмент сгенерирует для вас тысячи палитр.
Список палитр — еще один полезный генератор цветовых палитр. Вы можете выбрать 2 цвета для создания необходимой палитры.Это помогает дизайнерам создавать потрясающие, броские палитры.
7. Плоские цвета пользовательского интерфейса: красивый набор цветовых палитр в различных вариантах.
Flat UI Colors 2 — новейшая версия. Это лучше, чем когда-либо прежде. На самой домашней странице вы найдете 14 различных наборов цветовых палитр, от британских до индийских и других. Он также имеет еще 13 цветовых палитр. Сотрудничая с 13 дизайнерами по всему миру, вы можете скопировать / вставить в ваш следующий проект, дизайн или презентацию общий набор из 280 цветов.В каждой цветовой палитре вы получите около 20 профессиональных цветов, подобранных для вас. Чтобы получить его HEX-код, все, что вам нужно сделать, это нажать «копировать», и все готово. Вы также можете изменить формат экспорта с HEX на RGBA или RGB
.8. Colorsinspo: универсальный ресурс, где можно найти все о цветах.
Colorsinspo — это все в одном ресурсе, чтобы с легкостью найти все о цветах. Кроме того, вы получите бесплатные подарки, вдохновение, инструменты для работы с цветом, градиенты и многое другое.
9. Colorswall: место для хранения цветовых палитр и создания палитры одним щелчком мыши.
ColorsWall — это место для хранения ваших цветовых палитр. Есть фирменные цветовые коды. Здесь вы можете сгенерировать случайную цветовую палитру. Вы можете использовать этот инструмент, чтобы выбрать цвета для вашего сайта.
10. Счастливые оттенки: тщательно подобранные цвета в контексте.
Happy Hues — это сайт для вдохновения цветовой палитры, который служит реальным примером того, как цвета могут быть использованы в ваших дизайнерских проектах.
Маккензи Чайлд
11. Генератор палитры: создавайте новую цветовую палитру при каждом нажатии клавиши пробела.
12. Пигмент: уникальный способ создания свежих и ярких цветов на основе освещения и пигмента.
13. Sipapp: палитра цветов Sip для Mac. Лучший способ собрать и упорядочить цвета
Sipapp — лучший инструмент для сбора, систематизации и обмена цветами.Sip — потрясающее приложение, которое отлично работает на iPhone и Mac. Это приложение позволяет очень быстро создавать цветовые схемы из изображений, а затем сохранять, систематизировать и совместно использовать созданные вами палитры.
14. Гиперцвет
Hypercolor — это тщательно отобранная коллекция красивых готовых градиентов, использующих цвета по умолчанию из палитры Tailwind, а также набор настраиваемых цветовых градиентов. Просто скопируйте фрагменты кода, чтобы использовать их в своих собственных приложениях.
Инструмент
15. Eva Design: Глубокий генератор цвета.
Разделенная на 5 столбцов разных цветов, Eva Design System дает вам большой выбор, когда дело доходит до цветов. В каждом столбце можно найти до 9 различных оттенков выбранного цвета, от светлого до темного. После завершения настройки цветов вы можете экспортировать все схемы в формате JPEG или JSON. Он также доступен для библиотек компонентов Sketch и Figma на основе Eva Design System.
16. Adobe Color: создание цветовых палитр, извлечение градиентов из изображений и т. Д.
Adobe Color — отличный инструмент, который позволяет создавать цветовые палитры с помощью ваших фотографий или с нуля. У него невероятная функциональность и непревзойденная цена. Он имеет множество вариантов настройки.
С помощью цветового круга Adobe вы можете создавать аналоговые, монохромные, триадные, дополнительные и составные цветовые палитры.Он также имеет возможность генерировать разные оттенки одного и того же цвета. Его интерфейс прост и удобен в использовании. Вы можете перемещать само цветовое колесо или ползунки диапазона под ним. Adobe Color CC также имеет цветовую галерею, где вы можете ознакомиться с творениями других дизайнеров.
17. Colorbox: бесплатный веб-сайт для создания набора цветов
17. Color Blender: инструмент, который показывает средние цвета между двумя цветами.
Color Blender не является обычным генератором цветовой палитры, поскольку он генерирует промежуточные точки между двумя цветами.Результат можно использовать как цветовую палитру для любого дизайна. Вы можете установить от 1 до 10 средних точек и получить цвета в формате RGB или шестнадцатеричном формате. Color Blender был создан Эриком Мейером, одним из отцов-основателей адаптивного веб-дизайна.
18. Хрома
Khroma использует ИИ, чтобы узнать, какие цвета вам нравятся, и создает безграничные палитры, которые вы можете искать, открывать и сохранять. Этот инструмент может быть лучшим вариантом для новичков. Когда вы откроете Khroma, вам будет предложено выбрать ваши любимые цвета, а затем продолжить работу с ними.После того, как вы заполнили анкету полностью, вам будут представлены цвета, наиболее подходящие для вашего бренда в соответствии с вашими предпочтениями.
19. Whocanuse
Кто может использовать — это инструмент, который привлекает внимание и помогает понять, как цветовой контраст может влиять на разных людей с нарушениями зрения.
20. Раскрашиваемый
Colorable — это тестер контрастности комбинации цветовых палитр.Возьмите заданную цветовую палитру, и вы получите значения контрастности для каждой возможной комбинации. Контрастность — это разница в яркости или цвете, которая делает объект (или его представление на изображении или дисплее) различимым. При визуальном восприятии реального мира контраст определяется разницей в цвете и яркости объекта и других объектов в том же поле зрения.
21. Colorhexpicker: Инструмент для получения шестнадцатеричного кода вместе с названием цвета.
С помощью инструмента Color Hex Picker вы получите шестнадцатеричный код и значение RGB вместе с названием цвета любого цвета из любого изображения.
22. Изображение-цвет
Дизайнер может найти идеальный цвет HTML с помощью онлайн-палитры цветов Image . Все, что вам нужно сделать, это выбрать понравившийся цвет и щелкнуть по нему, чтобы получить цветовой код в форматах HEX, RGB, HSL и CMYK. Щелкните изображение и перетащите его, чтобы использовать лупу. С помощью этого инструмента вы получите цветовую палитру, соответствующую вашему изображению. Вы можете создавать цветовые комбинации за секунды. Просто поместите свою фотографию на страницу или откройте ее с помощью кнопки «Обзор».Вы также можете загрузить изображение с URL-адреса.
23. Цветной парк
ColorSpark помогает дизайнерам находить уникальные цвета и яркие сочетания градиентов. Этот инструмент генерирует случайные цвета и градиенты, которые могут дать вам идеи для дизайна. Это помогает дизайнерам создавать уникальные и нестандартные конструкции.
24. Калрс
Culrs — это открытая платформа, которая позволяет с особой легкостью выбирать цветовые палитры для вашего приложения.Кроме того, больше нет ручного процесса создания подходящей цветовой палитры, поскольку это уже сделано и представлено пользователю. Цвета подобраны, а палитры составлены из цветов, которые работают вместе, создавая красивые сочетания с учетом цветового круга и теории цвета.
На Culrs имеется более 2000 цветов с рассчитанными шестнадцатеричными кодами, а также простой способ скопировать коды для вашего использования. Когда пользователь нажимает на имя палитры, URL-адрес меняется на пользовательский для этой конкретной палитры, и пользователь может поделиться им с кем угодно.
Цветовые палитры Culrs также полезны для различных приложений в области искусства и дизайна. Вы можете использовать его для разработки продуктов, графического дизайна, веб-разработки, иллюстраций или дизайна одежды, дизайна интерьера и т. Д. Вы всегда найдете правильную цветовую палитру.
25. Дизайн в градациях серого: Генератор цветовой палитры на основе яркости:
Grayscale design — еще один полезный инструмент. Здесь ваши цвета сохраняют те же значения цвета (также известные как яркость), поэтому вы можете теоретически (или фактически) создать сайт в оттенках серого, чтобы получить нужный контраст, а затем поменять местами любой цвет из своей палитры, используя то же значение.
26. Цвет шестигранника
Hex Color — это набор бесплатных цветных инструментов, которые помогут вам выбрать правильный цвет для вашего следующего проекта! Познакомьтесь с несколькими инструментами, которые сделают работу с цветом быстрее и увлекательнее.
Материал
27. Материал: официальный инструмент цветовой палитры материалов Google.
Material — это система проектирования с открытым исходным кодом, которая помогает командам создавать высококачественные цифровые продукты.Вы можете создавать, публиковать и применять цветовые палитры к своему пользовательскому интерфейсу, а также измерять уровень доступности любой цветовой комбинации.
28. Палитра материального дизайна: можно бесплатно выбирать палитры, значки и цвета для материального дизайна.
В палитре материалов , чтобы создать цветовую схему, вы должны выбрать два цвета из показанных плиток. Цветовую палитру, созданную с помощью палитры дизайна материалов, можно загрузить или опубликовать в Твиттере. Помимо палитр, в нем также есть библиотека значков материалов, которая отлично дополняет цвета.
29. Генератор палитры материального дизайна
Material Design Инструмент цвета позволяет быстро и легко создавать или импортировать набор цветов для создания собственной идеальной темы из полностью настраиваемых палитр. После того, как вы создали свою тему, присвойте ей имена и палитры, а затем быстро экспортируйте их в любой интерфейсный фреймворк. В настоящее время экспорт включает JSON и AngularJS Material design с планами поддержки Materialize, CSS, Polymer и многого другого!
Градиент
30.Цветовое пространство: создавайте красивые цветовые палитры из одного цвета.
ColorSpace — еще один простой в использовании генератор палитр, который позволяет создавать цветовые палитры одним щелчком мыши. Все, что вам нужно сделать, это ввести шестнадцатеричный код основного цвета на веб-сайт, а затем нажать кнопку «Создать». Затем инструмент сгенерирует разные стили цветовых палитр вместе с соответствующими градиентами.
31. Охота за градиентами
Gradient Hunt — это бесплатная открытая платформа для вдохновения цветов с тысячами модных цветовых градиентов ручной работы.
32. Веб-градиенты: бесплатный веб-сайт для поиска хороших CSS-градиентов.
Веб-градиенты — это бесплатная коллекция из 180 линейных градиентов, которые вы можете использовать в качестве фона контента в любой части вашего веб-сайта. Легко скопируйте кроссбраузерный код CSS3 и сразу же используйте его! Мы также подготовили версию каждого градиента в формате .PNG. В качестве бонуса есть пакеты для Sketch и Photoshop.
33. Gradienta: чистый код CSS, загрузка JPG, открытый исходный код.
Gradienta позволяет разработчикам использовать сверхлегкие, красочные, адаптивные фоны для своих личных и коммерческих проектов.Его можно использовать бесплатно, с открытым исходным кодом и вообще не требует упоминания или указания авторства. Все эти градиенты доступны в виде кодов CSS, изображений SVG и JPG. Если вы дизайнер, вы можете использовать в своих проектах изображения SVG или JPG. Таким образом, разработчик может использовать все версии CSS / SVG / JPG (даже коды SVG) на веб-сайте или в приложении.
34. Градиенты пользовательского интерфейса: красивые цветовые градиенты для дизайна и кода.
35. CSS-градиент:
CSS Gradient — бесплатный инструмент, который позволяет создавать градиентный фон для веб-сайтов.Помимо того, что сайт является генератором градиентов CSS, сайт также полон красочного контента о градиентах от технических статей до реальных примеров градиентов, таких как Stripe и Instagram.
Марка
36. Цвета бренда. Самая большая коллекция официальных цветовых кодов бренда.
BrandColors — это очень полезный открытый ресурс, где можно позаимствовать вдохновение. В нем собрана огромная коллекция цветовых кодов официальных брендов, из которых вы можете черпать идеи и придумывать свои собственные.Это здорово, когда вы исчерпываете свои творческие способности и хотите, чтобы что-то снова зажгло его.
В ней более 600 фирменных цветов, и коллекция продолжает расти. Кроме того, известные издатели, такие как Smash Magazine и Tuts +, неоднократно рекламировали их.
37. Палитры брендов: цветовые коды и палитры логотипов.
Палитры брендов — отличный инструмент, который дает вам правильные указания, какой цвет вам выбрать, предоставляя вам аналогию цветов; бренды используют.Здесь вы можете выбрать любой бренд и увидеть, какой цвет используется в дизайне логотипа. Это даст вам представление о выборе цвета для логотипа вашей компании.
38. ColorsUI: популярные цветовые палитры
Цвета UI — это хорошая коллекция из более чем 1000 цветовых палитр. Выберите идеальную цветовую палитру для проекта своей следующей мечты. Существуют такие параметры, как оттенок и оттенок, цвета материалов, сплошные цвета пользовательского интерфейса. Также вы можете создавать палитры вручную.
39. Аниматли:
Неограниченное количество интерактивных, анимированных иконок и иллюстраций. animatly.io кардинально меняет правила игры в Интернете, приложениях и презентациях
40. Поддонник
Это самый быстрый и простой способ создавать профессиональные палитры из одного цвета.
Заключение:
Что ж, цвет — это один из самых мощных элементов дизайна, который появится на вашем веб-сайте или на веб-сайте вашего клиента.Он способен передать индивидуальность бренда, не сказав ни единого слова, а также влияет на впечатление потребителя о компании или продукте за считанные секунды. Учитывая потенциал такого огромного воздействия, стоит потратить время, чтобы исследовать мир цвета и тщательно выбирать схему для каждого дизайна.
Для выбора подходящего цвета вам необходимо иметь правильное представление о дизайне и различные инструменты для работы с цветом, которые могут во многом помочь вам в создании лучших визуальных эффектов.Вам также необходимо подумать о маркетинговых аспектах, прежде чем начать.
Самое главное, вам нужно найти основной цвет, который наиболее эффективно передает ваше сообщение вашей аудитории. После этого вы можете быстро создать подходящие цвета, используя генераторы цветовой палитры, упомянутые в этой статье.
Мы постарались охватить здесь все лучшие генераторы цветовой палитры, хотя, возможно, мы упустили некоторые из них. Если вы используете какой-либо другой генератор из этого списка, предложите его нам.Также сообщите нам, какой из них вам больше всего нравится из списка в разделе комментариев.
О нас
Мы, в ThemeSelection, обеспечиваем отборный высококачественный современный дизайн, профессиональный и простой в использовании премиальный и бесплатный шаблон администрирования начальной загрузки, а также комплекты пользовательского интерфейса.
Вы можете проверить Chameleon Free Bootstrap Admin Template , в котором использовались упомянутые источники.
Кроме того, не забудьте подписаться на нас в Facebook и Twitter, чтобы получать больше статей и контента, связанных с передовым веб-дизайном и разработкой.
25+ эстетических цветовых палитр для любой эстетики
Если вы хотите создать доску настроения или создать свой собственный дизайн, вдохновляйтесь этими эстетическими цветовыми палитрами — от десятилетий до цветовой эстетики и субкультур.
Если вы ищете эстетичные шрифты в сочетании с эстетической цветовой палитрой, ознакомьтесь с нашим списком самых эстетичных шрифтов! Мы также опубликовали пост об эстетических идеях для домашнего экрана iOS, если вы ищете какой-нибудь макет.
Хотите больше эстетических идей и советов? Подпишитесь на наш список рассылки, чтобы получать идеи прямо на ваш почтовый ящик
Цветовая палитра Vaporwave
Пастель и неон создают яркую палитру, напоминающую Майами Вайс.
Шестнадцатеричные коды: # A653F5 | # 8F8CF2 | # 65B8BF | # F96CFF | # FA92FB.
Фото Йоко Хонда
Цветовая палитра Lofi Aesthetic
Цветовая палитраLofi напоминает волны пара, которые часто можно увидеть на изображениях аниме.Как правило, тона приглушены, создавая ностальгический вид.
Шестнадцатеричные коды: # 674AB3 | # A348A6 | # 9F63C4 | # 9075D8 | # CEA2D7.
Палитра цветов Synthwave Sunset
Поскольку закатное солнце является центральным элементом визуальных эффектов synthwave, золотые и сумеречные оттенки являются основными в этой палитре.
Шестнадцатеричные коды: # 461E52 | # DD517F | # E68E36 | # 556DC8 | # 7998EE.
Цветовая палитра Cyberpunk
Cyberpunk — синоним неона на фоне поздней ночи и гиперфутуристических декораций.
Шестнадцатеричные коды: # 461E52 | # DD517F | # E68E36 | # 556DC8 | # 7998EE.
Автор фото @skiegraphicstudio
Цветовая палитра 80-х
Ничто так не кричит о 80-х, как громкие, яркие цвета и неон.
Шестнадцатеричные коды: # FF68A8 | # 64CFF7 | # F7E752 | # CA7CD8 | # 3968CB.
Цветовая палитра 90-х годов
Палитра90-х отличается более приглушенными и глубокими тонами, чем ее предшественница. Вспомните цвета Gameboy и винтажные ветровки Columbia.
Шестнадцатеричные коды: # FF68A8 | # 64CFF7 | # F7E752 | # CA7CD8 | # 3968CB.
Автор фото @radvxz
Палитра облачных цветов
Мечтательные пастельные тона сахарной ваты в виде небес.
Шестнадцатеричные коды: # F08D7E | # EFA18A | # E2BAB1 | # DDA6B9 | # ACAEC5.
Автор фото @ h.e.n.i
Цветовая палитра Cottagecore
ПалитраCottagecore вдохновлена естественными землистыми тонами.
Шестнадцатеричные коды: # 596854 | # 7F803E | # CC9A52 | # AD794B | # FCE4B4.
Пастельная цветовая палитра Kawaii
Яркие синие и розовые тона — главные составляющие палитры каваи.
Шестнадцатеричные коды: #BEFCFF | #DEFFFA | # FFDAF5 | # B0E1FF | # E6C6FF.
Автор фото @mmoriqomm
Палитра цветов Ocean
Синие оттенки для голубой воды.
Шестнадцатеричные коды: # 18363E | # 5F97AA | # 2D5F6E | # 3E88A5 | # 93C4D1
Цветовая палитра растений
Fifty пять оттенков зеленого.
Шестнадцатеричные коды: # 2D4030 | # 49684C | # 5D7F61 | # 6B8E6E | # 97B299
Летняя палитра цветов
Ничто так не говорит о закате и летних ночах, как эти оранжевые и пурпурные оттенки.
Шестнадцатеричные коды: # C6808C | # 6D5B87 | # 44364B | # EC745C | # F5AD8C
Палитра эстетических цветов VSCO
Цветовая схема VSCO очень напоминает 90-е, но с современной интерпретацией. Вы можете поймать любой из этих цветов на сумке Fjällräven.
Шестнадцатеричные коды: # FFB600 | # 44A9CC | # EB563A | # F4B998 | # 50BCB9.
Бежевая эстетическая палитра цветов
Бежевые шестнадцатеричные коды: # AA9D94 | # BBADA1 | # D2C1B3 | # E7D7CB | # F7EDE2
Палитра Peach Aesthetic Color
Персик шестнадцатеричные коды: # E3826F | # E4A9A4 | # EFBA97 | # F1CCBB | # E7D5C7
Серая эстетическая палитра цветов
Шестнадцатеричные коды серого: # 605EF | # 7E7D7F | # 8E8E8E | # A9A8AA | # B8B8BC
Коричневая эстетическая палитра цветов
Коричневый шестнадцатеричный код: # 66422D | # 966045 | # B26E4B | # C7976F | # EBD2BC
Желтая эстетическая палитра цветов
Желтые шестнадцатеричные коды: # C56A1D | # D18623 | # D3982F | # E8C539 | # F4D44E
Розовая эстетическая палитра цветов
Один из самых популярных цветов с точки зрения эстетики.Может использоваться практически для чего угодно и несколько раз встречаться в темах значков приложений iPhone.
Розовые шестнадцатеричные коды: # D84F74 | # EA79A3 | # EE8EA5 | # F7BAD3 | # F7DAE8
Белая эстетическая палитра цветов
Белые шестнадцатеричные коды: # D1D1D1 | # E1DBD6 | # E2E2E2 | # F9F6F2 | #FFFFFF
Автор фото @mascaraqueart
Красная эстетическая палитра цветов
Красные шестнадцатеричные коды: # 4B1517 | # 7C1715 | # 9E1C29 | # AB2838 | # B84656
Фото Versace
Синяя эстетическая палитра цветов
Синие шестнадцатеричные коды: # 20498A | # 3D6FAD | # 4A88C5 | # 88AEDB | # BBDAF2
Пурпурная эстетическая палитра цветов
Пурпурный шестнадцатеричный код: # 5A2555 | # 5D2A7B | # 7948A2 | # A063C8 | # BE8CE5
Автор фото @firehflies
Зеленая эстетическая палитра цветов
Если вам нравится зеленый цвет, у нас есть целая зеленая эстетическая доска настроения со всем, что вам нужно — проверьте это!
Зеленые шестнадцатеричные коды: # 28662B | # 2A8636 | # 43AA47 | # 81C953 | # 97E589
Автор фото @emilyoberg
Оранжевая эстетическая палитра цветов
Оранжевый шестнадцатеричный код: # AA3815 | # BC4D1D | # D36833 | # ED7D51 | # EFA17F
Черная эстетическая палитра цветов
Черные шестнадцатеричные коды: # 0F0E11 | # 23252D | # 2B2D35 | # 3A3C44 | # 46484F
Автор фото @black
Не хватает эстетической цветовой палитры? Дайте нам знать в комментариях ниже, какие цветовые схемы мы должны добавить в список!
Шестнадцатеричные коды названных цветов, используемых на страницах HTML,
The Mobile Hex Hub Blues: бирюзово-голубой
Нужен мобильный? Существует мобильная версия этих цветовых диаграмм.Blues: бирюзово-голубой голубой
Вы здесь
В таблице ниже показаны шестнадцатеричные коды цветов для оттенков синего, бирюзового, голубого и подобных цветов. Эта страница является частью Hex Hub сайта Color Spot на HTML Station. Вы можете использовать краткую справочную таблицу, чтобы выбрать одну из множества других доступных цветовых таблиц или увидеть значение этикеток (Safe 16 SVG Hex3).
Вы можете использовать разные форматы одной и той же информации. (Чтобы проголосовать за эту версию, поделитесь этой ссылкой: )
расширенная версия /
компактная версия
/ Мобильная версия
| azure4 | # 838B8B | светлый голубой4 | # 7A8B8B | azure3 | # C1CDCD | 907 pale63 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 907 pale63 | ||||||||||||||||
| 907 pale63 | ||||||||||||||||
| светлый | darkslategray (SVG-) | # 2F4F4F + | ||||||||||||||
| darkslategrey (SVG-) | # 2F4F4F + | cadetblue + | # 5F9F9F + | светло-голубой | # C0D9D9 + | |||||||||||
| darkslategray4 | # 528B8B | azure2 | # E0EEEE | paleturquoise3 | # 96CDCD | |||||||||||
| sgiteal | # 388E8E | darkslategray3 | # 79CDCD | света cyan2 | # D1EEEE | голубой | # 8FD8D8 | голубой (Safe Hex3) | # 66CCCC | бирюзовый | #ADEA | |||||
| paleturquoise (SVG) | #AFEEEE | |||||||||||||||
| darkslategray2 | # 8DEEEE | металлический мятный | FC907 907 907 907 907 | 907 907 | 907 | 907 907 | ||||||||||
| darkcyan (SVG) | # 008B8B | cyan3 | # 00CDCD | cyan2 (Hex3) | # 00EEEE | голубой (Safe 16 = aqua SVG Hex3) | # 00FFFF | darkslategray1 | # 97FFFF | |||||||
| палитра бирюзовый1 (Hex3) | #BBFFFF | светло-голубой (SVG) | # E0FFFF | лазурный (SVFFG) | 907лазурный (SVFFG) | 907# 00CED1 | cadetblue (SVG) | # 5F9EA0 | бирюзовый4 | # 00868B | ||||||
| 007 907 907 907 907 907 907 907 907 907 905 бирюзовый | # 00F5FF | |||||||||||||||
| плавательный бассейн | # 67E6EC | fenway monster | # 4A777A | бирюзовый светодиод | FF # # синийстарая медь | # 73B1B7 | indiglo | 90 745 # 05E9FF|||||||||
| cadetblue3 | # 7AC5CD | cadetblue2 | # 8EE5EE | небесно | # 05B8CC | |||||||||||
| cadetblue1 | # 98F5FF | powderblue (SVG- ) | # B0E0E6 | пастельно-голубой | # C1F0F6 | |||||||||||
| синий nypd | # 39B7CD | 907 457 907 657 907 907 907 907 907 907 907 907 904 907 907 907 907 904 907 907 907 | ||||||||||||||
| Яйцо Робинса | # C3E4ED | светло-голубой4 | # 68838B | прибой | # 63D1F4 | |||||||||||
| 7 907AC | 907AC | голубой (SVG) | # ADD8E6 | |||||||||||||
| голубой2 | # B2DFEE | deepskyblue4 | # 00688B | deepskyblue3 | # 009ACD | # 009ACD | # 00B2EE | deepskyblue (SVG) | # 00BFFF | |||||||
| голубой1 | #BFEFFF | павлин | 907 907 907 507 907 907 907 907 907 907 907 507 907 907 907 507 907 907 907 907 907 904 907 907 907 507 907 907 907 907 907 907 907 907 907||||||||||||||
| skyblue (SVG) | # 87CEEB | Summersky | # 38B0DE | полицейский строб | # 0BB5FF | |||||||||||
| карибский синий | каролина синий | # 539DC2 | 9 0749||||||||||||||
| Steelblue | # 236B8E | skyblue6 | # 3299CC | топаз | # 0198E1 | # 0198E1 | Тихоокеанский синий | # 35586C | ||||||||
| синяя губка | # 5D92B1 | светлый небесно-голубой3 | # 8DB6CD | светлые глаза | 907 457 907 456 907 | # A4D3EE | голубой туман | # 82CFFD | неоновый синий | # 67C8FF | ||||||
| светлый голубой1 | 907FF45 # 67C8FF 907 87FF45 # синий 9046 B0E2голубой3 | # 6CA6CD | 9076 3 | |||||||||||||
| skyblue4 | # 4A708B | лазурно-голубой | # 9BC4E2 | skyblue2 | # 7EC0EE | 907 907 907 907 Skyblue 907 907 907 907 907 907 904 907 907 907 907 904 907 907 907 907 907 904 907 907 907 907 907 907 907 | Lake Huron | # 5D7B93 | ||||||||
| синий кит | # 42647F | steelblue (SVG) | # 4682B4 | #90b750 | blue | 90b750 | blue 9045 # 5CACEE | steelblue1 | # 63B8FF | blue dog | # 525C65 | |||||
| steelblue4 | # 36648B | синий | синий | синий | синий | синий | синий | синий | синий # 74BBFB | |||||||
| aliceblue (SV G) | # F0F8FF | аквамарин | # 4E78A0 | краситель индиго | # 0D4F8B | |||||||||||
| сланец (SVG) 708090 | Lightslategrey (SVG Hex3) | # 778899 | ||||||||||||||
| Lightslategray (SVG Hex3) | # 778899 | Lake Egray3 | 7 | Lake Egray | 77 | 6 | 7467||||||||||
| sgilight синий | # 7D9EC0 | dodgerblue4 | # 104E8B | dodgerblue3 | # 1874CD | |||||||||||
| dodgerblue2 | # 1C86EE | La Maison Bleue | # 60AFFE | голубой | # 007FFF | dodgerblue (SVG) | # 1E90FF | slategray4 | # 6C7B8B | голубой вереск | # B7C3D0 | # B7C3D0 | 907ACсиний | синий | голубой | slategray2 | # B9D3EE |
| синее ведро | # 499DF5 | slategray1 | # C6E2FF | 907 907 907 907 907 907 907 907 907 907 907 907 907 907 907 907 457 cat 907 907 907 457 907 907 907 907 907 907 907 907 907 907 907 907 907 907 45 # 7AA9DD | синий Пикассо | # 0276FD | синий знак | # 003F87 | ||||||||
| светло-голубой | ||||||||||||||||
| светло-голубой | # 6E7B849 сталь | 907 907 907 907 907 907 907 907 907 907# A2B5CD | ||||||||||||||
| # 4372AA | голубой паук | # 26466D | павлин | # 1D7CF2 | ||||||||||||
| голубой тунец | синий тунец | голубой кукуруза | Cсиний камень | # 50729F | ||||||||||||
| синяя птица | # 4973AB | lightsteelblue (SVG) | # B0C4DE | # B0C4DE | b 902 907 907 907 907 907 907 907 синий 9046 # BCD2EE | незабудки | # 7EB6FF | светло-голубой1 | # CAE1FF | |||||||
| озеро онтарио | ||||||||||||||||
| озеро онтарио | # 4D71749 синий 9050 | 749 синий749 907 907 907 907 коньковый мтнс# 4981CE | ||||||||||||||
| синий c ow | # 88ACE0 | химический костюм | # 5993E5 | большой синий автобус | # 3A66A7 | |||||||||||
| попугай | # 357949ED | синий | синие джинсы | # 42526C | ||||||||||||
| минтай синий | # 4D6FAC | синий YInMn | # 2E5090 | SVO745 SVO290 2E5090 | SVO462 SVO2 | # 6495ED | Нептун | # 6D9BF1 | природный газ | # 5B90F6 | ||||||
| ulysses dark blue | 9045 907 907 907 907 синий 9046 | # 7093DB | ||||||||||||||
| небо аляски 907 46 | # 1B3F8B | свежая черника | # 5971AD | ty nant | # 0147FA | |||||||||||
| кобальт | ||||||||||||||||
| кобальт | # 3D59ABblue | королевский синий# 3A5FCD | ||||||||||||||
| royalblue (SVG) | # 4169E1 | royalblue2 | # 436EEE | cichlid 00746EF | 7 | EFалюминий | # A9ACB6 | delft | # 22316C | |||||||
| синий бархат | # 162252 | синий виноград | 7 907 907 907 907 907 907 907 907 907 907 907 907 907 907 907 904 907 907 907 907 907 907||||||||||||||
| дельфин | # 6F7285 | синий nikko | # 838EDE | серебристый | # E6E8FA | |||||||||||
| синий нильский | # 7D7F94 | витраж 907 246 507 907 907 907 907 907 907 907 907 907 907 907 907 907 907 907 907 907 907 | ||||||||||||||
| васильковый | # 42426F | светло-голубой | # 8F8FBC | richblue | # 5959AB |
| sgislate blue | # 7171C6 | кварцевый | # D9D9F3 | темно-синий | # 23238E | темно-синий | # 23238E | средний 9045 # 23238E | midnightblue (SVG) | # 1 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| lavender (SVG) | # E6E6FA | midnightblue2 (Safe Hex3) | # 000049 navy 000080 | |||||||||||||||||
| темно-синий (SVG) | # 00008B | newmidnightblue | # 00009C | синий (SVG) | EE 907 907синий (Safe 16 SVG Hex3) | # 0000FF | royalblue (Safe Hex3) 90 746 | # 3333FF | ||||||||||||
| neonblue | # 4D4DFF | кобальт (безопасный Hex3) | # 6666FF | барвинок 467FF | periwinkle467 907×3 | белый (He7x3) | барвинок 467 (He7x3) | белый (He7x3) | 907FF 467 907A3 ) | #CCCCFF | белый призрак (SVG) | # F8F8FF | кюрасао | # 5B59BA | ||||||
| 1207 457 307468 907 907 907 907 907 ультрамарин | 8 907 45 907 907 907 907 904 907 907 904 907 904 907 904 907 907 467темно-синий (SVG) | # 483D8B | ||||||||||||||||||
| синий шифер4 | # 473C8B | платье синий | синий цвет | # 3B3178 | синий 907 SV3178 | синий 907 SV3178 | синий 907 SV3178 | синий | # 6959CD | голубой2 | # 7A67EE | 9075 0 | голубой шифер1 | # 836FFF | ||||||
| голубой грифель | # 8470FF | голубой шифер (SVG) | # 7B68EE | FFсредний фиолетовый4 | # 5D478B | средний фиолетовый2 | # 9F79EE | средний фиолетовый3 | # 8968CD | |||||||||||
| среднефиолетовый 9077777 | синий сейф (Safe Hex3) | # 6600FF | ||||||||||||||||||
| синий глубокий | # 380474 |
Web | Руководство по бренду университета
Цвета ниже предназначены для цифровых экранных материалов.Предусмотрены как значения RGB, так и HEX-коды. Каждый дисплей отличается, поэтому на разных устройствах могут быть небольшие различия.
Ознакомьтесь с разделом «Использование цвета в Интернете», чтобы узнать о передовых методах использования цвета на веб-сайтах.
Акцентные цвета (использовать с осторожностью)
ШЕСТИГРАННЫЙ FCE300
R-252
G-227
В-0
ШЕСТИГР. E4002B
R-228
G-0
В-43
ШЕСТИГР. 732F2F
R-115
G-47
В-47
Пропорции цвета
Основная цветовая палитра является основой общей цветовой схемы.Эгги Марун всегда должна быть заметна. Вторичные цвета используются в меньшей пропорции и никогда не должны подавлять основные цвета. Акцентные цвета используются в небольших количествах, чтобы выделить или сбалансировать композиционные элементы.
Палитра функций
Эти цвета следует использовать только для веб-функций, перечисленных ниже.
Сообщения об ошибках и успешном выполнении
ШЕСТИГР. E4002B
R-228
G-0
В-43
См. Перо Коллекция кнопок от TAMU MarComm (@tamumarcomm) на CodePen.
Выбор цветовой палитры — документация seaborn 0.11.1
Seaborn упрощает использование цветов, которые хорошо подходят для характеристик ваших данных и ваших целей визуализации. В этой главе обсуждаются как общие принципы, которыми вы должны руководствоваться, так и инструменты в seaborn, которые помогут вам быстро найти лучшее решение для конкретного приложения.
Общие принципы использования цвета на графиках
Компоненты цвета
Из-за того, как работают наши глаза, конкретный цвет можно определить с помощью трех компонентов.Обычно мы программируем цвета на компьютере, указывая их значения RGB, которые устанавливают интенсивность красного, зеленого и синего каналов на дисплее. Но для анализа перцептивных атрибутов цвета лучше думать о оттенках , насыщенности и яркости каналов.
Оттенок — это компонент, который различает «разные цвета» в нетехническом смысле. Именно свойство цвета приводит к именам первого порядка, таким как «красный» и «синий»:
Насыщенность (или цветность) — это цветность .Два цвета с разными оттенками будут выглядеть более отчетливо, когда у них будет больше насыщенности:
А яркость соответствует тому, сколько света излучается (или отражается для печатных цветов), в диапазоне от черного до белого:
Различный оттенок для разделения категорий
Если вы хотите представить несколько категорий на графике, вы обычно должны изменять цвет элементов. Рассмотрим этот простой пример: на каком из этих двух графиков легче подсчитать количество треугольных точек?
На графике справа оранжевые треугольники «выскакивают», что позволяет легко отличить их от кругов.Этот всплывающий эффект возникает из-за того, что наша визуальная система отдает предпочтение цветовым различиям.
Синий и оранжевый цвета в основном различаются по оттенку. Оттенок полезен для представления категорий: большинство людей относительно легко могут различать умеренное количество оттенков, и точки, которые имеют разные оттенки, но одинаковую яркость или интенсивность, кажутся одинаково важными. Это также упрощает обсуждение сюжетов. Рассмотрим этот пример:
Большинство людей смогут быстро определить, что на графике слева есть пять различных категорий, и, если их попросят охарактеризовать «синие» точки, смогут это сделать.
На графике справа, где все точки синие, но различаются по яркости и насыщенности, труднее сказать, сколько уникальных категорий присутствует. А как мы можем говорить о конкретной категории? «Довольно-но-не слишком-синие точки?» Более того, кажется, что серые точки уходят на задний план, делая их менее яркими по сравнению с более яркими синими точками. Если категории одинаково важны, это плохое представление.
Итак, как правило, используйте изменение оттенка для представления категорий.С учетом сказанного, вот несколько предупреждений. Если у вас более чем несколько цветов на вашем графике, может стать трудно помнить, что каждый из них означает, если не существует ранее существовавших ассоциаций между категориями и цветами, используемыми для их представления. Это усложняет интерпретацию вашего сюжета: вместо того, чтобы сосредотачиваться на данных, зритель должен будет постоянно обращаться к легенде, чтобы понять, что показано. Поэтому не следует делать слишком сложные сюжеты. И помните, что не все видят цвета одинаково.Изменение формы (или какого-либо другого атрибута) и цвета может помочь людям с аномальным цветовым зрением понять ваши сюжеты, и это может сделать их (в некоторой степени) интерпретируемыми, если они напечатаны в черно-белом цвете.
Изменение яркости для представления чисел
С другой стороны, вариации оттенка плохо подходят для представления числовых данных. Рассмотрим этот пример, где нам нужны цвета для представления подсчетов на двумерной гистограмме. Слева мы используем круговую цветовую карту, где постепенные изменения количества наблюдений в каждой ячейке соответствуют постепенным изменениям оттенка.Справа мы используем палитру, в которой используются более яркие цвета для представления ящиков с большим количеством:
С палитрой на основе оттенков довольно сложно определить форму двумерного распределения. В отличие от этого, палитра яркости делает более ясным наличие двух выступающих пиков.
Изменение яркости помогает увидеть структуру данных, а изменения яркости более интуитивно обрабатываются как изменения важности. Но на графике справа не используется палитра в оттенках серого.Его красочность делает его более интересным, а тонкое изменение оттенка увеличивает расстояние восприятия между двумя значениями. В результате небольшие разницы немного легче устранить.
Эти примеры показывают, что выбор цветовой палитры — это больше, чем просто эстетика: цвета, которые вы выбираете, могут выявить закономерности в ваших данных при эффективном использовании или скрыть их при неправильном использовании. Не существует одной оптимальной палитры, но есть палитры, которые лучше или хуже подходят для определенных наборов данных и подходов к визуализации.
И эстетика имеет значение: чем больше люди хотят смотреть на ваши фигуры, тем больше шансов, что они чему-то у них научатся. Это верно даже тогда, когда вы строите сюжеты для себя. Во время исследовательского анализа данных вы можете получить много похожих цифр. Изменение цветовых палитр добавит ощущения новизны, что позволит вам заинтересоваться и подготовиться к тому, чтобы замечать интересные особенности ваших данных.
Так как же выбрать цветовые палитры, которые хорошо представляют ваши данные и выглядят привлекательно?
Качественные цветовые палитры
Качественные палитры хорошо подходят для представления категориальных данных, поскольку большая часть их вариаций заключается в компоненте оттенка.Цветовая палитра по умолчанию в seaborn — это качественная палитра с десятью различными оттенками:
Эти цвета имеют тот же порядок, что и цветовая палитра matplotlib по умолчанию, "tab10" , но они немного менее интенсивны. Сравнить:
sns.color_palette ("tab10")
Seaborn фактически имеет шесть вариантов палитры matplotlib: глубокий , приглушенный , пастельный , яркий , темный и дальтоник .Они охватывают диапазон средних значений яркости и насыщенности:
Многие люди находят умеренные оттенки стандартной палитры "deep" эстетически приятными, но они также менее различимы. В результате их может быть труднее различать в некоторых контекстах, о чем следует помнить при создании графики публикации. Это сравнение может быть полезно для оценки того, как работают цветовые палитры морского окраса при имитации различных форм цветовой слепоты.
Использование круговых цветовых систем
Когда у вас есть произвольное количество категорий, самый простой подход к поиску уникальных оттенков — это рисование равномерно распределенных цветов в круговом цветовом пространстве (в котором оттенок изменяется при сохранении постоянной яркости и насыщенности). Это то, что по умолчанию использует большинство функций seaborn, когда им нужно использовать больше цветов, чем в настоящее время установлено в цветовом цикле по умолчанию.
Наиболее распространенный способ сделать это — использовать цветовое пространство hls , которое представляет собой простое преобразование значений RGB.Мы видели эту цветовую палитру раньше как контрпример для построения гистограммы:
sns.color_palette ("hls", 8)
Из-за того, как работает зрительная система человека, цвета, которые имеют одинаковую яркость и насыщенность с точки зрения их значений RGB, не обязательно будут выглядеть одинаково интенсивно. , что обеспечивает меньшее изменение интенсивности при вращении цветового круга:
sns.color_palette ("Husl", 8)
Когда seaborn нужна категориальная палитра с большим количеством цветов, чем доступно в текущем значении по умолчанию, он будет использовать этот подход.
Использование категориальных палитр Color Brewer
Еще одним источником визуально приятных категориальных палитр является инструмент Color Brewer (который также имеет последовательные и расходящиеся палитры, как мы увидим ниже).
sns.color_palette ("Set2")
Имейте в виду, что качественные палитры Color Brewer имеют разную длину, и по умолчанию color_palette () дает вам полный список:
sns.color_palette («Парный»)
Последовательные цветовые палитры
Второй основной класс цветовых палитр называется «последовательные».Этот вид сопоставления подходит, когда данные варьируются от относительно низких или неинтересных значений до относительно высоких или интересных значений (или наоборот). Как мы видели выше, основным параметром изменения последовательной палитры является яркость. Некоторые функции seaborn по умолчанию будут использовать последовательную палитру при отображении числовых данных. (По историческим причинам как категориальные, так и числовые сопоставления указываются с помощью параметра hue в таких функциях, как relplot () или displot () , хотя числовые сопоставления используют цветовые палитры с относительно небольшими вариациями оттенков).
Палитры, однородные по восприятию
Поскольку они предназначены для представления числовых значений, наилучшие последовательные палитры будут перцептивно однородными , что означает, что относительная различимость двух цветов пропорциональна разнице между соответствующими значениями данных. Seaborn включает в себя четыре одинаковых по восприятию последовательных цветовых карты: «ракета» , «мако» , «вспышка» и «гребень» . Первые два имеют очень широкий диапазон яркости и хорошо подходят для таких приложений, как тепловые карты, где цвета заполняют пространство, в которое они наносятся:
sns.color_palette ("ракета", as_cmap = True)
sns.color_palette ("мако", as_cmap = True)
Поскольку крайние значения этих цветовых карт приближаются к белому, они не подходят для раскрашивания элементов, таких как линии или точки: будет трудно различить важные значения на белом или сером фоне. Для таких графиков лучше всего подходят цветовые карты «блики» и «гребни». У них более ограниченный диапазон вариаций яркости, который они компенсируют чуть более выраженным изменением оттенка.Направление яркости по умолчанию также меняется на противоположное, так что меньшие значения имеют более светлые цвета:
sns.color_palette ("блики", as_cmap = True)
sns.color_palette ("гребень", as_cmap = True)
Также можно использовать перцептуально однородные цветовые карты, предоставляемые matplotlib, такие как «magma» и «viridis» :
sns.color_palette ("магма", as_cmap = True)
sns.color_palette ("viridis", as_cmap = True)
Как и в случае с matplotlib, каждая непрерывная цветовая карта имеет перевернутую версию с суффиксом "_r" :
sns.color_palette ("rocket_r", as_cmap = True)
Дискретное и непрерывное отображение
Следует помнить, что seaborn может генерировать дискретные значения из последовательных цветовых карт и при этом не будет использовать самые экстремальные значения. Сравните дискретную версию «ракета» с непрерывной версией, показанной выше:
sns.color_palette («ракета»)
По сути, seaborn использует дискретную версию для категориальных данных и непрерывную версию в режиме числового отображения.Дискретные последовательные цветовые карты могут хорошо подходить для визуализации категориальных данных с внутренним упорядочением, особенно если есть некоторые вариации оттенков.
Последовательные палитры «cubehelix»
Воспринимаемые однородные цветовые карты сложно сгенерировать программно, поскольку они не основаны на цветовом пространстве RGB. Система cubehelix предлагает компромисс на основе RGB: она генерирует последовательные палитры с линейным увеличением или уменьшением яркости и некоторым непрерывным изменением оттенка.Несмотря на то, что полученные цветовые карты не являются идеально однородными, они обладают многими хорошими свойствами. Важно отметить, что многие аспекты процесса проектирования можно параметризовать.
В Matplotlib встроена версия cubehelix по умолчанию:
sns.color_palette ("cubehelix", as_cmap = True)
Палитра по умолчанию, возвращаемая функцией seaborn cubehelix_palette () , немного отличается от палитры по умолчанию matplotlib тем, что она не вращается так далеко вокруг колеса оттенка и не покрывает широкий диапазон интенсивностей.Он также меняет яркость на противоположную:
sns.cubehelix_palette (as_cmap = True)
Другие аргументы cubehelix_palette () управляют внешним видом палитры. Вы измените два основных параметра: start (значение от 0 до 3) и rot или количество оборотов (произвольное значение, но обычно от -1 до 1)
sns.cubehelix_palette (начало = .5, rot = -. 5, as_cmap = True)
Чем больше вы поворачиваете, тем больше вариаций оттенков вы увидите:
sns.cubehelix_palette (начало = .5, rot = -. 75, as_cmap = True)
Вы можете контролировать, насколько темными и светлыми будут конечные точки, а также их порядок:
sns.cubehelix_palette (start = 2, rot = 0, dark = 0, light = .95, reverse = True, as_cmap = True)
color_palette () принимает строковый код, начинающийся с "ch:" , для создания произвольной палитры cubehelix. Вы можете передать названия параметров в строку:
sns.color_palette ("ch: start = .2, rot = -.3 дюйма, as_cmap = True)
А для компактности каждый параметр можно указать своей первой буквой:
sns.color_palette ("ch: s = -. 2, r = .6", as_cmap = True)
Пользовательские последовательные палитры
Для упрощения интерфейса с настраиваемыми последовательными палитрами вы можете использовать light_palette () или dark_palette () , которые оба засеваются одним цветом и создают палитру, которая изменяется от светлых или темных ненасыщенных значений к этому цвету:
sns.light_palette ("seagreen", as_cmap = True)
sns.dark_palette ("# 69d", reverse = True, as_cmap = True)
Как и в случае с палитрами cubehelix, вы также можете указать светлую или темную палитру с помощью color_palette () или в любом другом месте палитра принимается:
sns.color_palette ("свет: b", as_cmap = True)
Поменяйте цветовую карту на противоположную, добавив "_r" :
sns.color_palette ("dark: salmon_r", as_cmap = True)
Палитры Sequential Color Brewer
В библиотеке Color Brewer также есть несколько хороших вариантов для последовательных палитр.Они включают палитры с одним основным оттенком:
. sns.color_palette ("Блюз", as_cmap = True)
Наряду с многоцветными вариантами:
sns.color_palette ("YlOrBr", as_cmap = True)
Различные цветовые палитры
Третий класс цветовых палитр называется «расходящиеся». Они используются для данных, в которых интересны как большие низкие, так и высокие значения, которые охватывают среднее значение (часто 0), которое следует уменьшить. Правила выбора хороших расходящихся палитр аналогичны хорошим последовательным палитрам, за исключением того, что теперь на палитре должны быть два доминирующих оттенка, по одному на (или около) каждого полюса.Также важно, чтобы начальные значения были одинаковой яркости и насыщенности.
Единообразные по восприятию диверсные поддоны
Seaborn включает в себя две расходящиеся палитры, однородные по восприятию: "vlag" и "icefire" . Оба они используют синий и красный на своих полюсах, которые многие интуитивно воспринимают как «холодный» и «горячий»:
sns.color_palette ("vlag", as_cmap = True)
sns.color_palette ("ледяной огонь", as_cmap = True)
Индивидуальные расходящиеся палитры
Вы также можете использовать функцию seaborn diverging_palette () , чтобы создать настраиваемую цветовую карту для расходящихся данных.Эта функция создает расходящиеся палитры с использованием цветовой системы Husl . Вы передаете ему два оттенка (в градусах) и, необязательно, значения яркости и насыщенности для крайних значений. Использование Husl означает, что экстремальные значения и результирующие линейные изменения к средней точке, хотя и не являются идеально однородными с точки зрения восприятия, будут хорошо сбалансированы:
sns.diverging_palette (220, 20, as_cmap = True)
Это удобно, если вы хотите уйти от скучных рамок холодно-горячих подходов:
sns.diverging_palette (145, 300, s = 60, as_cmap = True)
Также возможно создать палитру, в которой средняя точка будет темной, а не светлой:
sns.diverging_palette (250, 30, l = 65, center = "dark", as_cmap = True)
Здесь важно подчеркнуть, что следует избегать использования красного и зеленого, хотя оно интуитивно понятно.
Другие расходящиеся палитры
Есть еще несколько хороших расходящихся палитр, встроенных в matplotlib, включая палитры Color Brewer:
sns.color_palette ("Спектральный", as_cmap = True)
И палитра coolwarm , у которой меньше контраст между средними значениями и крайностями:
sns.color_palette ("coolwarm", as_cmap = True)
Как видите, существует множество вариантов использования цвета в ваших визуализациях. Seaborn старается как использовать хорошие настройки по умолчанию, так и предлагать большую гибкость.
Это обсуждение — только начало, и есть ряд хороших ресурсов, чтобы узнать больше о методах использования цвета в визуализациях.Отличным примером является эта серия сообщений в блоге Земной обсерватории НАСА. В документации matplotlib также есть хороший учебник, который иллюстрирует некоторые перцепционные свойства их цветовых карт.
HTML, CSS, RGB, цветовые палитры и многое другое
Работа с цветами — трудоемкая задача для веб-дизайнера, для начала вам нужно выбрать цветовую палитру для своих красочных дизайнов , затем есть все виды кодовых значений, которые нужно запомнить и преобразовать из шестнадцатеричного в RGBa.Чтобы ускорить процесс и сделать жизнь дизайнера намного проще, в Интернете доступно множество удобных инструментов. Эти инструменты цвета помогут вам с легкостью выбирать и преобразовывать выбранные цвета для вашего следующего проекта веб-дизайна.
Вы когда-нибудь хотели использовать определенный цвет, но не могли найти его название или шестнадцатеричный код? С помощью этих генераторов цвета вы можете найти именно тот цвет, который вам нужен. Есть несколько вариантов, которые помогут получить желаемый цвет. Например, вы можете выбрать цвет, похожий на тот, который вам нужен, а затем выбрать между альтернативными оттенками.Кроме того, вы можете регулировать оттенок, насыщенность или яркость, пока не будете довольны результатом. После всех изменений вы получите шестнадцатеричный код, а также название цвета и интегрируете их в свой дизайн. Просто, правда ?!
Если вы начинаете работу над дизайном с нуля без каких-либо рекомендаций по бренду или цветового вдохновения, может быть сложно составить цветовую схему, которая будет работать. Есть множество ситуаций, когда могут пригодиться генераторы цветовой палитры. Хотя они в основном используются в проектах веб-дизайна, генераторы цветовой палитры также могут быть полезны в различных других проектах, связанных с дизайном.
Вот несколько цветовых инструментов, которые помогут вам собрать красивую комбинацию цветов, которая гарантированно будет работать.
ColourLovers
ColourLovers содержит миллионы цветовых палитр, созданных пользователями. Просмотрите коллекцию и выберите те, которые вас вдохновляют, или найдите другие цвета, которые хорошо сочетаются с выбранным вами оттенком. Этот сайт может действительно пригодиться в будущем.
Adobe Color CC
Это еще один замечательный генератор цветовой палитры, который вы можете использовать для создания красивых цветовых палитр.Вы также можете войти в систему и сохранить свои палитры для использования в будущем.
Это еще один замечательный генератор цветовой палитры, который вы можете использовать для создания красивых цветовых палитр. Вы также можете войти в систему и сохранить свои палитры для использования в будущем. Это мощный инструмент, который позволяет вам только просматривать и оценивать существующие цветовые темы, но также включает инструменты для создания собственной палитры с нуля.
Палитра цветов Just Color
Ищете определенную эмоцию, стиль или атмосферу из своей цветовой палитры? Just Color Picker — это умный инструмент, который позволяет вам раскрасить код в буфер обмена одним щелчком мыши.
Paletton — Дизайнер цветовых схем
Познакомьтесь с этим замечательным генератором цветовой палитры, который позволяет создавать различные цветовые комбинации.
Color Hunt
Вот аккуратный генератор цветовой палитры, который включает в себя несколько цветовых палитр на выбор. Кроме того, вы можете сохранить избранное и использовать позже, когда этого потребует ситуация.
Sip — Генератор цветовой палитры
Sip — потрясающее приложение, которое отлично работает на iPhone и Mac.Это приложение позволяет быстро создавать цветовые схемы из изображений, а затем сохранять, систематизировать и публиковать созданные вами палитры.
Генератор цветовой палитры Palettr
Здесь у вас есть замечательный источник, где вы можете найти различные цветовые палитры, созданные из изображений. Вы можете искать любую тему или слово, и вы получите выдающиеся результаты.
Цветовые комбинации
Этот инструмент поможет вам легко создавать потрясающие цветовые палитры с нуля.Взгляните, откройте для себя его особенности и узнайте, что он может предложить.
Генератор цветовой палитры Colrd
У вас есть замечательный веб-сайт, который вы можете использовать для создания красивых цветовых палитр. Этот инструмент также включает в себя удобный конструктор градиентов и инструмент поиска.
ВPhotoshop есть окно выбора цвета по умолчанию, с которым, я уверен, знакомы все веб-дизайнеры, но просто подумайте, сколько раз вам приходилось переключаться между приложениями, чтобы копировать / вставлять или запоминать значения цвета.Там должен быть лучший способ! Собственно, это…
Палитра цветов от WebpageFX
Это отличный источник, который можно использовать для создания цветовых палитр. Перейдите по ссылке ниже и посмотрите, какие цветовые комбинации вы можете создать.
Код цвета
Это еще один отличный генератор цветовой палитры, основанный на курсоре. Вы можете использовать его для создания различных цветовых палитр, а затем экспортировать их в различные форматы файлов: SCSS, LESS или PNG.
Color Supply — Генератор шестнадцатеричной цветовой палитры
Перед вами великолепная шестнадцатеричная цветовая палитра, которую вы можете использовать для создания различных цветовых смесей.Это идеально подходит для любого веб-дизайнера или других творческих людей.
color.hailpixel.com
Простой, но удивительно полезный инструмент, color.hailpixel.com позволяет сканировать окно браузера в поисках идеального цвета, а затем копировать шестнадцатеричный код одним щелчком мыши.
Названия цветов CSS
Если случайные названия цветов вам не нравятся, возможно, этот список из 147 описательных названий цветов будет немного легче запомнить в ваших таблицах стилей.Просматривайте весь выбор или просматривайте случайное значение при каждом щелчке мыши.
Помните, как вы узнали все о цветовом круге и аналогичных, триадных и дополнительных цветах еще на уроках искусства? Вы можете применить эту теорию на практике с помощью этих инструментов создания цветовых схем для создания палитр, работоспособность которых научно доказана.
Сфера
Инструмент визуализации теории цвета под названием Sphere дает вам красивый и простой интерфейс для выбора оттенков и оттенков на цветовом круге.Выберите желаемый стиль палитры, чтобы ограничить выбор цветов для согласования значений.
Дизайнер цветовых схем
Создайте свою собственную цветовую схему с помощью Color Scheme Designer. Поверните и отрегулируйте цветовое колесо, чтобы выбрать базовый цвет, а затем просмотрите автоматически сгенерированные значения в зависимости от типа палитры.
Последние улучшения CSS3 означают, что теперь мы можем создавать различные цвета непосредственно с помощью кода, но с синтаксисом CSS работать намного сложнее, чем с визуальным цветовым кругом.Здесь на помощь приходят инструменты-генераторы, которые предоставляют код, необходимый для создания желаемых эффектов.
Накопитель CSS: генератор палитры изображений в цвета
Это еще один замечательный генератор цветовой палитры, который вы можете использовать для создания различных цветовых палитр на основе ваших собственных изображений.
Окончательный генератор градиентов CSS
CSS3-градиенты, как известно, сложно написать в коде. Вам не только нужно знать различные значения цвета, вам также необходимо добавить различные префиксы поставщиков, чтобы он работал в нескольких браузерах.Ultimate CSS Gradient Generator упрощает задачу, предоставляя вам интерфейс в стиле Photoshop для настройки градиента, а затем предоставляет вам код для копирования / вставки.
Калькулятор цвета Hex 2 RGBA
Преобразование шестнадцатеричного значения в RGB или даже в RGBa несложно, это просто утомительно, когда каждое значение задается отдельно, что означает как минимум три щелчка мышью, чтобы скопировать числа. Калькулятор Devoth Hex 2 RGBA упрощает процесс, поскольку полное значение CSS копируется одним щелчком мыши.
С тех пор, как я опубликовал эту статью, появилось несколько замечательных предложений по цветным инструментам, о которых я не знал, вот еще пара ресурсов, которые действительно помогут вам во время вашего следующего проекта.
0to255
Стандарт для выбора состояния наведения для ваших ссылок — просто выбрать более темный оттенок того же цвета. Этот процесс становится намного проще с помощью 0to255.com. Выберите свой цвет и посмотрите полную серию вариантов, что сделает его идеальным для наведения, градиентов и границ.
Цвет Hexa
Color Hexa — это энциклопедия цвета! Введите выбранный вами цвет в любое желаемое значение, и он отобразит описание вместе с некоторыми полезными фактами. Прямое преобразование из Hex или RGB в ближайшее значение CMYK также особенно полезно для дизайнеров печати.
Палитра материалов: Генератор цветовой палитры материального дизайна
Это еще один отличный генератор, который автоматически генерирует великолепные цветовые палитры, которые вы можете загрузить и сохранить для будущих дизайнов.
Наличие правильных инструментов выбора цвета, а также генератора цветовой палитры может улучшить или испортить ваш дизайн-проект. Мы надеемся, что эти инструменты были вам полезны. Если у вас есть что добавить в список, сообщите нам об этом ниже.
22 цветовых палитры CSS
Коллекция отобранных вручную бесплатных HTML и цветовых палитр CSS примеров кода. Обновление коллекции за февраль 2019 г.2 новинки.
- Палитра цветов jQuery
О коде
Предварительный просмотр коллекции градиентов
Используемые переменные CSS и flexbox.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Линда Лабанц
О коде
Цветовые палитры
Цветовые палитры с Flexbox.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Оливия Нг
О коде
Сетка CSS: цветовая палитра
Цветовая палитра, которую можно использовать в реальных условиях.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Тамино Мартиниус
Сделано с
- HTML (Мопс) / CSS (PostCSS)
О коде
Коллекция градиентов
Небольшая коллекция градиентов.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Сделано с
- HTML (мопс) / CSS (стилус) / JavaScript
О коде
Двухтональная фильтрация с переменными CSS
Играл ссмешанным режимомдля создания различных дуплексных фильтров. Тогда я подумал, что было бы здорово иметь удобный переключатель, чтобы опробовать различные фильтры.Итак, вот оно! Тестер дуплексной фильтрации с использованием переменных CSS. Внутреннее кольцо — это светлый цвет, а внешнее — затемняющий. Чтобы изменить цвета, настройте переменнуюцветовв кодеPug.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
- Джошуа Уорд
О коде
Цветовая палитра
Цветовая палитра с использованием CSS Grid.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Автоматическое форматирование цветовой палитры
Добавить / изменить / удалить шестнадцатеричные цвета из массива для обновления палитры.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Жиль Мильори
О коде
Генератор цветовой палитры Bootstrap 4.Включая варианты цвета
Генератор цветовой палитры Bootstrap 4. Генерирует варианты цвета из Bootstrap $ colors то есть: .text-indigo-600 .bg-indigo-600 .border-indigo-600 .
Автор
- Джошуа Уорд
О коде
Цветовая палитра
Цветовая палитра на чистом CSS.
Автор
- Диана Чой
О коде
Цветовая палитра
Цветовая палитра с CSS flexbox.
Демонстрационное изображение: Цветовое колесоЦветовое колесо
Цветовое колесо с HTML, CSS и JavaScript.
Сделано thepheer
7 марта 2017 г.
Круги цветовой палитры
Круги вложены SVG круг с.Они генерируются петлями Jade (для простоты настройки). Flexbox выкладывает их в ровный ряд. Они раскрашиваются с помощью палитр из COLOURlovers API.
Сделано Крисом Койером
2 марта 2017 г.
Цветовые палитры с оттенками
Цветовые палитры с оттенками в HTML, CSS и JavaScript. Палитры: Windows Phone, Tango Desktop Project, Fedora, Open Suse, Jack Production, iOs 7, Pantone Spring 2016.
Сделано Алессандро
2 февраля 2017 г.
Поиск цветов Pantone + буфер обмена
Поиск цветов Pantone с буфером обмена в HTML, CSS и JavaScript.
Сделано Майком Уивером
3 ноября 2016 г.
Генератор случайной цветовой палитры
Добавлена возможность переключения между светлым и темным цветом фона.
Сделано Giana
20 марта 2016 г.
Цветовые палитры
Нажмите кнопку, чтобы просмотреть случайную цветовую палитру.
Сделано в Screeny
6 февраля 2016 г.
Цветовая палитра
Щелкните код цвета, чтобы изменить цвет!
Сделано Филиппом
8 января 2016 г.
Создание палитр из изображения
Этот инструмент позволит вам отбросить изображение и сгенерировать палитры из 100 лучших цветов (по площади поверхности) и вывести их для использования в CSS, iOS (Objective-C и Swift), Android (Java) и т. Д.
Сделано Blixt
1 октября 2015 г.
Цветовая палитра
Версия HTML / CSS обзора цветовой палитры, основанная на снимках Dribbble «Цветовая палитра Flattastic Pro» и «Цветовая палитра Aves UI Kit».
Сделано Дорианом Ковраном
5 февраля 2017 г.
Цветовая палитра Flattastic Pro
Это перо является версией HTML / CSS цветовой палитры dribbble Flattastic Pro от Erigon.
Сделано Маркосом Родригесом
26 июля 2014 г.
Автор
- Феликс Риллинг
О коде
Образцы цвета
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Демонстрационный GIF: Цветовая палитраЦветовая палитра
Образцы цвета с шестнадцатеричными значениями при нажатии, активно выбранные и доступные для копирования.
Сделано Луи Койлом
11 июня 2013 г.