Любой, кто часто делает пользовательский интерфейс, вероятно, знает, что для данного цвета hsl(H, 100%, 50%) (синтаксис CSS) не все значения H будут давать цвет, подходящий для размещения произвольно черного или белого текста.Конкретный факт, который я отмечаю, заключается в том, что некоторые цвета (зеленый) выглядят особенно яркими, а другие (синий) выглядят особенно темными.
Хорошо, я бы хотел, чтобы пользователь мог ввести цветовой оттенок и иметьЦвет всегда отображается с постоянной яркостью, поэтому один из текстов белого или черного цвета всегда будет читаемым поверх него.Мне бы хотелось, чтобы все цвета также поддерживали наиболее яркий уровень насыщенности, который они могут дать, учитывая ограничение по яркости.
Вот краткий пример того, что я пробовал до сих пор.Я начинаю с сетки в квадрате, подобной этой, с использованием набора элементов html div.По сути, это значения оттенка примерно от 0 до 360 по горизонтальной оси и значения яркости примерно от 0% до 100% по вертикальной оси.Все значения насыщенности установлены на 100%.
Используя библиотеку JS с именем chroma.js , теперь я обрабатываю всецвета с использованием функции color.luminance, определение которой, кажется, делает то, что я ищу.Я просто передал легкость значения hsl в качестве параметра функции.Я не знаю наверняка, что это лучший способ для достижения моей цели, поскольку я не знаком со всей используемой здесь терминологией.Обратите внимание, что мой выбор использовать эту библиотеку ни в коем случае не является ограничением того, как я хочу поступить по этому поводу.Это просто представляет мою попытку решить проблему.
Цвета теперь, безусловно, имеют более постоянную яркость, но спектр теперь кажется особенно ярким вокругот оранжевого до голубого и особенно уныло повсюду.Также цвета, кажется, очень быстро удаляются от черного в верхней части.
Надеюсь, этот пример поможет немного выразить то, что я пытаюсь достичь здесь.Кто-нибудь знает, что они могут сделать лучше всего?