我知道如何使用内置函数从十六进制代码中确定较暗的颜色.但是如何用hsl做到这一点？我有三种颜色,一种是主色,一种是深色,一种是浅色.我需要编写一个函数来计算它们之间的差异,并为它们获得更浅和更暗的阴影.因此,当我添加另一种颜色代码时,它会给出相同百分比的浅色和深色.
据我从Sass文档中了解到,我首先需要一个函数来获得基色的色调,饱和度和亮度,对吧？那么呢？
这些是我的十六进制颜色：
$base: #7760BF; $base-darker: #483584; $base-lighter: #b5a9dc;
在这里他们是hsl,以防万一：
$base: hsl(255,43%,56%); $base-darker: hsl(254,36%); $base-lighter: hsl(254,42%,76%);
有人可以帮我吗？
解决方法
在Sass中,类型会自动转换. Sass
standard library的颜色功能可以接受任何颜色,rgb或hsl.
首先要产生更暗更浅的颜色,你可以使用变暗和变亮.我做了一个例子here.
然后要知道颜色之间的亮度差异以生成具有相同差异的新颜色,您可以使用亮度.
@function get-lightness-diff($base,$color) {
@return lightness($base) - lightness($color);
}
@function get-variant($color,$diff) {
@if ($diff < 0) {
@return darken($color,-$diff);
} @else {
@return lighten($color,$diff);
}
}
@function get-variants($color,$diff) {
$ret: ();
$ret: map-merge($ret,( darker: get-variant($color,-$diff) ));
$ret: map-merge($ret,( lighter: get-variant($color,$diff) ));
@return $ret;
}
@function get-variants-from-set($color,$darker,$base,$lighter) {
$darker-diff: get-lightness-diff($base,$darker);
$lighter-diff: get-lightness-diff($base,$lighter);
$ret: ();
$ret: map-merge($ret,$darker-diff) ));
$ret: map-merge($ret,$lighter-diff) ));
@return $ret;
}
$base: hsl(255,56%);
$base-lighter: hsl(255,66%);
$base-darker: hsl(255,46%);
// Get a lightness diff,from the light color for example
$diff: get-lightness-diff($base,$base-lighter);
// Variants: contains a map with 'darker' and 'lighter' colors.
$variants: get-variants($base,$diff);
// Or create your lighter/darker variants manually:
$darker: get-variant($base,-10%);
$lighter: get-variant($base,10%);
// Or all-in-one: create your variants from an other set of colors:
$other-base: hsl(255,33%,33%);
$other-variants: get-variants-from-set($other-base,$base-darker,$base-lighter);
我做了另一个例子here,但你可能需要调整它以使其适合你的需要.
编辑(17/07/17)：自从我写这篇文章以来,我改进了可用于生成颜色变体的实用程序.您可以在以下位置查看示例：https://codepen.io/ncoden/pen/yXQqpz?editors=1100.
