Сочетание цветов

Аналоговая: три соседних цвета круга гарантированно не спорят между собой. Минус в том, что она даёт мало контраста и интерфейс выходит вялым, поэтому к ней обычно добавляют один акцент с противоположной стороны круга. Для интерфейсов чаще берут монохром с одним контрастным акцентом: получается спокойно и при этом есть чем выделить кнопку.

Из-за одновременного контраста: два насыщенных цвета с противоположных сторон круга на границе начинают дрожать, особенно красный с зелёным и синий с оранжевым. Лечится тем, что один из пары берут приглушённым и отдают ему большую площадь, а второй оставляют насыщенным и мелким — как акцент. Соотношение примерно 90 к 10 по площади.

Дейтераномалия и протаномалия — самые частые формы, вместе они встречаются примерно у 8% мужчин и 0,5% женщин. При них красный и зелёный сближаются, а комплементарная пара красный–зелёный превращается в два одинаковых бурых пятна. Если цвет несёт смысл — статус, график, ошибка в форме — палитру нужно смотреть в симуляции, иначе часть людей информацию просто не получит.

Обычно достаточно одного основного, одного акцентного и нейтральной серой шкалы. Плюс три служебных: зелёный успеха, жёлтый предупреждения, красный ошибки. Палитры из семи равноправных ярких цветов выглядят эффектно на картинке и разваливаются в работе, потому что не задают иерархии.

Про пропорции площадей. Шестьдесят процентов отдаётся основному фоновому цвету, тридцать — вторичному, десять — акценту. Правило родом из интерьерного дизайна, но в интерфейсах работает так же: оно не даёт акценту расползтись и превратиться из выделения в шум.

Взять отсюда базовые цвета и построить у каждого шкалу светлот, потому что одного значения на цвет не хватает: нужны подложка, обычное состояние, наведение, нажатие и цвет текста. Шкалу удобно собрать в генераторе оттенков и тонов, он выгружает готовые переменные.

Нет, всё считается в браузере.