0

Is there a function that converts rgb colours directly into their true greyscale form?

function rgbToGrayscale(red, green, blue) {
    const gray = []

    /* ---- CONVERSION CODE ---- */

    return gray
}

// color
const rgb = [20, 150, 240]

// grayscale conversion
const gray = rgbToGrayscale(rgb[0], rgb[1], rgb[2]) // [121, 121, 121]

I would greatly appreciate it if anyone can find a simple answer to this problem.

Joachim
  • 178
  • 1
  • 13
  • 1
    I used a "search" engine and entered "javascript rgb to greyscale converter" - and there were over 300,000 results - did none of them work for you? – Bravo Jun 09 '22 at 08:53
  • You can find [several articles with examples](https://tabreturn.github.io/code/html/javascript/2017/01/26/converting_css_colour_to_greyscale.html) around internet about it. What exactly didn't work for you? – Jax-p Jun 09 '22 at 08:54
  • @Bravo most of them were in another language, relating to turning whole images grey or were hidden inside lots of other pointless code. I couldn't actally find a decent function out of them that was specifically for this. – Joachim Jun 09 '22 at 08:58
  • So just extract the code you need. – Andy Jun 09 '22 at 09:04
  • I have looked for myself and have found a surprising lack of content regarding this. Another surprising thing is stackoverflow hardly has any questions on this specific topic either! I don't need much - just a simple function that works. – Joachim Jun 09 '22 at 09:11
  • It's just what you're looking for ... https://stackoverflow.com/a/18039329/1169519 – Teemu Jun 09 '22 at 09:16
  • 1
    see [Problems with using a rough greyscale algorithm?](https://stackoverflow.com/a/51819333/2521214) – Spektre Jun 09 '22 at 16:21
  • I've got it working now and have posted an answer to explain it out. Thank you everyone for your patience and supplying me with the relevant information. – Joachim Jun 10 '22 at 09:02

1 Answers1

1

Thanks to @Spektre and @Teemu , the function now works. I found this article inside @Spektre 's stackoverflow link useful as well.

If you want a cheap greyscale colour conversion, just add the numbers together and divide it by three:

function rgbToGrayscale(red, green, blue) {
    const gray = (red + green + blue) / 3

    return [gray, gray, gray]
}

const gray = rgbToGrayscale(20, 150, 240) // [136.6, 136.6, 136.6]

But because our eyes mix up light and colour, people have found that, to us, blue is dimmer than red, and red is dimmer than green. Thus, multiple formulas have been created and refined that balance the colours for the human eye.

This is one that I found quite good:

function rgbToGrayscale(red, green, blue) {
    /* remember: if you multiply a number by a decimal between 0
    and 1, it will make the number smaller. That's why we don't
    need to divide the result by three - unlike the previous
    example - because it's already balanced. */

    const r = red * .3 // ------> Red is low
    const g = green * .59 // ---> Green is high
    const b = blue * .11 // ----> Blue is very low

    const gray = r + g + b

    return [gray, gray, gray]
}

const rgb = [20, 150, 240]
const gray = rgbToGrayscale(rgb[0], rgb[1], rgb[2])

console.log(rgb)
console.log(gray)
Joachim
  • 178
  • 1
  • 13