FA+
Shop
499 submissions
Geek-out time! I'm so proud of this from a technical standpoint, that I decided to submit this as a submission rather than as scraps.
This is a demonstration of an algorithm I recently tweaked to convert normal greyscale to a special "grey" scale based on the nostalgic four hues of the Game Boy Classic LCD dot matrix screen. This image shows the converted greyscale in three rows - 256 shades, 16 shades, and the classic 4 shades.
Why geek out over a gradient? Because it's not just a simple gradient from dark #2A564D to light #C2E45B, because the Game Boy screen's shades didn't graduate that way, and a PhotoShop-style simple gradient from one to another ends up looking ugly and desaturated. You see, the darkest shade is more teal-hued, whereas the lightest shade is more yellow-hued, and a blind gradient between the two colors produces intermediate colors that appear more grey. Try a yellow to cyan gradient to see what I'm talking about. But part of Game Boy Classic's charm was that the intermediate colors were a less desaturated nostalgic green.
So how did I calculate this gradient? I used a combination of the HSL (hue/saturation/lightness) and YUV (luma/chroma) color spaces. First, for each of the two most extreme shades, I calculated the HSL hue and saturation along with the YUV luma, because HSL's hue and saturation are accurate representations, but YUV's luma is a more genuine representation of lightness than HSL's lightness. Then, for every intermediate shade, I calculated a linear interpolation for hue, saturation and luma, and converted them back to an RGB (red/green/blue) color space value.
Now, combining HSL and YUV in this way turned out to be more complicated than I initially thought, so I ended up inventing a new color space, which I call HSY, involving hue, saturation and luma channels.
Converting a color from RGB to HSY is relatively trivial, using algorithms already established for HSL and YUV. Hue and saturation are obtained using the HSL algorithm, and luma is obtained using the YUV algorithm.
Converting a color from HSY to RGB is where it gets really tricky. For each HSY color, I first use the HSL algorithm to take the HSY color's original hue and saturation - but using an arbitrary lightness of 50% (ignoring the HSY color's luma at first) - and convert back to a temporary RGB color. Then, in a repetitive loop, I do the following:
* Convert the temporary RGB color to a temporary YUV color.
* Replace the temporary YUV color's luma with the original HSY color's luma.
* Convert the temporary YUV color to another temporary RGB color, then that to a temporary HSL color.
* Replace the temporary HSL color's hue and saturation with the original HSY color's hue and saturation.
* Convert the temporary HSL color to a temporary RGB color.
* Repeat 15 more times.
The resulting final RGB color comes closest to accurately reflecting hue, saturation and luma of the original HSY color.
And with that, and a bit of experimental Java code, I created this. Isn't it lovely?
And for the really geeky (those who want to reuse this gradient), here is a full list of all 256 RGB colors used in the gradient, from darkest to lightest:
#2A564D #2A574D #2A574D #2A584E #2A594E #2B594E #2B5A4F #2B5B4F #2B5C4F #2B5C50 #2C5D50 #2C5E50 #2C5E50 #2C5F51 #2C6051 #2D6151 #2D6151 #2D6252 #2D6352 #2D6452 #2E6452 #2E6553 #2E6653 #2E6653 #2E6753 #2E6853 #2F6954 #2F6954 #2F6A54 #2F6B54 #2F6C54 #2F6C55 #306D55 #306E55 #306F55 #307055 #307055 #307155 #317255 #317356 #317356 #317456 #317556 #317656 #327656 #327756 #327856 #327956 #327A56 #327A56 #327B56 #337C56 #337D56 #337E56 #337E56 #337F56 #338056 #338156 #348256 #348256 #348356 #348456 #348556 #348656 #348756 #358756 #358856 #358956 #358A55 #358B55 #358B55 #358C55 #358D55 #368E55 #368F55 #369054 #369154 #369154 #369254 #369354 #369453 #369553 #379653 #379753 #379752 #379852 #379952 #379A52 #379B51 #379C51 #379D51 #389E50 #389E50 #389F50 #38A04F #38A14F #38A24F #38A34E #38A44E #38A54D #38A64D #38A64D #39A74C #39A84C #39A94B #39AA4B #39AB4A #39AC4A #39AD49 #39AE49 #39AF48 #39B048 #39B147 #39B247 #3AB246 #3AB346 #3AB445 #3AB544 #3AB644 #3AB743 #3AB843 #3AB942 #3ABA41 #3ABB41 #3ABC40 #3ABD3F #3ABE3F #3ABF3E #3BC03D #3BC13C #3BC23C #3BC33B #3BC43B #3CC43B #3DC53B #3EC53B #3FC53B #40C53B #41C63B #42C63C #43C63C #44C73C #45C73C #46C73C #47C83D #48C83D #49C83D #4AC83D #4CC93D #4DC93E #4EC93E #4FCA3E #50CA3E #51CA3E #52CA3F #53CB3F #54CB3F #55CB3F #56CC40 #57CC40 #58CC40 #59CC40 #5BCD40 #5CCD41 #5DCD41 #5ECE41 #5FCE41 #60CE41 #61CE42 #62CF42 #63CF42 #64CF42 #65CF43 #66D043 #68D043 #69D043 #6AD144 #6BD144 #6CD144 #6DD144 #6ED244 #6FD245 #70D245 #71D245 #73D345 #74D346 #75D346 #76D446 #77D446 #78D447 #79D447 #7AD547 #7BD547 #7DD548 #7ED548 #7FD648 #80D648 #81D649 #82D649 #83D749 #84D749 #85D74A #87D74A #88D84A #89D84A #8AD84B #8BD84B #8CD94B #8DD94B #8ED94C #90D94C #91DA4C #92DA4D #93DA4D #94DA4D #95DB4D #96DB4E #97DB4E #98DB4E #9ADC4F #9BDC4F #9CDC4F #9DDC4F #9EDD50 #9FDD50 #A0DD50 #A1DD51 #A3DE51 #A4DE51 #A5DE52 #A6DE52 #A7DF52 #A8DF53 #A9DF53 #AADF53 #ACE054 #ADE054 #AEE054 #AFE055 #B0E055 #B1E155 #B2E156 #B3E156 #B5E156 #B6E257 #B7E257 #B8E257 #B9E258 #BAE358 #BBE359 #BCE359 #BDE359 #BFE45A #C0E45A #C1E45A #C2E45B
This is a demonstration of an algorithm I recently tweaked to convert normal greyscale to a special "grey" scale based on the nostalgic four hues of the Game Boy Classic LCD dot matrix screen. This image shows the converted greyscale in three rows - 256 shades, 16 shades, and the classic 4 shades.
Why geek out over a gradient? Because it's not just a simple gradient from dark #2A564D to light #C2E45B, because the Game Boy screen's shades didn't graduate that way, and a PhotoShop-style simple gradient from one to another ends up looking ugly and desaturated. You see, the darkest shade is more teal-hued, whereas the lightest shade is more yellow-hued, and a blind gradient between the two colors produces intermediate colors that appear more grey. Try a yellow to cyan gradient to see what I'm talking about. But part of Game Boy Classic's charm was that the intermediate colors were a less desaturated nostalgic green.
So how did I calculate this gradient? I used a combination of the HSL (hue/saturation/lightness) and YUV (luma/chroma) color spaces. First, for each of the two most extreme shades, I calculated the HSL hue and saturation along with the YUV luma, because HSL's hue and saturation are accurate representations, but YUV's luma is a more genuine representation of lightness than HSL's lightness. Then, for every intermediate shade, I calculated a linear interpolation for hue, saturation and luma, and converted them back to an RGB (red/green/blue) color space value.
Now, combining HSL and YUV in this way turned out to be more complicated than I initially thought, so I ended up inventing a new color space, which I call HSY, involving hue, saturation and luma channels.
Converting a color from RGB to HSY is relatively trivial, using algorithms already established for HSL and YUV. Hue and saturation are obtained using the HSL algorithm, and luma is obtained using the YUV algorithm.
Converting a color from HSY to RGB is where it gets really tricky. For each HSY color, I first use the HSL algorithm to take the HSY color's original hue and saturation - but using an arbitrary lightness of 50% (ignoring the HSY color's luma at first) - and convert back to a temporary RGB color. Then, in a repetitive loop, I do the following:
* Convert the temporary RGB color to a temporary YUV color.
* Replace the temporary YUV color's luma with the original HSY color's luma.
* Convert the temporary YUV color to another temporary RGB color, then that to a temporary HSL color.
* Replace the temporary HSL color's hue and saturation with the original HSY color's hue and saturation.
* Convert the temporary HSL color to a temporary RGB color.
* Repeat 15 more times.
The resulting final RGB color comes closest to accurately reflecting hue, saturation and luma of the original HSY color.
And with that, and a bit of experimental Java code, I created this. Isn't it lovely?
And for the really geeky (those who want to reuse this gradient), here is a full list of all 256 RGB colors used in the gradient, from darkest to lightest:
#2A564D #2A574D #2A574D #2A584E #2A594E #2B594E #2B5A4F #2B5B4F #2B5C4F #2B5C50 #2C5D50 #2C5E50 #2C5E50 #2C5F51 #2C6051 #2D6151 #2D6151 #2D6252 #2D6352 #2D6452 #2E6452 #2E6553 #2E6653 #2E6653 #2E6753 #2E6853 #2F6954 #2F6954 #2F6A54 #2F6B54 #2F6C54 #2F6C55 #306D55 #306E55 #306F55 #307055 #307055 #307155 #317255 #317356 #317356 #317456 #317556 #317656 #327656 #327756 #327856 #327956 #327A56 #327A56 #327B56 #337C56 #337D56 #337E56 #337E56 #337F56 #338056 #338156 #348256 #348256 #348356 #348456 #348556 #348656 #348756 #358756 #358856 #358956 #358A55 #358B55 #358B55 #358C55 #358D55 #368E55 #368F55 #369054 #369154 #369154 #369254 #369354 #369453 #369553 #379653 #379753 #379752 #379852 #379952 #379A52 #379B51 #379C51 #379D51 #389E50 #389E50 #389F50 #38A04F #38A14F #38A24F #38A34E #38A44E #38A54D #38A64D #38A64D #39A74C #39A84C #39A94B #39AA4B #39AB4A #39AC4A #39AD49 #39AE49 #39AF48 #39B048 #39B147 #39B247 #3AB246 #3AB346 #3AB445 #3AB544 #3AB644 #3AB743 #3AB843 #3AB942 #3ABA41 #3ABB41 #3ABC40 #3ABD3F #3ABE3F #3ABF3E #3BC03D #3BC13C #3BC23C #3BC33B #3BC43B #3CC43B #3DC53B #3EC53B #3FC53B #40C53B #41C63B #42C63C #43C63C #44C73C #45C73C #46C73C #47C83D #48C83D #49C83D #4AC83D #4CC93D #4DC93E #4EC93E #4FCA3E #50CA3E #51CA3E #52CA3F #53CB3F #54CB3F #55CB3F #56CC40 #57CC40 #58CC40 #59CC40 #5BCD40 #5CCD41 #5DCD41 #5ECE41 #5FCE41 #60CE41 #61CE42 #62CF42 #63CF42 #64CF42 #65CF43 #66D043 #68D043 #69D043 #6AD144 #6BD144 #6CD144 #6DD144 #6ED244 #6FD245 #70D245 #71D245 #73D345 #74D346 #75D346 #76D446 #77D446 #78D447 #79D447 #7AD547 #7BD547 #7DD548 #7ED548 #7FD648 #80D648 #81D649 #82D649 #83D749 #84D749 #85D74A #87D74A #88D84A #89D84A #8AD84B #8BD84B #8CD94B #8DD94B #8ED94C #90D94C #91DA4C #92DA4D #93DA4D #94DA4D #95DB4D #96DB4E #97DB4E #98DB4E #9ADC4F #9BDC4F #9CDC4F #9DDC4F #9EDD50 #9FDD50 #A0DD50 #A1DD51 #A3DE51 #A4DE51 #A5DE52 #A6DE52 #A7DF52 #A8DF53 #A9DF53 #AADF53 #ACE054 #ADE054 #AEE054 #AFE055 #B0E055 #B1E155 #B2E156 #B3E156 #B5E156 #B6E257 #B7E257 #B8E257 #B9E258 #BAE358 #BBE359 #BCE359 #BDE359 #BFE45A #C0E45A #C1E45A #C2E45B
Category Artwork (Digital) / All
Species Unspecified / Any
Size 512 x 384px
File Size 1.5 kB
Comments