Как создать конвертер цветов RGB написание веб-приложения в JavaScript


Содержание материала:

Конвертирование HEX кода в RGB

Предлагаем Вам скрипт простого конвертера цветов, написанного на JavaScript, который позволяет конвертировать коды цветов из HEX в RGB.

Наглядный пример работы конвертера цветов Вы можете наблюдать ниже:

Для получения подобного конвертера цветов из HEX кода в RGB код, добавьте на свой сайт следующий небольшой JavaScript код:

Далее необходимо создать форму, в которую мы будем вводить HEX код цвета, и получать соответствующий ему RGB код. Делается это следующим образом:

Как видите ничего сложного в данном скрипте конвертера нет. Ознакомиться с основными цветами и их кодами можно по ссылке — Названия, HEX и RGB коды цветов в HTML.

28 лучших инструментов для подбора цветовых схем

Подборка цвета – один из важнейших этапов в процессе создания хорошего дизайна.

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

01. Adobe Colour CC

Вы можете быть знакомы с этим инструментом по его прежнему названию — Adobe Kuler . Однако совсем недавно компания Adobe переименовала одно из своих популярных веб-приложений в Adobe Colour CC .

Он позволяет подбирать, создавать и сохранять различные цветовые схемы, в каждой из которых может присутствовать до пяти цветов. Инструмент доступен как в браузерной, так и в настольной версии. Если вы используете настольную версию, то вы сможете экспортировать цветовую схему прямо в Photoshop , Illustrator и InDesign .

02. Mudcube Colour Sphere

Mudcube Colour Sphere – очень удобный миниатюрный ресурс для дизайнеров, который не только предлагает hex-коды выбранных цветов, но и позволяет создавать цветовые схемы для собственных проектов. Также стоит отметить, что в Mudcube имеется собственная галерея готовых ресурсов, которые также можно использовать.

03. Check my Colours

Check my Colours разработан специально для оценки и подборки комбинации фона и основного цвета для всех DOM-элементов . А также для того, чтобы выяснить, достаточно ли элементы гармоничны между собой. Все тесты основаны на алгоритмах, рекомендованных World Wide Web Consortium ( W3C ).

04. The Color App

iOS-инструмент The Color App позволит легко и просто определять цвета при помощи большой цветовой палитры. Он позволяет узнать RGB , HEX и HSLA-значения цветов, а также создавать собственные цветовые схемы для сайта.

05. Color Hunter

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

06. TinEye

На этом сайте используется база данных, состоящая из 10 миллионов изображений, доступных бесплатно по лицензионному соглашению Creative Commons , которые создатели тщательно отобрали с Flickr . Их можно использовать для генерации соответствующих цветовых схем.

07. Color

Удобное миниатюрное веб-приложение. Наведите курсор мыши на экран, и определите нужный цвет, затем прокрутите немного, чтобы подобрать оттенок. После чего инструмент выдаст все необходимые HEX-коды , которые можно использовать в собственных проектах. Один из самых простых в использовании инструментов.

08. SpyColor.com

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

09. Designspiration

На Designspiration можно выбрать до пяти оттенков при помощи удобной палитры на всю страницу, которая поможет без труда найти именно те цветовые схемы HTML , которые вы ищете. После этого сайт сгенерирует страницу со всеми изображениями из базы данных, в которых используется похожая цветовая комбинация. Также будут предоставлены HEX-значения , которые можно использовать в собственных проектах. А изображения можно сохранять в коллекциях на сайте.

10. ColorExplorer

Один из самых продуманных веб-инструментов, который предлагает множество функций, связанных с дизайном, настройкой и аналитикой цветовых схем. Здесь представлены инструменты, которые помогут определить WCAG-валидность цветовых схем , а также сгенерировать собственные цветовые палитры.

11. Hex Color Scheme Generator

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

12. COLOURlovers

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

13. Color Scheme Designer

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

14. COPASO

Один из инструментов с сайта COLOURlovers . Но COPASO достоин отдельного внимания, так как представляет собой невероятное решение « все в одном », и позволяет легко генерировать готовые цветовые схемы для сайта. Здесь представлено множество инструментов для подбора цвета, и все они размещаются в удобном и простом интерфейсе. Кроме этого к палитрам можно добавлять заметки, загружать изображения и т.п.

15. Colourmod

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

16. ColorZilla

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

17. Colormunki

Удобный онлайн-инструмент для подбора цветовых схем от создателей Colormunki . С его помощью можно без труда создавать привлекательные цветовые палитры из образцов на основе Pantone с использованием нескольких методик.

18. colr.org

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

19. ColourGrab

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

20. ColorBlender

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

21. GrayBit

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

22. COLRD

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

23. Shutterstock Spectrum

Иногда проверить будет ли цветовая схема сочетаться легче всего путем просмотра стоковых картинок. Практически все основные стоковые ресурсы предлагают подобные инструменты, однако Shutterstock Spectrum имеет очень удобный интерфейс. После использования слайдера для определения цвета вы сможете указать ключевые слова, которые позволят определить тему снимков. Кроме этого можно отфильтровать изображения по цветовому балансу и яркости.

24. Stripe Generator 2.0

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

25. Colors on the Web

Colors on the Web принимает отдельные цвета в HEX или RGB , и выдает цветовые схемы, основанные на различных математических вычислениях. Подобный механизм используется и в Kuler . Этот веб-инструмент не будет работать на iPad или iPhone из-за использования технологии Flash .

26. Pictaculous

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

27. Contrast-A

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

28. ColoRotate

Инструмент предлагает схожий с Kuler функционал, но при этом красиво визуализирует цветовые палитры, а также позволяет генерировать более пяти цветов в одной схеме. Его можно напрямую интегрировать в некоторые приложения Creative Suite. Этот инструмент также доступен в виде приложения для iPad, предлагая отличную интеграцию с Photoshop, где он может выступать в роли панели цветов.

Данная публикация представляет собой перевод статьи « The 28 best tools for choosing a colour scheme » , подготовленной дружной командой проекта Интернет-технологии.ру

Топ-пост этого месяца:  Категории функций — Временные опции (transients) — WordPress

Случайный генератор цвета RGB с JavaScript

Я пытаюсь получить что-то вроде этого: rbg (случайный, случайный, случайный);

Теперь, когда я помещаю Math.floor(Math.random() * 255) + 1 в область, он работает, но по какой-то причине большинство чисел застряли в 255 и редко меняются.

Когда я кладу скобки () вокруг — ( Math.floor(Math.random() * 255) + 1 ) -, он работает намного лучше.

3 ответа

@Xufox имеет правильный ответ в комментарии там. Для ясности вы захотите немного реструктурировать свой код (и давайте также исправим эту ошибку, когда вы никогда не получите ноль для любого канала из-за +1 ):

Когда вы используете +1 внутри строки, она генерируется как строка, а не как математическое выражение, когда вы используете () , она генерирует как математическое выражение.

Использовать параметры для произвольных цветов

Когда вы «добавляете» 1 , он объединяется в виде строки, поскольку вы начинаете с «rgb(» + и получаете результат » string + number «будет другой строкой. Заключение числовых выражений в круглые скобки заставляет оператор + выполнять сложение вместо конкатенации.

Причина, по которой вы получаете 255 , заключается в том, что сгенерированные вами числа в конечном итоге выглядят так :

Установщик backgroundColor ограничивает 8-битные значения (в диапазоне от 0 до 255) максимум 255 (и минимум 0 ). Это означает, что установка element.style.backgroundColor = «rgb(10000, -10000, 128)» приводит к backgroundColor из «rgb(255, 0, 128)»

Так что, когда Math.floor(Math.random() * 255) генерирует число из to 1 , тогда наибольший результирующий номер становится 25 , который находится ниже 251 . Любое другое значение — например, от 255 до 26 — приводит к значению, превышающему 255 , поэтому оно просто автоматически становится 255 .

В скобках указано арифметическое выражение, которое будет оцениваться перед конкатенацией.

/dev/energy

Сайт о том, как стать программистом и как с этим жить потом

Выбор цветов на JavaScript или попросту «ColorPicker»

Мне очень приятно видеть рост числа уникальных посетителей моего блога, а потому я изо всех сил стараюсь затрагивать полезные и интересные темы. Как некоторые из Вас могли увидеть из предыдущего поста, я обзавелся аккаунтом в сети GitHub, и теперь всем будет удобнее брать исходники моего кода и следить за его развитием.

В сегодняшней статье будет много букв, примерно столько же кода и такая занимательная вещь, как HTML5. Речь пойдет о «велосипеде», который есть в любом уважающе себя js-фреймворке и в то же время является отличным примером работы со связкой HTML5+JS. Это утилита выбора цвета и получения информации и нем в народе известная под именем colorpicker

Итак, чтобы с ходу заинтересовать читателя, покажу рабочий пример

С чего же начать в разработке данного модуля? Давайте попробуем построить модель приложения. За основу возьмем цветовую модель HSV. Она состоит из:

  1. Выбора цвета на шкале Hue — оттенок цвета (это шкала цветов справа)
  2. Насыщенность цвета Saturation и его яркость — Value (квадрат с двумя градиентами по центру)

Шкалу Hue мы будем генерировать автоматически. До выхода HTML5 нам пришлось бы звать на помощь сторонние средства, но пятая версия языка разметки имеет в своем арсенале тэг , который создает область для рисования, доступную для специализированных JavaScript-методов.

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

Алгоритм будет таков:

  1. По умолчанию мы выбираем красный цвет
  2. При перемещении по шкале Hue мы высчитываем положение курсора внутри шкалы, конвертируем его в RGB, изменяем подложку у SV-блока
  3. При перемещении внутри SV-блока также высчитываем положение курсора по осям (S — ось абсцисс, V — ординат) и вносим коррекции в полученный цвет, не меняя базовую подложку у SV-блока

Будем стремиться к простоте, а значит сделаем так, чтобы скрипт вызывался минимальным количеством кода. В html мы заводим div, в который будет подгружаться colorpicker ( >

Наш модуль будет подчиняться паттерну Singleton (Одиночка), т.е. на одной странице будем генерировать один colorpicker.

Сам модуль будет объектом Colorpicker, который имеет три метода — init (построение), get(вывод на страницу), destroy(уничтожение). С get и destroy все предельно ясно, за исключением того, что в методе get мы проверяем наличие на странице объекта Colorpicker. Конечно, это все легко обойти, но для красоты и эффектности очень полезно =)

Сразу же я подключу модуль Drag’n’Drop для корректной и удобной работы с положением курсора. Он «вшит» в код скрипта в самом его начале.

Подробно я опишу метод init. Внутри него будет три переменных-объекта : picker, hue и tones (сам механизм целиком, шкала цветов H и шкала оттенков SV соответственно). Далее мы создаем на странице DOM-элементы, необходимые для работы colorpicker-а.

Для объекта picker пишем метод init, внутри которого мы задаем параметры инициализации инструментов и производим их собственно инициализацию.

Сразу же появляются два метода init для объектов hue и tones, которые должны быть описаны. Начнем с hue.

Объявляем объект layer внутри hue, для которого есть метод create, внутри которого есть метод gradient. Тут самое интересное!

Мы определяем тип canvas — 2d.

Далее мы создаем объект градиента внутри canvas.

Cols — это массив границ цветов, внутри которых будут организовываться переходы. Три элемента в каждом вложенном массиве — это значения по каждому из каналов : red, green и blue. Обходим в цикле этот массив и генерируем дополнительный граничный цвет для градиента при помощи метода addColorStop.

Два последних метода заполняют полученным градиентом указанный DOM.

Также стоит рассмотреть метод hue2rgb.conv, который преобразует положение на всех трех шкалах (HSV) в цвета форматов HEX (шестнадцатеричный) и RGB.

Поскольку шкала SV по определению предоставляет нам квадрат 100 на 100, а DIV, в котором может содержаться элемент выбора, может оказаться больше или меньше, нам необходимо определить шаг выбора. Все просто — делим перемещение курсора на 100 =) . Расчитаем отклонение цвета на SV от Hue. В зависимости от него вычисляем каждую из трех составляющих RGB и возвращаем полученное значение.

Метод getHex позволяет нам преобразовать полученное значение RGB в HEX-формат. RGB поступает в виде массива из трех элементов ([R,G,B]), после чего значение каждого из них конвертируется в шестнадцатеричный формат. Для того, что соблюсти соответствие с графическими программами, в случае, если значание канала представляет собой значение из одной цифры, то мы её дублируем (т.о. если мы на выходе конвертации получили значение канала f, то в значении цвета будет ff).

Переменная-объект tones представляет собой SV-область выбора. Внутри нее генерируется маркер-кружок, который графически демонстрирует текущий выбранный оттенок. Шаг курсора также расчитывается делением на 100.

Метод cPos отслеживает положение курсора внутри SV-области, конвертирует его в цвет и присваивает значения результирующим полям.

Остальное — обработчики событий. Думаю, не нужно их подробно описывать, иначе зачем мы все здесь собрались?

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

Как создать цветовую палитру (color-picker) с помощью HTML5 Canvas

Создание HTML5 «холстовых» (от англ. “сanvas”) приложений, является новым трендом, с их помощью мы даже можем создавать игры, так как они поддерживаются во всех ведущих браузерах ( от настольных до мобильных) и это делает их более эффективным решением, нежели использование умираещего Flash.

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

HTML

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


Так как мы будем использовать фоновое изображение с цветовой палитрой, мы сделали ширину и высоту канваса соответствующею размерам изображения – 600×440 пикселей. Мы также должны добавить jQuery на нашу страницу, так как мы будем использовать jQuery код.

JavaScript

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

Теперь, когда мы получили канвас элемент и его контент, мы можем установить изображение в качестве фона канваса. Для этого нам нужно создать изображение и сделать его источником URL картинки. После того как изображение будет загружено, вам нужно перетащить его в канвас:

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

С помощью этих двух строк кода, мы сможем увидеть, где кликал пользователь. Что мы делаем, это получаем все координаты, где пользователь кликал и потом с этого вычитаем смещение канваса. Такое действие покажет нам, где пользователь кликал по сравнению с положением на канвасе.

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

Теперь у нас есть значения, которые хранятся в R, G и B переменных, но нам нужно отобразить эту информацию для пользователю так, чтобы они могли легко её прочитать. Поэтому нам нужно создать переменную RGB, которая будет держать эти три значения, разделенных запятыми, а затем представить их, как значения одного из наших полей ввода:

Если протестировать, то у вас уже есть полнофункциональная цветовая палитра, которая извлекает значение RGB при любом нажатии. Но сделать её немного получше, мы можем добавить функцию из Javascripter, которая преобразует RGB значения в HEX значения. Вот эта функция:

Теперь, когда мы получили эту функцию все, что нужно сделать для того, чтобы представить HEX значения, это выполнить функцию с нашим RBG значением, а затем установить значение ввода на HEX цвета с # до и с функцией уже на месте. Это довольно просто:

Топ-пост этого месяца:  Избегаем побочных эффектов в JavaScript

felipesabino / ColorConverter.js

/**
*
* Javascript color conversion
* http://www.webtoolkit.info/javascript-color-conversion.html
*
* */
function HSV ( h , s , v ) <
if (h 0 )
if (s 0 )
if (v 0 )
if (h > 360 )
if (s > 100 )
if (v > 100 )
this . h = h;
this . s = s;
this . v = v;
>
function RGB ( r , g , b ) <
if (r 0 )
if (g 0 )
if (b 0 )
if (r > 255 )
if (g > 255 )
if (b > 255 )
this . r = r;
this . g = g;
this . b = b;
>
function CMYK ( c , m , y , k ) <
if (c 0 )
if (m 0 )
if (y 0 )
if (k 0 )
if (c > 100 )
if (m > 100 )
if (y > 100 )
if (k > 100 )
this . c = c;
this . m = m;
this . y = y;
this . k = k;
>
var ColorConverter = <
_RGBtoHSV : function ( RGB ) <
var result = new HSV ( 0 , 0 , 0 );
r = RGB . r / 255 ;
g = RGB . g / 255 ;
b = RGB . b / 255 ;
var minVal = Math . min (r, g, b);
var maxVal = Math . max (r, g, b);
var delta = maxVal — minVal;
result . v = maxVal;
if (delta == 0 ) <
result . h = 0 ;
result . s = 0 ;
> else <
result . s = delta / maxVal;
var del_R = (((maxVal — r) / 6 ) + (delta / 2 )) / delta;
var del_G = (((maxVal — g) / 6 ) + (delta / 2 )) / delta;
var del_B = (((maxVal — b) / 6 ) + (delta / 2 )) / delta;
if (r == maxVal)
else if (g == maxVal) < result . h = ( 1 / 3 ) + del_R - del_B; >
else if (b == maxVal) < result . h = ( 2 / 3 ) + del_G - del_R; >
if ( result . h 0 )
if ( result . h > 1 )
>
result . h = Math . round ( result . h * 360 );
result . s = Math . round ( result . s * 100 );
result . v = Math . round ( result . v * 100 );
return result;
>,
_HSVtoRGB : function ( HSV ) <
var result = new RGB ( 0 , 0 , 0 );
var h = HSV . h / 360 ;
var s = HSV . s / 100 ;
var v = HSV . v / 100 ;
if (s == 0 ) <
result . r = v * 255 ;
result . g = v * 255 ;
result . v = v * 255 ;
> else <
var_h = h * 6 ;
var_i = Math . floor (var_h);
var_1 = v * ( 1 — s);
var_2 = v * ( 1 — s * (var_h — var_i));
var_3 = v * ( 1 — s * ( 1 — (var_h — var_i)));
if (var_i == 0 )
else if (var_i == 1 )
else if (var_i == 2 )
else if (var_i == 3 )
else if (var_i == 4 )
else ;
result . r = var_r * 255 ;
result . g = var_g * 255 ;
result . b = var_b * 255 ;
result . r = Math . round ( result . r );
result . g = Math . round ( result . g );
result . b = Math . round ( result . b );
>
return result;
>,
_CMYKtoRGB : function ( CMYK ) <
var result = new RGB ( 0 , 0 , 0 );
c = CMYK . c / 100 ;
m = CMYK . m / 100 ;
y = CMYK . y / 100 ;
k = CMYK . k / 100 ;
result . r = 1 — Math . min ( 1 , c * ( 1 — k ) + k );
result . g = 1 — Math . min ( 1 , m * ( 1 — k ) + k );
result . b = 1 — Math . min ( 1 , y * ( 1 — k ) + k );
result . r = Math . round ( result . r * 255 );
result . g = Math . round ( result . g * 255 );
result . b = Math . round ( result . b * 255 );
return result;
>,
_RGBtoCMYK : function ( RGB ) <
var result = new CMYK ( 0 , 0 , 0 , 0 );
r = RGB . r / 255 ;
g = RGB . g / 255 ;
b = RGB . b / 255 ;
result . k = Math . min ( 1 — r, 1 — g, 1 — b );
result . c = ( 1 — r — result . k ) / ( 1 — result . k );
result . m = ( 1 — g — result . k ) / ( 1 — result . k );
result . y = ( 1 — b — result . k ) / ( 1 — result . k );
result . c = Math . round ( result . c * 100 );
result . m = Math . round ( result . m * 100 );
result . y = Math . round ( result . y * 100 );
result . k = Math . round ( result . k * 100 );
return result;
>,
toRGB : function ( o ) <
if (o instanceof RGB )
if (o instanceof HSV )
if (o instanceof CMYK )
>,
toHSV : function ( o ) <
if (o instanceof HSV )
if (o instanceof RGB )
if (o instanceof CMYK )
>,
toCMYK : function ( o ) <
if (o instanceof CMYK )
if (o instanceof RGB )
if (o instanceof HSV )
>
>

This comment has been minimized.

Copy link Quote reply

GeoffreyDijkstra commented Apr 18, 2020

I think you got a bug at line: 102. I think it should be result.b instead of result.v = v * 255;

This comment has been minimized.

Copy link Quote reply

thesoftease commented Jan 24, 2020

demo page is not working. How to use?
I want to convert rgb to cmyk and vice versa
any example??

This comment has been minimized.

Copy link Quote reply

LJNeon commented Apr 7, 2020

rgb(0, 0, 0) breaks the rgb to cmyk conversion formula

  • © 2020 GitHub , Inc.
  • Terms
  • Privacy
  • Security
  • Status
  • Help

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Конвертирование HEX кода в RGB

Предлагаем Вам скрипт простого конвертера цветов, написанного на JavaScript, который позволяет конвертировать коды цветов из HEX в RGB.

Наглядный пример работы конвертера цветов Вы можете наблюдать ниже:

Для получения подобного конвертера цветов из HEX кода в RGB код, добавьте на свой сайт следующий небольшой JavaScript код:

Далее необходимо создать форму, в которую мы будем вводить HEX код цвета, и получать соответствующий ему RGB код. Делается это следующим образом:

Как видите ничего сложного в данном скрипте конвертера нет. Ознакомиться с основными цветами и их кодами можно по ссылке — Названия, HEX и RGB коды цветов в HTML.

Преобразовать RGB в HEX формат цвета на jQuery

В последнее время стало популярным использование input-ов из html5. Одним из них является поле цвета (type=»color»). Он работает с HEX форматом цвета (например: #000000) и это очень удобно.

Но недавно столкнулся с такой проблемой. Мне нужно было получить цвет элемента с помощью jQuery и подставить его в input с цветом. Но метод .css() возвращает цвет только в формате RGB. Поэтому пришлось поломать голову, как быстро преобразовать RGB в HEX.

Чтобы лучше понять, как это должно работать — составим такой пример:

Здесь при клике на цвета input берет их значения и подставляет в свой value. В идеале цвет в поле должен копироваться, но этого не происходит, так как нам нуже HEX формат. А с .css() метода передается RGB — его мы видим при каждом alert-e, что говорит о том, что скрипт работает правильно.

Используем в примере функцию преобразования RGB в HEX:

Так как html составляющая остается неизменной, я ее пропустил. В коде скрипта добавилась функция rgb_to_hex(), которая и принимает из .css() RGB цвет и преобразует его в HEX формат. За счет этого input сразу изменяет свой цвет при клике на соответствующий div.

Примеры использования функции:
alert(rgb_to_hex(‘rgb(0, 34, 34)’)); // #002222
alert(rgb_to_hex(‘rgba(7, 72, 169, 0.59)’)); // #0748a9

Стоит сказать, что если в rgb формате есть 4-й параметр (прозрачность) — он игнорируется этой функцией без ошибки.

На заметку. В PHP можно сделать обратное преобразование так:

$hex_color = «#ffffff»;
list($r, $g, $b) = sscanf($hex_color, «#%2x%2x%2x»);
echo ‘rgb(‘, $r, ‘,’ , $g, ‘,’ , $b, ‘)’;

На выходе мы получим значение: rgb(255,255,255); при условии, что $hex_color будет записан полным форматом (#ffffff, а не #fff).

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

12 лучших JavaScript плагинов Выбора Цвета (Color Picker)

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

JavaScript плагины помогают найти код любого цвета. Цвет состоит из цветовых кодов. Цветовые коды – это просто значение частоты трех цветов: красного, зеленого и синего. Значение частоты трех цветов колеблется от 0 до 255. Поэтому чем выше указана частота использования одного их цветов, тем больше он будет влиять на формирование окончательного цвета.

Каждый код HTML состоит из символа “#” и 6 букв или цифр. Используется шестнадцатеричная система счисления. Например, “FF” в шестнадцатеричной системе соответствует 255 в десятеричной.

Так первыми двумя символами в коде цвета HTML обозначается насыщенность красного цвета. 00 – наименее насыщенный и FF – наиболее насыщенный. Третий и четвертый символы означают насыщенность зеленого, а пятый и шестой – синего. Таким образом, комбинируя разные по насыщенности оттенки красного, зеленого и синего, мы можем получить любой нужный нам цвет.

Если Вы хотите недорого купить новые оригинальные iPhone, iPad, MacBook, iMac, то iStudio – это один из лучших магазинов техники Apple – iStudio116.ru – рекомендуем!

1. Плагин ColorPicker – Advance JavaScript Color Picker

Сайт плагина: “dematte.at/colorPicker/”
GitHub ссылка: “github.com/PitPik/colorPicker”

С помощью этого плагина мы можем получить числовое значение цвета. Цвет выбирается из заданного набора цветов.

2. Плагин Evol – ColorPicker

Сайт плагина: “evoluteur.github.io/colorpicker/”
GitHub ссылка: “github.com/evoluteur/colorpicker”

Дизайн данного плагина выбора цвета похож на Microsoft Office 2010 Color picker. Главное преимущество этого плагна является поддержка прозрачного цвета.

3. Плагин JS Color – Javascript Web Color Picker

Сайт плагина: “jscolor.com/”

Плагин обладает супер легкой установкой (в 2-е строчки). Механизм выбора цвета немного отличается – здесь мы вводим код, чтобы увидеть формирование цвета и выбрать нужное его сочетание.

4. Плагин Jquery Color Palette Picker

Сайт плагина: “htmlpreview.github.io/?https://raw.githubusercontent.com/carloscabo/jquery-palette-color-picker/master/demo.html”
GitHub ссылка: “github.com/carloscabo/jquery-palette-color-picker”

Данный плагин облаедет большим количеством полей формы для выбора цвета.

5. Плагин Farbtastic Color Picker

Сайт плагина: “acko.net/blog/farbtastic-jquery-color-picker-plug-in/”

Плагин, внешне отличающийся от предыдущих. Даёт только номер цвета, хотя в некоторых случаях вроде бы можно получить нормированный цвет по системе HSL (нормированный к единице).

6. Плагин Color Picker Jquery Plugin

Сайт плагина: “eyecon.ro/colorpicker/”

Интерфейс выбора цвета похож на интерфейс программы Adobe Photoshop. Как только мы выбираем цвет – коды цвета отображаются в нижнем поле.
Дизайн интерфейса стильный и простой.

7. Плагин Pick-a-color for Twitter Bootstrap

Сайт плагина: “lauren.github.io/pick-a-color/”
GitHub ссылка: “github.com/lauren/pick-a-color”

Знаменитый фреймворк Bootstrap использует именно этот плагин для выбора цвета. Мы можем просто скачать этот плагин и использовать его в таком же виде на своих сайтах.

8. Плагин ColorJoe – Scaleable Color Picker

Сайт плагина: “bebraw.github.io/colorjoe/”
GitHub ссылка: “github.com/bebraw/colorjoe”

Выбор цвета дает значения цвета, как только мы выбираем цвет из палитры. Четыре типа выбора цвета доступны здесь. Мы обычно используем первый Выбор цвета one-RGB, так как весь цвет, который мы используем, – это комбинированная форма цвета RGB.

9. Плагин FlexiColor Picker

Сайт плагина: “daviddurman.com/flexi-color-picker/”
GitHub ссылка: “github.com/DavidDurman/FlexiColorPicker”

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

10. Плагин Photoshop-like Javascript Color Picker

Сайт плагина: “johndyer.name/photoshop-like-javascript-color-picker/”
Демонстрационная ссылка: “johndyer.name/lab/colorpicker/”

Интерфейс аналогичен интерфейсу Adobe Photoshop. При выборе цвета мы видим значения для всех цветов: красный, зеленый и синий, кроме того, в низу отображается общий цветовой код.

11. Плагин Simple Jquery Color Picker

Сайт плагина: “plnkr.co/edit/VVclW0?p=preview”
GitHub ссылка: “github.com/tkrotoff/jquery-simplecolorpicker”

Здесь представлены различные типы выбора цвета на веб-странице. Мы можем выбрать конкретный тип из представленных вариантов и использовать его на своем сайте.

12. Плагин Jquery Color Pickers

Сайт плагина: “vanderlee.com/martijn/?page_ > Демонстрационная ссылка: “vanderlee.github.io/colorpicker/”

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

HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.

Палитра цвета в HTML. Коды HTML цветов. Цвет текста, ссылки, фона в HTML

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы добрались до темы цветов в HTML. Отмечу, что для управления цветом на веб-страницах в данный момент лучше использовать CSS, но иногда бывают такие ситуации, когда средства CSS недоступные (например, многие почтовые клиенты CSS не понимают). Поэтому будущему веб-мастеру просто необходимо изучить средства HTML, которые позволяют изменять цвет, например для того, чтобы делать яркие и красочные e-mail рассылки, которые будут привлекать внимание целевой аудитории сайта.

Палитра цвета в HTML. Коды HTML цветов. Цвет текста, ссылки, фона в HTML.

Данная запись получилось довольно объемной, но из нее вы узнаете обо всех технических особенностях работы с цветом при помощи HTML. Начнем мы запись с того, что разберемся с вопрос: для чего нам нужно выделять цветом те или иные элементы HTML страницы. Затем мы поговорим про модель RGB, которая позволяет задавать цвета в HTML при помощи специальных кодов (попутно мы рассмотрим десятичные коды задания цвета и шестнадцатеричные значения HTML цветов). Также из данной записи вы узнаете про палитру цвета, а также поймете почему в HTML нет никакой палитры. И завершении этой публикации будут примеры изменения цвета фона, текста и ссылок.

Использование цветов в HTML

Страницы сайта были бы скучными и неинтересными без изображений, про работу с картинками изображениями в HTML мы говорили ранее и очень подробно. Но у изображений есть один существенный минус: каждое изображение – это дополнительный HTTP запрос к серверу и, соответственно, дополнительная нагрузка на хостинг.

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

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

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

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

В отрасли IT для манипуляции цветом существует множество цветовых моделей. Самая широко распространённая модель представления цвета – это модель RGB. Про некоторые особенности данной модели мы поговорим здесь, а для более детального знакомства с RGB будет отдельная публикация. Ниже вы найдете список цветовых моделей, используемых в IT (не только в HTML и CSS):

  1. Модель RGB. Данная модель получила очень широкое распространение и, пожалуй, является одним из самых удобных и распространенных способов манипуляции цветом HTML элементов.
  2. Модель RGBA. Данная модель очень похожа на модель RGB, но включает в себя альфа-канал цвета. Особенность модели RGBA заключается в том, что она позволяет регулировать не только цвет HTML элемента, но и его прозрачность за счет наличия альфа-канала. Модель RGBA была добавлена в CSS3 и не поддерживается старыми браузерами.
  3. Модель HSL. Особенность модели HSL заключатся в том, что цвет мы задаем при помощи его параметров: оттенка, напыщенности и светлоты. Данная модель несколько более сложная в понимание, чем модель RGB.
  4. Модель HSLA. Данная модель очень похожа на модель HSL, но она так же, как и модель RGBA позволяет работать с альфа-каналом цвета, поэтому при помощи HSLA мы можем задавать не только цвет HTML элемента на странице, но и его прозрачность.
  5. Модель HSV (HSB). Данную модель не стоит путать с моделью HSL. Отметим, что первых четыре модели можно использовать в HTML или CSS для оформления веб-страниц, а вот модель HSV – нет. Модель HSV была разработана одним из основателей студии Pixar в 1978 году и очень похожа на HSL.
  6. Модель 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, то прожектор дает максимально яркий цвет.

Пример того, как происходит создания цвета в модели RGB

Таким образом получается, что если вы светите на одну и ту же точку красным и зеленым прожектором, то на черной стене вы заметите желтое пятно. Если комбинируете красный и синий, то получается пурпурный цвет, а если объединяете зеленый и синий, то световое пятно на черной стене будет цвета Cyan, но если вы направите все три прожектора на одну точку, то световое пятно будет белого цвета.

Описанный выше принцип лежит в основе модели RGB и применяется для манипуляции цветами в HTML элементов на странице в браузере.

HTML атрибуты для изменения цвета элементов: цвет фона элемента и цвет текста внутри элемента

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

  1. HTML атрибут color. Данный атрибут позволяет изменять цвет текста, находящегося внутри HTML элемента. Атрибут может принимать значения в виде называний HTML цветов и при помощи кодов модели RGB в шестнадцатеричной системе счисления и в десятичной системе счисления. Атрибут color – это уникальный HTML атрибут, который позволяет менять цвет текста внутри некоторых HTML элементов.
  2. HTML атрибут text. Данный атрибут является уникальным атрибутом тэга . Тэг вместе с тэгами и образуют структуру HTML документа. Если вы помните, то внутри контейнера размещаются элементы, которые потом отображаются браузером в области просмотра. Атрибут text позволяет задать цвет текста по умолчанию для всей HTML страницы.
  3. HTML атрибут bgcolor. Также являет уникальным HTML атрибутом и позволяет изменять цвет фона некоторых HTML элементов.
  4. HTML атрибут vlink. Данный атрибут уникален и применяется только к тэгу , чтобы изменить цвет ссылки, которую уже посетил пользователь.
  5. HTML атрибут alink. Этот атрибут также уникален и применим только к тэгу . Атрибут alink меняет цвет активной HTML ссылки.
  6. HTML атрибут link. Атрибут link используется только вместе с тэгом и служит для изменения цвета ссылок HTML страницы, которые еще не посещал пользователь.

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

Использование десятичных кодов цвета в HTML

Итак, мы говорили о том, что прожектору можно задавать яркость цвета при помощи специальной линейки, на которой расположены пронумерованные рисочки от 0 до 255. А теперь посмотрим, как это нам поможет изменять цвет HTML элементов. Дело всё в том, что цвет текста внутри HTML элемента или цвет фона в HTML мы можем изменять при помощи десятичного кода следующим образом:

Топ-пост этого месяца:  Раздел посвященный установке и настройке Wordpress
Добавить комментарий