Html палитра цветов онлайн: HTML CSS Палитра цветов

Таблица цветов html, палитра, названия цветов

Таблица (палитра) цветов html предоставляет вам возможность самостоятельно подобрать нужный вам тон. Значение цвета отображается в трех форматах: Hex, RGB и HSV.

• Hex состоит из трех двух символьных значений в шестнадцатеричной системе счисления. Например: #ff00b3, где первая пара чисел — красный, вторая — зеленый, а третья — синий.
• RGB (RedGreenBlue) имеет вид «200,100,255», обозначающее количество соответствующего тона(красный,зеленый,синий) в получаемом цвете.
• HSV (Hue, Saturation, Value — тон, насыщенность, значение) — цветовая модель, в которой в качестве координат являются:
  • Hue — цветовой тон, может варьироваться в пределах от 0° до 360°.
  • Saturation — насыщенность, варьируется в пределах 0—100 или 0—1. Чем больше этот параметр, тем «чище» цвет, поэтому этот параметр иногда называют чистотой цвета. А чем ближе этот параметр к нулю, тем ближе цвет к нейтральному серому.
  • Value (значение цвета) — задает яркость, значение так же может варьироваться в пределах 0—100 или 0—1.

Введите код цвета:
GO

Список цветов с названиями

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

Палитра цветов с названиями — IMG online

Палитра из 137 цветов с названиями, RGB значениями и HEX (HTML) кодом.

Таблица HTML CSS цветов онлайн

content_copy

Black

#000000, rgb(0, 0, 0), hsl(0, 0%, 0%)

content_copy

Maroon

#800000, rgb(128, 0, 0), hsl(0, 100%, 25%)

content_copy

DarkRed

#8b0000, rgb(139, 0, 0), hsl(0, 100%, 27%)

content_copy

Red

#ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)

content_copy

FireBrick

#b22222, rgb(178, 34, 34), hsl(0, 68%, 42%)

content_copy

Brown

#a52a2a, rgb(165, 42, 42), hsl(0, 59%, 41%)

content_copy

IndianRed

#cd5c5c, rgb(205, 92, 92), hsl(0, 53%, 58%)

content_copy

RosyBrown

#bc8f8f, rgb(188, 143, 143), hsl(0, 25%, 65%)

content_copy

LightCoral

#f08080, rgb(240, 128, 128), hsl(0, 79%, 72%)

content_copy

DimGray

#696969, rgb(105, 105, 105), hsl(0, 0%, 41%)

content_copy

Gray

#808080, rgb(128, 128, 128), hsl(0, 0%, 50%)

content_copy

DarkGray

#a9a9a9, rgb(169, 169, 169), hsl(0, 0%, 66%)

content_copy

Silver

#c0c0c0, rgb(192, 192, 192), hsl(0, 0%, 75%)

content_copy

LightGray

#d3d3d3, rgb(211, 211, 211), hsl(0, 0%, 83%)

content_copy

Gainsboro

#dcdcdc, rgb(220, 220, 220), hsl(0, 0%, 86%)

content_copy

WhiteSmoke

#f5f5f5, rgb(245, 245, 245), hsl(0, 0%, 96%)

content_copy

Snow

#fffafa, rgb(255, 250, 250), hsl(0, 100%, 99%)

content_copy

White

#ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%)

content_copy

Salmon

#fa8072, rgb(250, 128, 114), hsl(6, 93%, 71%)

content_copy

MistyRose

#ffe4e1, rgb(255, 228, 225), hsl(6, 100%, 94%)

content_copy

Tomato

#ff6347, rgb(255, 99, 71), hsl(9, 100%, 64%)

content_copy

DarkSalmon

#e9967a, rgb(233, 150, 122), hsl(15, 72%, 70%)

content_copy

OrangeRed

#ff4500, rgb(255, 69, 0), hsl(16, 100%, 50%)

content_copy

Coral

#ff7f50, rgb(255, 127, 80), hsl(16, 100%, 66%)

content_copy

LightSalmon

#ffa07a, rgb(255, 160, 122), hsl(17, 100%, 74%)

content_copy

Sienna

#a0522d, rgb(160, 82, 45), hsl(19, 56%, 40%)

content_copy

SaddleBrown

#8b4513, rgb(139, 69, 19), hsl(25, 76%, 31%)

content_copy

Chocolate

#d2691e, rgb(210, 105, 30), hsl(25, 75%, 47%)

content_copy

SandyBrown

#f4a460, rgb(244, 164, 96), hsl(28, 87%, 67%)

content_copy

PeachPuff

#ffdab9, rgb(255, 218, 185), hsl(28, 100%, 86%)

content_copy

Peru

#cd853f, rgb(205, 133, 63), hsl(30, 59%, 53%)

content_copy

Linen

#faf0e6, rgb(250, 240, 230), hsl(30, 67%, 94%)

content_copy

DarkOrange

#ff8c00, rgb(255, 140, 0), hsl(33, 100%, 50%)

content_copy

Bisque

#ffe4c4, rgb(255, 228, 196), hsl(33, 100%, 88%)

content_copy

Tan

#d2b48c, rgb(210, 180, 140), hsl(34, 44%, 69%)

content_copy

BurlyWood

#deb887, rgb(222, 184, 135), hsl(34, 57%, 70%)

content_copy

AntiqueWhite

#faebd7, rgb(250, 235, 215), hsl(34, 78%, 91%)

content_copy

NavajoWhite

#ffdead, rgb(255, 222, 173), hsl(36, 100%, 84%)

content_copy

BlanchedAlmond

#ffebcd, rgb(255, 235, 205), hsl(36, 100%, 90%)

content_copy

PapayaWhip

#ffefd5, rgb(255, 239, 213), hsl(37, 100%, 92%)

content_copy

Moccasin

#ffe4b5, rgb(255, 228, 181), hsl(38, 100%, 85%)

content_copy

Orange

#ffa500, rgb(255, 165, 0), hsl(39, 100%, 50%)

content_copy

Wheat

#f5deb3, rgb(245, 222, 179), hsl(39, 77%, 83%)

content_copy

OldLace

#fdf5e6, rgb(253, 245, 230), hsl(39, 85%, 95%)

content_copy

FloralWhite

#fffaf0, rgb(255, 250, 240), hsl(40, 100%, 97%)

content_copy

DarkGoldenRod

#b8860b, rgb(184, 134, 11), hsl(43, 89%, 38%)

content_copy

GoldenRod

#daa520, rgb(218, 165, 32), hsl(43, 74%, 49%)

content_copy

Cornsilk

#fff8dc, rgb(255, 248, 220), hsl(48, 100%, 93%)

content_copy

Gold

#ffd700, rgb(255, 215, 0), hsl(51, 100%, 50%)

content_copy

Khaki

#f0e68c, rgb(240, 230, 140), hsl(54, 77%, 75%)

content_copy

LemonChiffon

#fffacd, rgb(255, 250, 205), hsl(54, 100%, 90%)

content_copy

PaleGoldenRod

#eee8aa, rgb(238, 232, 170), hsl(55, 67%, 80%)

content_copy

DarkKhaki

#bdb76b, rgb(189, 183, 107), hsl(56, 38%, 58%)

content_copy

SeaShell

#fff5ee, rgb(255, 245, 238), hsl(25, 100%, 97%)

content_copy

Yellow

#ffff00, rgb(255, 255, 0), hsl(60, 100%, 50%)

content_copy

Beige

#f5f5dc, rgb(245, 245, 220), hsl(60, 56%, 91%)

content_copy

LightGoldenRodYellow

#fafad2, rgb(250, 250, 210), hsl(60, 80%, 90%)

content_copy

LightYellow

#ffffe0, rgb(255, 255, 224), hsl(60, 100%, 94%)

content_copy

Ivory

#fffff0, rgb(255, 255, 240), hsl(60, 100%, 97%)

content_copy

Olive

#808000, rgb(128, 128, 0), hsl(60, 100%, 25%)

content_copy

OliveDrab

#6b8e23, rgb(107, 142, 35), hsl(80, 60%, 35%)

content_copy

DarkOliveGreen

#556b2f, rgb(85, 107, 47), hsl(82, 39%, 30%)

content_copy

GreenYellow

#adff2f, rgb(173, 255, 47), hsl(84, 100%, 59%)

content_copy

LawnGreen

#7cfc00, rgb(124, 252, 0), hsl(90, 100%, 49%)

content_copy

Chartreuse

#7fff00, rgb(127, 255, 0), hsl(90, 100%, 50%)

content_copy

YellowGreen

#9acd32, rgb(154, 205, 50), hsl(80, 61%, 50%)

content_copy

Green

#008000, rgb(0, 128, 0), hsl(120, 100%, 25%)

content_copy

DarkSeaGreen

#8fbc8f, rgb(143, 188, 143), hsl(120, 25%, 65%)

content_copy

LimeGreen

#32cd32, rgb(50, 205, 50), hsl(120, 61%, 50%)

content_copy

DarkGreen

#006400, rgb(0, 100, 0), hsl(120, 100%, 20%)

content_copy

Lime

#00ff00, rgb(0, 255, 0), hsl(120, 100%, 50%)

content_copy

LightGreen

#90ee90, rgb(144, 238, 144), hsl(120, 73%, 75%)

content_copy

PaleGreen

#98fb98, rgb(152, 251, 152), hsl(120, 93%, 79%)

content_copy

ForestGreen

#228b22, rgb(34, 139, 34), hsl(120, 61%, 34%)

content_copy

SeaGreen

#2e8b57, rgb(46, 139, 87), hsl(146, 50%, 36%)

content_copy

MediumSeaGreen

#3cb371, rgb(60, 179, 113), hsl(147, 50%, 47%)

content_copy

SpringGreen

#00ff7f, rgb(0, 255, 127), hsl(150, 100%, 50%)

content_copy

MintCream

#f5fffa, rgb(245, 255, 250), hsl(150, 100%, 98%)

content_copy

MediumSpringGreen

#00fa9a, rgb(0, 250, 154), hsl(157, 100%, 49%)

content_copy

HoneyDew

#f0fff0, rgb(240, 255, 240), hsl(120, 100%, 97%)

content_copy

MediumAquaMarine

#66cdaa, rgb(102, 205, 170), hsl(160, 51%, 60%)

content_copy

Aquamarine

#7fffd4, rgb(127, 255, 212), hsl(160, 100%, 75%)

content_copy

Turquoise

#40e0d0, rgb(64, 224, 208), hsl(174, 72%, 56%)

content_copy

LightSeaGreen

#20b2aa, rgb(32, 178, 170), hsl(177, 70%, 41%)

content_copy

MediumTurquoise

#48d1cc, rgb(72, 209, 204), hsl(178, 60%, 55%)

content_copy

DarkSlateGray

#2f4f4f, rgb(47, 79, 79), hsl(180, 25%, 25%)

content_copy

Teal

#008080, rgb(0, 128, 128), hsl(180, 100%, 25%)

content_copy

DarkCyan

#008b8b, rgb(0, 139, 139), hsl(180, 100%, 27%)

content_copy

Aqua

#00ffff, rgb(0, 255, 255), hsl(180, 100%, 50%)

content_copy

Cyan

#00ffff, rgb(0, 255, 255), hsl(180, 100%, 50%)

content_copy

PaleTurquoise

#afeeee, rgb(175, 238, 238), hsl(180, 65%, 81%)

content_copy

LightCyan

#e0ffff, rgb(224, 255, 255), hsl(180, 100%, 94%)

content_copy

Azure

#f0ffff, rgb(240, 255, 255), hsl(180, 100%, 97%)

content_copy

DarkTurquoise

#00ced1, rgb(0, 206, 209), hsl(181, 100%, 41%)

content_copy

CadetBlue

#5f9ea0, rgb(95, 158, 160), hsl(182, 25%, 50%)

content_copy

PowderBlue

#b0e0e6, rgb(176, 224, 230), hsl(187, 52%, 80%)

content_copy

DeepSkyBlue

#00bfff, rgb(0, 191, 255), hsl(195, 100%, 50%)

content_copy

LightBlue

#add8e6, rgb(173, 216, 230), hsl(195, 53%, 79%)

content_copy

SkyBlue

#87ceeb, rgb(135, 206, 235), hsl(197, 71%, 73%)

content_copy

LightSkyBlue

#87cefa, rgb(135, 206, 250), hsl(203, 92%, 75%)

content_copy

SteelBlue

#4682b4, rgb(70, 130, 180), hsl(207, 44%, 49%)

content_copy

DodgerBlue

#1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%)

content_copy

SlateGray

#708090, rgb(112, 128, 144), hsl(210, 13%, 50%)

content_copy

LightSlateGray

#778899, rgb(119, 136, 153), hsl(210, 14%, 53%)

content_copy

LightSteelBlue

#b0c4de, rgb(176, 196, 222), hsl(214, 41%, 78%)

content_copy

CornflowerBlue

#6495ed, rgb(100, 149, 237), hsl(219, 79%, 66%)

content_copy

RoyalBlue

#4169e1, rgb(65, 105, 225), hsl(225, 73%, 57%)

content_copy

AliceBlue

#f0f8ff, rgb(240, 248, 255), hsl(208, 100%, 97%)

content_copy

DarkBlue

#00008b, rgb(0, 0, 139), hsl(240, 100%, 27%)

content_copy

MediumBlue

#0000cd, rgb(0, 0, 205), hsl(240, 100%, 40%)

content_copy

Blue

#0000ff, rgb(0, 0, 255), hsl(240, 100%, 50%)

content_copy

MidnightBlue

#191970, rgb(25, 25, 112), hsl(240, 64%, 27%)

content_copy

Lavender

#e6e6fa, rgb(230, 230, 250), hsl(240, 67%, 94%)

content_copy

GhostWhite

#f8f8ff, rgb(248, 248, 255), hsl(240, 100%, 99%)

content_copy

Navy

#000080, rgb(0, 0, 128), hsl(240, 100%, 25%)

content_copy

DarkSlateBlue

#483d8b, rgb(72, 61, 139), hsl(248, 39%, 39%)

content_copy

SlateBlue

#6a5acd, rgb(106, 90, 205), hsl(248, 53%, 58%)

content_copy

MediumSlateBlue

#7b68ee, rgb(123, 104, 238), hsl(249, 80%, 67%)

content_copy

MediumPurple

#9370db, rgb(147, 112, 219), hsl(260, 60%, 65%)

content_copy

RebeccaPurple

#663399, rgb(102, 51, 153), hsl(270, 50%, 40%)

content_copy

BlueViolet

#8a2be2, rgb(138, 43, 226), hsl(271, 76%, 53%)

content_copy

Indigo

#4b0082, rgb(75, 0, 130), hsl(275, 100%, 25%)

content_copy

DarkOrchid

#9932cc, rgb(153, 50, 204), hsl(280, 61%, 50%)

content_copy

DarkViolet

#9400d3, rgb(148, 0, 211), hsl(282, 100%, 41%)

content_copy

MediumOrchid

#ba55d3, rgb(186, 85, 211), hsl(288, 59%, 58%)

content_copy

Purple

#800080, rgb(128, 0, 128), hsl(300, 100%, 25%)

content_copy

MediumVioletRed

#c71585, rgb(199, 21, 133), hsl(322, 81%, 43%)

content_copy

Magenta

#ff00ff, rgb(255, 0, 255), hsl(300, 100%, 50%)

content_copy

Fuchsia

#ff00ff, rgb(255, 0, 255), hsl(300, 100%, 50%)

content_copy

Violet

#ee82ee, rgb(238, 130, 238), hsl(300, 76%, 72%)

content_copy

Plum

#dda0dd, rgb(221, 160, 221), hsl(300, 47%, 75%)

content_copy

Thistle

#d8bfd8, rgb(216, 191, 216), hsl(300, 24%, 80%)

content_copy

Orchid

#da70d6, rgb(218, 112, 214), hsl(302, 59%, 65%)

content_copy

DarkMagenta

#8b008b, rgb(139, 0, 139), hsl(300, 100%, 27%)

content_copy

DeepPink

#ff1493, rgb(255, 20, 147), hsl(328, 100%, 54%)

content_copy

HotPink

#ff69b4, rgb(255, 105, 180), hsl(330, 100%, 71%)

content_copy

PaleVioletRed

#db7093, rgb(219, 112, 147), hsl(340, 60%, 65%)

content_copy

LavenderBlush

#fff0f5, rgb(255, 240, 245), hsl(340, 100%, 97%)

content_copy

Crimson

#dc143c, rgb(220, 20, 60), hsl(348, 83%, 47%)

content_copy

Pink

#ffc0cb, rgb(255, 192, 203), hsl(350, 100%, 88%)

content_copy

LightPink

#ffb6c1, rgb(255, 182, 193), hsl(351, 100%, 86%)

Палитра цвета в 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. Данный атрибут является уникальным атрибутом тэга <body> . Тэг <body> вместе с тэгами <html> и <head> образуют структуру HTML документа. Если вы помните, то внутри контейнера <body> размещаются элементы, которые потом отображаются браузером в области просмотра. Атрибут text позволяет задать цвет текста по умолчанию для всей HTML страницы.
3. HTML атрибут bgcolor. Также являет уникальным HTML атрибутом и позволяет изменять цвет фона некоторых HTML элементов.
4. HTML атрибут vlink. Данный атрибут уникален и применяется только к тэгу <body>, чтобы изменить цвет ссылки, которую уже посетил пользователь.
5. HTML атрибут alink. Этот атрибут также уникален и применим только к тэгу <body>. Атрибут alink меняет цвет активной HTML ссылки.
6. HTML атрибут link. Атрибут link используется только вместе с тэгом <body> и служит для изменения цвета ссылок HTML страницы, которые еще не посещал пользователь.

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

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

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

<body alink=”rgb (0,0,0)” link=”rgb (255,255,255)” vlink=”rgb (255,0,0)” bgcolor=”rgb (0,255,0)” text=”rgb (0,0,255)”></body>

Если вы создадите HTML документ, в котором контейнер body будет описан, как в примере, то увидите:

1. Цвет фона HTML документа стал зеленым: bgcolor=”rgb (0,255,0)”.
2. Цвет текста HTML страницы станет синим: text=”rgb (0,0,255)”.
3. Цвет HTML ссылки, которую пользователь не посещал, будет белым: link=”rgb (255,255,255)”.
4. Цветы ссылки, которая открыта в данный момент, будет черным: alink=”rgb (0,0,0)”.
5. А цвет HTML ссылки, которую уже посещали, будет красным: vlink=”rgb (255,0,0)”.

Обратите внимание: никто не запрещает вам регулировать «мощность прожектора» по своему усмотрению, вы можете задать HTML цвет, например, таким образом:

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

Семь цветов заданных при помощи десятичных кодов цвета модели RGB

На самом деле неправильно говорить десятичные коды цвета в HTML, правильнее будет сказать десятичные коды цвета RGB, поскольку данная модель используется не только для оформления веб-страниц в HTML и CSS.

Шестнадцатеричные значения HTML цветов

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

Пример перевода десятичного кода цвета в шестнадцатеричный

Для тех, кто не знаком с шестнадцатеричной системой счисления, следует дать небольшое пояснение, чтобы вы без труда могли манипулировать цветом HTML элементов при помощи шестнадцатеричных кодов модели RGB. Во-первых, десятичная система счисления названа так потому, что любое число можно получить комбинацией десяти цифр (терминология важна: между числом и цифрой есть разница): 0, 1, 2, 3, 5, 6, 7, 8, 9.

В шестнадцатеричной системе счисления любое число можно записать при помощи комбинации шестнадцати цифр: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Для простоты понимания можете считать, что a – это десять, а f – это пятнадцать. Например, число шестнадцать будет записано в шестнадцатеричной системе счисления следующим образом: 10. А число 255 будет записано, как ff.

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

<body alink=”#000000” link=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”></body>

Обратите внимание: запись цвета в HTML в шестнадцатеричном формате несколько компактнее, чем в десятичном, это первое. Второе: мощность каждого прожектора задается числами от 0 до 255. Для записи числа 255 требуется две цифры в шестнадцатеричном формате (ff = 250), поэтому яркость каждого канала цвета (наши прожекторы правильно называть цветовой канал, канал цвета) задается двумя цифрами от 0 до f.

Обратите внимание: яркость каждого канала цвета задается отдельно, но если представить, что это одно число, то максимально возможное число в шестнадцатеричной системе счисления модели RGB равно ffffff, оно даст нам белый цвет, а десятичной системе это: 16 777 215. Такое количество цветов и оттенков позволяет задать/использовать модель RGB. Это число получается из того, что у каждого цветового канала есть 256 значений яркости (от 0 до 255), соответственно: 256*256*256 = 16 777 215.

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

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

Некоторые текстовые редактора, такие как Sublime Text 3, Notepad++ и Brackets имеют расширения-палитры, которые очень удобны, когда вы хотите быстро выбрать цвет и изменить его. Про IDE NetBeans в этом плане я ничего сказать не могу.

Имена цветов в HTML

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

Поэтому использование имени цвета в HTML не рекомендуется. Модель RGB является аппаратно-зависимой, а цвет, заданный при помощи имени, зависит от браузера и даже его версии. Давайте попробуем задать цвет элементам HTML страницы при помощи имени:

<body alink=”black” link=”#white” vlink=”red” bgcolor=”green” text=”blue”></body>

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

Таблица базовых цветов в HTML: их имена и RGB коды

Таблица сверху демонстрирует какой цвет получит HTML элемент, если вы зададите его при помощи имени. В этой таблице собраны 16 цветов и их имена, которые одобрены консорциумом W3C и должны отображаться одинаково в любом браузере. Но на самом деле в HTML можно использовать порядка 200 имен цвета, которые поддерживают основные браузеры, такие как: Opera, Chrome, Firefox, Safari, Internet Expllorer (на счет последнего данное утверждение очень спорное).

Палитра цвета в HTML

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

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

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

Простая цветовая палитра редактора Paint

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

Учимся изменять цвет текста в HTML

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

<!DOCTYPE html>

<html lang=»ru-RU»>

<head>

<meta charset=»UTF-8″>

<title>Изменяем цвет текста в HTML документе</title>

<link rel=»stylesheet» type=»text/css» href=»style.css» />

</head>

<body text=»#ff0000″>

<h2><font color=»rgb(0,255,0)»>Учимся работать с цветом в HTML</font></h2>

<h3><font color=»yellow»>Меняем цвет текста</font></h3>

<p>Для изменения цвета текста мы можем использовать уникальный

атрибут элемента BODY text, а также использовать элемент FONT

и его атрибут color. <font color=»gray»>Этот текст будет иметь серый цвет.</font></p>

</body>

</html>

Данный файл я сохраню, как color.html и посоветую вам не забывать про пробельные символы для форматирования HTML кода. Запись цвета в десятичной системе счисления не поддерживает Chrome, Firefox и Opera, а вот IE такую запись цвета понимает и подсвечивает HTML заголовок зеленым цветом:

Изменение цвета текста в HTML

Правильно говорить не изменение цвета текста в HTML, а изменение цвета шрифта в HTML. Про шрифты в HTML на моем сайте есть отдельная и довольно подробная публикация, с которой вы можете ознакомиться. В данном случае мы меняли цвет при помощи атрибута text, который задает красный цвет для всего текста HTML страницы, в этом мы можем убедиться: цвет текста в HTML абзаце красный, хотя мы не задавали никаких правил для элемента Р. А также мы видим, что в HTML есть приоритеты применения цвета к HTML элементам и тэг <font> с атрибутом color имеет больший приоритет нежели атрибут text, так как часть текста параграфа выделена серым цветом, а HTML заголовки, соответственно, зеленый и желтый.

Стоит обратить ваше внимание на то, что если вы используете HTML списки, тэги непосредственного форматирования текста в HTML, тэги логического форматирования для выделения важных слов в HTML документе, то тэг <font> должен быть вложен в эти тэги, например:

<ul>

<li><font color=”#454621”>Элемент списка</font></li>

</ul>

<b><font color=”green”>Шрифт будет не только жирным, но и зеленым</font></b>

<em><font color=”#ffffff”>Белый курсивный шрифт</font></em>

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

Цвет фона HTML элемента

К сожалению, цвет фона в HTML можно задавать только для всей страницы, вернее для контейнера <body>, в данном случае – это одно и то же (но это не означает, что в CSS нет возможности задавать цвета фона отдельным элементам HTML страницы). Чтобы изменить цвет фона используйте атрибут bgcolor, например: bgcolor=” #000000”. Данное значение сделает цвет фона всей HTML страницы черным:

Пример изменения фона HTML страницы

Обращу ваше внимание, что у HTML элементов TH, TD и TABLE (это элементы HTML таблицы, о которых мы поговорим уже совсем скоро), а также у BODY есть атрибут background, данный атрибут позволяет задавать фоновую картинку данным HTML элементам, которую не стоит путать с цветом фона HTML элемента.

Изменяем цвет HTML ссылки

Когда мы говорили про ссылки в HTML то довольно подробно рассмотрели вопрос изменения цвета ссылок при помощи атрибутов link, vlink и alink. Эти атрибуты уникальные и могут быть применены только к элементу BODY, поэтому цвет меняется сразу для всех ссылок, которые есть в HTML документе.

Но мы можем изменить цвет отдельной ссылки при помощи тэга <font> и атрибута color:

<font color=”gold”><a href=”//zametkinapolyah.ru” title=”Сайт о создании сайтов”>Лучший в мире блог о создании сайтов</a></font>

Данная ссылка очень скромная: ее цвет всегда будет золотым (вне зависимости от того посещал ее пользователь или нет), ну и конечно, у данной ссылки скромный анкор. Таким образом мы выяснили, что цвет HTML ссылки можно менять не только с помощью атрибутов тэга <body>, но а при помощи тэга <font> (при этом цвет ссылки всегда будет таким, какой вы задали в атрибуте color).

Таблица цветов в HTML

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

1. Таблица безопасных веб-цветов. Таблица безопасных веб-цветов или таблица безопасных цветов в HTML и CSS содержит в себе примеры цветов и их коды, записанные в формате модели RGB. В этой таблице собрано 216 цветов, которые будут поддерживаться любым монитором и любым браузером.
2. Таблица имен цветов в HTML. Данную таблицу обычно делят на две: базовую и расширенную. В базовой таблице указано шестнадцать имен HTML цветов, которые будут одинаково отображать все браузеры.

Как определить код цвета онлайн

Способ 1: Sanstv

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

Перейти к онлайн-сервису Sanstv

1. У вас есть разные варианты взаимодействия Sanstv. Нажмите на «Выберите файл» для загрузки целевой картинки или используйте приведенную справа палитру.
2. При открытии Проводника отыщите на локальном хранилище подходящее изображение, код цвета на которой и нужно определить.
3. Наведите курсор на определенный участок снимка и кликните по нему, чтобы данные отобразились в левой таблице.
4. Теперь можете получить все необходимые сведения, начиная от HTML-кода, и закачивания общепринятым названием оттенка.
5. Если вы отметите сразу несколько цветов, они отобразятся отдельным списком на панели слева. Переключайтесь между ними по необходимости, чтобы снова получить сведения о коде.

Способ 2: InetTools

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

Перейти к онлайн-сервису InetTools

1. Откройте главную страницу InetTools, кликнув по ссылке выше, где нажмите «Выбрать» для перехода к загрузке изображения.
2. В Проводнике отыщите требуемый для открытия файл.
3. Ожидайте завершения его обработки, что займет буквально несколько секунд.
4. Наведите курсор на необходимую область, а снизу следите за текущим значением, чтобы в нужный момент остановиться на подходящем.
5. Сделайте клик мышкой, чтобы создать сохраненное значение. Теперь есть возможность узнать о нем больше информации, посмотрев расположение по осям, код и значения по RGB.

Способ 3: AllCalc

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

Перейти к онлайн-сервису AllCalc

1. На необходимой странице AllCalc ознакомьтесь со стандартной палитрой цветов и оттенков, а если она вас не устраивает, щелкните «Сменить палитру», чтобы отобразилась новая.
2. Всего в AllCalc четыре разные палитры, а вам предстоит выбрать ту, которая удовлетворит возникшие потребности.
3. Кнопкой мыши выбирайте на палитре оттенок, а затем просматривайте информацию о нем через таблицу справа. Здесь присутствует HEX-код, значения RGB и RGBA.
4. Советуем перейти ко второму блоку, в котором выбирается оттенок и просматривается пример его использования в качестве фона.
5. Ниже находится и гамма от светлого к темному с обозначением процентов и HEX-кодов.

Мы рады, что смогли помочь Вам в решении проблемы.

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

Поделиться статьей в социальных сетях:

Подборка JS Color Picker`ов

Сегодня у нас есть несколько инструментов для выбора и определения цвета, выполненных на JavaScript. Так называемые Color Picker-ы используется в веб-приложениях во многих случаях, когда пользователю нужно сделать выбор из цветовой палитры. Самостоятельное написание палитры цветов – это долгий процесс, которого можно избежать, используя готовые варианты. Мы подобрали для вас готовые модули,скрипты и библиотеки написанные на Javascript, которые вы можете легко использовать на своих веб-сайтах или при разработке.

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

jscolor.js – это веб-подборщик цветов с непрозрачностью (альфа-канал) и настраиваемой палитрой.
Его основные преимущества:

• Один файл простого JS без зависимостей
• Поддерживает цвета CSS, такие как rgba и hex, включая обозначение #rrggbbaa.
• Загрузка включает уменьшенный jscolor.min.js
• Подходит для мобильных устройств

Jscolor.js – это полностью самодостаточная библиотека JavaScript, состоящая только из одного файла ванильного JavaScript. Ей не нужны никакие фреймворки (jQuery, Dojo, MooTools и т. д.), но она, безусловно, может сосуществовать вместе с ними. Библиотека поддерживает все современные браузеры.

Гибко настраиваемый jscolor предоставляет множество вариантов конфигурации. Если вам нужно изменить размер или цвета средства выбора цвета или присоединить функцию к его событию onchange, конфигурацию библиотеки можно точно настроить для вашего веб-проекта.

Благодаря встроенной поддержке сенсорных событий, jscolor спроектирована таким образом, чтобы её было легко использовать на смартфонах или планшетах.

Если вам нужен быстрый и небольшой JS скрип для выбора цвета, то colorPicker – это ваш выбор. Он использует только один файл JavaScript, который занимает всего 45.4KB. При этом, скрипт не требует никаких дополнительных HTML или CSS файлов.

ColorPicker работает во всех браузерах, в том числе с IE6 + (необходимо сделать дополнительный CSS, чтобы он работал в IE6).
colorPicker.js использует colors.js , небольшой, но всеобъемлющий инструмент для преобразования / вычислений цветов (WCAG 2.0, контраст, разница в цвете, смешение слоев и т. д.).

С помощью colors.js вы также можете легко создавать свои собственные более простые и / или ограниченные палитры цветов. colors.js может преобразовывать 182 различных комбинации цветовых пространств (rgb2HSV, RGB2hsl, rgb2RGB, HEX2Lab и так далее).

FlexiColorPicker основан на цветовой модели HSV. Таким образом, единственными двумя частями палитры цветов являются ползунок для выбора значения оттенка и палитра для выбора насыщенности. И ползунок, и средство выбора являются элементами HTML (обычно <div>), которые служат оболочкой для прямоугольников градиента SVG / VML. Вы можете полностью настраивать внешний вид панели выбора цвета, изменять её размеры и отображение.

Функции:

• нет Flash, изображений или блоков размером 1 пиксель
• нет зависимости от внешней библиотеки JavaScript
• размеры как области выбора, так и области слайдера можно регулировать произвольно
• поддержка большого количества браузеров (включая мобильные браузеры)
• понятный (никакой магии, код легко читается и, следовательно, корректируется)
• стилизация в CSS
• положение ползунка и области выбора жестко не запрограммировано и может быть изменено в CSS
• вывод / ввод HSV, RGB и HEX
• индикаторы (указатели на ползунок и области выбора) могут быть произвольными HTML-элементами (изображениями, блоками и т. д.), стилизованными в CSS.
• готовые к использованию темы (хранятся в одной таблице стилей CSS)

Данная библиотека написана на JavaScript. Huebee создаёт палитры цветов удобные для пользователей и отвечающие их запросам. Huebee отображает фиксированный набор цветов, поэтому пользователи сразу видят нужные цвета, что позволяет им быстрее принимать решение.

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

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

MiniColors – это мощная, элегантная, анимированная и полностью настраиваемая палитра цветов на основе jQuery для вашей веб-страницы / веб-приложения.

Основные особенности:

• Показывает палитру цветов при размытии и щелчке.
• Работает во встроенном режиме.
• Поддерживает форматы цвета Hex и rgb (a).
• Настраиваемая анимация открытия / закрытия.
• Пользовательские позиции.
• Возможность настройки элементов управления.
• Легко стилизовать с помощью собственного CSS.
• Методы API и обработчики событий.

Iro.js – это красивая палитра цветов. Она полностью выполнена на JavaScript и использует HSV при реализации палитры цветов. Круговая палитра сделана на HTML5 и поддерживает ввод с сенсорных экранов.

Также предоставляет методы API, которые позволяют устанавливать, обновлять и преобразовывать цвета.

Основной функционал:

• Поддерживает любые цветовые форматы: Hex, Hex alpha, RGB, RGBA, объект RGB, объект RGBA, HSL, HSLA, объект HSL, объект HSLA, объект HSV, HSVA.
• Многоцветное выделение.
• Поддерживает 3 раскладки: Wheel, Slider, Box.

React Color – это набор средств выбора цвета из таких инструментов, как Photoshop, Chrome, Sketch, Github, Material Design, Twitter и других. На выбор доступно 13 палитр цветов. Используя данную цветовую палитру в JavaScript, веб-дизайнеры также могут рассчитывать на создание своих собственных цветовых диапазонов, используя существующие компоненты.

Установка может быть произведена установкой react-color с помощью NPM. Одновременно компоненты цвета могут быть включены в данную библиотеку с помощью импорта некоторого средства выбора цвета из react-color в верхней части компонента, а затем использования его в функции рендеринга.

Evol-colorpicker – это адаптируемая библиотека JavaScript для возможностей выбора цвета, которую можно использовать в оперативном режиме. Она может обеспечить поддержку прозрачного цвета, отслеживание истории цветов и выбор цветовой палитры.

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

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

Farbtastic 2 использует элемент холста html5 для рендеринга градиента насыщенности / яркости внутри круга оттенков. 

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

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

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

Таблица базовых цветов html, В одежде, в радуге, названия цветов

В HTML существуют несколько основных способов представления цветов:

1. В виде #112233.
   
   Представление в виде трёх пар шестнадцатеричных цифр (Hex triplet), где каждая пара отвечает за свой
   цвет:
   
   две первые цифры — красный (00 — FF)
   
   две в середине — зелёный (00 — FF)
   
   две последние цифры — синий (00 — FF)

   Возможно также краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.

   Символ # обозначает шестнадцатеричное число (от 000000 до FFFFFF).

2. Представление ключевыми словами, например green, black.
   Во избежание случаев, когда указанное
   ключевое слово «не понимается» браузером, следует использовать лишь небольшой набор основных цветов,
   используемых во всех браузерах.
3. В виде rgb( *, *, *),
   где «*» — числа от 0 до 255, обозначающих количество
   соответствующего цвета
   
   (красный — Red, зелёный — Green , синий — Blue).

4. В виде rgba( *, *, *, *),
   где первые 3 «*» — компоненты цвета, задающиеся в
   диапазоне 0 до 255,
   
   а последняя «*» — уровень непрозрачности (альфа-канал), задающийся дробными числами от 0 до 1.

Вариант 1.

<html>
<body color=#800000>
1) Данный текст, как и
весь остальной текст на всей странице, будет отображаться бордовым
цветом.
</body>
<html>

Вариант 2. (тотже цвет бордовый)

<html>
<body color=Maroon>
2) Данный текст, как и весь остальной текст на всей странице, будет отображаться бордовым цветом.
</body>
<html>

Вариант 3. (тотже цвет бордовый)

<html>
<body color=rgb(128,0,0)>
3) Данный
текст, как и весь остальной текст на всей странице, будет отображаться бордовым цветом.

</body>
<html>

Вариант 4. (тотже цвет бордовый, но полупрозрачный)

<html>
<body color=rgba(128,0,0,0.6)>
4) Данный
текст, как и весь остальной текст на всей странице, будет отображаться полупрозрачным бордовым
цветом.
</body>
<html>

RGB (аббревиатура английских слов Red, Green, Blue — красный, зелёный, синий) — аддитивная цветовая
модель, которая построена на методе смешение цветов.

Цветовая модель RGB является зависимой от устройства (модели монитора).

Аддитивное смешение цветов:

• добавление красного до зеленого дает желтый;
• добавление красного до синего дает пурпурный;
• добавление зеленого до синего дает голубой;
• добавление всех трех основных цветов дает белый

В HTML определены следующие 16 ключевых цветов.
(В названии цвета можно
использовать как заглавные, так и строчные буквы)

Цвета в радуге

Видимый солнечный спектр

7 основных спектральных цветов видны в радуге.

Цвета в радуге расположены в последовательности, соответствующей спектру видимого света.

Фразы для запоминания последовательности цветов в радуге:

• Каждый охотник желает знать, где сидит фазан.
• Как однажды Жак-звонарь головой сломал фонарь.

В одежде

10 идеальных цветовых сочетаний

Палитра цветов

из изображения — ImageLR

Палитра цветов из часто задаваемых вопросов по изображениям

Разница между кодом HEX и кодом RGB?

В то время как код HEX и RGB отображают одни и те же цвета, оба цветовых кода выглядят по-разному, поскольку код HEX в шестнадцатеричном формате из 6 цифр, с другой стороны, код RGB отображается в виде наборов из 3 чисел в диапазоне от 0 до 255.

Можно ли получить цветовой код веб-сайта?

Да, вы можете получить цветовой код с любого веб-сайта, используя онлайн-инструменты для выбора цвета, такие как ImageLR.Вы можете сделать снимок экрана веб-сайта, а затем загрузить его в ImageLR, чтобы выбрать из него цветовой код HEX и RGB.

Как узнать, какие цвета на картинке?

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

Какие платформы поддерживает ImageLR?

Поскольку ImageLR является онлайн-инструментом, его можно использовать на нескольких платформах, таких как Windows, Mac, смартфоны и планшеты, при условии, что он подключен к Интернету.

Как преобразовать код RGB в HEX-код вручную?

Чтобы преобразовать значения RGB в HEX-код, вам необходимо преобразовать каждый набор чисел один за другим. Например, мы берем RGB-код коричневого цвета и пытаемся преобразовать его в HEX-код. Таким образом, значение RGB коричневого цвета составляет (165,42,42).

Чтобы преобразовать коды RGB в HEX-коды, вам понадобится помощь этой десятичной в шестнадцатеричной диаграмме. Потому что в шестнадцатеричном формате мы не можем записать 10 как 10, и мы должны записать его как A, а 11 как B и так далее.

Первый номер

Первое значение — 165, поэтому мы разделим 165 на 16, потому что в шестнадцатеричной системе счисления 16 чисел (0-15). Итак, когда мы делим 165/16 = 10,32, первое число шестнадцатеричных кодов равно 10 или A.

Теперь мы берем напоминание и умножаем его на 16, поэтому получаем (0,32) x 16 = 5. Итак, теперь у нас есть первые две цифры шестнадцатеричного кода, которые равны # A5.

Второй номер

Второе число значения RGB — 42.Итак, мы проделываем тот же процесс снова, чтобы определить третье и четвертое число шестнадцатеричного кода. Теперь 42/16 = 2,63. Итак, третье число шестнадцатеричного кода — 2.

Теперь возьмите остаток и умножьте его на 16, чтобы получить (0,63) x 16 = 10 или A. Итак, третье и четвертое число шестнадцатеричного кода — 2A, и если мы сложим с ним первые два числа, то до сих пор мы имеем шестнадцатеричный код # A52A

Третий номер

Третье число совпадает со вторым числом 42.Таким образом, шестнадцатеричное значение будет таким же, то есть 2А. Если бы число было другим, мы следовали бы тому же процессу, чтобы получить оставшиеся шестнадцатеричные значения.

Итак, наконец, шестнадцатеричное значение — # A52A2A, то есть шестнадцатеричное значение коричневого цвета. Вот как вы вручную конвертируете значения RGB в HEX-коды.

Бесплатное программное обеспечение

Color Picker и онлайн-инструменты для определения цвета HTML HEX, RGD и т. Д., Коды

Довольно часто нам нужно определить цвет на веб-странице или в приложении, чтобы мы могли также использовать его в наших блогах или приложениях.В таком случае нам нужно использовать инструменты для определения цветовых кодов. Этот список бесплатных инструментов Color Picker и бесплатных онлайн-сервисов поможет вам идентифицировать коды цветов HTML HEX, RGD и т. Д. С изображений, веб-сайтов и т. Д.

Бесплатная программа для поиска цветового кода

1] ColorPix- Бесплатная программа для выбора цвета, которая позволяет вам получать цветовые коды и копировать их прямо в буфер обмена. Этот инструмент координат захватывает пиксель на вашем экране и преобразует его в несколько цветовых форматов на выбор.Самое приятное то, что это легкий инструмент, который не требует установки. Просто скачайте его, и он будет готов к использованию. ColorPix имеет встроенную лупу, которая позволяет увеличивать масштаб экрана и легко выбирать цвет. Просто увеличьте картинку, нажмите на цвет и скопируйте его в буфер обмена.

2] Pixie — портативная бесплатная программа, особенно полезная для графических дизайнеров и веб-дизайнеров. Если вы ищете инструмент, который поможет вам найти приятные цвета на экране, Pixie — это то, что вам нужно.Вам просто нужно запустить Pixie, инструмент, и вы можете указать любой цвет, чтобы узнать значения HEX, HTML, CMYK, RGB и HSV. Эти значения также могут помочь вам воспроизвести эти цвета в вашем графическом дизайне.

3] Just Color Picker — Just Color Picker — это бесплатный и портативный палитра цветов и редактор цветов, который определяет цвета, помогает выбирать их и копировать в буфер обмена одним щелчком мыши. С помощью этого инструмента можно легко и быстро комбинировать цвета и редактировать их.Он позволяет вам выбрать область размером всего в один пиксель и выбрать цвет с наилучшим оттенком. Примечательной особенностью Just Color Picker является его гармоничный искатель цвета, который позволяет вам найти красивую комбинацию цветов, соответствующих основным цветам. Например, если вы хотите выбрать цвет шрифта для своего веб-сайта, выберите основной цвет вашего веб-сайта, и инструмент предложит вам лучшие цветовые комбинации, гармонично сочетающиеся с вашим веб-сайтом.

4] CP1 Color Picker- Это простая программа для выбора цвета для ПК с Windows, которая позволяет быстро и легко выбирать любой цвет.CP1 — это легкий инструмент, который также поддерживает Windows 10, он также поставляется в портативной версии. Установите инструмент на свой компьютер, и вы сможете найти цветовые коды HTML и RGB любого цвета в любом месте на рабочем столе. Как только вы установите CP1 Color Picker на свой компьютер, он захватит цвета на вашем экране и выдаст вам цветовые коды, как показано на изображении ниже. Просто щелкните любой код и вставьте его где-нибудь в Блокноте для использования в будущем.

5] Colorpic- Эта палитра цветов подходит для мониторов с высоким разрешением и оснащена лупой.Этот инструмент позволяет одновременно брать до 19 цветовых палитр и смешивать их, чтобы получить желаемый спектр. Вы можете настроить цвета с помощью усовершенствованного четырехцветного микшера Colorpic. Инструмент работает практически со всеми популярными веб-браузерами и приложениями для редактирования фотографий, такими как Photoshop и т. Д. Вы можете скачать Colorpic здесь.

6] ColorZilla- Доступный как дополнение Firefox и расширение Chrome, ColorZilla снова является бесплатным инструментом для выбора цвета, который стоит добавить в список.С помощью этого инструмента вы можете получить цветовой код из любой точки вашего веб-браузера. Фактически, вы можете анализировать всю цветовую палитру веб-страницы с помощью ColorZilla. Его онлайн-программа просмотра палитры помогает вам просматривать, добавлять в закладки или делиться любой из ваших цветовых палитр в Интернете. Анализатор цвета DOM ColorZilla проверяет цвета на любой веб-странице, обнаруживает соответствующие элементы и помогает определить точные цветовые коды. Загрузите инструмент здесь.

Онлайн-инструмент для выбора цвета

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

1] ImageColorPicker.com-

Это простой интерактивный инструмент для выбора цвета, позволяющий выбрать цвет и получить код цвета HTML, значение HEX, значение HSV и значение RGB для этого конкретного пикселя. Вы можете загрузить изображение или просто вставить URL-адрес изображения в адресную строку, чтобы получить цветовой код. Просто загрузите изображение и наведите курсор мыши на нужный цвет, и вы увидите выбранный цвет на миниатюре вместе с цветовым кодом HTML, HSV и RGB.

2] w3schools.com

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

3] ColorPicker.com

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

4] HailPixel.com

Этот онлайн-инструмент для выбора цвета имеет совершенно другой интерфейс.Он превращает весь ваш экран в палитру цветов. Просто продолжайте перемещать курсор мыши по экрану и щелкните по желаемому цвету. Он мгновенно сохранит цвет, и, щелкнув значок настроек, вы можете получить код HEX, HSL и RGB. Использовать этот инструмент весело, но в то же время немного сбивает с толку, потому что нет цветового круга, из которого можно было бы выбирать цвета. Это может занять довольно много времени, но, опять же, некоторым из вас он может понравиться из-за его разной компоновки и интерфейса.

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

Возможно, вам будет интересно узнать, что Bing представил свой инструмент выбора цвета. Вы можете также взглянуть на инструмент выбора цвета в Internet Explorer и в элементе проверки браузера Google Chrome.

Источник

12 уникальных инструментов выбора цвета для веб-дизайнеров и графических дизайнеров

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

Мы, дизайнеры, серьезно относимся к цвету, потому что — это серьезно.Выбранные вами цвета повлияют не только на то, как люди будут чувствовать себя на вашем сайте, но и на то, что увидят пользователи с различными типами дальтонизма. Так что выбирайте с умом.

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

12 лучших палитр цветов и инструментов для дизайнеров

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

1. Расширение Chrome для ColorPick Eyedropper

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

ColorPick позволяет найти шестнадцатеричный цветовой код любого элемента.

2. ColorSnapper 2

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

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

После того, как вы выбрали цвет, ColorSnapper сохраняет его на панели цветов, чтобы вы могли использовать его позже. Нужно скопировать цвет прямо сейчас? Просто щелкните сохраненный цвет, и ColorSnapper автоматически скопирует его в буфер обмена.

3. Расширение Webflow для Chrome

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

Под рукой, правда?

Генераторы цветовых схем и палитр

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

На самом деле выбрать цвета бывает непросто — к счастью, есть инструменты, которые помогут нам в этом!

4. Happy Hues

Созданный полностью в Webflow никем иным, как Mackenzie Child, Happy Hues дает вам различные цветовые палитры для вдохновения и показывает реальные примеры того, как эти цвета могут быть использованы в профессиональном дизайне.

Happy Hues — это одновременно отличный ресурс, который поможет вам найти лучшие цвета для ваших дизайнов, а также познакомит вас с теорией цвета, чтобы создавать удобные пользовательские интерфейсы и возможности.

5. Цвет

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

6. Coolors

Coolors упрощает выбор и уточнение вашей палитры.

Coolors — еще один популярный генератор палитр. Вы можете выбрать любой цвет и на основе выбранного цвета создать подходящую цветовую схему для любого дизайн-проекта. Хотя (немного) менее интуитивно понятный, чем Color (отсюда и лишнее o), Coolors позволяет экспортировать, хранить и повторно использовать вашу палитру в таких инструментах, как Adobe.У Coolors также есть мобильное приложение, так что вы можете просматривать и изменять цвета где угодно.

7. LOLColors

LOLColors — это простая коллекция тщательно отобранных цветовых палитр. Сайт позволяет очень легко «добавить в избранное» определенную палитру, а также просмотреть самые популярные на основе голосов других. Хотя он не такой объемный, как другие в этом списке, я обнаружил, что сами палитры прекрасно сочетаются друг с другом.

8. Цветовое колесо торговой марки

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

Цветовое вдохновение

Благодаря достижениям в HTML и CSS дизайнеры теперь могут в полной мере использовать цветные градиенты в Интернете, не беспокоясь о создании тяжелых изображений или написании сложного кода. Единственная проблема сейчас — попытаться сузить круг выбора!

Следующие четыре инструмента — это наш лучший выбор для управления выбором цветовой палитры.

9. CSS Gradient

CSS Gradient — это простой сайт, на котором демонстрируются красивые цветовые комбинации градиентов. На сайте представлены значения цветов RGB и шестнадцатеричные для любого цвета, который вы выберете, что позволяет легко воссоздать их в своих собственных проектах.

10. Adobe Capture CC

Цветовые палитры, созданные пользователем в Adobe Color.

Какой лучший способ черпать вдохновение в цвете, чем окружающий нас мир? Экосистема Adobe Color имеет ряд ресурсов (в том числе генератор образцов), но чаще всего я использую их приложение для iOS, Adobe Capture CC.

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

Ссылки по теме: Лучшие альтернативы Photoshop (бесплатные + платные)

11. Colormind

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

12. Colorable

Программа Colorable, разработанная Jxnblk, позволяет веб-дизайнерам и дизайнерам полиграфической продукции легко тестировать различные цветовые комбинации, используя их шестнадцатеричные коды. Легко настраивайте значения RGB и HSV для точной настройки цветов. Сайт чрезвычайно прост в использовании: просто добавьте шестнадцатеричное значение для двух цветов, и система оценит комбинацию на основе рекомендаций WCAG по доступности. Этот рейтинг гарантирует, что дальтоники или слабовидящие пользователи смогут читать дизайн с этими двумя цветами.

Этот сайт — один из наших нынешних фаворитов — он ставит доступность во главу угла своих рекомендаций.

Это лишь некоторые из цветных инструментов, которые мы используем каждый день. Сообщите нам, какие инструменты вы используете в Twitter или Facebook.

Палитра цветов RGBA

Цветовое пространство RGB

Цветовое пространство — это математическая модель, используемая для представления физических цветов. Цветовое пространство RGB — это цветовое пространство, состоящее из трех каналов: красного, зеленого и синего, представляющих трехмерную информацию о цвете.Каждый канал представлен 8 битами, и значение каждого канала представляет собой значение от 0 до 255.

Цветовое пространство RGB представляет собой комбинацию красного, зеленого и синего компонентов аддитивного цвета. Компоненты RGB представлены математической моделью:

  R = красный (0 ≤ R ≤ 255)
G = зеленый (0 ≤ G ≤ 255)
B = синий (0 ≤ B ≤ 255)  

В цветовом пространстве RGB интенсивность света каждого канала равна значению каждого канала. Например, если значение каждого канала установлено на 255, цвет визуализированного цветового пространства будет белым.Кроме того, если значение каждого канала установлено на 0, цвет визуализированного цветового пространства будет черным.

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

Цветовое пространство RGBA

Цветовое пространство RGBA — это цветовое пространство, которое включает дополнительный канал (альфа-канал) для представления информации о прозрачности изображения.Цвет RGBA состоит из четырех каналов, каждый из которых представлен 8 битами. В RGBA информация о прозрачности хранится в альфа-канале, а информация о цвете хранится в трех каналах RGB.

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

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

Равные значения каждого канала представлены одним и тем же цветом в цветовом пространстве RGBA, но комбинация разных значений каждого канала приводит к разным цветам.

Цветовое пространство RGBA используется для вычисления цвета каждого пикселя, который может отображаться на экране.Кроме того, можно получить доступ к альфа-каналу, чтобы сделать изображение прозрачным. Это означает, что если альфа-канал имеет значение 255 (непрозрачный), он не представляет собой прозрачный пиксель.

Другие цветовые пространства

Помимо цветовых пространств RGB и RGBA, существуют другие цветовые пространства, которые широко используются в программировании:

CMYK : Цветовое пространство CMYK — это цветовое пространство, которое используется для печати. Это цветовое пространство, состоящее из четырех каналов, где каждый канал представлен 8 битами.Цветовое пространство CMYK — это субтрактивное цветовое пространство, в котором цвет каждого канала создается путем вычитания цвета одного канала из остальных каналов. По крайней мере, один из каналов черный, и цвет этого канала известен как ключевой цвет. Другие каналы представляют собой цвета, смешанные с ключевым цветом, и цвет каждого канала определяется количеством смешанного ключевого цвета.

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

HSL : это цветовое пространство используется для представления цвета одного оттенка. Он представлен позицией на круге оттенков, яркостью и значением.

LAB : это цветовое пространство используется для представления цветов, включая яркость данного цвета. Он представлен положением на кривой, значением яркости и значением красного / зеленого / синего цветов.

Японская версия: カ ラ ー ピ ッ カ ー

HTML Color Picker — Programmers Portal

.

дополнительный

триадический

тетрадик

аналог

нейтральный

оттенков

оттенков

тонов

# 1dc321

RGB (224, 225, 255)

Что такое палитра цветов HTML?

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

Как работает палитра цветов HTML?

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

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

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

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

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

Теория цвета

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

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

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

Цветные диски

Цветовой круг — это визуальное представление цветов, упорядоченных по кругу.
Есть два типа цветов колес. Первый — это RYB или красный, желтый, синий цветовой круг. Этот цветовой круг обычно используют художники.
Второй — это RGB или красный, зеленый, синий цветовой круг.Это цветовое колесо в основном используется веб-разработчиками и дизайнерами для поиска идеальных цветовых комбинаций, приятных для человеческого глаза. В нашей палитре цветов HTML мы использовали цветовое колесо RGB , чтобы найти идеальные цветовые комбинации.

Гармония цветов

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

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

1.

Дополнительные цвета

Два цвета, которые прямо противоположны друг другу на цветовом круге, называются дополнительными цветами.
Поскольку дополнительные цвета имеют высокую контрастность, они могут выделить дизайн по-настоящему.

2.

Триадные цвета

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

3.

Тетрадик Цвета

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

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

4.

Аналогичные цвета

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

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

5.

Нейтральные цвета

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

В этой схеме обычно используются цвета, разнесенные на 15 градусов (30 градусов в нейтральной цветовой схеме) на цветовом круге.

Цветовые оттенки, оттенки и тона

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

1.

Цветовые оттенки

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

2.

Цветовые оттенки

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

3.

Цветовые тона

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

В веб-дизайне принято использовать тона для создания цитат, так как они очень приятны для глаз.

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

Основные, второстепенные и третичные цвета

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

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

12 цветов на цветовом круге можно сгруппировать в следующие три части:

• Основные цвета
• Дополнительные цвета
• Третичные цвета

1.

Основные цвета

Основные цвета в цветовом круге RGB — это цвета, которые при сложении дают чистый белый цвет (#fff).

Эти основные цвета на цветовом круге RGB — красный, зеленый и синий. Эти три цвета находятся на равном расстоянии (120 градусов друг от друга) на цветовом круге.

2.

Дополнительные цвета

Вторичные цвета в цветовом круге RGB — это цвета, получаемые при смешивании двух основных цветов.

В цветовом круге RGB эти вторичные цвета — голубой, пурпурный и желтый.Голубой цвет получается при смешивании зеленого и синего, пурпурный — при смешивании синего и красного, а желтый цвет — при смешивании красного и зеленого.

3.

Третичные цвета

Третичные цвета в цветовом круге RGB возникают, когда один основной цвет смешивается с одним вторичным цветом.

На цветовом круге RGB есть шесть возможных третичных цветов. Эти третичные цвета — оранжевый, зеленовато-зеленый, весенний зеленый, лазурный, фиолетовый и розовый.

Цветовые коды HTML

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

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

• Цветовые коды HEX
• Цветовые коды RGB
• Цветовые коды HSL

1. Цветовые коды

HEX

Цветовые коды HEX — самый популярный формат, используемый дизайнерами и разработчиками.В цветовом формате HEX цвет представлен 6 шестнадцатеричными числами, которым предшествует хэштег (#).

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

Индивидуальный шестнадцатеричный код находится в диапазоне от 00 до FF . Значение 00 представляет наименьшую или нулевую интенсивность, а FF представляет максимально возможную интенсивность цвета.Например — # FF0000 — чистый красный, # 00FF00 — чистый зеленый, а # 0000FF — чистый синий.

# FF0000

# 00FF00

# 0000FF

Если все три основных цвета, то есть красный, зеленый и синий, смешиваются с полной интенсивностью (FF), то есть #FFFFFF, получается чистый белый цвет.

#FFFFFF

Аналогичным образом, если мы смешаем эти три основных цвета с их самой низкой интенсивностью (00), они получат чистый черный цвет (# 000000).

# 000000

2.

Цветовые коды RGB

Цветовые коды RGB являются вторыми по популярности цветовыми кодами, обычно используемыми дизайнерами и разработчиками.В этом цветовом формате значение цвета представлено встроенной функцией rgb (красный, зеленый, синий), которая принимает три параметра.

Диапазон этих параметров от 0 до 255. Первый параметр представляет интенсивность красного цвета, второй представляет интенсивность зеленого цвета, а третий параметр представляет интенсивность синего цвета.

Значение 0 указывает на самую низкую, а 255 указывает на самую высокую интенсивность отдельного цвета.
Например, rgb (255, 0, 0) представляет красный цвет, rgb (0, 255, 0) представляет зеленый цвет, а rgb (0, 0, 255) представляет синий цвет.

RGB (255, 0, 0)

RGB (0, 255, 0)

RGB (0, 0, 255)

Подобно HEX-кодам, если мы смешаем все три основных цвета (красный, зеленый, синий) с их полной интенсивностью, они получат чистый белый цвет, то есть rgb (255,255,255). Смешивание этих основных цветов на самом низком уровне интенсивности приводит к чистому черному цвету, то есть rgb (0,0,0).

3.

Цветовые коды HSL

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

В цветовом формате HSL значение цвета представлено встроенной функцией hsl (оттенок, насыщенность, яркость), которая принимает три параметра.

• Оттенок — Диапазон от 0 до 360 градусов. Значение 0 представляет красный цвет, 120 представляет зеленый цвет и 240 представляет синий цвет.
• Насыщенность — Диапазон от 0% до 100%. Он определяет количество серого, используемого в цвете.0% означает полностью серый цвет, 50% означает 50% серый цвет, а 100% означает полное отсутствие серого.
• Lightness — Диапазон от 0% до 100%. Он определяет интенсивность света, используемого в цвете. 0% означает отсутствие света, т.е. чистый черный цвет, 50% означает ни светлее, ни темнее, а 100% означает полную светлость, т.е. чистый белый цвет.

Например, — hsl (0, 100%, 50%) представляет красный цвет, hsl (120, 100%, 50%) представляет зеленый цвет, а hsl (240, 100%, 50%) представляет чистый синий цвет.

hsl (0, 100%, 50%)

hsl (120, 100%, 50%)

hsl (240, 100%, 50%)

Примечание: — Более подробное описание цветовых кодов HTML см. В руководстве «Цвета и форматы CSS».

Часто задаваемые вопросы (FAQ)

Как выбрать цвет в HTML?

Ответ: — Вы можете использовать тег HTML , чтобы выбрать цвет в простом HTML. По сути, это встроенная в HTML палитра цветов. Значение цвета по умолчанию — rgb (0, 0, 0), т.е. черный цвет (# 000000).

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

Как узнать RGB цвета?

Ответ: — В нашем палитре цветов вы можете просто ввести название цвета, например красный, желтый, зеленый, и просто щелкнуть кнопку «Получить цветовой код», это даст вам его эквивалентное значение во всех трех цветовых форматах, т.е. HEX, RGB, HSL.

Что такое цвет #fff в HTML?

Ответ: — Цветовой код #fff представляет собой шестнадцатеричный эквивалент цвета White .В шестнадцатеричном формате #fff совпадает с #ffffff. RGB-эквивалент #fff — rgb (255, 255, 255). Вы можете использовать любой из них, все они приведут к чистому белому цвету.

Как выбрать дополнительные цвета с помощью палитры цветов HTML?

Ответ: — Дополнительные цвета разнесены на 180 градусов на цветовом круге. Чтобы найти дополнительный цвет, сначала найдите значение HSL данного цвета. Как только значение цвета HSL найдено, добавьте 180 в первый параметр (оттенок) его значения HSL, и ваша задача будет выполнена.

В нашей палитре цветов HTML мы уже сделали это за вас. Все, что вам нужно сделать, это просто выбрать ДОПОЛНИТЕЛЬНЫЙ из раскрывающегося списка, и он покажет дополнительный цвет выбранного вами цвета. Точно так же вы можете найти и другие цветовые гармонии.

Список литературы

1. Палитра цветов Википедия
2. Инструмент выбора цвета Mozila

Палитра цветов HTML | Justfreetools

Онлайн-палитра цветов RGB / HSV / HTML.

Выберите цвет и получите шестнадцатеричный цветовой код RGB и цветовой код HSV.

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

На этой странице Вы можете найти финансовые калькуляторы, ипотечные калькуляторы, калькуляторы для кредитов, калькуляторы для автокредитования и лизинга, калькуляторы процентов, калькуляторы платежей, пенсионные калькуляторы, калькуляторы амортизации, инвестиционные калькуляторы, калькуляторы инфляции, финансовые калькуляторы, калькуляторы подоходного налога. , калькуляторы сложных процентов, калькулятор заработной платы, калькулятор процентной ставки, калькулятор налога с продаж, калькуляторы фитнеса и здоровья, калькулятор BMI, калькуляторы калорий, калькулятор телесного жира, калькулятор BMR, калькулятор идеального веса, калькулятор темпа, калькулятор беременности, калькулятор зачатия беременности, срок родов калькулятор, математические калькуляторы, научный калькулятор, калькулятор дробей, процентные калькуляторы, генератор случайных чисел, треугольный калькулятор, калькулятор стандартного отклонения, другие калькуляторы, калькулятор возраста, калькулятор даты, калькулятор времени, калькулятор часов, калькулятор GPA, калькулятор оценок, конкретный калькулятор, подсеть калькулятор, генерация паролей калькулятор преобразования и многие другие инструменты, а также для редактирования и форматирования текста, загрузки видео с Facebok (мы создали один из самых известных онлайн-инструментов для загрузки видео с Facebook).Мы также предоставляем вам онлайн-загрузчики для YouTube, Linkedin, Instagram, Twitter, Snapchat, TikTok и других социальных сетей (обратите внимание, что мы не размещаем видео на своих серверах. Все загружаемые вами видео загружаются с Facebook, YouTube, Linkedin, CDN в Instagram, Twitter, Snapchat, TikTok. Мы также специализируемся на сочетаниях клавиш, кодах ALT для Mac, Windows и Linux и других полезных советах и ​​инструментах (как писать смайлы в Интернете и т. Д.)

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

Наши инструменты сделают вашу жизнь проще или просто помогут вам выполнять свою работу или обязанности быстрее и эффективнее.

Это наиболее часто используемые пользователями по всему миру.

И мы все еще развиваемся. Наша цель — стать универсальным сайтом для людей, которым нужно быстро производить расчеты или которым нужно быстро найти ответ на базовые конверсии.

Кроме того, мы считаем, что Интернет должен быть источником бесплатной информации. Таким образом, все наши инструменты и услуги полностью бесплатны и не требуют регистрации. Мы кодировали и разрабатывали каждый калькулятор индивидуально и подвергали каждый строгому всестороннему тестированию. Однако, пожалуйста, сообщите нам, если вы заметите хотя бы малейшую ошибку — ваш вклад очень важен для нас. Хотя большинство калькуляторов на Justfreetools.com предназначены для универсального использования во всем мире, некоторые из них предназначены только для определенных стран.24) всего разных цветов HEX. Цвет HEX состоит из 6 цифр, состоящих из трехбайтовых шестнадцатеричных чисел, представляющих красный, зеленый и синий цвета соответственно. Каждый цвет имеет диапазон от 00 до FF в шестнадцатеричной системе счисления, и все три цвета в RGB объединены, чтобы сформировать цвет HEX на основе интенсивности. Например, # ff0000 представляет красный цвет, # 00ff00 представляет зеленый цвет и # 0000ff представляет синий.

Ниже представлен формат цветового кода HEX, начинающийся с # , за которым следуют значения RGB в шестнадцатеричном формате.В шестнадцатеричных цветовых кодах регистр не учитывается. Строчные и прописные буквы не имеют значения, так как это приведет к одному и тому же цвету.

Что такое трехзначный шестнадцатеричный код цвета?

Трехзначный цветовой код является сокращенной версией обычного шестизначного цветового кода HEX. Только 4096 цветов HEX из более чем 16 миллионов можно записать в сокращенном виде. Две шестнадцатеричные цифры каждого цвета в RGB должны быть одним и тем же символом, чтобы шестнадцатеричный цвет можно было сократить до трех цифр. Например, # 0000ff можно сократить до # 00f , а # cc9900 можно сократить до # c90 , тогда как # f279b9 нельзя.

Как использовать цвет HEX в CSS?

Вы можете просто использовать цвет HEX в коде CSS в качестве цвета фона или шрифта элемента HTML, добавив цвет HEX после свойства CSS, как это. Если цвет HEX можно записать сокращенно, состоящий из трех цифр, рекомендуется использовать трехзначный цветовой код HEX, чтобы уменьшить размер файла CSS и сократить время загрузки страницы вашего веб-сайта в рабочей среде. Например, #ffffff можно уменьшить до #fff , что приведет к тому же белому цвету.

  кузов {
  фон: # 4b73cb;
  цвет: #fff;
}  

Что такое цветовая система RGB?

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

Ниже приведен цветовой формат RGB.

Как использовать цвет RGB в CSS?

Хотя использование цветов HEX в основном предпочтительнее в CSS, вы также можете использовать цвет RGB в коде CSS. CSS предоставляет встроенную функцию rgb для применения цвета RGB к свойству CSS. Функция rgb принимает три параметра от 0 до 255, представляющих значение красного, зеленого и синего цветов в цветовой системе RGB соответственно: т.е. rgb (красный, зеленый, синий) .

Например, rgb (245, 142, 33) , который представляет собой комбинацию красного: 245, зеленого: 142 и синего: 33 и дает оранжевый цвет.Вы можете применить цвет RGB в коде CSS, добавив цветовой код RGB в функцию rgb , как показано ниже.

  div {
  фон: rgb (234, 15, 95);
}  

Кроме того, вы можете установить непрозрачность цвета RGB с помощью функции rgba в CSS. Это расширенная функция вышеупомянутого rgb . RGBA — это аббревиатура от Red-Green-Blue-Alpha. Хотя первые три параметра такие же, как у функции rgb , параметр alpha имеет значение от 0.От 00 до 1,00, который определяет непрозрачность цвета RGB, где 0 означает прозрачный, а 1 означает непрозрачный.

Например, вы можете установить непрозрачность DIV на 50%, используя функцию rgba , как это. Фон этого DIV будет на 50% непрозрачным, и элементы под этим DIV в порядке z-index могут быть видны, если таковые имеются.

  div {
  фон: rgba (0, 0, 0, 0,5);
}  

Как преобразовать цвет HEX в цвет RGB в JavaScript

Вы можете легко преобразовать цвет HEX в соответствующий цвет RGB в JavaScript, используя популярную библиотеку color-convert из npm.

  npm install color-convert  

Импортируйте библиотеку color-convert в свой скрипт и используйте метод rgb из свойства hex для преобразования HEX в RGB. Результатом будет массив из трех целочисленных значений, представляющих красный, зеленый и синий цвет в системе цвета RGB соответственно.

  const convert = require ('color-convert');

// HEX в RGB
convert.hex.rgb ('# 8bbd0e'); // [139, 189, 14]  

Как преобразовать цвет RGB в цвет HEX в JavaScript

Аналогично преобразованию из HEX в RGB, вы можете использовать метод hex из свойства rgb , чтобы преобразовать цвет RGB в соответствующий HEX, введя целые значения от 0 до 255 в трех параметрах, и в результате будет возвращено строковое значение цвета HEX.

  const convert = require ('color-convert');

// RGB в HEX
convert.rgb.hex (179, 63, 228); // B33FE4  

Что такое цветовая система HSL?

Цветовая система HSL — это удобная для человека цветовая система, поскольку она не определяет цвет ни по шестнадцатеричным, ни по RGB. Вместо этого он формирует цвет из оттенка, насыщенности и легкости. Однако недостатком цветовой системы HSL является всего 3,6 миллиона цветов, что намного меньше, чем у HEX и RGB. Ниже приведен формат цветового кода HSL.

  hls (оттенок, насыщенность, яркость)  

• Оттенок — оттенок имеет диапазон от 0 до 359, который представляет градус на цветовом круге. Следовательно, значения 0, 360 и 720 градусов приведут к одному и тому же пятну на цветовом круге, где красный — 0 градусов, зеленый — 120 градусов, а синий — 240 градусов. Мы, люди, можем легко угадать, в какой степени находится цвет, а не в цветовых системах HEX и RGB.

• Насыщенность — Насыщенность имеет диапазон от 0% до 100%, который представляет интенсивность цвета.Чем больше насыщенность, тем интенсивнее будет цвет. Если установлено значение 0%, это приведет к оттенкам серого.

• Яркость — Яркость имеет диапазон от 0% до 100% (по умолчанию 50%). Увеличение яркости означает добавление белого к цвету, тогда как уменьшение яркости означает добавление черного.

  Добавить комментарий Отменить ответ

  Ваш адрес email не будет опубликован. Обязательные поля помечены *

  Комментарий *

  Имя *

  Email *

  Сайт