Идеальный диапазон яркости и насыщенности для фонового цвета сайта?

Максимума нет . В конечном итоге все сводится к тому, сколько людей будут использовать ваш сайт и какое влияние он на них окажет. Если пользователи собираются проводить за ним часы каждый день, то ему нужно не напрягать глаз. Но если это просто маркетинговый веб-сайт, который кто-то посещает один раз в течение тридцати секунд, можно использовать цвета, которые немного больше напрягают глаза. Это может даже помочь вашему сайту/дизайну выделиться при правильном использовании.

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

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

Именно их хроматическое содержание, которое меняется в зависимости от освещенности, делает некоторые цвета более яркими на одном и том же фоне. Вы можете проверить оттенок как на цветовых моделях HSV, так и на LCH, но они будут различаться по насыщенности и значению, яркости и цветности. Некоторые цвета будут казаться приглушенными, другие будут вибрировать нейтральным серым цветом, если только вы не добавите значения цветов и не найдете их среднее значение.

Сделайте это упражнение: используйте #782121 для красного, #217821 для зеленого, #212178 для синего в Photoshop или Illustrator (Gimp или Inkscape). Чтобы найти противоположные голубой, пурпурный и желтый цвета, используйте #87DEDE, #DE87DE и #DEDE87 и усредните эти цвета по их значениям RGB для соседних пар. Вы сформируете цветовой круг. Теперь, когда у вас есть это, выберите цвета так, чтобы они не были геометрически ровными (в треугольниках, квадратах и ​​шестиугольниках), потому что вы затемните получившийся серый цвет, когда он должен быть ближе к светлоте ближайших цветов.

Эта иллюстрация не работала бы с черным или белым фоном, потому что цвета на нем были бы бледными или затемненными, поэтому я выбрал серый цвет, который является конечным результатом процесса аддитивного усреднения. Попробуйте! В качестве бонуса, и поскольку это для веб-сайта, попробуйте добавить свои цвета не в виде изображений, а в виде формул или значений. Хорошая работа!

РЕДАКТИРОВАТЬ: Исправлены значения для голубого, пурпурного и желтого.