Программа представляет собой интерактивный цветовой пикер, позволяющий выбирать цвета с помощью визуальной панели, а также вводить цветовые значения в разных форматах: HEX, RGB и HSB (Hue, Saturation, Brightness). Работает без установки, в онлайн режиме, на ПК или телефонах.
Основные возможности
- Выбор цвета на холсте: Пользователь кликает или перетаскивает курсор по цветовой области, выбирая насыщенность и яркость цвета в пределах выбранного оттенка.
- Слайдер оттенка (Hue): Позволяет изменять базовый оттенок цвета от 0° до 360°, что обновляет палитру на холсте и позицию индикатора.
- Ввод значений вручную: Три текстовых поля для ввода цвета в форматах HEX, RGB и HSB. При изменении любого из них остальные автоматически обновляются, обеспечивая удобство и точность выбора цвета.
- Сохранение цветов: Можно сохранить до 8 понравившихся цветов и при следующем посещении страницы они опять появятся в палитре. Сохранённые цвета отображаются в виде небольших квадратов, по которым можно кликнуть, чтобы быстро выбрать его код.
Технические детали
Программа построена на базе HTML5 Canvas, JavaScript и локального хранилища браузера (localStorage):
- Canvas используется для отображения цветовой панели, с градиентами, имитирующими насыщенность и яркость для выбранного оттенка.
- При перемещении курсора по холсту с помощью событий мыши считывается пиксельный цвет, который конвертируется в HEX и обновляет UI.
- Слайдер оттенка меняет базовый цвет, после чего холст перерисовывается с новым градиентом.
- Ввод в поля HEX, RGB и HSB поддерживается с проверкой корректности данных и мгновенным обновлением остальных полей и палитры.
- Функции конвертации между цветами (HEX ↔ RGB ↔ HSB) обеспечивают правильное отображение и синхронизацию данных.
- Сохранённые цвета хранятся в localStorage, что позволяет сохранить пользовательские настройки между сессиями.
Как пользоваться сервисом
- Выберите оттенок с помощью слайдера «Hue» — цвет холста изменится в зависимости от выбранного значения.
- Кликните по цветовой панели или перетащите кружок, чтобы выбрать насыщенность и яркость.
- Вводите цветовые значения вручную в поля HEX, RGB или HSB — остальные поля и палитра обновятся автоматически.
- Нажмите кнопку «Сохранить цвет», чтобы добавить текущий цвет в список сохранённых. Для удаления кликните на нужный квадратик и нажмите эту же кнопку (она сменит название), если цвет уже сохранён.
- Для выбора сохранённого цвета кликните по одному из квадратиков ниже.
Справочная таблица цветов
| HEX | RGB | Название |
|---|---|---|
| #FF0000 | 255, 0, 0 | Красный |
| #00FF00 | 0, 255, 0 | Зеленый |
| #0000FF | 0, 0, 255 | Синий |
| #FFFF00 | 255, 255, 0 | Желтый |
| #FFA500 | 255, 165, 0 | Оранжевый |
| #800080 | 128, 0, 128 | Пурпурный |
| #00FFFF | 0, 255, 255 | Голубой |
| #FFC0CB | 255, 192, 203 | Розовый |
| #808080 | 128, 128, 128 | Серый |
| #FFFFFF | 255, 255, 255 | Белый |
| #000000 | 0, 0, 0 | Черный |
| #ADD8E6 | 173, 216, 230 | Светло-голубой |
| #800000 | 128, 0, 0 | Темно-красный |
| #008000 | 0, 128, 0 | Темно-зеленый |
| #000080 | 0, 0, 128 | Темно-синий |
| #FFFFE0 | 255, 255, 224 | Светло-желтый |
| #FFD700 | 255, 215, 0 | Золотой |
| #DAA520 | 218, 165, 32 | Золотистый |
| #4B0082 | 75, 0, 130 | Индиго |
| #F08080 | 240, 128, 128 | Светло-красный |
| #90EE90 | 144, 238, 144 | Светло-зеленый |
| #20B2AA | 32, 178, 170 | Светло-бирюзовый |
| #87CEFA | 135, 206, 250 | Светло-небесный |
| #778899 | 119, 136, 153 | Синий серый |
| #B0C4DE | 176, 196, 222 | Светло-синий серый |
| #FFFFF0 | 255, 255, 240 | Цвет айвори |
| #F5F5DC | 245, 245, 220 | Бежевый |
| #FFE4C4 | 255, 228, 196 | Бисквит |
| #FFDEAD | 255, 222, 173 | Навахо белый |
| #FAF0E6 | 250, 240, 230 | Льняной |
| #D2B48C | 210, 180, 140 | Золотисто-коричневый |
| #DEB887 | 222, 184, 135 | Светло-коричневый |
| #BC8F8F | 188, 143, 143 | Розово-коричневый |
| #FFE4E1 | 255, 228, 225 | Морской жемчуг |
| #FFF0F5 | 255, 240, 245 | Лавандовый |
| #E6E6FA | 230, 230, 250 | Лаванда |
| #D8BFD8 | 216, 191, 216 | Тефлон |
| #DDA0DD | 221, 160, 221 | Сиреневый |
| #EE82EE | 238, 130, 238 | Фуксия |
| #F4A460 | 244, 164, 96 | Сэндибраун |
| #2E8B57 | 46, 139, 87 | Морской зеленый |
| #4682B4 | 70, 130, 180 | Стальной синий |
| #DAA520 | 218, 165, 32 | Золотойrod |
| #D2691E | 210, 105, 30 | Шоколад |
| #9ACD32 | 154, 205, 50 | Желто-зеленый |
| #FF4500 | 255, 69, 0 | Оранжево-красный |
| #6A5ACD | 106, 90, 205 | Синий лаванда |
| #708090 | 112, 128, 144 | Слейт серый |
| #FFFACD | 255, 250, 205 | Лимонный |
| #E0FFFF | 224, 255, 255 | Светло-бирюзовый |
| #F0FFF0 | 240, 255, 240 | Мята |
| #FFB6C1 | 255, 182, 193 | Светло-розовый |
| #FFA07A | 255, 160, 122 | Светло-коралловый |
| #20B2AA | 32, 178, 170 | Светло-морская волна |
| #87CEEB | 135, 206, 235 | Небесно-голубой |
| #6B8E23 | 107, 142, 35 | Оливковый |
| #FF6347 | 255, 99, 71 | Томатный |
| #40E0D0 | 64, 224, 208 | Бирюзовый |
| #EE82EE | 238, 130, 238 | Фиолетовый |
| #F5DEB3 | 245, 222, 179 | Пшеничный |
| #DCDCDC | 220, 220, 220 | Гейнсборо |
| #FFE4B5 | 255, 228, 181 | Мокко |
Этот цветовой кодировщик — удобный инструмент для быстрого выбора и конвертации цветов для веб-разработчиков, дизайнеров и всех, кто работает с цветом. Его простота в использовании сочетается с мощной логикой конвертации и возможностью сохранять любимые цвета прямо в браузере.
