Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

blackness and lightness vs sass darken lighten #30

Open
perrin4869 opened this issue Jun 16, 2016 · 9 comments
Open

blackness and lightness vs sass darken lighten #30

perrin4869 opened this issue Jun 16, 2016 · 9 comments

Comments

@perrin4869
Copy link

perrin4869 commented Jun 16, 2016

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
Copy link
Contributor

MoOx commented Jun 16, 2016

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
Copy link
Author

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
Copy link
Member

ai commented Jun 16, 2016

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

@MoOx
Copy link
Contributor

MoOx commented Jun 16, 2016

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

@IanVS
Copy link

IanVS commented Jun 19, 2016

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

@perrin4869
Copy link
Author

@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
Copy link

cyber-snail commented Jul 1, 2016

@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
Copy link
Author

@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
Copy link
Contributor

MoOx commented Jul 18, 2016

@perrin4869 PR for docs are always welcome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants