Opium.Fill — цветовая схема глазами программиста

[twinkle-tai]

Цветовая схема, принципы построения которой можно применить к любому проекту:
- на проблемном проекте избавиться от огромного количества переменных в CSS

1. Какие проблемы решает
1.1. 50 оттенков серого
1.2. игра с цветами от дизайнера
1.3. Замена цветовой темы

2. Идеология Opium.Fill
2.1. это для фронтов, дизайнеру знать не обязательно.
2.2. определяй цвета "на глаз"
2.3. иногда что-то попадется, что сюда не укладывается.

3. Базовые допущения
3.1. Каждый цвет - 2 воплощения (strong - насыщенный, weak - ненасыщенный)
3.2. Делим цвета по назначению: Base, Faint, Accent, Complement, Critic, Warning, Success
3.3. 3 блока по важности: 1 - самый важный, 3 - самый неважный

4. Блок 1 - родительские цвета
4.1. Названия:
Base - чёрный и белый цвета (текст и бэкграунд).
Faint - серый (второстепенный текст, сероватый фон, чёрный цвет с прозрачностью)
Accent - главный корпоративный цвет
Complement - дополнительный корпоративный цвет
Critic - цвет для выделения ошибок и прочей крайне существенной информации
Warning - важная, но не Critic
Success - успешно выполненное действие, которое не Accent
Это основные, все можно не использовать, можно дополнять
4.2. Color Family: strong и weak (определяем для каждого цвета его пару)

5. Блок 2 - подмены (Mock)
5.1. Контекст: У любого цвета есть контекст, в котором он используется (бэкграунд back, текст text, линия line, иконки icon). В любом из этих случаев цвет может потребоваться как-то изменить, чтобы он лучше подходил под контекст.
5.2. Контекст по «особому поводу» (Fancy)

6. Блок 3 - сдвиги (shift)
shift up - darker - active, focus
shift down - lighter - hover

7. Инверсия цвета
Иногда нужно написать что-то на темной подложке, но имеющиеся цвета не подходят. Как правило, этот новый цвет при обычной подложке подходит под базоввые цвета.