Код темно синего цвета
- LANGUAGE
- English
- Chinese
- Spanish
- Portuguese
- Russian
- Japanese
- German
- Korean
- French
- Slovenian
- COLOR TOOLS
- COLORS FROM IMAGE
- CONVERT COLOR FORMAT
- COLOR NAMES
- MORE TOOLS
- WEBSAFE COLORS
- HTML EDITOR
Селектор цвета HTML
Для выбора цвета перемещайте горизонтальный ползунок, а затем нажмите на цветовую ячейку слева, чтобы получить цветовой код HTML для желаемого оттенка.
Теория цветовых кодов HTML
Вы задаетесь вопросом: «Значит ли что-нибудь эта странная комбинация букв и цифр?» Ответ на этот вопрос — «Да, значит». И вот что она значит:)
формат кодов HTML: Каждый код HTML состоит из символа «#» и 6 букв или цифр. Используется шестнадцатеричная система счисления. Например, «FF» в шестнадцатеричной системе соответствует 255 в десятеричной.
Значение символов: Первыми двумя символами в коде цвета HTML обозначается насыщенность красного цвета. 00 — наименее насыщенный и FF — наиболее насыщенный. Третий и четвертый символы означают насыщенность зеленого, а пятый и шестой — синего. Таким образом, комбинируя разные по насыщенности оттенки красного, зеленого и синего, мы можем получить фактически любой угодный нам цвет;)
Примеры: #FF0000 — Этим кодом HTML мы сообщаем браузеру команду отображать максимально возможный красный цвет и вообще не отображать зеленый и синий. В результате, естественно, мы получаем чистый красный цвет:
#00FF00 — Этот код HTML отображает только зеленый, без красного и синего. Результат:
#0000FF — Этот код HTML отображает только синий, без красного и зеленого. Результат:
#FFFF00 — Сочетание красного и зеленого цветов дает нам желтый:
#CCEEFF -Взять немного красного, чуть больше зеленого и по максимуму синего для получения небесно-голубого:
Поддержите этот сайт
Поддержите, пожалуйста, этот сайт, опубликовав на него ссылку. Все, что вам нужно сделать, — этот поместить приведенный ниже код на ваш сайт. Также распространяйте информацию о нас через социальные сети (Твиттер, Фейсбук, Google +1):
Заполняем пробелы
Как только подберете базовые/крайние значения, вам останется лишь заполнить «пробелы» между ними. При создании веб-сайтов и онлайн-интерфейсов требуется как минимум по 5 оттенков каждого цвета. В идеале можно дотянуть их количество до 10-ти, чтобы не слишком ограничивать себя в дальнейшем.
Кстати, девять – довольно удобное число, отлично подходит при разделении/заполнении всех оттенков. Для удобства назовем наиболее светлый вариант – 100, основной – 500, а максимально темный – 900. Затем начинаем подбирать оттенки 300 и 700 – те, что находятся в центре между базовыми. Они должны выглядеть как идеальные промежуточные решения.
Теперь (также как и выше) надо заполнить еще четыре пробела в текущей цветовой гамме.
В итоге у вас должна получиться сбалансированная модель, с помощью которой вы сможете реализовать свои дизайнерские идеи, не ограничивая полет фантазии.
Как использовать программу для подбора акцентных цветов
Как только вы определились с преобладающим цветом, нет ничего проще, чем подобрать акцентные цвета с помощью таких программ, как Adobe Color CC Tool:
На основе преобладающего цвета
Шаг 1. Для начала узнайте код вашего преобладающего цвета. Например, на сайте ColorPicker.com. Код цвета указан в прямоугольнике прямо над квадратом с цветовой палитрой.
Скопировав код с ColorPicker.com, вставьте его в поле «НЕХ» инструмента Adobe Color. Убедитесь, что вы вставили код в колонку посередине:
Как только вы зададите цвет, Adobe Color отобразит его на экране вместе с другими комплементарными цветами.
Шаг 2. В левой верхней стороне вы увидите прямоугольник со следующими цветовыми схемами:
- Последовательная;
- Монохромная;
- Треугольная;
- Комплементарная;
- Составная;
- Оттенки.
Выберите цветовую схему
Поэкспериментируйте с разными цветовыми схемами, чтобы понять, какая из них подходит именно вам. Все цвета, предложенные программой, хорошо сочетаются друг с другом.
Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета.
Важно не перемещать короткий указатель, расположенный посередине, чтобы ваш преобладающий цвет оставался постоянным:
CMS и конструкторы сайтов позволяют вставить цветовые коды (HEX) для выделения любой части вашего сайта:
HEX
На основе понравившейся фотографии
Порой проще искать цветовые решения на просторах интернета и вдохновляться ими.
Вы можете загрузить любую понравившуюся фотографию в Adobe Color и программа автоматически сгенерирует цветовую схему, созданную на ее основе.
Шаг 1. Загрузите фотографию:
Шаг 2. Выберите одно из пяти цветовых настроений:
- Красочное;
- Яркое;
- Приглушенное;
- Насыщенное;
- Темное.
Поэкспериментируйте с цветовыми настроениями, чтобы понять, какое вам ближе:
Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета по изображению:
Шаг 4. Предложенная цветовая палитра расположена под изображением. Вот как можно подобрать цветовую схему для вашего веб-дизайна.
Чтобы увидеть коды (HEX) цветов, нажмите на цветное колесико, расположенное в правом верхнем углу:
HEX
Определите крайние оттенки в палитре
Следующий шаг – подбор самого светлого и темного решения. Опять же тут нет строгой методики, вам поможет такой совет: подумайте, где вы собираетесь их использовать, и уже исходя из этого, сделайте свой выбор.
Самые темные цвета, как правило, предназначены для текста, в то время как с помощью светлых часто оттеняют фон того или иного элемента. Хорошим примером послужит простой блок оповещения, изображенный на картинке ниже, где присутствуют сразу оба крайних варианта.
Возьмите ваш основной цвет и начинайте корректировать его насыщенность/яркость до тех пор, пока результат вас не удовлетворит.
Тип 2 – Корпоративные сайты и сервисы
При создании корпоративного ресурса преследуется одна цель – продвижение товаров или услуг.
В зависимости от того, какова цель вашего сайта, фоновый цвет должен отличаться.
Продвижение бренда
Если вы хотите создать запоминающийся образ компании, используйте для фона различные оттенки преобладающего цвета или цвета бренда.
Все потому, что цвет напрямую влияет на узнаваемость бренда (помните пример про Кока-Колу?) Когда вы используете различные оттенки цвета своего бренда в качестве фона, вы усиливаете его и делаете более запоминающимся для клиентов.
Если преобладающий цвет вашего сайта вызывающий, то его использование в качестве фона может негативно повлиять на восприятие пользователей. В таких случаях, используйте оттенки с наименьшей интенсивностью:
Продвижение сервиса
Если вашей целью является привлечение внимания к сервису или к портфолио с вашими работами, используйте белый или нейтральный цвет фона.
Как и в случае с информационными ресурсами, не нужно перегружать сайт и отвлекать внимание пользователей от контента, который вы хотите донести. Добавив белый или светлый фон в цветовые схемы для сайта, вы заострите внимание на контенте:
Названия цветов в X11[править | править код]
|
|
|
Слово «Gray» в названиях серых цветов не нужно писать как «Grey», так как ряд браузеров интерпретируют это как «Green»
Определение цвета при помощи специальной программы
Так же, помимо инструментов браузера существуют специальные программки, которые так же позволяют легко определять значение цвета. Я для этих целей использую программу Pixie. Она не устанавливается, то есть вы просто копируете ее к себе на компьютер, а затем, при необходимости, просто запускаете двойным щелчком мыши, и у вас появляется вот такое окошко:
Которое вы можете разместить в любой части экрана, что бы оно вам не мешало. При этом когда вы водите курсором по изображению – в специальном окошке показываются выбранный цвет.
Плюс этой программы в том, что вы можете определять точное значение цвета не только для каких-то элементов открытых в браузере, но и любых других элементов, отображающихся на вашем мониторе.
После того, ка вы выбрали тот цвет, который вам нравится, вы нажимаете сочетание клавиш CTRL+ALT+C, и значение этого цвета попадает в буфер обмена.
Затем, это значение можно также задать в качестве цвета фона, но при этом обращаю ваше внимание, что оно копируется без знака решетки. Цвет определяется в шестнадцатеричном формате но знак решетки # вам нужно будет дописывать самостоятельно чтобы получилось примерно так: «#2F73B6»
Цвет определяется в шестнадцатеричном формате но знак решетки # вам нужно будет дописывать самостоятельно чтобы получилось примерно так: «#2F73B6».
Так же, плюс этой программы в том, что вы помимо того, что можете определять точное значение цвета, так же можно немного его изменять.
Например, я хочу для этой кнопки сделать эффект при наведении, чтобы фон становился более темный или более светлый, но при этом оттенок должен сохранялся. Для этого:
- 1.Сначала нажимаем CTRL+ALT+C, что бы скопировать значение цвета.
-
2.Затем, на клавиатуре, нажимаем CTRL+ALT+X, после чего открывается вот такая палитра:
- 3.В этой палитре можно либо выбирать интересующие оттенки, либо при помощи ползунка справа делать цвет более темным или более светлым. При этом в окне предпросмотра отображается оттенок, который получается в результате этих манипуляций. Здесь значение цвета отображается как в формате RGB, так и в шестнадцатеричном формате.
-
4.Если значение скопированного цвета не вставилось автоматически, то нужно вставить его в поле «HTML», а уже потом делать его темнее или светлее при помощи ползунка справа.
- 5.После выбора нужного оттенка копируем шестнадцатеричное значение цвета из поля “HTML”
Для смены цвета фона при наведении нужно приписать к классу или идентификатору элемента псевдокласс hover, а заем задать цвет фона.
Получится примерно так:
CSS
.test-btn{
background:#2F73B6;
}
.test-btn:hover{
background:# 286199;
}
|
1 |
.test-btn{ background#2F73B6; } .test-btn:hover{ background#286199; } |
Я обычно при верстке или доработке сайтов использую именно эту программку.
Вы можете скачать данную программу к себе на компьютер, нажав на ссылку ниже.
RGB Color Codes Chart
Hover with cursor on color to get the hex and decimal color codes below:
| Hex: # |
| Red: |
| Green: |
| Blue: |
RGB color space
RGB color space or RGB color system, constructs all the colors from the combination of the Red, Green and Blue colors.
The red, green and blue use 8 bits each, which have integer values from 0 to 255. This makes 256*256*256=16777216 possible colors.
RGB ≡ Red, Green, Blue
Each pixel in the LED monitor displays colors this way, by combination of red, green and blue LEDs (light emitting diodes).
When the red pixel is set to 0, the LED is turned off. When the red pixel is set to 255, the LED is turned fully on.
Any value between them sets the LED to partial light emission.
RGB color format & calculation
RGB code has 24 bits format (bits 0..23):
| RED | GREEN | BLUE | |||
| 23 | 16 | 15 | 8 | 7 |
RGB = (R*65536)+(G*256)+B , (when R is RED, G is GREEN and B is BLUE)
Calculation examples
White RGB Color
White RGB code = 255*65536+255*256+255 = #FFFFFF
Blue RGB Color
Blue RGB code = 0*65536+0*256+255 = #0000FF
Red RGB Color
Red RGB code = 255*65536+0*256+0 = #FF0000
Green RGB Color
Green RGB code = 0*65536+255*256+0 = #00FF00
Gray RGB Color
Gray RGB code = 128*65536+128*256+128 = #808080
Yellow RGB Color
Yellow RGB code = 255*65536+255*256+0 = #FFFF00
JavaScript
Для реализации выбора цвета нам необходимо извлечь объект элемента canvas и записать в переменную с помощью следующего выражения:
var canvas = document.getElementById('canvas_picker').getContext('2d');
Теперь мы можем задать фон элементу canvas. Для этого нам нужно создать объект класса Image, передав url адрес изображения. После загрузки изображения нарисуем в canvas:
var img = new Image();
img.src = 'image.jpg';
$(img).load(function(){
canvas.drawImage(img,0,0);
});
Теперь нам нужно определить функционал, который будет отслеживать событие нажатия на изображение и дальнейшие действия. В первую очередь, мы должны записать координаты курсора:
$('#canvas_picker').click(function(event){
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
Данные строки ответственны за отслеживание события “клик”, после чего в переменные x и y записываем координаты курсора пользователя. Координаты считаются путём вычитания смещения элемента canvas от позиции места, куда нажал пользователь.
Далее, нам нужно определить RGB цвет. Для этого воспользуемся функцией getImageData, передав координаты клика:
var imgData = canvas.getImageData(x, y, 1, 1).data; var R = imgData; var G = imgData; var B = imgData;
Теперь в переменных R, G, B хранятся отдельные цвета. Давайте объединим их и выведим в специально подготовленное текстовое поле:
var rgb = R + ',' + G + ',' + B;
$('#rgb input').val(rgb);
});
На данном этапе наш инструмент уже находится в рабочем состоянии, однако в начале урока мы определились, что помимо RGB, хотим получить HEX значение цвета. Для преобразования RGB значения в HEX напишем специальную функцию:
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(n) {
n = parseInt(n,10);
if (isNaN(n)) return "00";
n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
}
Теперь всё что нам осталось сделать, так это записать HEX значение цвета в соответствующее текстовое поле.
// после определения RGB
var hex = rgbToHex(R,G,B);
// после вывода в поле RGB
$('#hex input').val('#' + hex);
«Вибрационные» Цвета
Когда ярко насыщенные цвета в паре, они создают «вибрационный эффект», где цвета, кажется, почти двигаются в размытости или светящемся движении. Вы же не хотите, чтобы так было?
Эта вибрация может быть тревожной для пользователей, как это изложил теоретик Йозеф Альберс в своем классическом руководстве «Взаимодействие Цвета» — На первый взгляд, это захватывающий эффект, но позже чувствуется его агрессивность, что часто вызывает раздражение наших глаз. «Вибрационный эффект» редко используется в рекламе, так как это большинству не нравиться, его стараются избегать «.
- Высокая насыщенность каждого цвета
- Комплиметарные цвета на цветовом круге
- Распределенные на 180 градусов друг от друга на цветовом круге
- Преобразование цветов в оттенки серого, в результате создается очень мало контраста
Классический пример использования ярко-красного и зеленого. Популярная комбинация «Рождество» является одной из самых больших (и наиболее широко используемых) ошибок сочетания цвета. Эти комбинации представляют собой проблему «доступности», потому что они неразборчивы.
Попробуйте вместо этого: Если вы должны использовать «вибрирующие» цветовые комбинации, разделите их с чем-то еще (предпочтительно нейтральным) и вставьте это между ними.
5 последних уроков рубрики «HTML5»
-
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
-
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
-
HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.
-
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
-
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.
Что нужно для создания палитры цветов
Вполне очевидно, что вы не сможете реализовать полноценный стоящий проект, используя всего пять HEX кодов веб-цветов. Вам нужен более широкий набор элементов для создания идеального работающего прототипа.
Давайте разделим нашу палитру на три группы.
Оттенки серого
Тексты, панели инструментов, фоны и др. – в большинстве интерфейсов почти всегда они серые.
Не исключено, что в вашем случае понадобится намного больше вариантов серого. Поначалу кажется, что 3-4 — это более, чем достаточно, однако вскоре вам захочется, например, добавить элемент чуть темнее №2, но немного светлее №3 и т.п.
Практика показывает, что для полноценного результата будет достаточно 8–10 сероватых оттенков — это не так много, дабы вы ударялись в крайности и мучились при выборе, но в то же время вполне достаточно, чтобы не так часто идти на компромиссы.
Как правило, чистый черный выглядит немного неестественно, советуем начинать с самого насыщенного темно-серого, а затем шаг за шагом переходить к белому.
Основной цвет(а)
В большинстве сайтов будет достаточно двух базовых цветов, которые по сути, и формируют общий вид интерфейса – так Facebook ассоциируется у нас с синими оттенками, хотя в действительности в дизайне там чаще встречаются серые.
По аналогии с предыдущим пунктом дабы сделать хорошую цветовую палитру вам потребуется 5–10 вариантов, дающих бОльший выбор при проектировании внешнего вида: оттенки посветлее можно применять в качестве фона для оповещений; в то время как темные прекрасно подойдут для оформления текстов.
Цвета для акцентов
Кроме базовых, любому веб-интерфейсу требуется несколько визуальных «акцентов», позволяющих обращать внимание на ту или иную важную информацию. Вы можете использовать такие привлекающие внимание решения, как цвет морской волны, розовый, желтый и др.:
Вам также понадобятся способы демонстрации определенных событий и состояний. Допустим, красным будете выделять важную/критичную информацию и сообщения о возможных опасных последствиях выбираемого действия:
…желтый (по аналогии со светофором) будет предупреждать посетителей:
…а с помощью зеленого сможете выделить положительную динамику:
Хотя в пользовательском интерфейсе эти цвета должны применяться довольно умеренно, вам желательно проработать по несколько оттенков каждого из них.
Если при разработке сайта/приложения вам надо создать цветовую палитру для классификации или различения похожих объектов (календарных событий, тегов, линий графиков и т. д.), то, возможно, вам потребуется больше акцентов. При создании сложных или нестандартных UI-интерфейсов нередко берется до 10-ти различных цветов с 5-10 полутонами у каждого.
Палитра CMYK
Основной задачей печатной промышленности – давать сочные, яркие изображения. И если художник может потратить много времени на подбор нужного тона, то печать не имеет права на ошибку, так как речь идет не о штучном изделии, а о массовом продукте. Поэтому в системе CMYK есть набор самых выгодных цветов, которые не подведут при печати.
Опираться стоит на правила:
1) Самый сочный цвет получается в том случае, если какого либо основного цвета 100%.
2) Составные цвета имеют преимущество перед одной краской.
3) Синий цвет как правило интенсивней других красителей.
Серый CMYK
Серый необходимо сделать составным. В его создании учувствуют все цвета:
С(20%); М(20%); Y (20%); K (20%) = светло-серый
С(40%); М(40%); Y (40%); K (40%) = средне-серый
С(60%); М(60%); Y (60%); K (60%) = темно-серый
Красный CMYK
Красный – один из основных цветов полиграфии. Его яркость очень важна. В классическом варианте самый яркий оттенок является результатом смешивания 100% розового и 100% желтого. Любые затемнения его можно добиться с добавлением синего и черного.
С(0%); М(100%); Y (100%); K (0%) = красный
С(0%); М(90%); Y (100%); K (0%) = алый
С(30%); М(100%); Y (100%); K (30%) = бордовый
Оранжевый CMYK
Оранжевый так же относится к часто используемым цветам. Следите, чтобы у него всегда желтый был в 100%. Коралловый оттенок – не оправдает надежд: он будет не выразительно бледным.
С(0%); М(60%); Y (100%); K (0%) = оранжевый
С(0%); М(40%); Y (100%); K (0%) = желто-оранжевый
С(0%); М(40%); Y (30%); K (0%) = коралловый
Розовый CMYK
Вообще весь этот сыр бор с основными цветами для печати результат отсутствия метода получения яркой розовой краски. Учитывая тот нюанс, что у нас нет белого красителя, но есть белая поверхность.
Конечно самым ярким будет маждента и фуксия, более «разведенные» варианты не будут столь эффектны.
С(0%); М(60%); Y (0%); K (0%) = розовый
С(0%); М (100%); Y (0%); K (0%) = маджента
С(20%); М (100%); Y (20%); K (0%) = фуксия
С(0%); М(50%); Y (40%); K (0%) = лососевый
Зеленый CMYK
Зеленых оттенков огромное множество, но самый яркий состоит из 100% синего и 100% желтого. Все производные с сохранением одного из этих тонов в полном виде – будут достаточно яркими.
С(100%); М(0%); Y (100%); K (0%) = зеленый
С(50%); М(0%); Y (100%); K (0%) = салатовый
С(60%); М(50%); Y (100%); K (0%) = оливковый
С(100%); М(0%); Y (50%); K (0%) = сине-зеленый
С(50%); М(0%); Y (50%); K (0%) = светло-зеленый
С(100%); М(30%); Y (100%); K (30%) = темно-зеленый
Синий CMYK
Хоть в основных тонах есть синий цвет – в таком виде его мало кто использует. Популярностью пользуется классический оттенок синего и темные его проявления. Ниже, самые эффективные процентовки оттенков.
C (100%); M (50%); Y (0%); K (0%) = синий
C (100%); M (60%); Y (0%); K (30%) = темно-синий
C ( 100%); M (80%); Y (0%); K (0%) = фиолетово-синий
C (100%); M (60%); Y (40%); K (0%) = сине-зеленый
C (70%); M ( 0%); Y (25%); K (0%) = бирюзовый
Фиолетовый CMYK
Насыщенный фиолетовый тон так же часто используется в рекламе и печатном дизайне, как и остальные простые и яркие тона. Как и его оттенки с хотя бы одним 100% -ным компонентом.
C ( 100%); M (100%); Y (0%); K (0%) = фиолетовый
C ( 50%); M ( 100%); Y ( 0%); K (0%) = пурпурный
C ( 80%); M (100%); Y ( 0%); K ( 0%) = красно-фиолетовый
C ( 50%); M ( 50%); Y (0%); K (0%) = сиреневый
Коричневый, бежевый, золотой, телесный CMYK
Сложные цвета, такие как золотой, коричневый, бежевый так же весьма востребованы, но составление удачного баланса компонентов требует времени и опыта, поэтому мы подобрали для вас уже готовые варианты.
C (30%); M ( 30%); Y ( 100%); K ( 5%) = золотой
C (50%); M ( 70%); Y ( 100%); K ( 30%) = коричневый
C (6%); M ( 30%); Y ( 50%); K ( 0%) = телесный
C (20%); M ( 35%); Y ( 44%); K ( 0%) = бежевый
Web Safe Colors?
Many years ago, when computers supported maximum 256 different colors, a list
of 216 «Web Safe Colors» was suggested as a Web standard (reserving 40 fixed
system colors).
This is not important now, since most computers can display millions of
different colors.
This 216 hex values cross-browser color palette was created to ensure that all computers
would display the colors correctly when running a 256 color palette:
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
❮ Назад
Дальше ❯
LAB
Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.
HEX в RGB
HEX в RGBA
HEX в RGB(%)
HEX в RGBA(%)
HEX в HSL
HEX в HSLA
HEX в CMYK
HEX в HSB/HSV
HEX в XYZ
HEX в LAB
RGB в HEX
RGB в RGBA
RGB в RGB(%)
RGB в RGBA(%)
RGB в HSL
RGB в HSLA
RGB в CMYK
RGB в HSB/HSV
RGB в XYZ
RGB в LAB
RGBA в HEX
RGBA в RGB
RGBA в RGB(%)
RGBA в RGBA(%)
RGBA в HSL
RGBA в HSLA
RGBA в CMYK
RGBA в HSB/HSV
RGBA в XYZ
RGBA в LAB
RGB(%) в HEX
RGB(%) в RGB
RGB(%) в RGBA
RGB(%) в RGBA(%)
RGB(%) в HSL
RGB(%) в HSLA
RGB(%) в CMYK
RGB(%) в HSB/HSV
RGB(%) в XYZ
RGB(%) в LAB
RGBA(%) в HEX
RGBA(%) в RGB
RGBA(%) в RGBA
RGBA(%) в RGB(%)
RGBA(%) в HSL
RGBA(%) в HSLA
RGBA(%) в CMYK
RGBA(%) в HSB/HSV
RGBA(%) в XYZ
RGBA(%) в LAB
HSL в HEX
HSL в RGB
HSL в RGBA
HSL в RGB(%)
HSL в RGBA(%)
HSL в HSLA
HSL в CMYK
HSL в HSB/HSV
HSL в XYZ
HSL в LAB
HSLA в HEX
HSLA в RGB
HSLA в RGBA
HSLA в RGB(%)
HSLA в RGBA(%)
HSLA в HSL
HSLA в CMYK
HSLA в HSB/HSV
HSLA в XYZ
HSLA в LAB
CMYK в HEX
CMYK в RGB
CMYK в RGBA
CMYK в RGB(%)
CMYK в RGBA(%)
CMYK в HSL
CMYK в HSLA
CMYK в HSB/HSV
CMYK в XYZ
CMYK в LAB
HSB/HSV в HEX
HSB/HSV в RGB
HSB/HSV в RGBA
HSB/HSV в RGB(%)
HSB/HSV в RGBA(%)
HSB/HSV в HSL
HSB/HSV в HSLA
HSB/HSV в CMYK
HSB/HSV в XYZ
HSB/HSV в LAB
XYZ в HEX
XYZ в RGB
XYZ в RGBA
XYZ в RGB(%)
XYZ в RGBA(%)
XYZ в HSL
XYZ в HSLA
XYZ в CMYK
XYZ в HSB/HSV
XYZ в LAB
LAB в HEX
LAB в RGB
LAB в RGBA
LAB в RGB(%)
LAB в RGBA(%)
LAB в HSL
LAB в HSLA
LAB в CMYK
LAB в HSB/HSV
LAB в XYZ
Таблица цветов HTML
Для качественного и проработанного дизайна сайта, профессиональные веб-мастера постоянно должны подбирать подходящие цвета из палитры цветов в HTML. Коды цветов в html можно использовать в тегах, которые отвечают за: фоны, рамки блоков, изображений и таблиц, текст, ссылки и многое другое.
Таблица цветов HTML довольно часто применяется при работе с CSS, что значительно ускоряет и упрощает работу. Используя CSS, можно одной строчкой кода поменять цвет фона или текста на всем сайте, что очень помогает экономить время.
Задать коды цветов в html можно несколькими способами: указать в значении название цвета, использовать RGB код, использовать шестнадцатеричный код. Давайте рассмотрим каждый из способов подробнее:
- Название цветаПростейший способ задать цвет, если он один из самых популярных, таких как: чёрный(black), белый(white), красный(red), зеленый(green), синий(blue) и т.д. Если необходимо выбрать более специфический цвет, то лучше воспользоваться кодами цветов в html. Как правило, в тегах цвета указываются благодаря параметру color , значение которого и есть наш цвет, например: color =»red» > красный текст . Если использовать CSS, то картина немного другая: style =»color: название цвета» . (первая колонка в таблице цветов html)
- RGB код, цвета в десятичных числахВ данном способе используется RGB код, который состоит из десятичных чисел. Этот код состоит из трёх чисел (диапазон цифр каждого из чисел: 0-255), первое число задаёт насыщенность красного цвета R(red), второе число — задаёт насыщенность зеленого цвета G(green), третье – синего B(blue). Отсюда и название, RGB-код. Пример: color =»255 0 0″ > красный текст . (третья колонка в палитре цветов html)
- Шестнадцатеричный код цветаДанный способ очень похож на предыдущий, вот только в нём используются шестнадцатеричные числа. К тому же, перед кодом цветов обязательно следует ставить символ # . Сегодня этот способ самый популярный, он позволяет детально выбрать необходимый цвет, а также имеет компактный вид в html. Пример: color =»#FF0000″ > красный текст . (четвертая колонка в таблице цветов html)
Палитра цветов в HTML
Коды цветов в html применяются довольно часто, особенно если вы профессионально занимаетесь версткой сайта, поэтому рекомендуем данную таблицу добавить в свои закладки, понадобиться 100%.
