Преобразование цвета
CMYK profile: Coated FOGRA39 · Запись следует CSS Color 4 и правилам контраста WCAG 2.2.
Кратко
| Название | Бледный Янтарный |
|---|---|
| Транслитерация | Бледный Янтарный |
| Традиция | цифровой цвет |
| Семейство | Жёлтый |
| HEX | #DFD3AD |
| RGB | rgb(223,211,173) |
| HSL | hsl(46 44% 78%) |
| HSV | hsv(46, 22%, 87%) |
| OKLCH | oklch(0.867 0.052 92.6) |
| LAB | lab(84.64 -1.85 20.35) |
| XYZ | 61,65,49 |
| CMYK | cmyk(0.0% 5.4% 22.4% 12.5%) |
| RAL | #E6D2B5 · Light ivory · RAL 1015 |
Об этом цвете
Оптимизм под прожектором
Бледный Янтарный — это #DFD3AD, тон семейства Жёлтый с ясным культурным происхождением. Сам по себе он читается как часть этого семейства; его корни (цифровой цвет) добавляют второй смысловой слой.
Совет дизайнеру
Сначала проверьте Бледный Янтарный (#DFD3AD) на нейтральной поверхности: акцент из семейства Жёлтый сделает его осознанным, а не декоративным.
Лучшее применение
Отдайте Бледный Янтарный единственному элементу, который должен бросаться в глаза первым, а остальную палитру Жёлтый оставьте ему в поддержку.
Психология
Как воспринимается
Психологический эффект
Бледный Янтарный повышает воспринимаемую энергию композиции Жёлтый и направляет взгляд к действию.
Эмоциональное воздействие
Он ощущается непосредственным и тёплым, поэтому оживляет сдержанную вёрстку, не делая её шумной.
Символика
Что означает
Культурное значение
В контексте, связанном с цифровой цвет, тон несёт местные отсылки, поэтому до кампании проверьте его символику.
Положительные ассоциации
Положительные ассоциации тяготеют к надежда, ясность и игривая уверенность; потому он и появляется на приглашениях и в сезонных работах.
Осторожно в применении
Слишком большая площадь читается как тревога или опасность при чрезмерной громкости, поэтому держите его в акцентах и малых полях.
Где встречается
Типичные задачи дизайна
- Лендинги кампаний
- Отдайте Бледный Янтарный единственному элементу, который должен бросаться в глаза первым, а остальную палитру Жёлтый оставьте ему в поддержку.
- Системы журнальных обложек
- Отдайте Бледный Янтарный единственному элементу, который должен бросаться в глаза первым, а остальную палитру Жёлтый оставьте ему в поддержку.
- Этикетки упаковки продуктов
- Отдайте Бледный Янтарный единственному элементу, который должен бросаться в глаза первым, а остальную палитру Жёлтый оставьте ему в поддержку.
- Акценты статусов на дашборде
- Отдайте Бледный Янтарный единственному элементу, который должен бросаться в глаза первым, а остальную палитру Жёлтый оставьте ему в поддержку.
- Навигационные вывески в рознице
- Отдайте Бледный Янтарный единственному элементу, который должен бросаться в глаза первым, а остальную палитру Жёлтый оставьте ему в поддержку.
Рекомендации
Как применять
Рекомендуется
- Держите насыщенные заливки в пределах примерно двадцати процентов макета.
- Используйте только для главного призыва к действию.
- Проверяйте сочетание в малом размере на нейтральном фоне.
Избегать
- Не ставьте рядом с кричащим неоновым зелёным или электрическим синим.
- Никогда не используйте для длинного основного текста на белом.
- Избегайте градиентов, уводящих тон в другое семейство.
Бренды, строящиеся на Невинный, Искатель, используют его, чтобы показать характер раньше слов.
Жёлтый — самый яркий тон, который различает глаз, поэтому он притягивает внимание раньше, чем читается форма. Бледные версии солнечные, насыщенные ведут себя как предупреждающий знак.
Сочетание
Цвета, которые его дополняют
История
Пигменты и происхождение
До синтетических красителей Бледный Янтарный составляли из минеральных и растительных пигментов; семейство Жёлтый зависело от охры, марены и индиго. Экраны сегодня воспроизводят его стабильнее любого отдельного пигмента.
Теги
Вариации
Тёмные ступени затемняют, светлые осветляют, а угол тона остаётся прежним.
Тёмные ступени
Более тёмные ступени в том же тоне.
Светлые ступени
Более светлые ступени для поверхностей и фона.
Шкала дизайна 50–950
#887D5A · 4.60:1Сценарии
- Тёмные ступени → ховер, тени, глубина
- Светлые ступени → светлые акценты, поверхности
- Баланс → целостные цветовые системы
Совет по дизайну
Достаточно одного ведущего тона, одного поддерживающего и одного акцента.
Сравнение цветовых систем
Ближайший именованный цвет в каждой традиции и дизайн-системе по OKLCH ΔE. Чем меньше значение, тем ближе.
Азиатские традиции
Дизайн-системы
Показать все (11)
RAL Classic
Цветовые сочетания
Вращайте цветовой круг, сохраняя светлоту.
Как использовать
Три шага сохраняют читаемость и осознанность цвета.
Почему работает
Перцептивное обоснование палитры.
Комплементарная
Напротив в цветовом круге; контраст обостряет фокусный цвет.
Лучшее применение: Призывы к действию и акценты одной функции
Раздельно-комплементарная
Два соседа противоположного тона; мягче прямого контраста.
Лучшее применение: Сбалансированные маркетинговые макеты с двумя акцентами
Триада
Три равноудалённых тона; живо, но нужен один ведущий голос.
Лучшее применение: Айдентика событий и игривые журнальные развороты
Аналоговая
Соседние тоны круга; спокойно, цельно и легко читается взглядом.
Лучшее применение: Фоны, графики и спокойные страницы продукта
Монохромная
Один тон по ступеням светлоты; дисциплинированно и премиально.
Лучшее применение: Дизайн-системы, упаковка и типографическая иерархия
Экспорт шкалы
CSS
:root {
--brand-50: #F9F5EB;
--brand-100: #F2EDDC;
--brand-200: #E1D9C0;
--brand-300: #CCC2A3;
--brand-400: #B4A987;
--brand-500: #968A67;
--brand-600: #7D7351;
--brand-700: #655C3D;
--brand-800: #4E462C;
--brand-900: #38311D;
--brand-950: #252012;
}
Tailwind
theme: {
extend: {
colors: {
brand: {
50: '#F9F5EB',
100: '#F2EDDC',
200: '#E1D9C0',
300: '#CCC2A3',
400: '#B4A987',
500: '#968A67',
600: '#7D7351',
700: '#655C3D',
800: '#4E462C',
900: '#38311D',
950: '#252012',
},
},
},
}
Figma
{
"brand": {
"50": {
"$type": "color",
"$value": "#F9F5EB"
},
"100": {
"$type": "color",
"$value": "#F2EDDC"
},
"200": {
"$type": "color",
"$value": "#E1D9C0"
},
"300": {
"$type": "color",
"$value": "#CCC2A3"
},
"400": {
"$type": "color",
"$value": "#B4A987"
},
"500": {
"$type": "color",
"$value": "#968A67"
},
"600": {
"$type": "color",
"$value": "#7D7351"
},
"700": {
"$type": "color",
"$value": "#655C3D"
},
"800": {
"$type": "color",
"$value": "#4E462C"
},
"900": {
"$type": "color",
"$value": "#38311D"
},
"950": {
"$type": "color",
"$value": "#252012"
}
}
}
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120"> <rect x="0" y="0" width="100" height="90" fill="#F9F5EB"/> <rect x="100" y="0" width="100" height="90" fill="#F2EDDC"/> <rect x="200" y="0" width="100" height="90" fill="#E1D9C0"/> <rect x="300" y="0" width="100" height="90" fill="#CCC2A3"/> <rect x="400" y="0" width="100" height="90" fill="#B4A987"/> <rect x="500" y="0" width="100" height="90" fill="#968A67"/> <rect x="600" y="0" width="100" height="90" fill="#7D7351"/> <rect x="700" y="0" width="100" height="90" fill="#655C3D"/> <rect x="800" y="0" width="100" height="90" fill="#4E462C"/> <rect x="900" y="0" width="100" height="90" fill="#38311D"/> <rect x="1000" y="0" width="100" height="90" fill="#252012"/> <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.976, green: 0.961, blue: 0.922, alpha: 1.0)
static let brand100 = UIColor(red: 0.949, green: 0.929, blue: 0.863, alpha: 1.0)
static let brand200 = UIColor(red: 0.882, green: 0.851, blue: 0.753, alpha: 1.0)
static let brand300 = UIColor(red: 0.800, green: 0.761, blue: 0.639, alpha: 1.0)
static let brand400 = UIColor(red: 0.706, green: 0.663, blue: 0.529, alpha: 1.0)
static let brand500 = UIColor(red: 0.588, green: 0.541, blue: 0.404, alpha: 1.0)
static let brand600 = UIColor(red: 0.490, green: 0.451, blue: 0.318, alpha: 1.0)
static let brand700 = UIColor(red: 0.396, green: 0.361, blue: 0.239, alpha: 1.0)
static let brand800 = UIColor(red: 0.306, green: 0.275, blue: 0.173, alpha: 1.0)
static let brand900 = UIColor(red: 0.220, green: 0.192, blue: 0.114, alpha: 1.0)
static let brand950 = UIColor(red: 0.145, green: 0.125, blue: 0.071, alpha: 1.0)
}
Android
<resources> <color name="brand_50">#F9F5EB</color> <color name="brand_100">#F2EDDC</color> <color name="brand_200">#E1D9C0</color> <color name="brand_300">#CCC2A3</color> <color name="brand_400">#B4A987</color> <color name="brand_500">#968A67</color> <color name="brand_600">#7D7351</color> <color name="brand_700">#655C3D</color> <color name="brand_800">#4E462C</color> <color name="brand_900">#38311D</color> <color name="brand_950">#252012</color> </resources>
Принципы
Баланс
Достаточно одного ведущего тона, одного поддерживающего и одного акцента.
Контраст
До релиза проверьте основной текст на белом и на чёрном.
Гармония
Вращайте цветовой круг, сохраняя светлоту.
Проверка контраста
До релиза проверьте основной текст на белом и на чёрном.
Отдайте Бледный Янтарный единственному элементу, который должен бросаться в глаза первым, а остальную палитру Жёлтый оставьте ему в поддержку.
Стандарты контраста WCAG
WCAG 2.2 задаёт минимальный контраст для текста и элементов интерфейса. #DFD3AD даёт 1.49:1 к белому (FAIL) и 12.64:1 к чёрному (AAA). Выберите порог по таблице ниже в зависимости от размера текста.
| Уровень | Обычный текст | Крупный текст (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 · warm
vs white · FAIL · warm
vs black · AAA · warm
saturation 44% · warm
lightness 78% · warm
凝脂 #EFE3DB · warm
Похожие цвета
Ближайшие цвета из всей библиотеки Irodori, по ΔE.
Симулятор дальтонизма
Как выглядит при нарушении цветового зрения
Как выглядит при нарушении цветового зрения · ΔE 16.9
Творческие аспекты
Культура, настроение и история
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.
Чаще всего его читают как энергию, тепло, уверенность и лёгкий оттенок церемонности.