Hue Shifting in Pixel Art (Color Tutorial)

[@masterfreakgames2871]

I studied Graphic design for two years , and work as illustrator for other three years, and i can say that this tutorial is so Mind Blowing, really the best tutorial for shading and lighting i never seen before, sorry for my bad english, but i just want to say , Incredible work

[@olyna]

totally agree!

[@titusyoung9489]

I also now use this for my coloring on anything 😂

[@christidutoit]

I’ve studied graphic design for three years and worked as an illustrator for almost 7 years and I still learned a ton from this video! Really really great info in this. 👌

[@cvdusey]

Hey, your English isn’t that bad! You only really messed up two words, and even when someone is reading it, they probably won’t be able to tell. Keep practicing! Your doing great!

[@domainofscience]

Mind blown, I learned so much from this. I don't do pixel art, but this is very broadly applicable. Thanks!

[@King_O_Light]

Next video request: a video about fonts in pixel art

[@highpitched1121]

I also have problems with that

[@intheravenday]

Up

[@pinkajou656]

Yes

[@blackcitadel37]

It'd be nice one teaching how to make your own pixel font.

[@ultraunitilezer9909]

up

[@Anilmky]

"I wanna be smacked on the face by a rainbow when i look at my art." -Brandom James

[@big_c3426]

Anilmky Kittao I read this as soon as he said it lol

[@Anilmky]

@@big_c3426 perfect timing.

[@iii-tf6rc]

@@big_c3426 wtf same

[@mistadude]

@@iii-tf6rc yall need to learn how to actually watch the video without looking at the comments lol

[@flimsyflame1251]

This is actually a common problem with any digital art, and probably traditional as well. It’s why a lot of artists immediately go “DON’T SHADE WITH BLACK” Unfortunately, most of them don’t give more advice beyond that, and it leaves people confused, so thanks a ton for the tutorial!!

[@malinaandryan]

lmao I was told to just NEVER use black, ever

[@flimsyflame1251]

@@malinaandryan yeah I think it’s a problem with how people try to explain it. I think what they mean to say is “Don’t use black until you know how to properly utilize it. Because just desaturating a color or making the shading black and lowering the opacity can hurt the colors in your image. It needs to be done intentionally when you understand why and when it’ll look good or bad.” But that requires a lot of further explanations about when it looks bad and why it looks bad and when it looks good and why it looks good, so people just boil it down to “don’t use black” instead.

[@CKTDanny]

Excellent tutorial! I experimented with hue shifting on my last project but never really understood the logic behind it besides "it looks nice". Your example with the sun makes so much sense!

[@BJGpixel]

Thank you, glad it was helpful! Yeah it can be tricky without any other context, especially because colour preference can be very subjective also!

[@NDarkNoms]

170th like!

[@isaacsteen4828]

I remember when I discovered Hue Shifting for the first time, and the inner workings of it. "Oh my god. Orange is just dark yellow."

[@HammerDax]

And brown is just dark orange!

[@bloodypommelstudios7144]

@@HammerDax I was really surprised finding out brown is just dark orange despite literally making brown by darkening orange for years. No idea how I didn't realize that.

[@bloodypommelstudios7144]

I found it a lot easier when I started using HSV rather than RGB. I remember really struggling as a kid using MsPaint.

[@magnomaol]

@@bloodypommelstudios7144 Yeah it makes a lot more sense HSB(HSV, HSB etc..) to mee too, way better than using RGB to understand colors. RGB is useful if you're planning to mess with colors using shaders.

[@bloodypommelstudios7144]

@@magnomaol Yeah I've used RGB for things like chromatic aberration and posterisation effects but I can't imagine going back to using it to draw with.

[@rh162]

Been doing art for years and I NEVER understood this until now. Color theory explanations are usually all so convoluted while this is so heckin simple. I really love it.

[@Joxlol]

It took like 20 videos to end up here and I finally understood it. Took a short page of notes here and damn, it changed everything. Thx a lot. Very well done and presented.

[@Arthur_url]

Dude, thank you! I've just recently started practicing pixel art, and was already previously an average digital artist, and these tips actually helped me with both! I had already heard several artists talking about how shadows and lights tend to shift the hue and etc, but this was the most clear and direct explanation I've seen. The little animations do help a lot with that xD . Love your channel, keep up the good work! ♥

[@BJGpixel]

Thank you I'm happy to hear that! It's funny, I always present from the perspective of pixel art but there's no reason it can't apply to any digital art! I guess pixel art tends to focus on deliberate colour restriction more often, where this kind of thing becomes important. Thanks for watching, and best of luck with your art! :D

[@mygills3050]

I like to think of hue shifting like this: if you want something to be darker/lighter, you should have it look like it already was. Darker shades are natural for cooler colors, so if you want to find something good for shading, look to purple! Lighter things tend to be more reflective (in a sense), and as a result it is harder to make out the exact hue, so a decrease in saturation would easily mimic that!

[@TomHermans]

I really like how this hue shifting technique is also applied here and demonstrates very well the effect it has vs the monotonous shades you see so often.

[@queenburbz]

I almost never comment on videos but this was such a great tutorial on hue shifting theory. I myself have fallen into the monotone palette trap, becoming frustrated at how my colours always turned out looking flat. The level of detail you used to explain how to create a palette using hue-shifting and how to refine a palette was immensely helpful to me. Thank you so much!

[@MysticalFG]

This is great because it really doesn't apply to pixel art alone! Once you start doing this in your normal non-pixel digital art as well it helps LOADS in terms of vibrancy and making you art look much nicer :)

[@moduntilitbreaks]

Holy crap, literally took screenshots to my notes.

[@bloodypommelstudios7144]

For people who like a more physics based explanation for why hue shifting works start by asking yourself why are shadows not completely black? It's because of ambient light. Picture a very simple scene, a person standing on a flat surface with the Sun projecting a shadow. There's actually two light sources. The Sun is the obvious one but the blue light of the sky itself also lights the scene. The Sun puts out far more total light so on lit surfaces the sky's blue light isn't noticeable but in shadows the sky is the main light source so shadows will appear to have a noticeably bluer hue. There's a lot more to shadow than just this, different skys will result in different results for example a planet with no atmosphere would have shadows which are almost completely black since the sky isn't supplying any light, you've also got reflected light from other objects in the scene which also changes shadow colours and ambient occlusion etc which are worth looking in to if you want to get serious about technical details.

[@rubykanima]

or simpler: If you get hit by yellow (sun-) light, would you get brighter with a white color? Obviously not...

[@Sanpaku-san]

As a digital artist I've found that literally no one has taught this in most of the tutorials I've seen and only the pixel art tutorials mention it

[@rubykanima]

It's because in pixelart it is more noticeable though any art can be ruined by using white to brighten up any color. This is why most newby art looks flat

[@sagitswag1785]

I've been trying to learn pixel art on and off for a while, and color has been the hardest part for me to get to look "right". This is the best tutorial on the subject I've ever seen. Very clear and the examples show the concept impeccably! Thank you!

[@sanjacobs6261]

Note: The opposite of yellow is only purple in subtractive color space. In additive color space (screens, lights, pixels, RGB) the opposite of yellow is blue.

[@BJGpixel]

Absolutely! Pixels exist in the digital space and are therefore "additive" from a technical standpoint. This tutorial however is about the artistic application of colour harmony within pixel art (or in theory any artistic medium), where I find the subtractive model to be more intuitive and appealing.

[@obiwac]

@@BJGpixel while I do agree purple looks better, it's not a question of pixels being digital or not. Your example of the sun is trying to mimic real life, where sunlight is additive. So digital or not, it would have to be additive to be realistic.

[@BJGpixel]

@@obiwac I get what you mean, however the sunlight example is only an abstraction to illustrate the use of complementary colours. When I say I prefer the Subtractive model, what I really mean is I'm using the RYB colour wheel as a reference point for this example, to identify opposing warm and cool colours that I believe are appealing in an artistic context

[@obiwac]

@@BJGpixel yup, I understand, and again, I agree with you that using the RYB wheel for opposing colours looks better in this case. Love your videos btw!

[@raizin4908]

@San Jacobs - Blue is the opposite of yellow in both additive (RGB) and subtractive (CMY) color space. (R+G vs. B and C+M vs. Y) Only in pre-scientific classical color theory (with RYB as the primary colors) is purple yellow's opposite. (R+B vs. Y) 　Classical color theory "stretches" the part of the color wheel between red and green and "squishes" the blue-purple-magenta range, because the red and green color receptors in our eyes are very close in the kinds of wavelengths of light they can detect, so we basically have more resolution on that part of the spectrum. The spectrum between red and green (with its yellows and oranges) seems like a much larger distance to our color vision than the spectrum from green to blue (with its... well... greens and blues) That difference in _perceived_ colors is why we classically have purple as the opposite of yellow, red as the opposite of green, and orange as the opposite of blue. It's closer to how our brains _experience_ colors, even though a RYB color system is very inaccurate in terms of how our eyes technically _register_ color, and how we mix light and pigments.

[@Jay-q3o4w]

It's the most clean explanation of color theory.

[@bushrabensasi4583]

your explanation and approach to this is incredible! I have never been able to understand how light and darkness affect color till now. I REALLY appreciated this video!

[@BlocPanda]

Man. Its great watching this video for a fourth time and still getting useful info out of it.

[@olyna]

What a brilliant Tutorials! I have watched many Color tutorials and only after watching your that it makes total sense! Excellent flow and clarity in your tutorials. Love them.

[@blackattack1840]

This is the greatest channel I have ever accidentally stumbled across. And no obnoxious Like/Share/Subscribe or 2 minute rambles about how tough it is to be a youtuber placed before and after the content I'm here for. Beautiful. You wouldn't believe how rare that is. The abscene comes so buttery smooth across my ears. I'm actually gonna ring that bell for once just cuz you didn't ask me to.

[@TheNeonCaster]

This is something that really sat in my brain from my teenage years hanging out on spriting message boards. Hue shifting for colour depth can turn out great results on any graphic design project!

[@thebeluvdtrex]

This is so INTERESTING I grew up loving video games and started drawing when I began watching anime. I never had the tools to make what I wanted and now that I have the tools seeing how I can make this come true is amazing. Thank you for this channel.

[@Grifter_Reacts]

I really like the fact there are exemples and most importantly numbers I can see. It may only be a ref but it helps so much more than just saying "you make hightlight colors like that click click click look the colors work together" and there's nothing to study or have a hint to apply for ourselves. Good work!

[@ninquelosille3349]

I never really understood hue shifting and to improve my art I kind of tried to do it anyway without really following a rule (and messing up most of the times)... But you explained it so well! You made it sooo simple that I got it right away! Now I can truly and properly improve my art. Thank you so much!

[@mr_whyy]

Your explanations were clear enough that I wrote a small app that shows that effect in real time with a starting color and sliders, it shifts hue in real time and can generate n colors

[@jaredjohnston1259]

MY GAWD MAN! these videos are brilliant!

[@BJGpixel]

Haha glad you enjoy, thanks so much!! :D

[@linusjensen6905]

This is everything i ever missed with pixel art. THANK YOU SO MUCH!!!!

[@FenrirInFlowers]

This was amazing! You blew my mind with this explanation. As someone who is new to pixel art and mostly used to working in charcoal and pencil, this tutorial made the basic concept crystal clear and answered my main questions on the subject.

[@florbengorben7651]

Ive been thinking about getting into game design, especially because of a specific game idea I had, and after finding your videos today, I think I’ve decided to go for a pixel art approach. Ive already identified a disconnect between the colorations and color schemes of different people and areas in the game, but this video made me realize that I can use lighting to really make certain areas reminiscent of each other while remaining distinct. Thank you for making your videos. Take care!

[@mooshy5944]

Thank you so much for this! As a programmer with absolutely no art background, this is EXACTLY what I was looking for in order to start creating some pixel art for a game. ❤️

[@kenorsua9595]

i wasn't expecting to learn color theory that easily, im so grateful for this video... time to make pixel art!

[@mustardsauce5201]

a lot of these tips dont just apply to pixelart, but just art as a whole. like, a lot of the mistakes you made wouldn't have been made if you were an experienced artist before diving into pixelart like im gonna do. i love you channel. great for tutorial and background noise for drawing.

[@Riley_MDS]

I was told by one of my fellas saying that I should learn Hue Shifting, I had no idea, even tho he did explain to me with stuff I only understand a little, but YOU just make it all clear and I literally understand it as whole now! Thank you for the explanation, it really helps me cause I know how Hue Shifting works!

[@TheSpeedyBoi]

this whole tutorial series is amazing! I started game devving a few months ago(oh wait its april more like a year ago now 0_0) and these tutorials have helped me make far better artwork for my game. A big round of applause for Brandon! Have a wonderful day.

[@asoapydog]

I smashed the like button straight through my phone and onto the floor. Thank you for making this.

[@m4r_art]

Out of all you made, this is by far your best tutorial.

[@bigrat4780]

a fantastic tutorial to show anyone having difficulty understanding shading and highlighting tbh.

[@DarkD33p]

That fox character would fit into the Jazz Jackrabbit universe. :D I'm new to making pixel art and this video helped me a lot. Thanks man. Absolutely love your content so far.

[@Maiko_101]

This guy is the best teacher for pixel art ever

[@phubans]

I've been doing pixel art in some capacity for about 30 years, I have had pixel artist friends who are WAY better at it than me, yet nowhere in that three decade journey did anyone bother to ever mention this concept to me before. It makes perfect sense and I really need to check one of my big ongoing projects to see if it needs this treatment (it probably does)! Thanks for the great video :)

[@jyfelisilda8194]

Bro youre a hero. I literally suck at shadows and colors and yet this gave me an understandable explaination. Applause👏

[@PKspectre]

Oh my god.. this is actually genius. I'm not an artist by any means, but I like making pixel art in my free time, and I kinda just whatever'd my colour selection because I had no idea what I was doing. I applied your method and BAM, it instantly looks ten million times better. Thanks a lot!

[@Alex-mw8qz]

Your videos seem very complicated, but if you pay attention it's easy to understand. Keep up the fantastic work

[@adrianofend8529]

I started out making pixel arts and i'm not this great of a pixel artist, but a person suggested me to watch your videos a these videos are awesome! I can't stop learning. I want to make games in 2d with pixels like shovel knight and you are helping me a lot, thanks.

[@Khrene]

This is the most concise and constructive tutorial on this subject!

[@nadi6643]

normally I don't comment on tutorials bc I think they doesn't help me at all, but wow. this video is so good I'm actually impress

[@andytran7768]

Really helpful video!! This is something I’ve been slowly picking up as I improve with pixel art- but having it all explained definitely gave me a deeper understanding. Great work!

[@mackit]

This is an excellent tutorial! It’s not only applicable to pixel art, but also to recoloring real photos (e.g. product photography). Often, when designers need to create a bunch of color variations of a product, they will simply put a flat color mask over the whole item. While this gives adequate results, you can make the photo look much more realistic by applying the “Hue Shifting” method to the highlights and shadows. It’s a simple and super effective method!

[@arthurdlacerda3352]

not every hero wears a cape! u are the best! thx

[@Tiosedan]

One thing I love about pixel colour palettes is that smoky feel to them. Like the refeined colour palette!

[@xentric313]

Changing the outline color in the refined version makes it even better.

[@dcadjust]

This is an important topic to understand and then practice. thank you for this video. Sigh, I have a loooong way to go still.

[@chuchupoppy]

Yeah, learning this when I started doing pixel art made me, like, color better in general. 's neat, the amount of crossover in different mediums.

[@CrunchToom]

To be honest this is the hardest part for me so thank you (also you are underrated)

[@gmdbittsey1332]

As a beginner pixel artist, this opens a whole lot to me. Thanks so much!

[@ImusNoxa]

I just discovered your channel, and you have a lot of really great stuff. But this might honestly be your best video. I went to school for design, and they never taught me this. Even though this is such an essential concept. You did an amazing job condensing it into a 10-minute presentation while also making it super educational. Thank you so much for sharing!

[@6Horrorible6]

This tutorial is the one that really got to me! I feel I made some progress. Working on a palette is so darn h a r d, not just simply difficult. Thank you!

[@RingloomAzur]

This is exactly the way i shade my drawings and sprites, and it's very well explained. Excellent job

[@NickNames99]

this is really cool. i subbed to your channel a while ago but i didn't watch any of the videos but this is very helpful i've been trying to figure out my art style because every time i draw a different character from the same game/show side by side it always looked like a different person must have drawn it. i think this is helping me get more consistency. thank you

[@programoo]

This practical color theory that I am desperately looking for. It is super helpful thank you for sharing.

[@miguellavariel1348]

The sounds really bring back memories and make it looke even more professional! :)

[@Knee_Ghast]

Finally Someone who's actually explaining how.

[@PROPLAYEN]

Thanks! I'm getting into pixel art and I didn't really know how to do this!

[@Gobi445]

You're such a great teacher and artist!! This advice is so practical for color in most mediums! Great video ^_^

[@davidstover6074]

Thanks for this, it gave me much more insight to color theory than I had before!

[@carlaalves4862]

7:49 the refined one looks like It is evening or something like that

[@moose200]

Thank you! I came back to this video for some help and it made a huge difference

[@MarioFan171]

Thanks, In fact i'm not used to Monotone Shading because i want to add more variety. As for my pending projects, My combined Knoledge with Color Theory and Music Theory will complete the Duo

[@gordrik1591]

Hard topic very clearly explained, nicely done :)

[@GameArts1]

Ok this was the video i just needed :P. I like the hue shifting version the best, it pops out and my eyes are drawn to it instantly compared to the other two.

[@JohanEnriqueArteagaLopez]

All this channel is amazing! Please don't stop upload content. You have a well oiled machine concept here. Congrats!

[@gokhanerenart]

Thanks for everything friend you are really amazing ! Your tutorials helps to me about pixel art.

[@BJGpixel]

Happy to hear that, thank you! Best of luck with your pixel art! :D

[@punkopunko5637]

Hue Shifting is my favorite art technique. I incorporate it in pretty much all of my art.

[@chicken7482]

this guy's channel is so underrated

[@ROXASOWEN]

very great video ive always stuggled when it comes to shifting and shading and this is the best video ive found to help it might just be on my end but for anyone else is the text jumping around it jumps on pirple and blurs on yellow

[@Elizabeth-vh6il]

Interesting. The Amiga computer (1985-1994) had a special screen mode called "Extra Halfbrite", where you could have a 64 colour palette instead of the Amiga's usual 32 colour mode, but only on condition that the second 32 colours were half brightness versions of the first 32, like in your naïve shading method using black. Though you could still use hue shifts within the first 32 colours and have like lit areas, partial shadows and then finally use the auto-generated colours for the deep dark shadows. The Amiga also had hold and modify mode (HAM), where you could have 4096 colours on screen at once yet the palette only contained 16 colours. The nifty part was that as an alternative to setting a pixel to one of the 16 colours you could also express the colour as being like the pixel to the left of it but with a different amount of red (or a different amount of green or blue, but only one colour channel could be changed per pixel). The Sega Mega Drive / Genesis had a mode where it could automatically produce a highlighted or shadowed version of a tile using your naïve shading process. And the Acorn Archimedes had modes that would generate a 256 colour palette from 64 chosen colours. I'm fascinated by the skill of producing more colours from few on retro computers and consoles or art inspired by them. Once you factor in dithering, temporal dithering (switching between 2 palettes on alternate frames), colour cycling animations using just one frame of memory (changing the palette instead), switching to a new palette partway down the screen, or changing one or a few colours on every scanline, then palette design gets really interesting.

[@BeingFriends]

Love this, makes me so excited

[@limpfall13]

This might be usefull for the pixel art iv been messing with. Mostly taking one single retro charecter sprite from a favorite retro series. Simplifying it to library and making it only 2 colors using that line work and tweaking it a bit. I did make something I was happy with I wonder how well his shifting will alter it.

[@MQRuffin]

Thank you, Brandon!! Your videos are a real inspiration and informative. You're the best! :-)

[@BJGpixel]

Hey thanks for watching, glad you like 'em! :D

[@lwilso9152]

This is why Wes Anderson color palettes are so lovely

That was so awesome, really easy to follow, thanks for the info, i'll try it on my next piece

[@EternalFlame1337]

Wow I started watching your channel I've only seen a few but they have been amazing keep doing whatcha doin!

[@Flux_One]

Absolutely brilliant tutorial

[@GordonZuchholdArt]

Very cool tutorial! Thank you very much. I always have problems with colors.

[@legendguitargamer]

This tutorial is just incredible!

[@bodilliam3769]

wow, this is incredible. Super awesome tutorial. 10/10

[@hasgames3231]

A minute in and my mind is already blown

[@CanEmile_]

Im mind blowed at every of your videos! The montage is amazing, the information is easy to process, i love you :o

[@Arnoldius]

Thank you so much for this great tutorial! 🙏🏻

[@haphungthu814]

Thanks for the great tutorial. At 6:22 How can you find the color that is half way in between two original colors?

[@Disc147]

Sunlight is blue on earth, you only experience it as golden or yellowed for about 2 hours out of every day when the suns light is not directly above everything else is just how your eyes correct for light. This is also related to earth's ACP making distant objects look blue as non-blue light is more easily dispersed and blocked by the air we breathe. Obviously it's easy to short hand it to yellows and purples and it is reductive to worry about it in terms of realism and accuracy. But yeah, sunlight on Earth is blue.

[@Disc147]

That's why your pallete is so warm.

[@p0p525]

I already know all of this but I like watching it anyways Its just satisfying

[@PedArty-rz2cr]

Thank u so much for this tutorial, you make things pretty easy to understand. You are amazing

[@noopa5229]

This is concise and easy to understand. Thank you

[@iamblinkin]

This is a phenomenal video with great examples - thank you so much!

[@Sport_Universe_]

thank you for great teaching one of the most important part of pixel art, very well 👊