Цветовая гамма,сделать типа define
 

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

Почитайте про "SASS" или "LESS", возможно то, что вам нужно.

В современных браузерах можно так:

<style>
:root{
  --background: #00f;
  --span-background: #099;
}
div.a{
  --background: #f00;
  --span-background: #990;
}

div.b{
  --background: #0f0;
}

div{
  background: var(--background);
}
div span{
  background: var(--span-background);
}
</style>
<div class="a"><span>a</span></div>
<div class="b"><span>b</span></div>
<div class="c"><span>c</span></div>