postcss
blackness and lightness vs sass darken lighten
I am trying to replicate the results of the sass darken and lighten functions using the css color function, however, I am not getting similar results:
/* color-function */
color(#B6FFD4 blackness(30%)) /* #b3b3b3 */
/* sass darken */
darken(#B6FFD4, 30%) /* #1dff7a */
Basically I want a stronger green, which is what I get using sass darken, but I can't figure out how to replicate those results. Thanks!
No idea how to help you. Sass "darken" is nothing standard. blackness & friends on the opposite are supposed to be the things you can find (I think) in software like photoshop or things like that. Maybe try other modifiers or combine some :/
I see. Yeah, sass one is not standard, but funny enough it produced what I expected it to produce. I hoped someone has insights into what the actual difference between these functions are... will try playing around with them more.
@MoOx it is doc issue. We need README section with help for ex-Sass users. For example, how to convert old code.
@IvanVS I've been playing around just now with the functions some more, got some interesting results.
The closest I've been able to get to SASS darken function was to use lightness(-15%). blackness goes the opposite way of what I am trying to achieve. Saturation barely seems to change the color, and it doesn't matter if I use +,-, or just percentage, it is always in the opposite direction of what I want (red, blue to drop, green to remain 255).
I would say that based on my tests, the closest to sass darken is to do lightness(-%), and lighten, lightness(+%)
I can't really figure out whan blackness is trying to do, and it almost seems as though a darkness function is missing...
@perrin4869 Yes, right, SASS darken & lighten just change a lightness of color. You can see this with color in HSL (last argument of hsl-color specifies a lightness):
darken(#b6ffd4, 30%) // => #1dff7a
// #b6ffd4 === hsl(144.7, 100%, 85.7%)
// #1dff7a === hsl(144.7, 100%, 55.7%)
lightness make the same thing.
Action of blackness you can imagine as a change of blackness argument in HWB-colors hwb(hue, whiteness %, blackness %).
@pulmo thanks for the explanation! Finally it makes sense now :)
Maybe I should send a PR mentioning this in README.md in case someone else stumbles into this problem?