Содержание

Алгоритм генерирования цветовых палитр / Хабр

Ищете красивую цветовую палитру для сайта? Недавно установили дома RGB-подсветку, или хотите покрасить комнату в новые цвета? Или купили клавиатуру с цветной подсветкой и хотите использовать её по полной? В какой бы ситуации вы ни оказались, наверняка постоянно настраиваете цветовые схемы.

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

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

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

Начнём с теории. Сегодня для классификации цветов широко используются такие цветовые пространства:

sRGB

RGB означает Red Green Blue. Так работают дисплеи: они излучают свет в трёх цветовых каналах, которые смешиваются в разной пропорции для получения всевозможных цветов. Значение в каждом канале варьируется от 0 до 255. R:0, G:0, B:0 (или #000000 в шестнадцатеричном выражении) — это чёрный цвет, а R:255, G:255, B:255 (или #ffffff) — белый.

CIE Lab

Цветовое пространство CIE Lab шире sRGB и включает в себя все цвета, воспринимаемые человеком. Оно создавалось с расчётом на универсальность восприятия. Иными словами, расстояние между цветами соответствует субъективной разнице: если значения двух цветов близки друг к другу, то и выглядят они похоже. С другой стороны, два далеко расположенных друг от друга цвета также воспринимаются как совсем непохожие. В CIE Lab для насыщенных цветов выделено больше места, чем для тёмных и светлых. К слову, для человеческого глаза очень тёмный зелёный почти неотличим от чёрного. Кроме того, это цветовое пространство трёхмерное: L означает светлоту (от 0.0 до 1.0), a и b (примерно от -1.0 до 1.0) — цветовые каналы.

HCL

Если RGB описывает, как дисплей отображает цвета, а CIE Lab — как мы их воспринимаем, то HCL — это цветовое пространство, которое ближе всего описывает то, как мы думаем о цветах. Оно тоже трёхмерное, H означает цветовой тон (hue) (от 0 до 360 градусов), С — насыщенность (chroma) и L — яркость (luminance) (оба параметра измеряются от 0,0 до 1,0).

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

Разложение цветового пространства


Поскольку мне нужно было получить набор уникальных, индивидуальных цветов, сначала отбросим те, что выглядят очень похожими. Цветовое пространство будет трёхмерным, и для разделения таких низкоразмерных наборов данных прекрасно подходит алгоритм кластеризации методом k-средних. Он пытается разложить данные (в нашем случае — цветовое пространство) на k отдельных областей. И затем палитра собирается из центральных точек кластеров в этих областях. На гифке показано двумерное отображение работы алгоритма в трёхмерном пространстве CIE Lab.

Пишем код

С помощью реализованного на Go алгоритма метода k-средних задача решается всего в несколько строк кода. Сначала подготовим значения цветов в пространстве CIE Lab:

var d clusters.Observations
for l := 0.2; l <= 0.8; l += 0.05 {
    for a := -1.0; a < 1.0; a += 0.1 {
        for b := -1.0; b < 1.0; b += 0.1 {
            d = append(d, clusters.Coordinates{l, a, b})
        }
    }
}

Я уже подобрал пару параметров и ввёл определённые ограничения для генерируемых цветов. В этом примере мы выкинем цвета слишком тёмные (яркость <0,2) и слишком яркие (яркость >0,8).

Разложим только что созданное цветовое пространство:

km := kmeans.New()
clusters, _ := km.Partition(d, 8)

Функция Partition возвратит кусочки восьми кластеров. У каждого кластера есть точка Center, представляющая собой отдельный цвет в заданном пространстве. Её координаты легко можно преобразовать в шестнадцатеричное RGB-значение:

col := colorful.Lab(c.Center[0], c.Center[1], c.Center[2])
col.Clamped().Hex()

Помните, что CIE Lab шире RGB, и значит некоторые Lab-значения нельзя преобразовать в RGB. Такие значения можно с помощью Clamped преобразовать в наиболее близкие цвета RGB-пространства.

Полный код

package main
import (
    "github.com/muesli/kmeans"
    "github.com/muesli/clusters"
    colorful "github.com/lucasb-eyer/go-colorful"
)
func main() {
    // Create data points in the CIE L*a*b* color space
    // l for lightness, a & b for color channels
    var d clusters.
Observations for l := 0.2; l <= 0.8; l += 0.05 { for a := -1.0; a <= 1.0; a += 0.1 { for b := -1.0; b <= 1.0; b += 0.1 { d = append(d, clusters.Coordinates{l, a, b}) } } } // Partition the color space into 8 clusters km := kmeans.New() clusters, _ := km.Partition(d, 8) for _, c := range clusters { col := colorful.Lab(c.Center[0], c.Center[1], c.Center[2]) fmt.Println("Color as Hex:", col.Clamped().Hex()) } }

Набор из восьми (не очень) случайных цветов, сгенерированный этим кодом:

Определяем собственное цветовое пространство

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

func pastel(c colorful.Color) bool {
    _, s, v := col. Hsv()
    return 0.2 <= s && s <= 0.4 && 0.7 <= v && v <= 1.0
}
for l := 0.0; l <= 1.0; l += 0.05 {
    for a := -1.0; a <= 1.0; a += 0.1 {
        for b := -1.0; b <= 1.0; b += 0.1 {
            col := colorful.Lab(l, a, b)
            if col.IsValid() && pastel(col) {
                d = append(d, clusters.Coordinates{l, a, b})
            }
        }
    }
}

Ещё одно цветовое пространство — HSV, буквы в названии означают оттенок (hue), насыщенность (saturation) и яркость (value). В этом пространстве пастельные цвета обычно имеют высокие значения яркости и низкие значения насыщенности.

Вот что получилось:

Также вы можете фильтровать цвета по их насыщенности (chroma) и яркости, чтобы получить набор «тёплых» тонов:

func warm(col colorful.Color) bool {
        _, c, l := col.Hcl()
        return 0.1 <= c && c <= 0.4 && 0.2 <= l && l <= 0.
5 }

Результат:

Пакет gamut

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

Бесплатный онлайн конвертер RGB и HSL цветов палитры | SEO

Конвертер RGB и HSL цвета

Введите уровни красного, зеленого и синего цветов (0–255) и нажмите кнопку Преобразовать .:


Подробно о Конвертер RGB и HSL цвета

Конвертер цветов RGB в шестнадцатеричном формате — это бесплатный онлайн-инструмент цвета, который преобразует визуальные цвета RGB в цвет текста (шестнадцатеричный), который можно использовать при разработке красочных веб-страниц. Все веб-цвета в основном состоят из трех цветов, включая красный (R), зеленый (G) и синий (B), и, смешав все эти три цвета, вы можете создать тысячи оттенков цвета.

Как правило, существуют способы установить цвета в фонах, границах, шрифтах и ​​других компонентах.

Связанные инструменты:

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


Многие люди используют признанные ключевые слова цвета, в то время как другие люди используют более конкретную цветовую систему, такую ​​как HSL (оттенок, насыщенность, яркость). С другой стороны, сегодня мы будем говорить о двух наиболее распространенных соглашениях об идентификации цвета, цветовом коде RGB и шестнадцатеричных (шестнадцатеричных) ограничениях цвета. Вам нужно вручную установить значение трех цветов, и этот замечательный инструмент предоставит вам код цветов Hex, RGB и HSL, который вы можете использовать в своем веб-файле и файле CSS и сделать их в соответствии с вашим собственным мышлением.

Что такое шестнадцатеричный код, эквивалентный RGB?

В области проектирования, а также в графическом поле нам необходимо сочетание цветов.  Существует три цветовых сочетания, которые составили цвет rgb (красный, зеленый, синий), шестнадцатеричный (шестнадцатеричный) и hsl (яркость насыщенности оттенка). используется в HTML и других языках проектирования. Цветовой код высокой и низкой яркости запоминается, но их промежуточный цвет не изучается. Каждая комбинация используется в соответствии с требованиями. Наш небольшой SEO-инструмент предоставляет вам возможности, где вы выбираете цветовое требование, и он показывает вам код в соответствии с высокой низкой прокруткой красного, зеленого и синего цветов.

Как использовать конвертер цветов RGB в HEX:

Это просто. В разделе RGB есть 03 основных цвета: красный цвет (R), зеленый цвет (G) и синий цвет (B). При использовании необходимо изменить значения, перетащив выделенную секцию всех трех цветов. Предварительный просмотр своего окончательного цвета. В конце нажмите кнопку преобразования, и появятся три новых цветовых значения, включая шестнадцатеричный цветовой код, цветовой код RGB и цветовой код HSL, где вы можете скопировать желаемый код и вставить его в свое программное обеспечение для редактирования HTML или изображений. Так что держите в памяти этот инструмент для преобразования цвета RGB в цвет HEX на любое время, когда вы разрабатываете свои веб-страницы.

Таблица цветов RGB в Hex

Цвет Название (R, G, B) Код
Черный (0,0,0) # 000000
Белый (255 255 255) #FFFFFF
Красный (255,0,0) # FF0000
Лайм (0,255,0) # 00FF00
Синий (0,0,255) # 0000FF
Желтый (255,255,0) # FFFF00
Голубой (0,255,255) # 00FFFF
Пурпурный (255 0 255) # FF00FF
Серебро (192 192 192) # C0C0C0
Серый (128 128 128) # 808080
Бордовый (128,0,0) # 800000
Оливковый (128,128,0) # 808000
Зеленый (0,128,0) # 008000
Фиолетовый (128,0,128) # 800080
Бирюзовый (0,128,128) # 008080
Военно-морской (0,0,128) # 000080

Цветовая палитра | Руководство по брендингу и айдентике университета

Обзор

Бренд университета использует как основную, так и дополнительную цветовую палитру для печатного и цифрового контента. Существуют специальные альтернативные версии Carolina Blue только для цифрового контента. Вторичная цветовая палитра должна использоваться с осторожностью в качестве акцентов на основной палитре. Каролина Блю является основным цветом Университета и должна использоваться не менее 10% во всех дизайнах.

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

 

Основная палитра

Дополнительные рекомендации см. в разделе Альтернативные веб-цвета ниже.

Carolina Blue
PMS 542
CMYK 60, 19, 1, 4
HEX #4B9CD3
RGB 75, 156, 211
Цифровые ссылки #007FAE

нав. 90, 10, 77
Hex #13294B
RGB 19, 41, 75

Черный
PMS Черный 3
CMYK 74, 52, 71, 90
Hex #151519
2 RGB

White
CMYK 0, 0, 0, 0
HEX #FFFFFF
RGB 255, 255, 255

СЕРЫЙ
PMS BLAC
HEX #F8F8F8
RGB 248, 248, 248

Вторичная палитра

Купольная медь
PMS 8920 (металлик)
Цвет Infinity Pan или фольга ПРИМЕЧАНИЕ 62:
. Не предназначен для цифрового использования.

Бассейн Сланец
PMS 5405
CMYK 68, 35, 17, 40
HEX #4F758B
RGB 79, 117, 139

Campus Sandstone
PMS 2309 AT 50%
CMYK 3, 8, 11, 110019
PMS 2309 в 50%
CMYK 3, 8, 11, 110019
PMS 2309 в 50%
CMYK 3, 8, 11, 110019
PMS 2309 в 50%
CMYK 3, 8, 11, 110019
PMX 2309. F4E8DD
RGB 244, 232, 221

Longleaf Pine
PMS 561
CMYK 84, 20, 58, 54
HEX #00594C
RGB 0, 89, 76

Azalea Pink
PMS 191
CMYK 0, 79, 36, 0
HEX #EF426F
RGB 239, 68, 111

Tile Teal
PMS 7466
CMYK 97, 0, 30, 0
HEX #00A5AD
RGB 0, 165, 173

Sunburst Yellow
PMS 1099999

Sunburst 9 PMS 1099999

. 100019


,

. HEX #FFD100
RGB 255, 209, 0

Davie Green
PMS 382
CMYK 28, 0, 100, 0
HEX #C4D600
RGB 196, 214, 0

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

Предлагаемые ниже размеры шрифта основаны на Web Carolina Blue на белом фоне. Синий цвет гиперссылки следует использовать только на белом фоне. Используйте средство проверки цветового контраста WebAIM, чтобы проверить цветовой контраст выбранных вами цветовых комбинаций. Для получения дополнительной информации об использовании университетских цветов и специальных возможностей см. рекомендации и ресурсы на странице «Веб-сайты».

Web Carolina Blue
Hex #4B9CD3
RGB 75, 156, 211
ПРИМЕЧАНИЕ. Используйте размер шрифта более 24 пикселей (или 19 пикселей).px и жирным шрифтом).

Гиперссылка Синий
Hex #007FAE
RGB 0, 127, 174
ПРИМЕЧАНИЕ. Используйте только на белом фоне.

Указания по использованию

Do
  • Используйте не менее 10 % цвета Carolina Blue для всех дизайнов.
  • Обязательно используйте правильную разбивку цветов для конкретных целей.
  • Используйте цвета из основной цветовой палитры в качестве основных цветов в дизайне.
  • Используйте цвета из вторичной цветовой палитры только для акцентов.
  • Убедитесь, что цветовой контраст текста и фона соответствует рекомендациям WCAG 2.1 AA для веб-дизайна и цифрового дизайна.

Не использовать
  • Не используйте синий цвет Каролины в любом дизайне.
  • Глазное яблоко или угадать определенный цвет.
  • Использование цветов из вторичной цветовой палитры в качестве основных цветов.

Контактный телефон

Для получения дополнительной информации о цветовой палитре университета обращайтесь в отдел связи университета.

Цвет — Основы — Atlassian Design System

Используйте сфокусированные, осмысленные цвета, чтобы точно определить, что нужно видеть людям. Мы стремимся соблюдать стандартные коэффициенты контрастности AA Руководства по обеспечению доступности веб-контента.

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

Основная палитра

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

Мы используем синий (B400) для основных действий, кнопок, текстовых ссылок, для индикации прогресса и представления аутентификации. Нейтральный (N800) используется в основном для основного текста и заголовков, а белый (N0) используется для фона страницы.

Загрузите наши цветовые палитры.

Название

B400 — Pacific Bridge

HEX

#0052CC

RGB

0, 82, 204

Имя

N800 — Squid Ink

#172B4D

9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000

RGB

23, 43, 77

Название

N0 — Доктор

HEX

#ffffff

RGB

255, 255, 255

Вторая платка

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

Наша дополнительная палитра состоит из красного (R300), желтого (Y300), зеленого (G300), бирюзового (T300) и фиолетового (P300). Каждый цвет выбран намеренно, чтобы обеспечить значимую обратную связь в наших продуктах. Дополнительные сведения см. в приведенных ниже рекомендациях по семантическим цветам.

Название

R300 — Сюрприз мака

HEX

#FF5630

RGB

255, 86, 48

Имя

Y300 — Золотой Стэйт

HEX

#FFAB00

9000

RGB

255, 171, 0

NAME

G300 — Fine pine

HEX

#36B37E

RGB

54, 179, 126

NAME

T300 — Tamarama

HEX

#00B8D9

RGB

0, 184, 217

Имя

P300 — DA ‘JUCE

HEX

#6554C0

RGB

101, 84, 192

Extended Palett используемые оттенки и оттенки каждого цвета в палитре.

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

Нейтральные оттенки

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

Темные нейтральные

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

NAME

N900 — Slate

HEX

#091E42

RGB

9, 30, 66

NAME

N800 — Squid ink

HEX

#172B4D

RGB

23, 43, 77

NAME

N700 — Snorlax

HEX

#253858

RGB

37, 56, 88

NAME

N600 — Pet rock

HEX

#344563

RGB

52, 69 , 99

NAME

N500 — McFanning

HEX

#42526E

RGB

66, 82, 110

Средние нейтральные

диалоговые карты для создания нейтральных и средних

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

NAME

N400 — Concrete jungle

HEX

#505F79

RGB

80, 95, 121

NAME

N300 — Clooney

HEX

#5E6C84

RGB

94, 108, 132

NAME

N200 — Bling bling

HEX

#6B778C

RGB

107, 119, 140

NAME

N100 — Humboldt fog

HEX

#7A869A

RGB

122, 134, 154

NAME

N90 — Meredith

HEX

#8993A4

RGB

137, 147, 164

NAME

N80 — Spooky ghost

HEX

#97A0AF

RGB

151, 160, 175

NAME

N70 — Blanche

HEX

#A5ADBA

RGB

165, 173, 186

NAME

N60 — Sentinel

HEX

#B3BAC5

RGB

179, 186, 197

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

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

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

NAME

N50 — Karl

HEX

#C1C7D0

RGB

193, 199, 208

NAME

N40 — Jolly fun time

HEX

#DFE1E6

RGB

223, 225 , 230

NAME

N30 — Northeast snow

HEX

#EBECF0

RGB

235, 236, 240

NAME

N20 — Gram’s hair

HEX

#F4F5F7

RGB

244, 245, 247

NAME

N10 — Wash me

HEX

#FAFBFC

RGB

250, 251, 252

NAME

N0 — Doctor

HEX

#FFFFFF

RGB

255, 255, 255

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

Название

R500 — Dragon’s Blood

HEX

#BF2600

RGB

191, 38, 0

R400 — Red Dirt

92255555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555тели

9225555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555552нрой. , 11

Наименование

R300 — Сюрприз мака

HEX

#FF5630

RGB

255, 86, 48

R200 — SASHIMI

99000

544444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444н.0004 255, 116, 82

NAME

R100 — Alexandria

HEX

#FF8F73

RGB

255, 143, 115

NAME

R75 — Bondi sunburn

HEX

#FFBDAD

RGB

255, 189, 173

Название

R50 — Rosie

HEX

#FFEBE6

RGB

255, 235, 230

Желтый

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

NAME

Y500 — Debrito

HEX

#FF8B00

RGB

255, 139, 0

NAME

Y400 — Cheezy blasters

HEX

#FF991F

RGB

255, 153, 31

NAME

Y300 — Golden state

HEX

#FFAB00

RGB

255, 171, 0

NAME

Y200 — Pub mix

HEX

#FFC400

RGB

255, 196, 0

NAME

Y100 — Cowbell

HEX

#FFE380

RGB

255, 227, 128

NAME

Y75 — Dandelion whisper

HEX

#FFF0B3

RGB

255 , 240, 179

ИМЯ

Y50 — Джеймс блондин

HEX

#FFFAE6

RGB

255, 250, 230

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

NAME

G500 — Keen green

HEX

#006644

RGB

0, 102, 68

NAME

G400 — Slime

HEX

#00875A

RGB

0, 135, 90

NAME

G300 — Fine pine

HEX

#36B37E

RGB

54, 179, 126

NAME

G200 — Green tea

HEX

#57D9A3

RGB

87, 217, 163

NAME

G100 — Cloverleaf

HEX

#79F2C0

RGB

121, 242, 192

NAME

G75 — Mintie

HEX

#ABF5D1

RGB

171, 245, 209

НАЗВАНИЕ

G50 — Запах

HEX

#E3FCEF

RGB

227, 252, 239

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

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

NAME

B500 — Chore coat

HEX

#0747A6

RGB

7, 71, 166

NAME

B400 — Pacific bridge

HEX

#0052CC

RGB

0, 82 , 204

ИМЯ

B300 — Взрыв натрия

HEX

#0065FF

RGB

0, 101, 255

NAME

B200 — Coogee

HEX

#2684FF

RGB

38, 132, 255

NAME

B100 — Arvo breeze

HEX

#4C9AFF

RGB

76, 154, 255

NAME

B75 — Schwag

HEX

#B3D4FF

RGB

179, 212, 255

NAME

B50 — Pixie пыль

HEX

#DEEBFF

RGB

222, 235, 255

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

NAME

T500 — Shabby chic

HEX

#008DA6

RGB

0, 141, 166

NAME

T400 — Prom dress

HEX

#00A3BF

RGB

0, 163 , 191

ИМЯ

T300 — Тамарама

HEX

#00B8D9

RGB

0, 184, 217

NAME

T200 — Mermaid net

HEX

#00C7E6

RGB

0, 199, 230

NAME

T100 — Hairy Fairy

HEX

#79E2F2

RGB

121, 226, 242

Наименование

T75 — Arctic Chill

#B3F5FF

RGB

99559559559559559595595595595595595595595595595595595595595595595595595595595595595595595595595595595595959559595959595959595959595955. 9000 9000 9000 9000 40004

. — диван Грамма

HEX

#E6FCFF

RGB

230, 252, 255

Фиолетовый

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

НАЗВАНИЕ

P500 — Prince

HEX

#403294

RGB

64, 50, 148

NAME

P400 — Snozzberry

HEX

#5243AA

RGB

82, 67, 170

NAME

P300 — Da’ juice

HEX

# 6554C0

RGB

101, 84, 192

Название

P200 — Pastell #998dd9

RGB

153, 141, 217

Имя

P75 — Phantom Mist

HEX

#C0B6F2

RGB

192, 182, 242

.

#EAE6FF

RGB

234, 230, 255

Семантический цвет

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