[утилиты онлайн] Цветовой калькулятор HSL и RGB

Ниже представлен скрипт, реализующий удобную палитру для выбора и запоминания цвета прямо в браузере. Для работы необходимы JavaScript и cookie.

Возможности калькулятора:

• Получение цвета в RGB и HLS и преобразование цвета между этими цветовыми пространствами.
• Получение значения цвета в различных форматах: 2 варианта, используемых в HTML и CSS, проценты, десятичное значение, шестнадцатиричные значения для языков Си, Pascal/Delphi и Visual Basic.
• Запоминание выбранного цвета между запусками цветового калькулятора (сохраняется в cookie браузера).
• Хранение палитры из 32-х цветов (сохраняется в cookie браузера).

---

R G B

H S L

Кодирование RGB [RRR, GGG, BBB] Десятичные значения в диапазоне от 0 до 255 [RR%, GG%, BB%] Процентные значения [NNN] В виде одного десятичного числа [#RRGGBB] Шестнадцатиричная запись, принятая в HTML и Photoshop [0x00BBGGRR] Шестнадцатиричная запись, принятая в языке Си [$00BBGGRR] Шестнадцатиричная запись, принятая в языке Object Pascal [0&H00BBGGRR&] Шестнадцатиричная запись, принятая в языке Visual Basic

Палитра

---

Как пользоваться цветовым калькулятором.

Интерфейс калькулятора состоит из 4-х блоков. В верхнем блоке отображается текущий выбранный цвет, инвертированный цвет (имеющий обратные значения RGB) и обратный цвет (имеющий обратное значение Hue).
Во втором блоке располагаются регуляторы RGB и HSL, при помощи которых осуществляется выбор цвета. Каждая полоса регулятора состоит из двух областей. В верхней части полосы показан цветовой градиент, дающий наглядное представление о влиянии регулятора на цвет: черно-красный для R, черно-белый для L и так далее. В нижней части полосы изображены реальные цвета для соответствущего положения регулятора.
В третьем блоке отображается значение текущего цвета, отформатированное различными способами, чтобы его можно было скопировать, куда вам нужно.
Последний блок — палитра с запомненными цветами.

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

Если щелкнуть по инвертированному или обратному цвету, то соответствующий цвет станет текущим.

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

Запомненные цвета храняется в cookie браузера 6 месяцев.

Работа калькулятора протестирована в Opera 10 и Firefox 3. (Update. В IE8 тоже работает — после перетаскивания реализации getElementsByClassName повыше в шаблоне блога. Но при этом ооооочень тормозит.)

Исходный текст цветового калькулятора доступен через html-код данной страницы. При использовании цветового калькулятора на других сайтах, указание авторства и ссылка на блог izhurnal.blogspot.com обязательны.