in reply to [OT] Ordering colors

I had this in my notes, so I'd calculate the luma and sort by luma

You probably want to shift hue, but not saturation or value. So, convert your RGB value into HSV, add 180 degrees to H (modulo 360 +degrees of course), and convert back to RGB. function contrastingColor(color) { return (luma(color) >= 165) ? '000' : 'fff'; } function luma(color) // color can be a hx string or an array of RGB va +lues 0-255 { var rgb = (typeof color === 'string') ? hexToRGBArray(color) : col +or; return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); +// SMPTE C, Rec. 709 weightings } http://juicystudio.com/article/luminositycontrastratioalgorithm.php http://www.splitbrain.org/blog/2008-09/18-calculating_color_contrast_w +ith_php http://stackoverflow.com/questions/301869/how-to-find-good-looking-fon +t-color-if-background-color-is-known http://search.cpan.org/~ian/Color-Scheme-1.02/lib/Color/Scheme.pm http://colorschemedesigner.com/ http://stackoverflow.com/questions/97646/how-do-i-determine-darker +-or-lighter-color-variant-of-a-given-color http://stackoverflow.com/questions/635022/calculating-contrasting- +colours-in-javascript http://stackoverflow.com/questions/141855/programmatically-lighten +-a-color http://www.mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-mod +el-conversion-algorithms-in-javascript http://www.lighthouse.org/accessibility/effective-color-contrast http://weblogtoolscollection.com/archives/2009/04/10/how-to-highlight- +search-terms-with-jquery/ https://developer.mozilla.org/en/DOM/window.getComputedStyle

Replies are listed 'Best First'.
Re^2: Ordering colors for contrast (luma)
by BrowserUk (Patriarch) on May 05, 2015 at 13:33 UTC

    I sorted them using your luma function and got this which doesn't have the effect I'm looking for. It seems to concentrate similar colors together. Eg. the yellows and light silver at the far end, the blues and greens at the near end, the reds and pinks in a couple of bunches.

    I'm slowly working my way the the links you posted, but they seem to be mostly about picking one color to contrast with one other color; and I'm stuck to think of a way to use that order 64 colors for my purpose.

    I approaching the conclusion that it might be an NP problem: basically, like trying to arrange the numbers 1 through 64 such that you maximise the sum of the differences between adjacent numbers.


    With the rise and rise of 'Social' network sites: 'Computers are making people easier to use everyday'
    Examine what is said, not who speaks -- Silence betokens consent -- Love the truth but pardon error.
    "Science is about questioning the status quo. Questioning authority". I'm with torvalds on this
    In the absence of evidence, opinion is indistinguishable from prejudice. Agile (and TDD) debunked

      Ha, there are four lumas, ( 2.996, 3.7112 , 2.7834, 3.4986, ) ... yaytk

        Taking note of the interleaving done in your fudgy examples, and looking at the results, I wondered what the result would look like if I did the Luma sort followed by a full interleave (rather than your 4 partial interleaves) and I was very pleasantly surprised by the result.

        Whilst the color-blind compatible stuff is good for small sets (<=12), I've a need for a greater range and I think this luma-sorted & interleaved is pretty good for up to 64 colors on black or white backgrounds.

        Thanks for the cluebats.


        With the rise and rise of 'Social' network sites: 'Computers are making people easier to use everyday'
        Examine what is said, not who speaks -- Silence betokens consent -- Love the truth but pardon error.
        "Science is about questioning the status quo. Questioning authority". I'm with torvalds on this
        In the absence of evidence, opinion is indistinguishable from prejudice. Agile (and TDD) debunked
Re^2: Ordering colors for contrast (luma)
by RonW (Parson) on May 05, 2015 at 16:59 UTC

    Luma contrast is not enough. The primate brain (including the human brain) processes luma and color in 2 parallel systems. While this does have an efficiency advantage, it leaves us sessepible to visual artifacts caused by conflicting pattern analysis results from the 2 systems.