LESS provides a variety of functions which transform colors. Colors are first converted to the HSL color-space, and then manipulated at the channel level:
1 2 3 4 5 6 7 8 9 10 11 12 13 | lighten(@color, 10%); // @color보다 10%만큼 *밝은* 색깔을 반환합니다.darken(@color, 10%); // @color보다 10%만큼 *어두운* 색을 반환합니다.saturate(@color, 10%); // @color보다 10%만큼 더 *saturated*된 색을 반환합니다.desaturate(@color, 10%); // @color보다 10%만큼 덜 *saturated*된 색을 반환합니다.fadein(@color, 10%); // @color보다 10%만큼 더욱 *불투명한* 색상을 반환합니다.fadeout(@color, 10%); // @color보다 10%만큼 더욱 *투명한* 색상을 반환합니다.fade(@color, 50%); // 50%의 투명도를 가지는 색상 @color를 반환합니다.spin(@color, 10); // return a color with a 10 degree larger in hue than @colorspin(@color, -10); // return a color with a 10 degree smaller hue than @colormix(@color1, @color2); // @color1과 @color2를 믹스한 것을 반환한다. |
사용하는 방법은 매우 직관적이며 간단합니다:
1 2 3 4 5 6 | @base: #f04615;.class { color: saturate(@base, 5%); background-color: lighten(spin(@base, 8), 25%);} |
색상 정보를 추출할 수도 있습니다:
1 2 3 4 | hue(@color); // @color의 ‘색조 (hue)’ 채널을 반환합니다.saturation(@color); // @color에서 `채도 (saturation)` 채널을 반환합니다.lightness(@color); // @color에서 '밝기 (lightness)' 채널을 반환합니다.alpha(@color); // @color에서 '알파 (alpha)' 채널을 반환합니다. |
다른 색상 채널을 기반으로 새로운 색상을 만들 때에, 이 기능이 유용합니다. 예를 들면:
1 | @new: hsl(hue(@old), 45%, 90%); |
@new 는 @old의 색조 (hue)와 그 자신의 채도와 밝기로 구성될 것입니다.
