search

postcss / postcss-color-function

PostCSS plugin to transform W3C CSS color function to more compatible CSS
MIT License
323 stars 31 forks source link

blackness and lightness vs sass darken lighten #30

Open perrin4869 opened 8 years ago

perrin4869 commented 8 years ago

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!

MoOx commented 8 years ago

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 :/

perrin4869 commented 8 years ago

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.

ai commented 8 years ago

@MoOx it is doc issue. We need README section with help for ex-Sass users. For example, how to convert old code.

MoOx commented 8 years ago

PR welcome. I don't have time for this.

IanVS commented 8 years ago

@perrin4869 I'm curious, did you try saturation instead of darkness?

perrin4869 commented 8 years ago

@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...

cyber-snail commented 8 years ago

@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 %).

perrin4869 commented 7 years ago

@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?

MoOx commented 7 years ago

@perrin4869 PR for docs are always welcome!