Цвет
Палитра оттенков цвета дизайна «Metro»
Цвета позволяют интуитивно ориентироваться среди различных информационных уровней приложения и служат важнейшим средством усиления модели взаимодействия.
Стандартные цвета элементов Windows
| FFB900 | E74856 | 0078D7 | 0099BC | 7A7574 | 767676 |
| FF8C00 | E81123 | 0063B1 | 2D7D9A | 5D5A58 | 4C4A48 |
| F7630C | EA005E | 8E8CD8 | 00B7C3 | 68768A | 69797E |
| CA5010 | C30052 | 6B69D6 | 038387 | 515C6B | 4A5459 |
| DA3B01 | E3008C | 8764B8 | 00B294 | 567C73 | 647C64 |
| EF6950 | BF0077 | 744DA9 | 018574 | 486860 | 525E54 |
| D13438 | C239B3 | B146C2 | 00CC6A | 498205 | 847545 |
| FF4343 | 9A0089 | 881798 | 10893E | 107C10 | 7E735F |
Цвета элементов Xbox
| EB8C10 | ED5588 | 1073D6 | 148282 | 107C10 | 4C4A4B |
| EB4910 | BF1077 | 193E91 | 54A81B | 737373 | 7E715C |
| E31123 | B144C0 | 1081CA | 547A72 | 677488 | 724F2F |
| A21025 | 744DA9 | 108272 |
Цвета индикатора событий
| 128B44 | 2C71B9 | FDC214 |
Общее правило таково: если цвет элементов используется в качестве фона, размещайте поверх него текст белого цвета.
Цвет элементов по умолчанию, который поставляется вместе с Windows, обеспечивает отличную контрастность с белым текстом.
Пользователь может выбрать цвет элементов, имеющий низкую контрастность с белым, в соответствии со своими предпочтениями, это допустимо.
Если ему станет трудно читать, он всегда может выбрать более темный цвет элементов.
Цвет на цвете
После выбора цвета элементов создаются его светлые и темные оттенки на основании значений яркости цвета согласно модели HSB. Приложения могут использовать варианты затенения для создания визуальной иерархии и предоставления указания на взаимодействие.
| На 3оттенка светлее |
| На 2оттенка светлее |
| На 1оттенок светлее |
| Образец цвета элементов |
| На 1оттенок темнее |
| На 2оттенка темнее |
| На 3оттенка темнее |
| Name | Low | MediumLow | Medium | MediumHigh | Hight |
| Base Light (Alt Dark) | 20% BL #33 | 40% BML #66 Disable UI |
60% BM #99 Secondary text |
80% BMH #CC | 100% BH #FF Primary text |
| Base Dark (Alt Light) | 20% WL #33 | 40% WML #66 | 60% WM #99 | 80% WMH #CC | 100% WH #FF Content area |
| Name | Low | Medium | AccentLow | AccentMedium | AccentHight |
| List Light | 10% BL #19 | 20% BM #33 | 40% AL #66 | 60% AM #99 | 70% AH #B2 |
| List Dark | 10% WL #19 | 20% WM #33 | 60% AL #99 | 80% AM #CC | 90% AH #E5 |
Хром
| Name | Светлая | Тёмная |
| Low | FF#F2F2F2 | FF#171717 |
| MediumLow | FF#F2F2F2 | FF#2B2B2B |
| Medium | FF#E6E6E6 | FF#1F1F1F |
| High | FF#CCCCCC | FF#767676 | AltLow | FF#171717 | FF#F2F2F2 |
| DisabledLow | FF#7A7A7A | FF#858585 |
| DisabledHigh | FF#CCCCCC | FF#333333 |
| BlackLow | 20% 33#000 | 20% 33#000 |
| BlackMediumLow | 40% 66#000 | 40% 66#000 |
| BlackMedium | 80% CC#000 | 80% CC#000 |
| BlackHigh | 100% FF#000 | 100% FF#000 |
| White | 100% FF#FFF | 100% FF#FFF |
W - White, B - Black, A - Accent; L - Low, M - Medium, H - High;
Минимальный коэффициент контрастности текста к фону на уровне 4,5:1 для максимального удобства при чтении.
