UI-палитры: что каждый цвет умеет и чего не умеет
Двенадцать UI-палитр с точными hex-кодами, проверенных роль за ролью. Какие акценты годятся и в кнопку, и в ссылку, какой серый текст проваливается на тонированной карточке и почему бледный акцент заливает, но никогда не пишет.
UI-палитра это не набор красивых цветов. Это набор ролей, и каждый цвет справляется с одними задачами и не справляется с другими. Вот двенадцать палитр, каждая проверена на одной роли, где обычно все ломается, и с каждым hex-кодом.
Три роли в UI-палитре
Чернила пишут. Это цвет каждой строки текста, так что они должны быть достаточно темными на поверхности, как Ink Navy #141238 на Indigo Mist #EEF0FB. Ими же вы набираете ссылки, когда акцент не справляется.
Поверхность держит. Это страница или карточка позади всего остального. Она не обязана быть белой, а выбранный оттенок меняет поведение всех остальных цветов.
Акцент нажимается. Это единственный цвет, который говорит: «здесь что-то происходит». Звучит как одна работа, но следующий раздел покажет, что их две.
У акцента две работы
На кнопке подпись должна читаться на акценте, а сама кнопка должна выделяться на странице. В предложении тот же акцент становится ссылкой, а ссылка это текст, значит, он должен читаться на той же странице. Обе работы используют одну и ту же пару цветов, но у второй планка выше.
Это значит, что акцент может быть хорошей кнопкой и плохой ссылкой. Sky и Coral сидят ровно в этой щели. Indigo и Berry проходят обе проверки.
Indigo
Indigo #4338CA, белая подпись: проходит
Indigo как ссылка на Indigo Mist #EEF0FB: проходит
Ink Navy #141238 как ссылка: проходит
Indigo работает и как кнопка, и как ссылка. Один цвет, обе работы, чинить нечего.
Berry
Berry #A61E4D, белая подпись: проходит
Berry как ссылка на Berry Milk #FBEAF0: проходит
Deep Berry #2A0A18 как ссылка: проходит
Berry делает то же самое: белая подпись на кнопке и читаемая ссылка на бледно-розовой поверхности.
Sky
Sky #248AE4, подпись Harbor Ink: проходит
Sky как ссылка на Sky Wash #EAF4FC: проваливается
Harbor Ink #021828 как ссылка: проходит
Sky хорошая кнопка и трудная ссылка. Оставьте его для кнопок, а ссылки набирайте Harbor Ink с подчеркиванием.
Coral
Coral #E85446, подпись Burnt Clay: проходит
Coral как ссылка на Coral Milk #FDEEEB: проваливается
Burnt Clay #290E0A как ссылка: проходит
У Coral тот же разрыв. Кнопка, которую видно, и ссылка, которая растворяется в Coral Milk.
Акцент оставьте для кнопок
Лечение дешевое. Оставьте Sky и Coral для кнопок, а ссылки набирайте чернилами с подчеркиванием. Вот одно и то же предложение в обоих вариантах.
Пароль
Забыли пароль?
✕ Sky как ссылка: трудно читать
Пароль
Забыли пароль?
✓ Harbor Ink как ссылка: легко читать
Серый текст на тонированных карточках
Вторичный текст обычно это ваши чернила примерно на 65%. На белом он легко читается во всех четырех палитрах, а на бледной поверхности почти не меняется. На настоящем тоне он может упасть ниже планки.
Поэтому проверяйте его на той поверхности, где он лежит, а не на белом. На сильном тоне поднимите серый до 70%, и он восстановится.
Red Panda
Sombre Night
Red Panda
#636772 на Sugar Milk #FAF7F0: проходит
Та же смесь 65% #656A77 на белом: проходит
Sugar Milk почти белый, так что серый почти не меняется. Он проходит и на карточке, и на белом.
Warm Purple
English Walnut
Warm Purple
#606146 на Oh Pistachio #BCDBA4: проваливается
При 70%, #59573F: проходит
Oh Pistachio это настоящий тон. Тот же серый, что проходит на белом, здесь падает ниже планки, а 70% возвращает его обратно.
Mango
Jedi Night
Mango
#5E6C68 на Heart of Ice #F2F5FA: проходит
Та же смесь 65% #626F6A на белом: проходит
Heart of Ice это бледный холодный тон, так что серый держится.
Viridian
Midnight Dreams
Viridian
#535D71 на Digital Lavender #D3CAEE: проваливается
При 70%, #495467: проходит
Digital Lavender достаточно сильный тон, чтобы завалить тот же серый. Поднимите до 70%, и карточка снова читается.
Бледный акцент заливает, но никогда не пишет
Бледный акцент прекрасная заливка и безнадежный цвет текста. На своей странице ни один из этих четырех не читается как текст. Превратите тот же цвет в заливку, и он работает, если правильно выбрать слова для него.
Purple Estate
Blue Horizon #72AFCC как текст на Sunwashed Paper #F5EDCE: проваливается
Purple Estate #58287F на Blue Horizon: только крупный шрифт
Purple Estate на Sunwashed Paper: проходит
Бледно-голубой проваливается как текст на бумаге. Как заливка он принимает Purple Estate, что нормально для крупной даты и не годится для мелкого шрифта.
Blue Horizon
Blue Horizon #2FA4D7 как текст на Desert Cream #F5E9D8: проваливается
Cocoa Noir #3E2C23 на Blue Horizon: проходит
Cocoa Noir на Desert Cream: проходит
Более яркий голубой тоже проваливается как текст на Desert Cream. Как заливка он легко несет Cocoa Noir.
Herb Garden
Herb Garden #BCD9A2 как текст на Sun Linen #FEFFD3: проваливается
Red Monarch #A82323 на Herb Garden: проходит
Red Monarch на Sun Linen: проходит
Самый слабый из четырех на своей странице. Поставьте Red Monarch на зеленый, и число читается четко.
Nordic Sky
Nordic Sky #7288AE как текст на Manor Cream #EAE0CF: проваливается
Белый #FFFFFF на Nordic Sky: только крупный шрифт
Velvet Indigo #4B5694 на Manor Cream: проходит
Nordic Sky принимает только белый, и только для крупного шрифта: числа да, мелкий текст нет. Текст страницы набран Velvet Indigo.
Так что проверяйте заливку и слова на ней, а не только страницу. Если слова на заливке дотягивают лишь до контраста для крупного шрифта, держите их крупными.
Все двенадцать палитр в одной таблице
| Палитра | Цвета | Какую роль проверяет |
|---|---|---|
| Indigo | Ink Navy #141238, Indigo #4338CA, Indigo Mist #EEF0FB | Кнопка и ссылка проходят обе |
| Berry | Deep Berry #2A0A18, Berry #A61E4D, Berry Milk #FBEAF0 | Кнопка и ссылка проходят обе |
| Sky | Harbor Ink #021828, Sky #248AE4, Sky Wash #EAF4FC | Кнопка проходит, ссылка проваливается |
| Coral | Burnt Clay #290E0A, Coral #E85446, Coral Milk #FDEEEB | Кнопка проходит, ссылка проваливается |
| Red Panda | Sombre Night #121A2E, Red Panda #B54302, Sugar Milk #FAF7F0 | Серый проходит на карточке |
| Warm Purple | English Walnut #2E1F14, Warm Purple #812E7D, Oh Pistachio #BCDBA4 | Серый проваливается на карточке |
| Mango | Jedi Night #0E2219, Mango #FAA828, Heart of Ice #F2F5FA | Серый проходит на карточке |
| Viridian | Midnight Dreams #0E222D, Viridian #007F5B, Digital Lavender #D3CAEE | Серый проваливается на карточке |
| Purple Estate | Sunwashed Paper #F5EDCE, Blue Horizon #72AFCC, Purple Estate #58287F | Бледно-голубой заливает, только крупный шрифт |
| Blue Horizon | Blue Horizon #2FA4D7, Desert Cream #F5E9D8, Cocoa Noir #3E2C23 | Заливка проходит с Cocoa Noir |
| Herb Garden | Red Monarch #A82323, Sun Linen #FEFFD3, Herb Garden #BCD9A2 | Заливка проходит с Red Monarch |
| Nordic Sky | Velvet Indigo #4B5694, Nordic Sky #7288AE, Manor Cream #EAE0CF | Заливка принимает белый, только крупный шрифт |
Цифры для того, кто защищает выбор
Каждая пара измерена по формуле контраста WCAG 2 относительно поверхности, на которой лежит. Это единственная таблица в статье с коэффициентами.
| Палитра | Тест | Коэффициент | Результат |
|---|---|---|---|
| Indigo | Белая подпись / кнопка на странице / ссылка на странице | 7.90:1 / 6.96:1 / 6.96:1 | Проходит все |
| Berry | Белая подпись / кнопка на странице / ссылка на странице | 7.21:1 / 6.22:1 / 6.22:1 | Проходит все |
| Sky | Темная подпись / кнопка на странице / ссылка на странице | 5.01:1 / 3.23:1 / 3.23:1 | Проходит, проходит, проваливается |
| Coral | Темная подпись / кнопка на странице / ссылка на странице | 4.98:1 / 3.21:1 / 3.21:1 | Проходит, проходит, проваливается |
| Red Panda | Серый 65% на карточке / на белом | 5.2:1 / 5.4:1 | Проходит оба |
| Warm Purple | Серый 65% на карточке / на белом / при 70% | 4.1:1 / 5.0:1 / 4.8:1 | Проваливается, проходит, проходит |
| Mango | Серый 65% на карточке / на белом | 5.0:1 / 5.2:1 | Проходит оба |
| Viridian | Серый 65% на карточке / на белом / при 70% | 4.2:1 / 5.1:1 / 4.8:1 | Проваливается, проходит, проходит |
| Purple Estate | Бледный акцент как текст / лучший текст на нем / чернила на странице | 2.05:1 / 4.31:1 / 8.83:1 | Проваливается, крупный шрифт, проходит |
| Blue Horizon | Бледный акцент как текст / лучший текст на нем / чернила на странице | 2.36:1 / 4.66:1 / 11.03:1 | Проваливается, проходит, проходит |
| Herb Garden | Бледный акцент как текст / лучший текст на нем / чернила на странице | 1.51:1 / 4.64:1 / 6.98:1 | Проваливается, проходит, проходит |
| Nordic Sky | Бледный акцент как текст / белый на нем / чернила на странице | 2.75:1 / 3.59:1 / 5.25:1 | Проваливается, крупный шрифт, проходит |
Как собрать собственную UI-палитру
- Начните с чернил и поверхности. Выберите темные чернила и поверхность, тонированную или белую, и проверьте чернила на поверхности. Harbor Ink #021828 на Sky Wash #EAF4FC это легкий случай.
- Выберите акцент под подпись. Решите, какой текст ляжет на него, белый или темный, и проверьте подпись на акценте.
- Проверьте акцент как ссылку. Положите его на свою поверхность как текст. Если проваливается, оставьте его для кнопок, а ссылки набирайте чернилами.
- Проверьте вторичный текст на каждой поверхности. Смешайте чернила на 65% с цветом каждой карточки. Где проседает, поднимите до 70%.
- Бледные цвета оставьте для заливок. Выберите слова для них заранее, до того как зафиксируете решение. Наши статьи об ошибках с цветом в UI и о доступном цветовом контрасте глубже разбирают пороги.
Файлы для каждого набора
Каждый набор это бесплатный цветовой набор на Forge с кодами в один тап, файлами образцов для Figma и Adobe (ASE), CSS-переменными и дизайн-токенами.
Бесплатный цветовой набор
У акцента две работы: Indigo, Berry, Sky, Coral
Все hex-коды, плюс образцы ASE, CSS-переменные и дизайн-токены.
Бесплатный цветовой набор
Серый текст на тонированных карточках: Red Panda, Warm Purple, Mango, Viridian
Все hex-коды, плюс образцы ASE, CSS-переменные и дизайн-токены.
Бесплатный цветовой набор
Бледный акцент заливает, но никогда не пишет: Purple Estate, Blue Horizon, Herb Garden, Nordic Sky
Все hex-коды, плюс образцы ASE, CSS-переменные и дизайн-токены.
FAQ
Какие цвета должны быть в UI-палитре?
Минимум три роли: чернила для текста, акцент для кнопок и ссылок и поверхность для страницы. Indigo #4338CA с Ink Navy #141238 и Indigo Mist #EEF0FB это полный пример.
Какого цвета должны быть ссылки в UI?
Цвета акцента, но только если он проходит как текст на вашей поверхности. Indigo проходит. Sky #248AE4 нет, поэтому его ссылки набираются Harbor Ink #021828 с подчеркиванием.
Какого цвета должен быть вторичный текст?
Ваших чернил примерно на 65%, проверенных на той поверхности, где он лежит. На сильном тоне вроде Oh Pistachio #BCDBA4 он может провалиться, и подъем до 70% это исправляет.
Почему серый текст плохо читается на цветной карточке?
Тонированная карточка темнее белого, поэтому зазор между серым и карточкой сужается. Белый прячет проблему, и именно поэтому тестировать нужно на реальной поверхности.
Можно ли использовать пастель как акцентный цвет?
Как заливку да. Как текст нет. Herb Garden #BCD9A2 проваливается как текст на Sun Linen #FEFFD3 и работает как заливка с Red Monarch #A82323 поверх.
Должен ли цвет кнопки работать как цвет ссылки?
Должен, если вы используете его для обоих случаев. Кнопка должна выделяться на странице и нести подпись. Ссылка это текст, поэтому на той же странице к ней планка выше.
Источники
- Названия цветов и hex-коды взяты из цветовых наборов UX Brainy на Forge, выпуски 04, 08 и 12. Контраст рассчитан по формуле WCAG 2 относительно поверхности, на которой лежит каждый цвет.
- Пороги для текста и фигур следуют W3C WCAG 2.2: Contrast (Minimum) и Non-text Contrast.
- Серый в каждой плитке это чернила палитры, смешанные с поверхностью на 65%, или на 70% там, где указано, так что этот hex выведен из палитры.
- Впервые опубликовано как три карусели в UX Brainy: У акцентного цвета две работы, Один и тот же серый может пройти на белом и провалиться на вашей тонированной карточке и Ваш бледный акцент может заливать фигуру.
Want a UI palette built for your product, with every role tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
