Найти значение цвета относительно другого цвета

Question

Я использую .scss, чтобы варьировать столько, сколько возможно, с помощью моего CSS. Тривиально варьировать один цвет, скажем $primary-color. Я хотел бы использовать оттенки этого цвета, и я могу легко определить цвет варианта в Photoshop или любой выбор цвета. Я также могу использовать функцию darken($primary-color, 10) в .scss для создания цвета, а затем, путем проб и ошибок, приблизиться к цвету варианта.

Как я могу взять #1D3B6C и найти именно там, где #DAE5F0 лежит относительно него?

Answer 1

Это сложная проблема, как описано здесь: https://en.m.wikipedia.org/wiki/Color_difference

Недавно я решил (по крайней мере, достаточно для моих целей) этот вопрос в стороне сервера код аппроксимацией. Наши цвета находятся в rgb. Используемая мной формула. R, г и Ь один цвет и r1, g1, b1 является другой:

var diff = Math.sqrt((r-r1)^2 + (g-g1)^2 + (b-b1)^2) 

Если дифф 100 или меньше (вы можете играть с точки останова и увидеть, что работает для вашей ситуации), я определил цвета не должны быть вместе, и я иду по умолчанию.

Я не знаю, но, возможно, это помогает? Если есть какой-либо способ использования JavaScript в браузере, в sass (lile я сказал, не знаю sass) или, может быть, в вашем процессе сборки где-то, это сработает.