2015-08-15 5 views
0

Будучи другом симметрии, я обычно проектирую все, что я делаю в виду. В последнее время я использую множество линейных градиентов для стилизации своих кнопок. Как и каждый разработчик, я провожу много времени с помощью генератора градиента онлайн, который выбирает цвета в случайном порядке между двумя точками и в значительной степени просто «глазным мячом».Вычисление разницы градиента css

Как бы то ни было, если бы я хотел больше точности? Допустим, у меня есть градиент, начинающийся с # ff5db1 и заканчивающийся # ef017c. Что, если бы я хотел убедиться, что каждый другой градиент, который я использую в будущем, имеет такую ​​же интенсивность и процентную разницу между двумя цветами, чем предыдущие два.

Есть инструмент, который вычисляет метрики между двумя цветами, так что я может создать своего рода постоянной цветовой схемы на основе этих показателей?

+0

Посмотрите мои комментарии по ответу ниже. И вот [demo] (http://codepen.io/seven-phases-max/pen/pJBXYP?editors=110), чтобы проиллюстрировать, что: 1. любые арифметические метрики вообще довольно ограничены. 2. Если вы все еще решите использовать его - вам не понадобится внешний инструмент, поскольку он может быть полностью автоматизирован в препроцессоре. –

ответ

-1

В принципе, я думаю, вы можете. Например, возьмите свои цвета - # ef017c и # ff5db1. Итак, каждые 2 числа или буква, это один цвет в HEX. Например, в # ff5db1 ff - красный, 5d - зеленый, b1 - синий. Вы можете рассчитать, сколько это в DEC.

Для # ff5db1: (Н) = 16 (255) 10, (5d) 16 = (93) 10, (б1) 16 = (177) 10.

ff5db1 = (255, 93, 177)

Для # ef017c: (эф) 16 = (239) 10, (01) 16 = (1) 10, (7с) 16 = (124) 10

ef017c = (239, 1, 124).

Затем вы вычисляете разницу между ними.

ff5db1 - ef017c = ((255 - 239), (93 - 1), (177 - 124)) = (16, 92, 53) - это почтение между двумя цветами.

+0

Ну, довольно просто вычислить арифметическую разницу между значениями RGB цветов (или лучше между их HSL/HSB), но ни одна из них не дает действительно ценной информации для * перцептивной * разницы между двумя цветами. (Even [Luminance] (https://en.wikipedia.org/wiki/Luminance)/[Luma] (https://en.wikipedia.org/wiki/Luma_ (видео)), которые должны представлять различия восприятия между яркость/яркость двух цветов весьма ограничена). Другими словами, различие HSL будет работать в определенной степени, но оно никогда не сможет достичь согласованной последовательности цветовой схемы, разработанной вручную. –

Смежные вопросы