Skip to content

Added: red() green() and blue() functions #803

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

Closed
wants to merge 4 commits into from
Closed

Conversation

mythril
Copy link
Contributor

@mythril mythril commented May 9, 2012

These work in a similar fashion to hue() saturation() and lightness(), but return a unit-less scalar between 0 and 255 as expected by the CSS rgb(x, x, x) notation.

@mythril
Copy link
Contributor Author

mythril commented May 15, 2012

You are right, I didn't read the color.js file closely enough :)

@mythril
Copy link
Contributor Author

mythril commented May 15, 2012

A simple example of how to build a contrast selector out of these functions:

.contrast-color(@sample)
    when(
        (
            (
                (red(@sample) * 299) 
                + (green(@sample) * 587)
                + (blue(@sample) * 114)
            ) / 1000
        ) >= 128
    ){
    color:black;
}

.contrast-color(@sample)
    when(
        (
            (
                (red(@sample) * 299) 
                + (green(@sample) * 587)
                + (blue(@sample) * 114)
            ) / 1000
        ) < 128
    ){
    color:white;
}

Algorithm borrowed from http://24ways.org/2010/calculating-color-contrast

@Synchro
Copy link
Member

Synchro commented Jun 12, 2012

Take a look at #730 for a more flexible (and SASS compatible) contrast function. Got any idea of how best to implement the .luma() method I mention in that?

@lukeapage
Copy link
Member

contrast has now been added. I still think these functions are useful. @Synchro @MatthewDL what do you think?

@Synchro
Copy link
Member

Synchro commented Aug 13, 2012

.red() certainly reads better than .rgb[0] and only adds a very small bloat-factor, so I'm +1. How about rounding it out with .alpha()?

@Synchro
Copy link
Member

Synchro commented Aug 13, 2012

Sorry, ignore me, we already have alpha()!

@Synchro
Copy link
Member

Synchro commented Aug 13, 2012

I've included docs for these in less/old-lesscss.org#22

@lukeapage
Copy link
Member

rebased (squashed) and pulled

@lukeapage lukeapage closed this Aug 18, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants