Question

The Bootstrap button colors are defined thus in variables.less:

@btnPrimaryBackground:              @linkColor;
@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);

@btnInfoBackground:                 #5bc0de;
@btnInfoBackgroundHighlight:        #2f96b4;

@btnSuccessBackground:              #62c462;
@btnSuccessBackgroundHighlight:     #51a351;

@btnWarningBackground:              lighten(@orange, 15%);
@btnWarningBackgroundHighlight:     @orange;

@btnDangerBackground:               #ee5f5b;
@btnDangerBackgroundHighlight:      #bd362f;

@btnInverseBackground:              #444;
@btnInverseBackgroundHighlight:     @grayDarker;

Is there some logic in the hex codes for background and backgroundHighlight (i.e. specific color differences between the hex codes) or have they been set arbritrarily based on someone’s design perspective that they ‘look good’?

Answer 1

You can see that it was set specifically by design. But you could use lighten() or darken() mixins with 5% or 10% values to set highlights. But the same way you could make the whole button from one color 🙂