Цвета хекс: HTML CSS Палитра цветов

Leave a Comment / Разное / By /

Содержание

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

http://www.webuchebnik.ru/samouchitel_html/font.php учебник по HTML!!!

Следующие атрибуты тега BODY помогут нам настроить отображение ссылок на нашей страничке:

link — цвет ссылки, на которую еще не нажимали.

vlink — цвет ссылки, на которую уже нажимали.

alink — цвет ссылки, когда нажимаем на неё.

http://persei100.narod.ru/RGB-color/color16.html

Таблица 16 основных цветов, которые используются во всех браузерах

Название

Цвет

Hex

(RGB)

  Aqua (морская волна)

 

  #00FFFF

(000,255,255)

  Black (черный)

 

  #000000

(000,000,000)

  Blue (голубой)

 

  #0000FF

(000,000,255)

  Fuchsia (фуксин)

 

  #FF00FF

(255,000,255)

  Gray (серый)

 

  #808080

(128,128,128)

  Green (зеленый)

 

  #008000

(000,128,000)

  Lime (ярко-зеленый)

 

  #00FF00

(000,255,000)

  Maroon (темно-бордовый)

 

  #800000

(128,000,000)

  Navy (темно-синий)

 

  #000080

(000,000,128)

  Olive (оливковый)

 

  #808000

(128,128,000)

  Purple (фиолетовый)

 

  #800080

(128,000,128)

  Red (красный)

 

  #FF0000

(255,000,000)

  Silver (серебряный)

 

  #C0C0C0

(192,192,192)

  Teal (серо-зеленый)

 

  #008080

(000,128,128)

  White (белый)

 

  #FFFFFF

(255,255,255)

  Yellow (желтый)

 

  #FFFF00

(255,255,000)

Названия цветов

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

Название цвета

HEX

Цвет

Black

#000000

 

Navy

#000080

 

DarkBlue

#00008B

 

MediumBlue

#0000CD

 

Blue

#0000FF

 

DarkGreen

#006400

 

Green

#008000

 

Teal

#008080

 

DarkCyan

#008B8B

 

DeepSkyBlue

#00BFFF

 

DarkTurquoise

#00CED1

 

MediumSpringGreen

#00FA9A

 

Lime

#00FF00

 

SpringGreen

#00FF7F

 

Aqua

#00FFFF

 

Cyan

#00FFFF

 

MidnightBlue

#191970

 

DodgerBlue

#1E90FF

 

LightSeaGreen

#20B2AA

 

ForestGreen

#228B22

 

SeaGreen

#2E8B57

 

DarkSlateGray

#2F4F4F

 

LimeGreen

#32CD32

 

MediumSeaGreen

#3CB371

 

Turquoise

#40E0D0

 

RoyalBlue

#4169E1

 

SteelBlue

#4682B4

 

DarkSlateBlue

#483D8B

 

MediumTurquoise

#48D1CC

 

Indigo

#4B0082

 

DarkOliveGreen

#556B2F

 

CadetBlue

#5F9EA0

 

CornflowerBlue

#6495ED

 

MediumAquaMarine

#66CDAA

 

DimGray

#696969

 

SlateBlue

#6A5ACD

 

OliveDrab

#6B8E23

 

SlateGray

#708090

 

LightSlateGray

#778899

 

MediumSlateBlue

#7B68EE

 

LawnGreen

#7CFC00

 

Chartreuse

#7FFF00

 

Aquamarine

#7FFFD4

 

Maroon

#800000

 

Purple

#800080

 

Olive

#808000

 

Gray

#808080

 

SkyBlue

#87CEEB

 

LightSkyBlue

#87CEFA

 

BlueViolet

#8A2BE2

 

DarkRed

#8B0000

 

DarkMagenta

#8B008B

 

SaddleBrown

#8B4513

 

DarkSeaGreen

#8FBC8F

 

LightGreen

#90EE90

 

MediumPurple

#9370D8

 

DarkViolet

#9400D3

 

PaleGreen

#98FB98

 

DarkOrchid

#9932CC

 

YellowGreen

#9ACD32

 

Sienna

#A0522D

 

Brown

#A52A2A

 

DarkGray

#A9A9A9

 

LightBlue

#ADD8E6

 

GreenYellow

#ADFF2F

 

PaleTurquoise

#AFEEEE

 

LightSteelBlue

#B0C4DE

 

PowderBlue

#B0E0E6

 

FireBrick

#B22222

 

DarkGoldenRod

#B8860B

 

MediumOrchid

#BA55D3

 

RosyBrown

#BC8F8F

 

DarkKhaki

#BDB76B

 

Silver

#C0C0C0

 

MediumVioletRed

#C71585

 

IndianRed

#CD5C5C

 

Peru

#CD853F

 

Chocolate

#D2691E

 

Tan

#D2B48C

 

LightGray

#D3D3D3

 

PaleVioletRed

#D87093

 

Thistle

#D8BFD8

 

Orchid

#DA70D6

 

GoldenRod

#DAA520

 

Crimson

#DC143C

 

Gainsboro

#DCDCDC

 

Plum

#DDA0DD

 

BurlyWood

#DEB887

 

LightCyan

#E0FFFF

 

Lavender

#E6E6FA

 

DarkSalmon

#E9967A

 

Violet

#EE82EE

 

PaleGoldenRod

#EEE8AA

 

LightCoral

#F08080

 

Khaki

#F0E68C

 

AliceBlue

#F0F8FF

 

HoneyDew

#F0FFF0

 

Azure

#F0FFFF

 

SandyBrown

#F4A460

 

Wheat

#F5DEB3

 

Beige

#F5F5DC

 

WhiteSmoke

#F5F5F5

 

MintCream

#F5FFFA

 

GhostWhite

#F8F8FF

 

Salmon

#FA8072

 

AntiqueWhite

#FAEBD7

 

Linen

#FAF0E6

 

LightGoldenRodYellow

#FAFAD2

 

OldLace

#FDF5E6

 

Red

#FF0000

 

Fuchsia

#FF00FF

 

Magenta

#FF00FF

 

DeepPink

#FF1493

 

OrangeRed

#FF4500

 

Tomato

#FF6347

 

HotPink

#FF69B4

 

Coral

#FF7F50

 

Darkorange

#FF8C00

 

LightSalmon

#FFA07A

 

Orange

#FFA500

 

LightPink

#FFB6C1

 

Pink

#FFC0CB

 

Gold

#FFD700

 

PeachPuff

#FFDAB9

 

NavajoWhite

#FFDEAD

 

Moccasin

#FFE4B5

 

Bisque

#FFE4C4

 

MistyRose

#FFE4E1

 

BlanchedAlmond

#FFEBCD

 

PapayaWhip

#FFEFD5

 

LavenderBlush

#FFF0F5

 

SeaShell

#FFF5EE

 

Cornsilk

#FFF8DC

 

LemonChiffon

#FFFACD

 

FloralWhite

#FFFAF0

 

Snow

#FFFAFA

 

Yellow

#FFFF00

 

LightYellow

#FFFFE0

 

Ivory

#FFFFF0

 

White

#FFFFFF

 

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

  • #

    17. 08.201989.6 Кб1Т.3. Размещение….doc

  • #

    17.08.2019233.47 Кб2Т.5. Инвестиции.doc

  • #

    17.08.2019135.17 Кб1Т.6. НТП.doc

  • #

    17.08.2019117.25 Кб1Т.7. Налоги.doc

  • #

    03.05.201517.88 Кб73Таблица детских размеров.docx

  • #

    03.05.2015215.55 Кб19Таблица цветов hex.doc

  • #

    03.05.2015765.52 Кб34тактика лова.docx

  • #

    23.09.201936.41 Кб1Тема 10. Тема 12.docx

  • #

    19.09.2019351.23 Кб1теория Basic.doc

  • #

    03.05.2015775.31 Кб224Теория вероятностей. Ответы..docx

  • #

    11.07.201934.02 Кб3Тепловые насосы.docx

Таблица ключевых слов и hex кодов цветов, используемых в Web программировании (CSS, HTML) ‹ Asterial Web.

IT блог

11 сентября, 2012, Категория: Сайтостроение

В HTML 4.0 было определено лишь 16 цветов (они представлены ниже в таблице Первоначальные цвета), но в более поздних версиях добавилось еще 130 цветов.

Цвета, представленные в шестнадцатеричном формате, поддерживаются всеми основными браузерами. Шестнадцатеричный код цвета имеет формат #RRGGBB, где RR — красный, GG — зеленый и BB— голубой.

Эти значения определяют компоненты цвета, они могут быть в диапазоне от 0 до FF. Если код цвета представляет собой повторяющиеся значения, то его можно записывать в кратком формате вида #RGB, например, черный цвет можно записать как #000000 и #000.

Также можно объявлять цвета по их названию — ключевому слову. В данной таблице представлены ключевые слова, поддерживаемые всеми браузерами. Следует обратить внимание, что некоторые цвета могут задаваться несколькими ключевыми словами, например, цвету #FF00FF соответствуют ключевые слова Fuchsia и Magenta, также серый цвет #808080 может записываться как Gray и как Grey.

 

Первоначальные цвета
Название цветаHEX код
Black#000000
Gray#808080
Silver#C0C0C0
White#FFFFFF
Fuchsia#FF00FF
Purple#800080
Red#FF0000
Maroon#800000
Yellow#FFFF00
Olive#808000
Lime#00FF00
Green#008000
Aqua#00FFFF
Teal#008080
Blue#0000FF
Navy#000080
Оттенки белого
Название цветаHEX код
White#FFFFFF
Snow#FFFAFA
Honeydew#F0FFF0
MintCream#F5FFFA
Azure#F0FFFF
AliceBlue#F0F8FF
GhostWhite#F8F8FF
WhiteSmoke#F5F5F5
Seashell#FFF5EE
Beige#F5F5DC
OldLace#FDF5E6
FloralWhite#FFFAF0
Ivory#FFFFF0
AntiqueWhite#FAEBD7
Linen#FAF0E6
LavenderBlush#FFF0F5
MistyRose#FFE4E1
Оттенки серого
Название цветаHEX код
Gainsboro#DCDCDC
LightGrey#D3D3D3
LightGray#D3D3D3
Silver#C0C0C0
DarkGray#A9A9A9
DarkGrey#A9A9A9
Gray#808080
Grey#808080
DimGray#696969
DimGrey#696969
LightSlateGray#778899
LightSlateGrey#778899
SlateGray#708090
SlateGrey#708090
DarkSlateGray#2F4F4F
DarkSlateGrey#2F4F4F
Black#000000

 

Оттенки красного
Название цветаHEX код
IndianRed#CD5C5C
LightCoral#F08080
Salmon#FA8072
DarkSalmon#E9967A
LightSalmon#FFA07A
Crimson#DC143C
Red#FF0000
FireBrick#B22222
DarkRed#8B0000
Оттенки оранжевого
Название цветаHEX код
LightSalmon#FFA07A
Coral#FF7F50
Tomato#FF6347
OrangeRed#FF4500
DarkOrange#FF8C00
Orange#FFA500
Оттенки коричневого
Название цветаHEX код
Cornsilk#FFF8DC
BlanchedAlmond#FFEBCD
Bisque#FFE4C4
NavajoWhite#FFDEAD
Wheat#F5DEB3
BurlyWood#DEB887
Tan#D2B48C
RosyBrown#BC8F8F
SandyBrown#F4A460
Goldenrod#DAA520
DarkGoldenRod#B8860B
Peru#CD853F
Chocolate#D2691E
SaddleBrown#8B4513
Sienna#A0522D
Brown#A52A2A
Maroon#800000

 

Оттенки желтого
Название цветаHEX код
Gold#FFD700
Yellow#FFFF00
LightYellow#FFFFE0
LemonChiffon#FFFACD
LightGoldenrodYellow#FAFAD2
PapayaWhip#FFEFD5
Moccasin#FFE4B5
PeachPuff#FFDAB9
PaleGoldenrod#EEE8AA
Khaki#F0E68C
DarkKhaki#BDB76B

 

Оттенки зеленого
Название цветаHEX код
GreenYellow#ADFF2F
Chartreuse#7FFF00
LawnGreen#7CFC00
Lime#00FF00
LimeGreen#32CD32
PaleGreen#98FB98
LightGreen#90EE90
MediumSpringGreen#00FA9A
SpringGreen#00FF7F
MediumSeaGreen#3CB371
SeaGreen#2E8B57
ForestGreen#228B22
Green#008000
DarkGreen#006400
YellowGreen#9ACD32
OliveDrab#6B8E23
Olive#808000
DarkOliveGreen#556B2F
MediumAquamarine#66CDAA
DarkSeaGreen#8FBC8F
LightSeaGreen#20B2AA
DarkCyan#008B8B
Teal#008080

 

Оттенки синего
Название цветаHEX код
Aqua#00FFFF
Cyan#00FFFF
LightCyan#E0FFFF
PaleTurquoise#AFEEEE
Aquamarine#7FFFD4
Turquoise#40E0D0
MediumTurquoise#48D1CC
DarkTurquoise#00CED1
CadetBlue#5F9EA0
SteelBlue#4682B4
LightSteelBlue#B0C4DE
PowderBlue#B0E0E6
LightBlue#ADD8E6
SkyBlue#87CEEB
LightSkyBlue#87CEFA
DeepSkyBlue#00BFFF
DodgerBlue#1E90FF
CornflowerBlue#6495ED
MediumSlateBlue#7B68EE
RoyalBlue#4169E1
Blue#0000FF
MediumBlue#0000CD
DarkBlue#00008B
Navy#000080
MidnightBlue#191970

 

Оттенки фиолетового
Название цветаHEX код
Lavender#E6E6FA
Thistle#D8BFD8
Plum#DDA0DD
Violet#EE82EE
Orchid#DA70D6
Fuchsia#FF00FF
Magenta#FF00FF
MediumOrchid#BA55D3
MediumPurple#9370DB
BlueViolet#8A2BE2
DarkViolet#9400D3
DarkOrchid#9932CC
DarkMagenta#8B008B
Purple#800080
Indigo#4B0082
SlateBlue#6A5ACD
DarkSlateBlue#483D8B

 

Оттенки розового
Название цветаHEX код
Pink#FFC0CB
LightPink#FFB6C1
HotPink#FF69B4
DeepPink#FF1493
MediumVioletRed#C71585
PaleVioletRed#DB7093

 

 

HEX-код — что это и как работает для обозначения цветов

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

На этапе создания макетов подсказки по выбору цветовой гаммы есть во многих редакторах, та же компания Adobe предлагает для своих продуктов основные виды гармоний:

  • колесо;
  • комплементарность;
  • контраст;
  • оттеночные «гибриды»
  • и многое другое.

Но при переносе цветов в веб-интерфейс потребуются специальные коды. Они есть у каждого оттенка, обозначаются шестизначным номером через знак «решетки». Например, код #000000 — это черный цвет.

Это и есть HEX-коды, комбинации определенных букв и цифр, которые «объясняют» виртуальному интерфейсу, какой именно оттенок нужно передать.

Что такое HEX-коды и как они формируются

HEX-коды подходят для определения практически любого тончайшего нюанса между цветами и переходами. Слово HEX происходит от hexadecimal — в переводе с английского языка «шестнадцатеричный».

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

  • Числа 10-15 обозначаются буквами латинского алфавита, используются A, B, C, В, E, F. Дальше «F» буквы не идут, а код #ffffff – это чистый белый цвет, один из самых широко используемых кодов наряду с «нулями», обозначающими черный.
  • Шестнадцатеричная система тесно связана с двоичной, которую используют компьютеры, мобильные телефоны и другая техника, предназначенная для отображения размещенной в интернете информации, поэтому при формировании данные обмениваются между собой.
  • Все цвета выстраиваются из основных — синий, зеленый, красный. Этот принцип хорошо известен дизайнерам, RGB-оттенки считаются «стандартом» в любых графических стандартах. На основe RGB по тем же принципам формируются и HEX-коды для веб-интерфейсов.

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

Освойте UX/UI веб-дизайн и зарабатывайте удаленно

Как шифруются HEX-коды

После значка «решетки» всего 6 символов. Они помогают попарно кодировать информацию для синего, зеленого и красного сигналов, используя такие принципы:

  • первые две цифры задают параметры для красного цвета;
  • вторая пара — для зеленого;
  • третья — для синего.

Если известны RGB-оттенки, то можно просто воспользоваться таблицей и «расшифровать» с использованием шестнадцатеричной системы. Например, белый цвет, который в RGB-системе передается как «255», для HEX-формулы станет «FF».

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

Можно посмотреть на базовые цвета в чистом виде, если задать характеристики:

  • #ff0000 — только красный цвет, все остальные оттенки «не участвуют», пиксель будет окрашен в соответствующий оттенок без примесей;
  • #00ff00 — аналогично для зеленого, получается «идеальный зеленый», который в чистом виде используется довольно редко;
  • #0000ff — так выглядит «синий без других оттенков».

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

Сокращение HEX-кодов

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

Например, если цвет обозначается как #FF22AA — это насыщенный ярко-розовый оттенок, то его можно «упростить» до #F2A.

Написание HEX-кодов не зависит от регистра, поэтому #f2a и #F2A — это одно и то же. Допустимо использовать вперемешку заглавные и строчные буквы.

Сокращенные формулы цветов широко используются при верстке сайтов с использованием языка программирования CSS.

Как узнать HEX-код цвета

Большинство графических редакторов передают цветовые значения и их коды в характеристиках и параметрах. Если брать такие широко используемые программные среды, как Photoshop, Illustrator, Gimp и многие другие, то они сами «подскажут» пользователю шестизначный код.

Если вы работаете в Adobe Photoshop, то посмотреть значение HEX не составит труда. Для этого нужно:

Инструмент «пипетка» в Photoshop

Открыть картинку, из которой собираетесь взять оттенок. Это может быть векторная картинка с «простыми» оттенками или растровое изображение, например, фотография. Выбрать инструмент «Пипетка» или Eyedropper в английской версии.

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

Размер образца для определения поля цвета

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

В открывшемся меню в самом низу, после «типографских» и других кодов, будет и HEX-код, узнать его можно по характерному символу решетки.

Определение кода цвета

Также можно поставить галочку «только веб-цвета» (Only Web Colors). Это служит для упрощения палитры.

Безопасные WEB-цвета

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

Названия оттенков и коды их цвета

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

Поэтому для корректного отображения рекомендуется использовать «безопасные» веб-цвета. Основные правила, относящиеся к построению HEX-коду «универсальных» оттенков:

  1. Нужно использовать десятичные цветовые значения: 0, 51, 102, 153, 204, 255, потому что они самые «простые» и корректно распознаются даже устаревшими системами и браузерами.
  2. В формулах 16-ричного типа используются такие параметры, как 00, 33, 66, 99, CC, FF.
  3. Эти цвета могут отображаться на компьютерах и других устройствах с 8-битным режимом, поэтому для верстки сайтов рекомендуются именно «безопасные» оттенки.

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

Освойте UX/UI веб-дизайн и зарабатывайте удаленно

Текстовые наименования

Среда программирования CSS предлагает пойти еще дальше и отказаться от кодов. Она умеет распознавать названия оттенков, поэтому достаточно будет просто прописать цвет в коде, чтобы CSS-язык «объяснил» браузеру, какой оттенок имелся в виду.

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

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

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

Полезные сайты для работы с HEX-цветами

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

Adobe Color

Располагается по адресу: https://color.adobe.com/ru

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

Умеет:

  1. Переводить цвета в HEX-коды и наоборот. Например, если есть RGB-оттенок, то его значения вводятся в нужном порядке, а на выходе получается нужный код для веб-программирования.
  2. Создавать гармонии для цветового решения. Это удобно, если у вас имеется один базовый оттенок, на основе которого надо продумать комплексное решение для сайта, приложения, брендбука и т.д. Гармонии будут предлагаться в нескольких стилях, от монохрома до комплиментарных и двойных комплиментарных схем.
  3. Можно сделать обратный перевод: из hex-цвета в RGB или типографский формат CMYK, что потребуется, если вы создаете продукцию для печати на базе цветового решения сайта.
  4. Готовые схемы и градиенты легко скачать в соответствующих разделах.

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

ColorScheme

Располагается по адресу: https://colorscheme.ru/

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

Среди возможностей:

  1. Поддержка и конвертация из любых форматов в HEX и из него в другие, включая расширенный RGB (RGBA), HSB, LAB.
  2. Сразу же отображается «безопасный» цвет в разделе Websafe, поэтому можно ориентироваться на него при создании цветовой схемы.
  3. Можно регулировать точность перевода, чтобы получить наиболее близкий оттенок.
  4. Предоставляются HTML-коды для вставки.

Также на сайте есть названия оттенков автомобилей — специфичная информация, но может кому-нибудь потребоваться, имена цветов для CSS, названия экзотических тонов, среди которых можно найти такие примечательные наименования, как «бабушкины яблоки» или «борода Абдель-Керима».

Color-HEX

Располагается по адресу: https://www.color-hex.com/

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

Возможности:

  1. Просчитывается соотношение зеленого-синего-красного в RGB-цвете относительно его HEX-кода, аналогично с циан-маджента-желтый-синий в типографском варианте.
  2. Показывается, как цвет будет смотреться на белом фоне, что поможет вебмастеру прикинуть внешний вид оттенка на стандартном ресурсе.
  3. Даются CSS-коды для большинства вариантов использования: фона, шрифта, рамки (border), тени.
  4. Предлагается несколько цветовых схем, основанных на выбранном HEX-коде, которыми можно воспользоваться для создания своей.

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

Htmlcolorcode

Располагается по адресу: https://htmlcolorcodes.com

Еще один англоязычный ресурс, предлагающий как основной сервис — преобразование цвета в HEX-код и обратно, так и много дополнительных приятных функций, среди которых:

  1. Возможность «потыкать» палитру и выбрать красивые цвета с дальнейшим экспортом в виде отдельного оттенка или цветовой схемы.
  2. На основе одного тона подбираются другие по принципу гармонии, поэтому достаточно выбрать один оттенок, чтобы автоматически «нашлись» другие.
  3. Есть названия цветов на английском языке, причем, тоже можно просто выбрать оттенок местным аналогом «пипетки», чтобы ресурс предложил имена.
  4. Есть библиотека цветов, в которой более сотни идей для вдохновения.

Ресурс выглядит как несколько урезанная версия аналогичного инструмента от Adobe, но работает хорошо, к тому же быстро загружается.

Освойте UX/UI веб-дизайн и зарабатывайте удаленно

ColorHexa

Располагается по адресу: https://www. colorhexa.com/

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

Но у него есть собственные возможности:

  1. Генератор градиентов. Это удобная возможность, когда нужно создать объемный рисунок, но трудно решить, какие цвета в какие должны перетекать и как это в результате будет смотреться. Инструмент поможет создать градиент, достаточно просто поместить начальные, промежуточные и конечные коды.
  2. Смешивание цветов. Нужно набрать код, добавить знак «+» и ввести второй или третий. Система посчитает результат и выдаст его в виде получившегося цвета и его кода.
  3. Вычитание цветов — работает аналогичным образом, только вместо плюса используется минус.

Также здесь есть 216 безопасных цветов и названия оттенков.

HexColorTool

Располагается по адресу: https://www.hexcolortool.com/

Главная особенность этого инструмента – не просто подбор тонов, а возможность отметить какой-либо один, а потом сделать его светлее или темнее.

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

Также можно оценить опции:

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

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

Заключение

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

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

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

Hex Color — The Code Side Of Color — Smashing Magazine

  • Чтение, 8 мин.
  • Цвета, Теория цвета, Essentials
  • Поделиться в Twitter, LinkedIn
Об авторе

Бен Гремиллион — писатель ZURB. Он начал свою карьеру в дизайне газет и журналов, увидел цифровое будущее и быстро выучил HTML. Он написал … Больше о Бен ↬

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

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

Описание зависит от личного вкуса и контекста других цветов. Мы называем их «индиго», «нефрит», «оливковый», «мандариновый», «алый» или «кабаре». Что такое «электрическая известь»? Названия и точные оттенки различаются — если только вы не компьютер.

Дополнительная литература на SmashingMag:

  • Теория цвета для дизайнеров: значение цвета
  • Простое руководство по цвету для веб-разработчика
  • Понимание концепций цвета и терминологии
  • Создание собственных цветовых палитр
  • 0
4 9 Перейти после! Продолжить чтение ниже ↓

Код требует точности

Когда компьютеры называют цвет, они используют так называемый шестнадцатеричный код , который большинство людей игнорирует: 24-битные цвета. То есть 16 777 216 уникальных комбинаций ровно шести символов, состоящих из десяти цифр и шести букв, которым предшествует решетка. Как и в любом компьютерном языке, здесь действует логическая система. Дизайнеры, которые понимают, как работают шестнадцатеричные цвета, могут обращаться с ними как с инструментами, а не как с тайнами.

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

Пиксели на экранах с подсветкой остаются темными до тех пор, пока не подсвечиваются комбинацией красного, зеленого и синего цветов. Шестнадцатеричные числа представляют эти комбинации кратким кодом. Этот код легко взломать. Чтобы понять #970515 , нам нужно взглянуть на его структуру:

Первый символ # объявляет, что это «шестнадцатеричное число». Остальные шесть на самом деле представляют собой три набора пар: 0–9 и a–f . Каждая пара управляет одним основным аддитивным цветом.


Чем выше число, тем ярче каждый основной цвет. В приведенном выше примере 97 подавляет красный цвет, 05 — зеленый цвет и 15 — синий цвет.

Каждая пара может содержать только два символа, но #999999 только среднего серого цвета. Чтобы получить цвета ярче, чем 99 , используя всего два символа, в каждом из шестнадцатеричных чисел используются буквы для представления 10–16 . А , Б , К , Д , E и F после 0–9 образуют четное 16 , мало чем отличающееся от карточных валетов, дам, королей и тузов.

Будучи математическими, удобными для компьютера кодами, шестнадцатеричные числа представляют собой строки, заполненные шаблонами . Например, поскольку 00 означает отсутствие основного цвета, а ff — основной в полном объеме, #000000 — черный (без основных цветов), а #ffffff — белый (все основные цвета). Мы можем опираться на них, чтобы найти аддитивные и субтрактивные цвета. Начиная с черного, измените каждую пару на ff :

  • #000000 черный, начальная точка.
  • #**ff**0000 обозначает самый яркий красный цвет.
  • #00**ff**00 обозначает самый яркий зеленый цвет.
  • #0000**ff** обозначает самый яркий синий цвет.

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

  • #ffffff — белый, начальная точка.
  • #**00**ffff означает самый яркий голубой.
  • #ff**00**ff — самый яркий пурпурный.
  • #ffff**00** обозначает самый яркий желтый цвет.

Сокращения в шестнадцатеричном формате

Шестнадцатеричные числа, которые используют только три символа, такие как #fae , подразумевают, что каждый разряд единиц должен соответствовать разряду шестнадцати. Таким образом, #fae расширяется до #ffaaee и 9.0044 #09b на самом деле означает #0099bb . Эти сокращенные коды обеспечивают краткость кода.

В большинстве случаев можно прочитать шестнадцатеричное число, игнорируя все остальные символы, потому что разница между шестнадцатыми разрядами говорит нам больше, чем разряд единиц. То есть трудно увидеть разницу между 41 и 42; легче измерить разницу между 41 и 51.

В приведенном выше примере достаточно различий между шестнадцатыми разрядами, чтобы было легко угадать цвет — много красного, немного синего, зеленого нет. Это дало бы нам теплый фиолетовый цвет. Десятки во втором примере (9, 9 и 8) очень похожи. Чтобы судить об этом цвете, нам нужно изучить те (7, 0 и 5). Чем ближе расположены шестнадцать разрядов шестнадцатеричного цвета, тем более нейтральным (то есть менее насыщенным) он будет.

Заставьте шестнадцатеричные числа работать на вас

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

Сохранить оттенки в характере

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

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

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

Бледные подчеркивания

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

  • Для темного текста на светлом фоне делаем ссылки ярче.
  • Для яркого текста на темном фоне делаем ссылки темнее.

Чтобы это работало, каждая встроенная ссылка должна иметь < span > внутри каждого :

a { text-decoration:underline;color:#aaaaff; }

интервал { text-decoration: none; color: # 0000ff; }

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

Добавление интервалов к каждому тегу привязки может быть проблематичным. Популярной альтернативой является удаление подчеркиваний и добавление border-bottom:

a { text-decoration: none; нижняя граница: 1px сплошная #aaaaff; }

Better Body Copy

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

h2, p { цвет: #797979; }

h2 { color: #797979; }

p { color: #393939; }

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

Как разогреть или охладить фон

На нейтральном фоне может быть легко читать, но «нейтральный» не обязательно означает «мягкий». Настройка первого и последнего байта может сделать фон слегка теплее или холоднее.