Lessでベース色から相関値で指定する

明るさを30％高くする：　lighten(@base, 30%);
明るさを20％低くする：　darken(@base, 20%);

彩度を30％高くする：　saturate(@base, 30%);
彩度を20％低くする：　desaturate(@base, 20%);

色相を10度大きくする：　spin(@bcolor, 10);
色相を20度小さくする：　spin(@bcolor, -20);

透明度を10％減らす：　fadein(@basec, 10%);
透明度を30％増やす：　fadeout(@basec, 30%);

@base: #ffa000;  /* ベースの色を変数に格納 */

h1 { color: @base;                   } /* 変数そのまま */

h2 { color: lighten(@base, 20%);     } /* 20%明るく */
h3 { color: darken(@base, 30%);      } /* 30%暗く */

h4 { color: saturate(@base, 20%);    } /* 20%鮮やかに */
h5 { color: desaturate(@base, 30%);  } /* 30%くすませる */

h6 { color: spin(@base, 10);         } /* 10度色相が大きく */
h7 { color: spin(@bcolor, -20);      } /* 20度色相が大きく */

h8 { color: fadein(@basec, 10%);     } /* 10％透過で薄く */
h9 { color: fadeout(@basec, 30%);    } /* 30％透過で濃く */