Художники, у которых был дальтонизм

ColorZilla

Этот продвинутый инструмент «пипетка» для Firefox занимает первое место, поскольку он показывает максимальное количество загрузок и множество хороших отзывов. Как вы можете видеть на приведенном выше экране, ColorZilla имеет довольно много функциональных функций, таких как Advanced Eyedropper, Color Picker, Page Zoomer, палитра Browser и CSS Gradient Generator.

Диалоговое окно Color Picker очень похоже на то, что в Photoshop.
Если у вас возникли проблемы с подбором цветного пикселя, вы можете увеличить веб-страницу максимум до 1000% и использовать пипетку, чтобы подобрать цвет пикселя. Автоматическое копирование значений пикселей в буфер обмена позволяет легко вставить его в ваш HTML-редактор или в другое место.
Вы можете использовать Браузер Палитры, чтобы выбрать цвета из различных доступных палитр, а также сохранить созданные пользователем.

PixelZoomer

PixelZoomer — это аккуратное дополнение к Firefox, которое делает снимок экрана видимой области вашей веб-страницы и предоставляет вам несколько инструментов картирования пикселей для работы с изображением в отдельном окне (или вкладке).

Инструмент выбора помогает выбрать область и оценить точные измерения
Вы можете увеличить скриншот до 3200% и подобрать цвет любого пикселя с помощью инструмента «Пипетка».
Инструмент «Пипетка» может подобрать значения цвета и скопировать HEX-код в любое другое приложение.
Вы можете использовать его как простой инструмент для создания скриншотов, так как он позволяет сохранить изображение в формате PNG.

Онлайн-инструмент для выбора цвета

Помимо вышеупомянутого бесплатного программного обеспечения для выбора цвета, существует множество онлайн-инструментов для выбора цвета, которые помогут вам получить точные цветовые коды:

ImageColorPicker.com
w3schools.com
ColorPicker.com
HailPixel.com.

1]ImageColorPicker.com

Это простой онлайн-инструмент для выбора цвета, позволяющий выбрать цвет и получить код цвета HTML, значение HEX, значение HSV и значение RGB для этого конкретного пикселя. Вы можете загрузить изображение или просто вставить URL-адрес изображения в адресную строку, чтобы получить цветовой код. Просто загрузите изображение и наведите курсор мыши на нужный цвет, и вы увидите выбранный цвет на миниатюре вместе с цветовым кодом HTML, HSV и RGB.

2]w3schools.com

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

3]ColorPicker.com

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

4]HailPixel.com

Этот онлайн-инструмент для выбора цвета имеет совершенно другой интерфейс. Он превращает весь ваш экран в палитру цветов. Просто продолжайте перемещать курсор мыши по экрану и щелкните по желаемому цвету. Он мгновенно сохранит цвет, и, щелкнув значок настроек, вы можете получить код HEX, HSL и RGB. Использовать этот инструмент весело, но в то же время немного сбивает с толку, потому что нет цветового круга, из которого можно было бы выбирать цвета. Это может занять довольно много времени, но, опять же, некоторым из вас он может понравиться из-за его разной компоновки и интерфейса.

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

Вам может быть интересно узнать, что Bing представил свою палитру цветов орудие труда. Возможно, вы захотите также взглянуть на инструмент выбора цвета в Internet Explorer и в элементе Inspect в браузере Google Chrome.

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Как дальтонизм влияет на нас как креативщиков?

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

Посмотрите на работы известных режиссеров, таких как Кристофер Нолан и Николас Виндинг Рефн. Они оба дальтоники. Режиссеры, работающие с картинами мирового уровня дальтоники и они не имеют проблем в творчестве.

Фильм режиссера Николаса Виндинга Рефна «Драйв» — один из самых ярких фильмов в новейшей истории. Николас Виндинг Рефн использует выдающиеся цветовые палитры, чтобы рассказать свою историю.

В ещё одном фильме Николаса Виндинга Рефна «Неоновый демон» крайности цвета используются для создания настроения и интриги.

«Темный рыцарь» режиссера Кристофера Нолана — один из самых серьёзных фильмов в истории. Этот успех отчасти связан с использованием цвета в темноте.

Это всё говорит о том, что не важно, страдаете ли вы дальтонизмом, не позволяйте этому сдерживать вас, но, что более важно, не позволяйте никому другому говорить вам, что это помеха или что вы не можете быть хорошим фотографом

JSColor

JSColor is one of the leading web-based color pickers that aims at giving the designers and developers the best-ever experience during installation and end of use for the given component. The overall ease of use and its simplicity makes the given color picker highly preferred amongst the users. JSColor is known to provide support to all browsers, including Chrome, Safari, Internet Explorer 7 and above, Mozilla, Opera, and more. Let us see an example in action:

<!DOCTYPE html>
<html>
  <head>
    <title>Jscolor library</title>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.0/jscolor.js"></script>
    <style type="text/css">
      body {
        width: 80%;
        height: 80%;
        margin: auto;
      }
      #main {
        height: 400px;
      }
      p {
        margin-left: 30%;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <h1>Jscolor library</h1>
      <p>
        Color: <input id="color" value="rgba(255,160,0,0.5)" data-jscolor="" />
      </p>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        //change the main background of the div when the color is changed
        $("#color").on("change", function (e) {
          color = $(this).val();
          $("#main").css("backgroundColor", color);
        });
      });
    </script>
  </body>
</html>

jQuery Color Picker Plugins:

User-friendly Color Picker With Preset Colors — huebee.js

A highly-customizable, user-friendly color picker that allows the user to select a color from a predefined/restricted palette.

Lightweight jQuery Color Picker For Web App — Colpick Color Picker

A simple and lightweight jQuery plugin that enables you to implements a photoshop-style color picker slider on your web app. It currently supports RGB, HSB and HEX color formats.

Microsoft Office Style Color Picker Plugin — evol.colorpicker

A jQuery plugin used to create Microsoft Office style inline or popup color pickers that supports various configurations and themes based on jQuery UI.

Retina Ready jQuery Color Picker with CSS3 Gradients — Iris

An awesome jQuery plugin that makes use of jQuery UI and CSS3 gradients to embed a color picker with HiDPI display support within an input field. The plugin will popup a color selection dialog when a desired input field is focused/clicked.

Tiny HTML5 / jQuery Color Picker Plugin — Palette Color Picker

A small jQuery plugin for creating a tiny color picker for input fields that allows the user to pick a color from a palette selector with predefined colors.

Но что, если ты дальтоник?

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

Во-первых, дальтонизм является генетическим (наследственным). Вы не можете заболеть им, и вы не можете это исправить. Хотя есть вероятность, что даже если вы дальтоник, у вас все в порядке. Я также почти полностью уверен, что, когда вы обнаружили, что вы дальтоник, вам кто-то сказал об этом. До этого момента вы нормально жили и не знали об этом.

Помните, что цвет субъективен, и я буду знать только то, как цвет выглядит для меня, а вы будете знать только то, как цвет выглядит для вас. Почти всегда кто-то еще говорит вам, что вы видите цвета «неправильно».

Какие задачи при работе над графикой для видеоигр уже можно переложить на нейросети?

Копируйте цвета или разбирайтесь в них

Выбрать хорошие цвета действительно сложно. Совершенно нормально плохо разбираться в цветах, продолжать в них не разбираться и просто копировать цвета. Серьезно, в том чтобы воровать нет ничего постыдного. Я написала отдельную статью о том, где черпать вдохновение: фильмы (примечание переводчика: фильмов Уэса Андерсона, например!), художники, цветовые палитры, созданные другими, и т. д. И позвольте мне добавить: чужие визуализации данных — тоже отличный источник. Если вы хотите лучше понять, какие цвета подходят друг другу: проанализируйте их. Вот несколько способов сделать это:

Фотография niko photos с сайта Unsplash

Выберите изображение в цветах, которые считаете красивыми, например картину или фотографию природы. Затем выберите из них цвета с помощью пипетки, например с помощью Photoshop или image-color.com и попробуйте использовать именно их в следующем графике.
Установите Adobe Capture, это то же самое, но для «живых изображений»: этот инструмент позволяет брать цвета из вашего окружения. (Приятно видеть, как много цветов вокруг нас ненасыщены!)
Играйте в «ручную подборку цветов»: посмотрите на свой экран. Какие цвета вы видите? Насколько темные и насколько они насыщенные? Какие оттенки рядом; какие из них находятся на противоположной стороне цветового круга?
Выбирайте цвета из красивых визуализаций данных. Измените несколько цветов. Они по-прежнему хорошо работают вместе?

Кроме того, в следующий раз, когда вы будете создавать визуализацию данных и не будете довольны цветами, проанализируйте их в цветовом пространстве HSV/HSB, например с colorizer.org:

Насколько они насыщены — и выглядят ли они лучше, если вы увеличите или уменьшите насыщенность на несколько (или много) процентных пунктов?
Какое у них значение оттенка? Что произойдет, если вы измените оттенок всего на несколько градусов?
Ваши цвета по-разному яркие?

Со временем ваше понимание изменится от «это красиво, но я не знаю почему» к «это красиво, потому что…». И вы обнаружите, что можете нарушать все больше и больше правил, которые я объяснила здесь, и при этом создавать отличные цветовые комбинации!

Best Google Color Tools

Here are a few Google color tools for you:

17. Site Palette- a Google chrome extension to extract colors from any website

If you are a Google user, this Google chrome extension tool is a must-have tool for you to extract colors from any website for generating your desired color palettes.

18. Colorzilla — a color extension for Google and Firefox website browsers

Colorzilla is a powerful color extension for both of Google and Firefox website browsers. It offers many advanced color tools for designers, such as the color picker, gradient generator and so on.

With this extension installed, you can easily pick a color from any part of a website which you have opened, edit the color and paste it into your desired program.

It is very powerful.

The Best Color Picker

Color picker is an essential element in a web design / web development workflow. You don’t want to stare at your screen for hours trying to pick color from a palette, do you?

In this post, we’re going to introduce you to the 10 best (top downloaded), open-source jQuery and Pure (Vanilla) JavaScript plugins to quickly and easily create a color picker for your web application.

With these color picker plugins you can quickly and easily select desired color from your web page. Each plugin has a distinctive feature which may make them unique for you. Hope this list will help you to save some time!

Originally Published July 26 2019, updated Feb 01 2023

Sources

Get setup with LogRocket’s modern error tracking in minutes:

Visit https://logrocket.com/signup/ to get an app ID.
Install LogRocket via NPM or script tag. must be called client-side, not server-side.

$npmi--savelogrocketimportLogRocketfrom'logrocket';LogRocket.init('app/id');

Add to your HTML<scriptsrc="https://cdn.lr-ingest.com/LogRocket.min.js"><script><script>window.LogRocket&&window.LogRocket.init('app/id');</script>

(Optional) Install plugins for deeper integrations with your stack:

Redux middleware
ngrx middleware
Vuex plugin

Get started now

Избегайте чистых цветов

«Чистые» оттенки — это те, которые расположены точно под 60°, 120°, 180°, 240°, 300° и 360°/0° на цветовом круге:

Давайте разберем пример, чтобы научиться определять “чистый” цвет. В HSV/HSB значение оттенка (hue) этого ярко-синего ⬤. равно 180°, значение насыщенности (saturation) — 67%, а значение яркости — 91%. Вы также можете проверить значения RGB: если хотя бы два значения совпадают, цвет — «чистый». Например, наш ⬤. — это rgb (77, 232, 232).
Чтобы ваши цвета выглядели более естественными и приятными для глаз читателей, вы можете либо уменьшить насыщенность чистых цветов, либо сделать их темнее. Если вы хотите получить яркие, насыщенные цвета, полагайтесь на смешанные цвета на расстоянии не менее 5-10° от чистых цветов.
На изображении выше красный, оранжевый, синий и зеленый имеют одинаковую насыщенность и яркость. Единственная разница — оттенок! Красный ⬤ (0°), синий ⬤ (240°) и зеленый ⬤ (120°) выглядят более красочно, чем оранжевый ⬤ (40°), светло-синий ⬤ (211°) и ярко-сине-зеленый ⬤ (170°). Почему бы тоже не выбрать их, ведь всем хочется яркой, красочной визуализации? Давайте разбираться.

Radial Color Picker

This radial color picker has a different approach when it comes to the UI for a color picker. It comes with a radial slider that shows the chosen color at its center. The goal is to be as simple and easy to use as possible.

Check out the following demo by Rosen of how to use the color picker in Vue.js:

Keeping this philosophy in mind, the slider offers support for a screen reader and keyboard-based color selection. You can press the up and down arrow keys to increase or decrease the hue value. Users can press the Enter key to close or open the color picker and press the Tab key to bring the color picker in focus.

The saturation and luminosity values are passed to the color picker during initial setup. More information about different configuration options of the color picker is available from the Radial Color Picker site.

I’ve linked to the Vue version, but this color picker is also available for use with React and Angular.

Что такое цветовая схема?

Цветовой круг — основное понятие базовой теории цвета. Это цветовой спектр, который используют для подбора цветовых сочетаний и схем. Он состоит из трех основных цветов — красного, желтого и синего, а также их производных. Красный, желтый и синий — это цвета базового уровня. Дальше идут их смешения: оранжевый, фиолетовый и зеленый. Затем — цвета третьего уровня, которые получаются путем смешения цветов второго уровня.

Цветовой круг. Источник

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

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

Монохромная цветовая схема

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

Сайт креативной студии Les Animals. Источник

Сайт французского бренда Les Partisanes. Источник

Монохромная желтая цветовая схема. Источник

Аналоговая цветовая схема

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

Важно, что при этом сохраняется общая идея — сочетание похожих, близких, переходящих друг в друга тонов.

Аналоговая цветовая схема. Источник

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

Сайт Re-Forme. Источник

Сайт Jamhot для креативного сотрудничества. Источник

Сайт креативного агентства five/four. Анимированный логотип. Источник

Аналоговая цветовая схема. Источник

Комплементарная цветовая схема

Комплементарные цвета — это цвета, противоположные друг другу на цветовом круге. Это самая сильная и эффектная цветовая схема, потому что она наиболее контрастная. Она хорошо запоминается.

Комплементарная цветовая схема. Источник

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

Сайт канадской пекарни и пиццерии Lamanna’s. Источник

На сайте компании jetBlue используется синий цвет в сочетании с оранжевыми акцентами. Источник

Классическое сочетание голубого и оранжевого на сайте Aviasales. Источник

Комплементарная цветовая схема в красно-зеленых оттенках. Источник

Классическая триада

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

Классическая триада. Источник

Сайт дизайнера Lorenzo Verzini. Источник

Вариант расширенной классической триады в пастельных оттенках.Источник

Вариант использования классической триады на сайте дизайн-студии Redo. Источник

Контрастная триада, включающая базовые цвета — синий, красный и желтый. Источник

Контрастная триада

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

Контрастная триада. Источник

Варианты использования сплит-комплементарной цветовой схемы. Источник

Сайт французского бренда Les Partisanes. Источник

Монохромная желтая цветовая схема. Источник

Используйте насыщенность и яркость, чтобы ваши оттенки сочетались

Насыщенность и яркость так же важны, как и сам оттенок. Фактически, вы можете создавать новые цвета, просто изменяя насыщенность и яркость. Вот две пары цветов одного оттенка, но разной насыщенности и яркости: ⬤⬤ / ⬤⬤. Если вы немного измените оттенок, то добьетесь лучших результатов: ⬤⬤ / ⬤⬤.
Вернемся к нашему цветовому сочетанию: ⬤⬤⬤⬤. Поиграв с параметрами, получается следующее:

Улучшенные комплементарные цвета из Adobe Color

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

Honorable mentions

Huebee

Huebee is a JavaScript library for creating user-centric color pickers. Huebee displays a limited set of colors so users view all colors at a glance, make clear decisions, and select a color with a single click. If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Huebee under the terms of the GPLv3. Read more about Huebee open source licensing.

Colpick

Colpick is a lightweight jQuery color picker plugin with RGB, HSB and HEX fields, several skins and layouts.

No images! Just a JS and a CSS file
Very intuitive Photoshop-like interface
Light and dark easy-to-customize CSS3 skins
28 KB total loaded by the browser
Works and looks nice even on IE7
Extremely easy to implement

The repository of this top is a fork from the original colpicker plugin, because the original repo isn’t maintained anymore. This version has the following improvements:

Polyfill: New option ‘polyfill’ to work with native color input fields
Auto color: Get the default color from an element’s ‘value’ attribute using jQuery function .val()
Custom parent: New option ‘appendTo’ to specify which element to append the picker to (PR #44)
CSS styles: New option ‘styles’ to specify additional styles to be set on the picker (PR #44)
UMD compatibility: Uses an UMD style closure to be loadable with AMD loaders (require.js) or CommonJS
3 character hex support: Added support for entering three character hex codes as specificied in the CSS 2.1 spec (PR #43)
Fixed Issues: #16, #17, PR#58

Color picker

Color picker is a simple color picker plugin written in pure JavaScript, for modern browsers, with touch events support.

Iro.js

Iro.js is a SVG-based JavaScript color picker library with zero dependencies. It offers:

Customizable SVG-based UI
Convert colors between RGB, HSV, HSL and hex RGB
Dynamicly update CSS styles when the selected color changes
Lightweight, at around 13KB minified (or ~5KB minified + gzipped)
Zero dependencies (not even jQuery or extra stylesheets/images)

Colorjoe

Colorjoe is a scalable color picker. Colorjoe was somewhat inspired by ColorJack and RightJS Colorpicker. Unlike those it actually scales pretty well. Essentially this means that you’ll be able to define its actual dimensions and layout using a bit of CSS. This way the widget fits well responsive layouts. In addition it’s relatively easy to implement missing functionality (RGB fields, whatnot) thanks to the simple API it provides.

Spectrum (unmaintained)

As a developer you may already saw this plugin somewhere, the old color picker of Google Chrome ! This plugin was part of the most known web browsers. It’s very easy to use and of lightweight.

Wheel Color Picker

Github

The Wheel Color Picker plugin adds color picker functionality to HTML element in round color wheel style. The Wheel Color Picker can be displayed as a popup dialog as users focus the input, or embedded inline.

Do you know about other beautiful and useful color picker ? Don’t be shy and share it with the community in the comment box.

Huebee Color Picker

The Huebee Color Picker gives you a user-friendly interface for displaying a limited set of colors. Usually, color pickers ask you to pick colors from a gradient varying from one point to the next. Huebee, on the other hand, shows a specific set of colors based on the parameters you set.

The initialization options for the color picker allow you to specify the number of hues that you want to include in the color picker. You can also select the number of shades and saturation, along with the first hue for the color grid. There’s even an option to display your own set of custom colors inside the color picker by passing them as an array.

In addition, Huebee has an event listener that allows you to take action whenever there is a change in the picked color value. There are four different properties that you can use to access the full color value or its hue, saturation, and luminosity individually. You can also check if a user picked a light or dark color by using the property.

Other features of the Huebee color picker are documented on the official website.