Преобразование цвета
CMYK profile: Coated FOGRA39 · Запись следует CSS Color 4 и правилам контраста WCAG 2.2.
Кратко
| Название | जामुनी |
|---|---|
| Транслитерация | jamuni |
| Традиция | Индийские традиционные цвета |
| Семейство | Фиолетовый |
| HEX | #6B3F8C |
| RGB | rgb(107,63,140) |
| HSL | hsl(274 38% 40%) |
| HSV | hsv(274, 55%, 55%) |
| OKLCH | oklch(0.455 0.128 308.6) |
| LAB | lab(35.15 34.29 -35.57) |
| XYZ | 13,9,26 |
| CMYK | cmyk(23.6% 55.0% 0.0% 45.1%) |
| RAL | #0E518D · Traffic blue · RAL 5017 |
| Примечание | Jamun purple · sari & textile dye |
Об этом цвете
Роскошь с секретом
जामुनी — это #6B3F8C, тон семейства Фиолетовый с ясным культурным происхождением. Сам по себе он читается как часть этого семейства; его корни (Индийские традиционные цвета) добавляют второй смысловой слой.
Совет дизайнеру
Сначала проверьте जामुनी (#6B3F8C) на нейтральной поверхности: акцент из семейства Фиолетовый сделает его осознанным, а не декоративным.
Лучшее применение
Отдайте जामुनी единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
Психология
Как воспринимается
Психологический эффект
जामुनी повышает воспринимаемую энергию композиции Фиолетовый и направляет взгляд к действию.
Эмоциональное воздействие
Он ощущается непосредственным и тёплым, поэтому оживляет сдержанную вёрстку, не делая её шумной.
Символика
Что означает
Культурное значение
В контексте, связанном с Индийские традиционные цвета, тон несёт местные отсылки, поэтому до кампании проверьте его символику.
Положительные ассоциации
Положительные ассоциации тяготеют к творчество, престиж и воображение; потому он и появляется на приглашениях и в сезонных работах.
Осторожно в применении
Слишком большая площадь читается как искусственность или элитарность при переборе, поэтому держите его в акцентах и малых полях.
Где встречается
Типичные задачи дизайна
- Лендинги кампаний
- Отдайте जामुनी единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
- Системы журнальных обложек
- Отдайте जामुनी единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
- Этикетки упаковки продуктов
- Отдайте जामुनी единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
- Акценты статусов на дашборде
- Отдайте जामुनी единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
- Навигационные вывески в рознице
- Отдайте जामुनी единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
Рекомендации
Как применять
Рекомендуется
- Держите насыщенные заливки в пределах примерно двадцати процентов макета.
- Используйте только для главного призыва к действию.
- Проверяйте сочетание в малом размере на нейтральном фоне.
Избегать
- Не ставьте рядом с кричащим неоновым зелёным или электрическим синим.
- Никогда не используйте для длинного основного текста на белом.
- Избегайте градиентов, уводящих тон в другое семейство.
Бренды, строящиеся на Маг, Творец, используют его, чтобы показать характер раньше слов.
Фиолетовому всегда требовался редкий краситель или аккуратное смешение, и эта цена до сих пор формирует его репутацию. Он уравновешивает церемонию, воображение и лёгкий налёт тайны.
Сочетание
Цвета, которые его дополняют
История
Пигменты и происхождение
До синтетических красителей जामुनी составляли из минеральных и растительных пигментов; семейство Фиолетовый зависело от охры, марены и индиго. Экраны сегодня воспроизводят его стабильнее любого отдельного пигмента.
Теги
Происхождение и источники
Этимология: 「जामुनी」是印地语「紫/紫红」,词根与「जामुन」(蒲桃果)同源。
Транслитерация: jāmunī
Вариации
Тёмные ступени затемняют, светлые осветляют, а угол тона остаётся прежним.
Тёмные ступени
Более тёмные ступени в том же тоне.
Светлые ступени
Более светлые ступени для поверхностей и фона.
Шкала дизайна 50–950
#9669BA · 4.51:1Сценарии
- Тёмные ступени → ховер, тени, глубина
- Светлые ступени → светлые акценты, поверхности
- Баланс → целостные цветовые системы
Совет по дизайну
Достаточно одного ведущего тона, одного поддерживающего и одного акцента.
Сравнение цветовых систем
Ближайший именованный цвет в каждой традиции и дизайн-системе по OKLCH ΔE. Чем меньше значение, тем ближе.
Азиатские традиции
Дизайн-системы
Показать все (11)
RAL Classic
Место в библиотеке цветов
Эти числа получены ранжированием всех 116 традиционных цветов сайта на этапе сборки, а не написаны вручную.
- Светлота L* 35.2 — 98-е место из 116 (тёмная треть).
- Насыщенность C 49.401 — 49-е место (средняя насыщенность).
- Оттенок 274°, семейство фиолетовое семейство.
- Ближайший сосед в том же семействе оттенков: «नील», ΔE OK 0.033.
Могут ли три ступени одного оттенка работать вместе
Три ступени из шкалы 50–950 цвета «जामुनी»: оттенок тот же, различается только светлота. Ниже — контраст WCAG, когда одна ступень служит текстом на другой.
- 200 ↔ 500: 2.48:1 (FAIL)
- 500 ↔ 800: 2.72:1 (FAIL)
- 200 ↔ 800: 6.76:1 (AA)
Пар с 4,5:1 (основной текст AA): 1 из 3. Пар с 3:1 (крупный текст, иконки, рамки): 1 из 3. Остальные ниже 3:1 — текст на них лучше не размещать.
Цветовые сочетания
Вращайте цветовой круг, сохраняя светлоту.
Как использовать
Три шага сохраняют читаемость и осознанность цвета.
Почему работает
Перцептивное обоснование палитры.
Все шесть наборов построены поворотом оттенка при близкой светлоте, поэтому лучший контраст внутри набора лежит в диапазоне 1.01:1–1.99:1. Используйте их для плашек, графиков и фигур, а не как текст друг на друге; для текста берите нейтральный цвет или более тёмную ступень той же шкалы.
Комплементарная
Напротив в цветовом круге; контраст обостряет фокусный цвет.
Лучшее применение: Призывы к действию и акценты одной функции
Раздельно-комплементарная
Два соседа противоположного тона; мягче прямого контраста.
Лучшее применение: Сбалансированные маркетинговые макеты с двумя акцентами
Триада
Три равноудалённых тона; живо, но нужен один ведущий голос.
Лучшее применение: Айдентика событий и игривые журнальные развороты
Аналоговая
Соседние тоны круга; спокойно, цельно и легко читается взглядом.
Лучшее применение: Фоны, графики и спокойные страницы продукта
Монохромная
Один тон по ступеням светлоты; дисциплинированно и премиально.
Лучшее применение: Дизайн-системы, упаковка и типографическая иерархия
Тетрада
Две комплементарные пары; богато, но требует строгих пропорций.
Лучшее применение: Сложные дашборды и бренды с несколькими сервисами
Экспорт шкалы
CSS
:root {
--brand-50: #FCEFFF;
--brand-100: #F8E3FF;
--brand-200: #E9CBFF;
--brand-300: #D6B0F7;
--brand-400: #BF94E3;
--brand-500: #A174C5;
--brand-600: #885DAA;
--brand-700: #6F488D;
--brand-800: #563570;
--brand-900: #3E2452;
--brand-950: #291737;
}
Tailwind
theme: {
extend: {
colors: {
brand: {
50: '#FCEFFF',
100: '#F8E3FF',
200: '#E9CBFF',
300: '#D6B0F7',
400: '#BF94E3',
500: '#A174C5',
600: '#885DAA',
700: '#6F488D',
800: '#563570',
900: '#3E2452',
950: '#291737',
},
},
},
}
Figma
{
"brand": {
"50": {
"$type": "color",
"$value": "#FCEFFF"
},
"100": {
"$type": "color",
"$value": "#F8E3FF"
},
"200": {
"$type": "color",
"$value": "#E9CBFF"
},
"300": {
"$type": "color",
"$value": "#D6B0F7"
},
"400": {
"$type": "color",
"$value": "#BF94E3"
},
"500": {
"$type": "color",
"$value": "#A174C5"
},
"600": {
"$type": "color",
"$value": "#885DAA"
},
"700": {
"$type": "color",
"$value": "#6F488D"
},
"800": {
"$type": "color",
"$value": "#563570"
},
"900": {
"$type": "color",
"$value": "#3E2452"
},
"950": {
"$type": "color",
"$value": "#291737"
}
}
}
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120"> <rect x="0" y="0" width="100" height="90" fill="#FCEFFF"/> <rect x="100" y="0" width="100" height="90" fill="#F8E3FF"/> <rect x="200" y="0" width="100" height="90" fill="#E9CBFF"/> <rect x="300" y="0" width="100" height="90" fill="#D6B0F7"/> <rect x="400" y="0" width="100" height="90" fill="#BF94E3"/> <rect x="500" y="0" width="100" height="90" fill="#A174C5"/> <rect x="600" y="0" width="100" height="90" fill="#885DAA"/> <rect x="700" y="0" width="100" height="90" fill="#6F488D"/> <rect x="800" y="0" width="100" height="90" fill="#563570"/> <rect x="900" y="0" width="100" height="90" fill="#3E2452"/> <rect x="1000" y="0" width="100" height="90" fill="#291737"/> <text x="50" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">50</text> <text x="150" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">100</text> <text x="250" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">200</text> <text x="350" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">300</text> <text x="450" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">400</text> <text x="550" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">500</text> <text x="650" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">600</text> <text x="750" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">700</text> <text x="850" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">800</text> <text x="950" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">900</text> <text x="1050" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">950</text> </svg>
iOS
extension UIColor {
static let brand50 = UIColor(red: 0.988, green: 0.937, blue: 1.000, alpha: 1.0)
static let brand100 = UIColor(red: 0.973, green: 0.890, blue: 1.000, alpha: 1.0)
static let brand200 = UIColor(red: 0.914, green: 0.796, blue: 1.000, alpha: 1.0)
static let brand300 = UIColor(red: 0.839, green: 0.690, blue: 0.969, alpha: 1.0)
static let brand400 = UIColor(red: 0.749, green: 0.580, blue: 0.890, alpha: 1.0)
static let brand500 = UIColor(red: 0.631, green: 0.455, blue: 0.773, alpha: 1.0)
static let brand600 = UIColor(red: 0.533, green: 0.365, blue: 0.667, alpha: 1.0)
static let brand700 = UIColor(red: 0.435, green: 0.282, blue: 0.553, alpha: 1.0)
static let brand800 = UIColor(red: 0.337, green: 0.208, blue: 0.439, alpha: 1.0)
static let brand900 = UIColor(red: 0.243, green: 0.141, blue: 0.322, alpha: 1.0)
static let brand950 = UIColor(red: 0.161, green: 0.090, blue: 0.216, alpha: 1.0)
}
Android
<resources> <color name="brand_50">#FCEFFF</color> <color name="brand_100">#F8E3FF</color> <color name="brand_200">#E9CBFF</color> <color name="brand_300">#D6B0F7</color> <color name="brand_400">#BF94E3</color> <color name="brand_500">#A174C5</color> <color name="brand_600">#885DAA</color> <color name="brand_700">#6F488D</color> <color name="brand_800">#563570</color> <color name="brand_900">#3E2452</color> <color name="brand_950">#291737</color> </resources>
Принципы
Баланс
Достаточно одного ведущего тона, одного поддерживающего и одного акцента.
Контраст
До релиза проверьте основной текст на белом и на чёрном.
Гармония
Вращайте цветовой круг, сохраняя светлоту.
Проверка контраста
До релиза проверьте основной текст на белом и на чёрном.
Отдайте जामुनी единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
Стандарты контраста WCAG
WCAG 2.2 задаёт минимальный контраст для текста и элементов интерфейса. #6B3F8C даёт 7.74:1 к белому (AAA) и 2.44:1 к чёрному (FAIL). Выберите порог по таблице ниже в зависимости от размера текста.
| Уровень | Обычный текст | Крупный текст (18pt+ / 14pt жирный) | Иконки и элементы UI |
|---|---|---|---|
| AAA | 7 : 1 | 4.5 : 1 | — |
| AA | 4.5 : 1 | 3 : 1 | 3 : 1 |
| Не пройдено | < 4.5 : 1 | < 3 : 1 | < 3 : 1 |
Крупный текст — 18pt обычный или 14pt жирный. Элементам UI нужен контраст 3:1 с соседними цветами. AA — обычная база, AAA — усиленный уровень.
Технические форматы
Запись в цветовых пространствах
CSS Color 4
sRGB / D65
HSL
perceptual
CIE Lab
CIE LCH
CIE XYZ
CIE LUV
CSS HWB
Практические форматы
Готовые значения
custom properties
arbitrary value
ARGB
dart:ui
RGB / CMYK
FOGRA39
Анализ цвета
Измеренные свойства цвета
relative luminance · neutral
vs white · AAA · neutral
vs black · FAIL · neutral
saturation 38% · neutral
lightness 40% · neutral
नील #2C4C8C · neutral
Похожие цвета
Ближайшие цвета из всей библиотеки Irodori, по ΔE.
Симулятор дальтонизма
Как выглядит при нарушении цветового зрения
Как выглядит при нарушении цветового зрения · ΔE 24.1
Творческие аспекты
Культура, настроение и история
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.