Акцентные цветовые палитры: 16 акцентов и подпись, которая нужна каждому
Шестнадцать акцентных палитр с точными hex-кодами, каждая проверена на главное, что должен уметь акцент: нести читаемую подпись на кнопке. Какие акценты берут белый текст, какие тёмный, а какие не подходят ни тот, ни другой.
Акцентный цвет - это единственный цвет в вашем интерфейсе, который означает «жми сюда». Он работает, только если слова на нём читаются, так что хороший акцент определяет подпись. Вот шестнадцать акцентов в четырёх тестах, со всеми hex-кодами и подписью, которую берёт каждый.
Что должен пережить акцент
Акцент оценивают по тому, что происходит, когда вы кладёте на него слово. Подпись должна читаться, а кнопка должна выделяться на странице позади неё.
Отсюда четыре теста. Берёт ли он белую или тёмную подпись, или оказывается посередине, где не работает ни то, ни другое? Выдержит ли он мелкий текст тега? Не слишком ли он бледный для кнопки, как Butterscotch Gold #F7C873?
Каждая палитра ниже состоит из чернил, акцента и поверхности, а последняя плитка показывает тест.
Какую подпись берёт акцент
Teal, Cobalt и Rose достаточно тёмные, чтобы белая подпись читалась через всю комнату. Amber #C88A16 нет.
Teal
Deep Sea
Teal
Chalk
Белый на Teal
Глубокий бирюзовый, который несёт белую подпись с большим запасом.
Cobalt
Navy Ink
Cobalt
Mist
Белый на Cobalt
Самый сильный из четырёх. Белый на Cobalt читается через всю комнату.
Rose
Plum Ink
Rose
Shell
Белый на Rose
Rose самый светлый из трёх акцентов с белой подписью, так что запаса у него меньше всего. Не осветляйте его дальше.
Amber
Bark
Amber
Oat
Bark на Amber
Amber самый честный. Белый на нём проваливается, и выход не в более тёмном янтарном: наберите подпись цветом Bark и оставьте цвет точно таким, какой он есть.
В этом вся работа акцента: он должен пережить слова, которые вы на него кладёте. Amber показывает, что чинить обычно нужно не цвет. Меняйте подпись, сохраняйте бренд.
Мёртвая зона средних тонов
Некоторые акценты сидят посередине шкалы светлоты: слишком светлые для белого текста, слишком тёмные для тёмного. Два из этих четырёх выбираются в противоположных направлениях, а два застряли.
French Winery
French Winery
Белый на French Winery: проходит
Midnight Express #1D2433 на French Winery: проваливается
Magnolia Petal
Достаточно тёмный, чтобы белый текст работал. French Winery покидает мёртвую зону, становясь темнее.
Wild Forest
Wild Forest
Белый на Wild Forest: проваливается
Nightwalker #2B1A35 на Wild Forest: проваливается
Vintage Porcelain
Свежий зелёный, который сидит ровно посередине. Белый на нём проваливается, и тёмный тоже. На тон темнее белый проходит, так что подкорректируйте зелёный, прежде чем рисовать хоть одну кнопку.
Glowing Lantern
Glowing Lantern
Белый на Glowing Lantern: проваливается
Aztec #153023 на Glowing Lantern: проходит
Silent Snowfall
Достаточно светлый, чтобы тёмный текст работал. Glowing Lantern покидает мёртвую зону в другую сторону, становясь светлее, так что его подпись это Aztec, никогда не белый.
Pink Orchid
Pink Orchid
Белый на Pink Orchid: проваливается
Royal Neptune #0F2E30 на Pink Orchid: проваливается
Snowflake
Розовый средний тон с той же проблемой, что у Wild Forest. На тон темнее белый проходит.
У крупного шрифта планка ниже, чем у мелкого, поэтому большой заголовок на этих цветах может выглядеть нормально, а подпись кнопки при этом проваливается. Проверяйте самый мелкий текст, который собираетесь класть на акцент. Если ваш фирменный акцент попал в середину, подкорректируйте его до того, как соберёте набор кнопок.
Кнопка - это не бейдж
Бейдж обычно делают так: акцент на 15% для фона и полный акцент для текста. Эта подкраска поднимает фон, поэтому текст на нём теряет контраст. Акцент может нести белую подпись кнопки и всё равно проваливаться внутри собственного бейджа. Третья плитка это акцент на 15% поверх поверхности.
Peacock Pride
Peacock Pride
Белая подпись кнопки: проходит
Peacock Pride на тинте #D5E1D2: проходит
Wood Bark #2A2320 на тинте: проходит
Глубокий сине-зелёный, который справляется с обеими задачами на Cosmic Latte #FBF7E6.
Furnace
Furnace
Белая подпись кнопки: проходит
Furnace на тинте #EAD9D1: проваливается
Elite Teal #13302A на тинте: проходит
Сильная красно-оранжевая кнопка, которая слабеет как тег. На White Glove #EEF4F0 наберите текст тега цветом чернил, и бейдж читается нормально.
Purple Heart
Purple Heart
Белая подпись кнопки: проходит
Purple Heart на тинте #E6D3DF: проходит
Black Velvet #1B2838 на тинте: проходит
Достаточно тёмный, чтобы тинт за ним, на Vanilla Blush #FDF1EC, ничего не менял.
French Blue
French Blue
Белая подпись кнопки: проходит
French Blue на тинте #D9E3E3: проваливается
Nightly Voyager #2A1630 на тинте: проходит
Та же история, что у Furnace: кнопка работает, а бейдж нет. На Powdered #FFF6E8 чернила спасают текст бейджа.
Если ваш акцент это средний тон, набирайте текст бейджей и тегов цветом чернил. Теги Furnace и бейджи French Blue становятся легко читаемыми, как только текст переключается на чернила.
Яркий цвет - не кнопка
Кнопка должна чётко выделяться на странице, на которой лежит. Бледный яркий акцент на кремовой странице этого не делает, хотя это самый красивый цвет в палитре.
Так что меняйте роли местами. Тёмный цвет становится кнопкой, а яркий становится тегом, бейджем и выбранным состоянием. Две из этих палитр так и делают, а в двух других акцент достаточно тёмный, чтобы по нему нажимать.
Butterscotch
Storm Graphite #434343 кнопка, Butter Canvas #FAEBCD подпись: проходит
Butterscotch Gold #F7C873 тег: проходит
Butterscotch Gold на странице: почти не виден
Butterscotch Gold выглядит прекрасно и исчезает как кнопка на Butter Canvas. Поменяйте роли: нажимать будут на Storm Graphite, а золотой станет тегом.
Ocean Breeze
Midnight Navy #0C2C55 кнопка, Vanilla Linen #EDEDCE подпись: проходит
Ocean Breeze #629FAD тег: проходит
Ocean Breeze на странице: почти не виден
Мягкий сине-бирюзовый на бледном льняном. То же решение: Midnight Navy это кнопка, Ocean Breeze это тег и выбранное состояние.
Silent Grove
Silent Grove #215E61 кнопка: проходит
Ссылка на Morning Paper #F5FBE6: проходит
Blue Monolith #233D4D
Этот умеет всё. Тёмный бирюзовый это и кнопка, и ссылка на Morning Paper, с белой подписью, которая легко читается.
Wild Berry
Wild Berry #CF4173 кнопка: проходит
Ссылка Wild Berry на Peach Cashmere #F6D8BD: проваливается
Ссылка Deep Berry Plum #5D3140: проходит
Wild Berry едва проходит как кнопка с белой подписью. Как текст на Peach Cashmere он не дотягивает, поэтому его ссылки набирают цветом Deep Berry Plum.
Ссылка это слова, так что она должна пройти планку для текста, а не только для кнопки. Когда акцент едва проходит как кнопка, набирайте ссылки цветом чернил.
Все шестнадцать акцентов в одной таблице
| Палитра | Акцент | Подпись, которая работает | На что обратить внимание |
|---|---|---|---|
| Teal | Teal #0E7C6B | Белая | Ни одна из четырёх задач |
| Cobalt | Cobalt #2F4BD6 | Белая | Ни одна из четырёх задач |
| Rose | Rose #C2445F | Белая | Меньше всего запаса из трёх, не осветлять |
| Amber | Amber #C88A16 | Bark #2C2415 | Белая проваливается |
| French Winery | French Winery #9A0A2C | Белая | Тёмный текст проваливается |
| Wild Forest | Wild Forest #009041 | Никакая, пока не станет на тон темнее | Обе подписи проваливаются |
| Glowing Lantern | Glowing Lantern #FFBB40 | Aztec #153023 | Белая проваливается |
| Pink Orchid | Pink Orchid #C157AD | Никакая, пока не станет на тон темнее | Обе подписи проваливаются |
| Peacock Pride | Peacock Pride #006262 | Белая | Ни одна из четырёх задач |
| Furnace | Furnace #D23D20 | Белая | Текст бейджа, используйте Elite Teal #13302A |
| Purple Heart | Purple Heart #652A97 | Белая | Ни одна из четырёх задач |
| French Blue | French Blue #0075C9 | Белая | Текст бейджа, используйте Nightly Voyager #2A1630 |
| Butterscotch | Butterscotch Gold #F7C873 | Тёмный текст, как тег | Слишком бледный для кнопки |
| Ocean Breeze | Ocean Breeze #629FAD | Тёмный текст, как тег | Слишком бледный для кнопки |
| Silent Grove | Silent Grove #215E61 | Белая | Ни одна из четырёх задач |
| Wild Berry | Wild Berry #CF4173 | Белая | Ссылки, используйте Deep Berry Plum #5D3140 |
Цифры, для того, кто защищает выбор
Каждая пара выше измерена по формуле контраста WCAG 2. Это единственная таблица в материале с коэффициентами.
| Палитра | Тест | Коэффициент | Результат |
|---|---|---|---|
| Teal | Белая подпись на акценте | 5.10:1 | Проходит |
| Cobalt | Белая подпись на акценте | 6.78:1 | Проходит |
| Rose | Белая подпись на акценте | 4.90:1 | Проходит |
| Amber | Белая подпись на акценте | 2.96:1 | Проваливается |
| French Winery | Белая подпись | 8.5:1 | Проходит |
| French Winery | Тёмная подпись | 1.8:1 | Проваливается |
| Wild Forest | Белая подпись | 4.1:1 | Проваливается |
| Wild Forest | Тёмная подпись | 3.8:1 | Проваливается |
| Wild Forest | Белая подпись, на тон темнее | 4.6:1 | Проходит |
| Glowing Lantern | Тёмная подпись | 8.4:1 | Проходит |
| Glowing Lantern | Белая подпись | 1.6:1 | Проваливается |
| Pink Orchid | Белая подпись | 4.0:1 | Проваливается |
| Pink Orchid | Тёмная подпись | 3.6:1 | Проваливается |
| Pink Orchid | Белая подпись, на тон темнее | 4.6:1 | Проходит |
| Peacock Pride | Подпись кнопки / текст бейджа | 7.1:1 / 5.3:1 | Проходят оба |
| Furnace | Подпись кнопки / текст бейджа / текст бейджа цветом чернил | 4.7:1 / 3.4:1 / 10.3:1 | Проходит, проваливается, проходит |
| Purple Heart | Подпись кнопки / текст бейджа | 9.0:1 / 6.3:1 | Проходят оба |
| French Blue | Подпись кнопки / текст бейджа / текст бейджа цветом чернил | 4.7:1 / 3.6:1 / 12.7:1 | Проходит, проваливается, проходит |
| Butterscotch | Золотой на странице / тёмный текст на золотом теге | 1.32:1 / 6.34:1 | Проваливается, проходит |
| Ocean Breeze | Акцент на странице / тёмный текст на теге акцента | 2.49:1 / 4.7:1 | Проваливается, проходит |
| Silent Grove | Белая подпись на акценте | 7.4:1 | Проходит |
| Wild Berry | Белая подпись на акценте | 4.51:1 | Едва проходит |
Как проверить свой акцент
- Сначала попробуйте белый. Если белый проходит на акценте, как на Cobalt #2F4BD6, подпись решена.
- Затем попробуйте самые тёмные чернила. Если белый проваливается, а чернила проходят, набирайте все подписи чернилами, как у Amber и Glowing Lantern.
- Если проваливаются оба, двигайте акцент. На тон темнее или светлее выводит из середины.
- Тестируйте тег отдельно. Сделайте 15% тинт и проверьте акцент как текст на нём. Если проваливается, набирайте теги чернилами.
- Проверьте кнопку на фоне страницы. Бледный акцент это тег, а не кнопка. Наши материалы про доступный цветовой контраст и ошибки с цветом в UI разбирают пороги.
Скачайте файлы для каждого набора
Каждый набор это бесплатный набор цветов на Forge, с кодами в один тап для копирования, файлами образцов для Figma и Adobe (ASE), CSS-переменными и дизайн-токенами.
Бесплатный набор цветов
Чернила, поверхность, одно, на что нажимать: Teal, Cobalt, Rose, Amber
Все hex-коды, плюс образцы ASE, CSS-переменные и дизайн-токены.
Бесплатный набор цветов
Мёртвая зона: French Winery, Wild Forest, Glowing Lantern, Pink Orchid
Все hex-коды, плюс образцы ASE, CSS-переменные и дизайн-токены.
Бесплатный набор цветов
Кнопка - это не бейдж: Peacock Pride, Furnace, Purple Heart, French Blue
Все hex-коды, плюс образцы ASE, CSS-переменные и дизайн-токены.
Бесплатный набор цветов
Яркий цвет - не кнопка: Butterscotch, Ocean Breeze, Silent Grove, Wild Berry
Все hex-коды, плюс образцы ASE, CSS-переменные и дизайн-токены.
FAQ
Какого цвета текст ставить на кнопку с акцентным цветом?
Белый, если акцент достаточно тёмный, тёмные чернила, если он светлый. Teal #0E7C6B берёт белый. Amber #C88A16 берёт Bark #2C2415. Если не работает ни то, ни другое, акцент в середине, и его нужно сдвинуть на тон.
Почему белый текст проваливается на некоторых цветных кнопках?
Потому что кнопка слишком светлая. Amber, Glowing Lantern #FFBB40 и Butterscotch Gold #F7C873 яркие, поэтому белый текст на них бледный. Средние тона вроде Wild Forest #009041 проваливаются и с белым, и с тёмным текстом.
Как выбрать акцентный цвет для UI-палитры?
Сначала выберите подпись. Решите, будет ли акцент нести белый или тёмный текст, затем выберите цвет, явно лежащий по одну сторону от середины. Проверьте его как кнопку, как текст бейджа и на фоне страницы.
Почему мой акцентный цвет хорошо смотрится как кнопка, но плохо как бейдж?
Бейдж ставит акцент текстом на светлый тинт самого себя, и это снижает контраст. Furnace #D23D20 и French Blue #0075C9 легко несут белую подпись кнопки и проваливаются как текст бейджа. Набирайте текст бейджа чернилами.
Может ли светлый акцентный цвет быть кнопкой?
Редко. Он должен выделяться на странице позади, а бледный акцент на кремовой странице почти не выделяется. Сделайте кнопкой тёмный цвет, а бледный акцент используйте как тег или выбранное состояние.
Источники
- Названия цветов и hex-коды взяты из наборов цветов UX Brainy на Forge, выпуски 02, 06, 07 и 11. Контраст рассчитан по формуле WCAG 2 относительно поверхности, на которой лежит каждый цвет.
- Пороги контраста для текста и для фигур соответствуют W3C WCAG 2.2: Contrast (Minimum) и Non-text Contrast.
- Hex тинта в каждой плитке бейджа это акцент на 15% поверх поверхности, выведенный из палитры.
- Впервые опубликовано как четыре карусели в UX Brainy: Ваш акцент решает, какого цвета должна быть подпись на нём, Мёртвая зона, Кнопка - это не бейдж и Яркий цвет - не кнопка.
Want an accent and a full UI palette built for your product and tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
