Блог

Библиотеки, такие как Bootstrap, часто предоставляют предопределенные цветовые схемы, например, для кнопок и предупреждений (например, успех, информация, предупреждение и опасность). В HTML они обычно состоят из background-color и border-color , причем последние обычно имеют тот же оттенок цвета, но немного светлее или темнее. Допустим, у нас есть кнопка со светло-зеленым фоном и темно-зеленой рамкой.

При настройке цветовой схемы я часто хочу заменить основной цвет, но сохранить расстояние, которое имеют основной цвет и его вторичный цвет (например, выделение или контур). Предполагая, что я хочу сделать кнопку красной в качестве основного цвета, как мне рассчитать вторичный цвет, чтобы он имел точно такое же расстояние, что и светло-зеленый и темно-зеленый?

Например, существующий стиль кнопки:

 background-color: #343A40;
border-color: #243030;
 

Настройка цветовой схемы следующим образом:

 background-color: #8D33AB;
border-color: ???;
 

В настоящее время я перевожу шестнадцатеричный код в формат RGB, а затем вычисляю расстояние красного, зеленого и синего каналов по отдельности. Затем я применяю те же расстояния к моему новому основному цвету (т.Е. Добавляю или вычитаю). Есть ли какой-либо более простой способ заменить цвет, сохраняя расстояние известной цветовой пары?