Онлайн Выбор цвета
Считаете ли вы этот инструмент полезным? То поделитесь этим с друзьями или коллегами. Это поможет нам сделать наши бесплатные веб-инструменты лучше.
Этот инструмент поможет вам определить идеальные цвета в CSS для применения в вашем HTML.
Выбери Цвет:
Выбранный Цвет:
Выбранные цвета в разных форматах
Информация о Выборе Цвета
О Выборе Цветов
Цифровой цвет может быть представлен несколькими способами. Наиболее распространенные способы представления цвета в Интернете — это 6-значный HEX номер, RGB и HSL.
- Hex — 6-значное, 24-разрядное шестнадцатеричное число, представляющее красный, зеленый и синий. Пример представления шестнадцатеричного цвета # 123456, 12 — красный, 34 — зеленый и 56 — синий. Есть 16 миллионов возможных цветов. HEX значения цвета поддерживаются во всех браузерах.
- RGB — Значение цвета RGB указывается с помощью: красный, зеленый, синий. Каждый параметр определяет интенсивность цвета в виде целого числа от 0 до 255. Значения цвета RGB поддерживаются во всех браузерах.
- HSL — обозначает оттенок, насыщенность и легкость. Значения основаны на позиции от центра цветового круга. Значение для оттенка от 0 до 360, представляющее градусы на цветовом круге. Насыщенность — это расстояние от центра цветового круга. L означает Легкость, которая представляет предопределенное ограничение цвета. HSL был добавлен в CSS3.
Как это работает?
Этот инструмент Онлайн Выбор Цвета позволяет легко создавать индивидуальные цвета для использования в Интернете. Нажав или перетащив курсор в область выбора или выделив цвет справа, вы можете найти свой цветовой код. При настройке параметров, которые определяют цвет, он отображается во всех 3 стандартных форматах CSS. Также вы можете ввести Hex, RGB или HSL коды для поиска вашего собственного цвета; В приведенных ниже таблицах вы можете добавить образец в свою палитру.
Вам понравился этот инструмент? Вы можете задонатить нам. Это поможет нам улучшить наши бесплатные веб-инструменты.
· Инструмент для подбора цветов и генерации цветовых схем ·
Монохроматическая модель. Эта цветовая схема основана на одном оттенке цвета, и использует вариации, сделанные только лишь изменением насыщенности и яркости.
Результат комфортен для глаз, даже при использовании агрессивных цветов. Вместе с тем, труднее найти диакритические знаки и основные факты.
Также монохроматические вариации сделаны для каждого цвета в других схемах.
Комплементарная (контрастная) модель. Основной цвет дополнен его комплементом (цвета на противоположной стороне цветового круга). Создается один холодный и один теплый цвет — вы должны рассмотреть, какой из них будет доминирующим, и должен ли дизайн выглядеть холодным, или теплым.
Не следует злоупотреблять контрастными цветами в дизайне, используйте их только как цветовой акцент.
Модель цветовой триады (мягкий контраст). Основной цвет дополнен двумя цветами, помещенными тождественно по обе стороны его комплемента. В отличие от «острого» контраста, эта цветовая схема зачастую является более комфортной для глаз, она мягче, и в ней больше пространства для балансировки теплых/холодных цветов.
Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.
Модель цветовой тетрады (двойной контраст). Эта цветовая схема образована парой цветов и их контрастов. Она основана на Тетраде — четверке цветов, равномерно распределенных по цветовому кругу (90°). Тетрада — очень агрессивная цветовая схема, требующая хорошего планирования и деликатный подход к отношениям этих цветов.
Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.
Модель аналогичных цветов. Эта цветовая схема образована основным цветом и его смежными цветами — два цвета, расположенные тождественно по обе стороны. Это всегда смотрится элегантно и четко, цветовая гамма в результате этого выглядит с меньшей напряженностью и равномерной колориметрией. Если выбран цвет на тепло-холодной границе, цвет с противоположной «температурой» может быть использован для акцентирования двух других цветов.
Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.
Модель акцентированной аналогии. Это аналогичная модель с добавлением дополнительного (контрастного) цвета. Модель должна рассматриваться как дополнение — она добавляет напряженности к цветовой палитре, и слишком агрессивна в случае злоупотребления. Вместе с тем, она может быть использована в некоторых деталях, а так же в качестве цветового акцента — порой получается очень эффективная и элегантная цветовая гамма.
Оттенок. На этой вкладке отображается цветовой круг. Кликните по ней для регулировки оттенков основных, дополнительных, и вторичных цветов.
Регулировка цветовой схемы. На этой вкладке можно регулировать яркость/насыщенность цвета и контраст цветовой схемы, или просто выбрать из предопределенных настроек.
Информация о цветовой схеме. Кликните по этой вкладке для отображения значений цветов фактической цветовой схемы, а так же для экспорта их в различные форматы данных.
Оттенок основного цвета. Чтобы изменить значения, перетащите ползунок по цветовому кругу. Для ввода числового значения, дважды кликните по нему.
Оттенок дополнительного цвета. Чтобы изменить значения, перетащите ползунок по цветовому кругу. Для ввода числового значения, дважды кликните по нему.
Оттенок вторичного цвета. Чтобы изменить угол/дистанцию, перетащите ползунок дальше или ближе от основного цвета. Для ввода числового значения, дважды кликните по нему.
Оттенок вторичного цвета. Чтобы изменить угол/дистанцию, перетащите ползунок дальше или ближе от основного цвета. Для ввода числового значения, дважды кликните по нему.
Угол/дистанция оттенка вторичных цветов. Кликните для ввода числового значения. Имеет смысл только в цветовых схемах, использующих вторичные цвета.
Будьте осторожны: из-за ошибки округления во время преобразования, значение RGB, используемое в цветовой схеме, может немного отличаться от введенного значения.
Пресеты цветовых схем. Кликните и выберите предопределенные комбинации яркости, насыщенности и контрастности цветовой схемы.
Яркость и Насыщенность. Перетаскивайте ползунок по квадрату для регулировки яркости (вверх = светлее, вниз = темнее) и насыщенности (вправо = насыщенное, влево = разбавленное).
Контрастность цветовой схемы. Перетаскивайте ползунок по квадрату для регулировки контрастности вариантов цвета в схеме (вверх/вниз для темного варианта, влево/вправо для светлого варианта).
Контрастность цветовой схемы. Панель для регулировки яркости и насыщенности сразу всех вариантов схемы.
Коррекция Вариантов. Панель для регулировки яркости и насыщенности по отдельности для каждого цвета.
Список вариантов цвета. Выберите вариант цвета, а затем отрегулируйте его насыщенность и яркость при помощи ползунка на левом квадрате.
Схема палитры. Представлены четыре основных цвета, для легкого составления впечатления о схеме.
URL адрес цветовой схемы. Для каждой схемы существует уникальный ID. Вы можете сохранить эту ссылку в закладки, и вернуться к редактированию своей цветовой схемы в любой момент времени.
Предварительный просмотр цветовой палитры. Посмотрите, как выбранные цвета и их варианты сочетаются между собой.
Предварительный просмотр цветовой палитры. Посмотрите, как выбранные цвета и их варианты сочетаются между собой.
Пример веб-страницы (светлая/позитив). Кликните чтобы посмотреть пример веб-страницы, созданной при помощи текущей цветовой схемы. Это только пример, цвета палитры могут использоваться в сотнях разных вариаций.
Пример веб-страницы (темная/негатив). Кликните чтобы посмотреть пример веб-страницы, созданной при помощи текущей цветовой схемы. Это только пример, цвета палитры могут использоваться в сотнях разных вариаций.
Показать пример текста. Отметьте галочку, чтобы отобразить белый, черный и серый текст в окне предварительного просмотра цветовой схемы.
Настройки рандомизации. Нажмите, чтобы установить, какие параметры должны быть рандомизированы.
Симуляция зрения. Выберите пункты из списка для моделирования того, как люди с типичными нарушениями цветового зрения будут воспринимать вашу цветовую схему.
Web-цвета RGB. Сводит цветовое пространство RGB к использованию лишь 216-ти «безопасных для Web/HTML цветов».
Цветовая модель PANTONE ™. Выберите цвета из группы цветов Pantone ™. © Pantone, Inc. All rights reserved. Соответствие цветов только приблизительное, вы получите только впечатление того, как могут выглядеть цвета Pantone. Руководство по Pantone — единственный надежный источник для просмотра и определения цветов.
Цветовая модель RAL ™. Выберите цвета из группы цветов RAL ™. © RAL GmbH. All rights reserved. Соответствие цветов только приблизительное. Используйте реальные карты цветов и коллекции RAL для просмотра и определения цветов.
Экспортировать вашу палитру. Выберите формат сохранения вашей цветовой схемы для дальнейшего использования.
Экспортировать в текстовый файл. Экспорт схемы в виде обычного текста, для удобного копирования/вставки значений цвета, или отправки по электронной почте.
Экспортировать в формате HTML. Экспорт цветовой схемы в виде HTML-таблицы, удобной для сохранения или печати.
Экспортировать в формате XML. Экспорт цветовой схемы как XML разметку, которая в дальнейшем может быть обработана XML-парсером.
Экспортировать в формате ACO. Экспорт схемы в формате палитры цветов Photoshop. Сохраните файл и импортируйте его в Photoshop, Fireworks или другом приложении, поддерживающем этот формат.
Экспортировать в формате ASE. Экспорт схемы в формате палитры цветов Adobe Creative Suite. Файлы «Adobe Swatch Exchange» работают в программах Adobe Photoshop, Adobe Illustrator, Adobe Indesign (начиная с версий CS2 и CS3), а так же могут быть загружены в Kuler.
Сохранить изображение в формате PNG. Инструмент для сохранения цветовой палитры в виде небольшого изображения.
Появилась удобная возможность поделиться цветовой палитрой с друзьями и коллегами, используя готовые коды для вставки картинки на форум или в блог.
Экспортировать в формате GPL. Экспорт схемы как цветовую палитру GIMP. Сохраните файл и импортируйте его в редакторе GIMP.