Any good guides for color modify?

Mikael Jenkler

I am trying to modify vanilla style without modifying the source: CUSTOM CSS

a { color: #222222; }
a:hover { color: #444444; }

.alert-warning
{
background-color: #eeeeee;
border-color: #dddddd;
color: #222222;
}

.btn-primary
{
color: #ffffff;
background-color: #774653;
border-color: #643b46;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary
{
color: #ffffff;
background-color: #8a5261;
border-color: #774653;
}

.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.focus, .btn-primary.disabled:active, .btn-primary:active, .btn-primary.disabled.active, .btn-primary.active
{
background-color: #8a5261;
border-color: #774653;
}

.btn-warning
{
color: #ffffff;
background-color: #eb025a;
border-color: #de0255;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active, .open>.dropdown-toggle.btn-warning
{
color: #ffffff;
background-color: #f50660;
border-color: #e9055b;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus
{
color: #ffffff;
background-color: #b4103a;
}

.btn-primary.active{background-color:#000000;border-color:#2e6da4}

.btn-info
{
color: #ffffff;
background-color: #444444;
border-color: #222222;
}

.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info
{
color: #ffffff;
background-color: #774653;
border-color: #643b46;
}

.account-username-box .open #profile
{
background-color: #666666;
border-color: #643b46;
}

Is there any documentation on what class is doing what, and so on?