Цветовые коды HTML
Преобразуйте и выберите цветовые коды HTML, выбрав одно из приложений ниже
Как получить цветовой код HTML
Выберите приложение
Вверху над окном редактора вы можете увидеть кнопки выбора приложения. Щелкните по одному из них, чтобы запустить приложение. Позже вы можете переключить это и попробовать другое приложение.
Следуйте шагам
Теперь вы можете использовать приложение внутри редактора для получения цветового кода HTML. Следуйте инструкциям, которые вы увидите внутри приложения. Если вам не нравится это приложение, попробуйте другое.
Наслаждайтесь результатом
Теперь, когда у вас есть понравившееся изображение, не забудьте сохранить его на свой компьютер. Также добавьте наш сайт в закладки и на главный экран вашего устройства, чтобы не потерять ссылку.
Все инструменты цвета
Подберите цвет в Интернете в два клика. Наша бесплатная онлайн-палитра цветов позволит вам получить цвет из пикселя с помощью пипетки.
Выберите цвет HEX онлайн в два клика. Наша бесплатная онлайн-палитра цветов позволит вам получить цветовой код HEX из пикселя с помощью пипетки.
Онлайн и бесплатное цветовое колесо. Использование палитры на цветовом круге позволяет выбрать сочетание цветов по всем правилам колористики и цветовой гаммы.
Найдите отличные цветовые палитры бесплатно и в Интернете. Генератор палитр цветов и оттенков поможет подобрать удачное сочетание 2, 3, 4 и более цветов.
Вам нравится PhotoRetrica? Помогите нам расти!
Мы стараемся создать максимально удобный и универсальный редактор для всего, что связано с фотографиями и изображениями. Мы нуждаемся в твоей помощи. Добавьте нас в закладки или на главный экран вашего устройства. Поделитесь ссылкой на наш сайт в своих социальных сетях. Спасибо!
Узнать цвет пикселя онлайн
Автор: Юрий Белоусов · 15.01.2019
Дизайнерам, вебмастерам, да и простым пользователям может понадобиться вычислить какого цвета тот или иной элемент на странице сайта или какой-то определенный пиксель на изображении, узнать его цветовой код в форматах RGB или HEX.
В этой статье рассмотрим, как узнать какого цвета пиксель с помощью нескольких простых, но действенных инструментов, сервисов и программ.
Определение цвета в браузере
Если объект, цветовую схему которого вы хотите знать, расположен в интернете, а не на локальном компьютере, то самый простой и быстрый способ узнать, какого цвета пиксель – воспользоваться встроенным в браузер инструментом для разработчиков.
Определение цвета в браузере:
Вот так вот просто можно узнать и получить код цвета пикселя на странице сайта онлайн с помощью браузера. Теперь без труда можно определить цвет какого-либо элемента интерфейса на странице сайта: фона, текста или точки на изображении.
Перемещая курсор по палитре можно изменить цвет выбранного элемента (не работает с картинками и фото).
Если есть необходимость определить цвет пикселя на картинке, расположенной на компьютере, то и в этом случае можно воспользоваться данным инструментом.
Достаточно сделать следующее:
Как определить цвет пикселя на картинке онлайн
Если предыдущий способ не устраивает, или по каким-то причинам не удалось разобраться с инструментами разработчика, то есть возможность определить цвет пикселя на картинке онлайн с помощью сервисов.
Подобных онлайн-сервисов огромное множество. Я добавлю ссылки лишь на 3:
Все они очень простые в использовании. Нужно:
Photoshop и Paint: как узнать цвет с помощью пипетки
Предыдущие способы куда проще, ведь не требуют установки и запуска программ для выполнения поставленной задачи. Но для тех, кто активно работает с графикой просто необходимо уметь обращаться графическими редакторами. Поэтому рассмотрим, как определить цвет с помощью пипетки в Paint и Photoshop.
Определение цвета с помощью палитры в Paint:
Определение цвета с помощью пипетки в Photoshop:
Приложения для определения цвета для Google Chrome
Для быстрого определения цвета онлайн можно использовать вспомогательные расширения (плагины).
Все они очень просты в использовании. Нужно:
Конечно же, подобные плагины есть не только для Google Chrome, но и для Mozilla Firefox, Opera, Яндекс браузера. Чтобы их найти необходимо в магазине расширений в своем браузере в поле поиска вбить «Color Picker».
Программа для определения цвета на экране
Для выполнения поставленной задачи, можно использовать программы для определения цвета на экране.
Pixie – очень простая в использовании программа, которая легко поможет определить какого цвета пиксель на экране монитора.
Не нашли ответ? Тогда воспользуйтесь формой поиска:
Как узнать код цвета на сайте
Для того чтобы украсить ваш сайт красивыми оттенками. Тем самым повысить дизайн и привлечь большее внимание потребителей. Необходимо знать некоторую информацию, которая поможет освоить присвоение цвета. Сделать это достаточно легко.
Все цвета, которые мы видим на экране сайтов, отображаются языком HTML и RGB является палитрой цветов. Но каким же все-таки образом узнать код цвета расположенного на экране. Определяя цвет не важно, отображено что-то на экране либо ничего нет, просто пустое поле.
Для чего необходимо знать код цвета на сайте и для чего нам пригодиться это.
Во-первых, пригодиться для разработки дизайна сайта, правка шаблона страницы, использовать в html верстке и прочее.
Instant Eyedropper одна из совершенных прогарам для определения кода цвета. После установки данной программы в правом нижнем углу появится иконка. Кликаем на значок левой кнопкой мыши, после чего открывается окно, не отпуская кнопку мыши, переносим на ту область, которая вас интересует.
Как определить цвет в браузере стандартными инструментами
Рассмотрим это на примере Mozilla Firefox. Для того, чтобы определить цвет объекта который вас интересует. Наведите на него и щелкните правой кнопкой мыши. После чего в подменю выбираем пункт исследовать элемент. В нижнем углу откроется окно инспектора, в нем отобразиться код страницы. А если щелкнуть левой кнопкой мыши по кружку с цветом, то откроется палитра цветов. При помощи данной палитры можно подобрать с точностью тот оттенок, который вам необходим. Определить цвет можно даже у небольших элементов страницы. После выбора цвета, который вам необходим, окликайте левой кнопкой мыши. Все изменения будут видны на предварительном просмотре. Далее копируем значение этого цвета и вставляем его css-файл.
Дата публикации : 15 ноября, 2017
Конвертер цветов
С помощью универсального конвертер цветов вы можете легко перевести цвет из одной цветовой модели в ряд других.
В первую очередь, калькулятор служит для удобной работы с современными форматами CSS3-цветов. Поддерживается конвертация из HEX в RGB/RGBA и HSL/HSLA, RGB в CMYK, XYZ, LAB, и обратно.
А также специальный функционал для замещения альфа-канала при переводе цвета из RGBA в RGB (и HSLA в HSL).
Справка по цветовым моделям
Далее приводится краткое описание цветовых систем с которыми работает конвертер, разъяснение по форматам, а также примеры использования полученных цветов в CSS/HTML.
HEX / HTML
Цвет в формате HEX — это ни что иное, как шестнадцатеричное представление RGB.
Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 — красный, 22 — зелёный, 33 — синий. Все значения должны быть между 00 и FF.
Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.
Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.
Значения RGB задаются целым числом от 0 до 255. Например, rgb(0,0,255) отображается как синий, так как синий параметр установлен в его самое высокое значение (255), а остальные установлены в 0.
Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).
Цветовые значения RGB поддерживаются во всех основных браузерах.
С недавних пор современные браузеры научились работать с цветовой моделью RGBA — расширением RGB с поддержкой альфа-канала, который определяет непрозрачность объекта.
Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.
Цветовая модель HSL является представлением модели RGB в цилиндрической системе координат. HSL представляет цвета более интуитивным и понятным для восприятия образом, чем типичное RGB. Модель часто используется в графических приложениях, в палитрах цветов, и для анализа изображений.
HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).
HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.
По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.
Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Цветовая модель CMYK часто ассоциируется с цветной печатью, с полиграфией. CMYK (в отличие от RGB) является субтрактивной моделью, это означает что более высокие значения связаны с более тёмными цветами.
Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).
Каждое из чисел, определяющее цвет в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию, а точнее, размер точки растра, выводимой на фотонаборном аппарате на плёнке данного цвета (или прямо на печатной форме в случае с CTP).
Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 — жёлтой краски, и 46 — чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).
HSB / HSV
HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.
HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).
Цветовая модель XYZ (CIE 1931 XYZ) является чисто математическим пространством. В отличие от RGB, CMYK, и других моделей, в XYZ основные компоненты являются «мнимыми», то есть вы не можете соотнести X, Y, и Z с каким-либо набором цветов для смешивания. XYZ является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.
Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.
Цвета HTML
Одной из составляющих представления веб-страниц в интернете является цвет, современные браузеры принимают и воспроизводят его, используя цветовые модели RGB, HSL, или же ключевые слова (названия).
Значения цвета в HTML может быть задано одним из следующих способов.
Имена цветов CSS, SVG.
В отличие от Html, в котором стандартными являются 16 цветов, спецификации CSS и SVG, определяют более расширенный список имен, состоящий из 147 названий. Однако, несмотря на наличие в списке сто сорока семи наименований, оригинальные значения имеют только 138, так как все серые цвета могут быть указаны как через «a», так и через «e» (grAy или grEy), а fuchsia и aqua имеют альтернативные имена: magenta и cyan соответственно (последние не поддерживаются HTML 4.01).
Приведенная ниже таблица представляет имена цветов и их значения в HSL и HEX. При использовании имен, следует помнить, что синтаксис SVG отличается от HTML и CSS: атрибут fill, к примеру, применяется как к цвету текста (color), так и объекта (background-color), а stroke используются для задания контура (обводки) элемента.
| Имя | R G B | H S L |
|---|---|---|
| white | #ffffffhex | 0°, 0%, 100% |
| ivory | #fffff0hex | 60°, 100%, 97% |
| lightyellow | #ffffe0hex | 60°, 100%, 94% |
| yellow | #ffff00hex | 60°, 100%, 50% |
| snow | #fffafahex | 0°, 100%, 99% |
| floralwhite | #fffaf0hex | 40°, 100%, 97% |
| lemonchiffon | #fffacdhex | 54°, 100%, 90% |
| cornsilk | #fff8dchex | 48°, 100%, 93% |
| seashell | #fff5eehex | 25°, 100%, 97% |
| lavenderblush | #fff0f5hex | 340°, 100%, 97% |
| papayawhip | #ffefd5hex | 37°, 100%, 92% |
| blanchedalmond | #ffebcdhex | 36°, 100%, 90% |
| mistyrose | #ffe4e1hex | 6°, 100%, 94% |
| bisque | #ffe4c4hex | 33°, 100%, 88% |
| moccasin | #ffe4b5hex | 38°, 100%, 86% |
| navajowhite | #ffdeadhex | 36°, 100%, 84% |
| peachpuff | #ffdab9hex | 28°, 27%, 100% |
| gold | #ffd700hex | 51°, 100%, 50% |
| pink | #ffc0cbhex | 350°, 100%, 88% |
| lightpink | #ffb6c1hex | 351°, 100%, 86% |
| orange | #ffa500hex | 39°, 100%, 50% |
| lightsalmon | #ffa07ahex | 17°, 100%, 74% |
| darkorange | #ff8c00hex | 33°, 100%, 50% |
| coral | #ff7f50hex | 16°, 100%, 66% |
| hotpink | #ff69b4hex | 330°, 100%, 71% |
| tomato | #ff6347hex | 9°, 100%, 64% |
| orangered | #ff4500hex | 16°, 100%, 50% |
| deeppink | #ff1493hex | 328°, 100%, 54% |
| magenta, fuchsia | #ff00ffhex | 300°, 100%, 50% |
| red | #ff0000hex | 0°, 100%, 50% |
| oldlace | #fdf5e6hex | 39°, 85%, 95% |
| lightgoldenrodyellow | #fafad2hex | 60°, 80%, 90% |
| linen | #faf0e6hex | 30°, 67%, 94% |
| antiquewhite | #faebd7hex | 34°, 78%, 91% |
| salmon | #fa8072hex | 6°, 93%, 71% |
| ghostwhite | #f8f8ffhex | 240°, 100%, 99% |
| mintcream | #f5fffahex | 150°, 100%, 98% |
| whitesmoke | #f5f5f5hex | 0°, 0%, 96% |
| beige | #f5f5dchex | 60°, 56%, 91% |
| wheat | #f5deb3hex | 39°, 77%, 83% |
| sandybrown | #f4a460hex | 28°, 87%, 67% |
| azure | #f0ffffhex | 180°, 100%, 97% |
| honeydew | #f0fff0hex | 120°, 100%, 97% |
| aliceblue | #f0f8ffhex | 208°, 100%, 97% |
| khaki | #f0e68chex | 54°, 77%, 75% |
| lightcoral | #f08080hex | 0°, 79%, 72% |
| palegoldenrod | #eee8aahex | 55°, 67%, 80% |
| violet | #ee82eehex | 300°, 76%, 72% |
| darksalmon | #e9967ahex | 15°, 72%, 70% |
| lavender | #e6e6fahex | 240°, 67%, 94% |
| lightcyan | #e0ffffhex | 180°, 100%, 94% |
| burlywood | #deb887hex | 34°, 57%, 70% |
| plum | #dda0ddhex | 300°, 47%, 75% |
| gainsboro | #dcdcdchex | 0°, 0%, 86% |
| crimson | #dc143chex | 348°, 83%, 47% |
| palevioletred | #db7093hex | 340°, 60%, 65% |
| goldenrod | #daa520hex | 43°, 74%, 49% |
| orchid | #da70d6hex | 302°, 59%, 65% |
| thistle | #d8bfd8hex | 300°, 24%, 80% |
| lightgray, lightgrey | #d3d3d3hex | 0°, 0%, 83% |
| tan | #d2b48chex | 34°, 44%, 67% |
| chocolate | #d2691ehex | 25°, 75%, 47% |
| peru | #cd853fhex | 30°, 59%, 53% |
| indianred | #cd5c5chex | 0°, 53%, 58% |
| mediumvioletred | #c71585hex | 322°, 81%, 43% |
| silver | #c0c0c0hex | 0°, 0%, 75% |
| darkkhaki | #bdb76bhex | 56°, 38%, 58% |
| rosybrown | #bc8f8fhex | 0°, 25%, 65% |
| mediumorchid | #ba55d3hex | 288°, 59%, 58% |
| darkgoldenrod | #b8860bhex | 43°, 89%, 38% |
| firebrick | #b22222hex | 0°, 68%, 42% |
| powderblue | #b0e0e6hex | 187°, 52%, 80% |
| lightsteelblue | #b0c4dehex | 214°, 41%, 78% |
| paleturquoise | #afeeeehex | 180°, 65%, 81% |
| greenyellow | #adff2fhex | 84°, 100%, 59% |
| lightblue | #add8e6hex | 195°, 53%, 79% |
| darkgray, darkgrey | #a9a9a9hex | 0°, 0%, 66% |
| brown | #a52a2ahex | 0°, 59%, 41% |
| sienna | #a0522dhex | 19°, 56%, 40% |
| yellowgreen | #9acd32hex | 80°, 61%, 50% |
| darkorchid | #9932cchex | 280°, 61%, 50% |
| palegreen | #98fb98hex | 120°, 93%, 79% |
| darkviolet | #9400d3hex | 282°, 100%, 41% |
| mediumpurple | #9370dbhex | 260°, 60%, 65% |
| lightgreen | #90ee90hex | 120°, 73%, 75% |
| darkseagreen | #8fbc8fhex | 120°, 25%, 65% |
| saddlebrown | #8b4513hex | 25°, 76%, 31% |
| darkmagenta | #8b008bhex | 300°, 100%, 27% |
| darkred | #8b0000hex | 0°, 100%, 27% |
| blueviolet | #8a2be2hex | 271°, 76%, 53% |
| lightskyblue | #87cefahex | 203°, 92%, 76% |
| skyblue | #87ceebhex | 197°, 71%, 73% |
| gray, grey | #808080hex | 0°, 0%, 50% |
| olive | #808000hex | 60°, 100%, 25% |
| purple | #800080hex | 300°, 100%, 25% |
| maroon | #800000hex | 0°, 100%, 25% |
| aquamarine | #7fffd4hex | 160°, 100%, 75% |
| chartreuse | #7fff00hex | 90°, 100%, 50% |
| lawngreen | #7cfc00hex | 91°, 100%, 4% |
| mediumslateblue | #7b68eehex | 249°, 80%, 67% |
| lightslategray, lightslategrey | #778899hex | 210°, 14%, 53% |
| slategray или slategrey | #708090hex | 210°, 13%, 50% |
| olivedrab | #6b8e23hex | 80°, 61%, 35% |
| slateblue | #6a5acdhex | 248°, 54%, 58% |
| dimgray, dimgrey | #696969hex | 0°, 0%, 41% |
| mediumaquamarine | #66cdaahex | 160°, 51%, 60% |
| rebeccapurple | #663399hex | 270°, 50%, 40% |
| cornflowerblue | #6495edhex | 219°, 79%, 66% |
| cadetblue | #5f9ea0hex | 182°, 26%, 50% |
| darkolivegreen | #556b2fhex | 82°, 39%, 30% |
| indigo | #4b0082hex | 275°, 100%, 26% |
| mediumturquoise | #48d1cchex | 178°, 60%, 55% |
| darkslateblue | #483d8bhex | 249°, 39%, 39% |
| steelblue | #4682b4hex | 207°, 44%, 49% |
| royalblue | #4169e1hex | 225°, 73%, 57% |
| turquoise | #40e0d0hex | 174°, 72%, 57% |
| mediumseagreen | #3cb371hex | 147°, 50%, 47% |
| limegreen | #32cd32hex | 120°, 61%, 50% |
| darkslategray, darkslategrey | #2f4f4fhex | 180°, 25%, 25% |
| seagreen | #2e8b57hex | 147°, 50%, 36% |
| forestgreen | #228b22hex | 120°, 61%, 34% |
| lightseagreen | #20b2aahex | 177°, 70%, 41% |
| dodgerblue | #1e90ffhex | 210°, 100%, 56% |
| midnightblue | #191970hex | 240°, 64%, 27% |
| aqua, cyan | #00ffffhex | 180°, 100%, 50% |
| springgreen | #00ff7fhex | 150°, 100%, 50% |
| lime | #00ff00hex | 120°, 100%, 50% |
| mediumspringgreen | #00fa9ahex | 157°, 100%, 49% |
| darkturquoise | #00ced1hex | 181°, 100%, 41% |
| deepskyblue | #00bfffhex | 195°, 100%, 50% |
| darkcyan | #008b8bhex | 180°, 100%, 27% |
| teal | #008080hex | 180°, 100%, 25% |
| green | #008000hex | 120°, 100%, 25% |
| darkgreen | #006400hex | 120°, 100%, 20% |
| blue | #0000ffhex | 240°, 100%, 50% |
| mediumblue | #0000cdhex | 240°, 100%, 40% |
| darkblue | #00008bhex | 240°, 100%, 27% |
| navy | #000080hex | 240°, 100%, 25% |
| black | #000000hex | 0°, 0%, 0% |
Для получения информации о других цветах и значениях в HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV воспользуйтесь калькулятором цветов.
