CSS variable calculation of HSL values

余生长醉 提交于 2021-02-16 20:13:26

问题


I want to have a basic HSL color value which I want to implement as a gradient as follows:

:root {
    --hue: 201;
    --saturation: 31;
    --lightness: 40; 
    --mainColor: hsl(var(--hue),var(--saturation),var(--lightness));

    --difference: 20; /* 0 + --difference < --lightness < 100 - --difference */

    --lightnessPlus: calc(var(--lightness) + var(--difference));
    --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));

    --lightnessMinus: calc(var(--lightness) - var(--difference));
    --colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}

[...]
.class {
    background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}

The above code produces a transparent object and I fail to comprehend why, please help!


回答1:


You are missing percentages. the syntax should be hsl(h, s%, l%) (https://drafts.csswg.org/css-color-3/#hsl-color)

:root {
    --hue: 201;
    --saturation: 31%; /* here */
    --lightness: 40; 
    --mainColor: hsl(var(--hue),var(--saturation),var(--lightness));

    --difference: 20;

    --lightnessPlus: calc((var(--lightness) + var(--difference))*1%); /* here */
    --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));

    --lightnessMinus: calc((var(--lightness) - var(--difference))*1%);  /* here */
    --colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}

body {
    background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}

Or

:root {
    --hue: 201;
    --saturation: 31%; /* here */
    --lightness: 40%; /* here */
    --mainColor: hsl(var(--hue),var(--saturation),var(--lightness));

    --difference: 20%; /* here */

    --lightnessPlus: calc(var(--lightness) + var(--difference)); 
    --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));

    --lightnessMinus: calc(var(--lightness) - var(--difference)); 
    --colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}

body {
    background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}


来源:https://stackoverflow.com/questions/65478345/css-variable-calculation-of-hsl-values

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!