В среде разработки для вывода и показа нужного цвета необходимо знать его код. Для различных языков программирования и web (HTML, JavaScript, CSS) существуют свои форматы, наиболее распространенными из которых являются RGB, HSV и Hex. В сою очередь спецификации W3C определяют 16 основных и 130 оттенков названий цветов. Чтобы понимать в каком формате записан код цвета нужно знать как он обозначается.
RGB код цвета (Red,Green,Blue) записывается в виде (*, *, *) в котором «*» обозначают количество тона (красного, зеленого, синего) в заданном цвете. Значения варьируются от 0 до 255.
Существует еще формат RGBA (r,g,b,a), в котором парамерт ‘a’ (alpha) указывает на поддержку альфа канала для определения непрозрачности обьекта. Задается в диапазоне от 0.0 (прозрачный) до 1.0 (непрозрачный) — (150, 100, 200, 0.3).
HSV стандарт с видом (210, 79%, 34%), координатами которого есть:
- Hue — тон цвета в градусах от 0° до 360°;
- Saturation — показатель насыщенности в единицах 0-1 или 0-100. Чем меньше параметр, тем цвет стает ближе к серому нейтральному. А чем больше — тем насыщеннее. Еще этот параметр могут называть чистотой цвета;
- Value — значение цвета, которое задает яркость. Измеряется в единицах 0-100 или 0-1.
Hex формат представляется в виде трех пар символьных значений #ffa800, записанных в шестнадцатиричной системе исчисления. Первая пара обозначает насыщенность красного, вторая — зеленого и третья — синего цвета. Указывается единицами от 0 до 9 и английскими буквами от a до f.
Color Picker
При помощи палитры цветов HTML у вас есть возможность выбрать подходящий тон или ввести значения вручную для проверки. Код цвета отображается в форматах RGB и Hex. Конвертер в основном служит для работы с CSS.
See the Pen Colour Picker Tool by Test Lines (@RomanPenia) on CodePen.
Таблица цветов безопасной палитры
По спецификации HTML определены 16 основных цветов с названиями, которые воможно использовать как ключевые слова в виде значений. Также представлены коды в форматах Hex и RGB.
| Название цвета | Hex | Цвет | r | g | b |
| серебряный (silver) | #c0c0c0 | 192 | 192 | 192 | |
| красный (red) | #ff0000 | 255 | 0 | 0 | |
| черный (black) | #000000 | 0 | 0 | 0 | |
| зеленый (green) | #008000 | 0 | 128 | 0 | |
| синий (blue) | #0000ff | 0 | 0 | 255 | |
| желтый (yellow) | #ffff00 | 255 | 255 | 0 | |
| белый (white) | #ffffff | 255 | 255 | 255 | |
| серый (gray) | #808080 | 128 | 128 | 128 | |
| темно-бордовый (maroon) | #800000 | 128 | 0 | 0 | |
| фиолетовый (purple) | #800080 | 128 | 0 | 128 | |
| темно-синий (navy) | #000080 | 0 | 0 | 128 | |
| морская волна (agua, cyan) | #00ffff | 0 | 255 | 255 | |
| сине-зеленый (teal) | #008080 | 0 | 128 | 128 | |
| оливковый (olive) | #808000 | 128 | 128 | 0 | |
| пурпурный (fuchsia, magenta) | #ff00ff | 255 | 0 | 255 | |
| лайм (lime, lightgreen) | #00ff00 | 0 | 255 | 0 |
При возникновении вопросов, корректности работы конвертера — пишите свои комментарии и пожелания.