Jump to content
  • Advertisement
  • 09/10/18 01:36 AM

    Color Palettes

    Visual Arts

    gdarchive

    Intro

    Due to my belief in learning through self-discovery and my ongoing creative evolution, I've long put off doing any tutorials. However, after making pixel art for over 3 years I've established many solid techniques worth laying out in a concrete fashion. While I'm excited by the prospect of helping others with my experience, I still urge artists to explore things their own way. The wonderful thing about art is the unlimited number of solutions to a problem. I offer you solutions that have worked for me and I hope they work for you, but I will be even more thrilled if you discover a better solution along the way.

    Mondo_Intro.png

     

    When it comes to pixel art, it all starts with a good color palette. Creating a custom color palette can be a very satisfying and powerful way to establish your own unique look. I'll guide you through my method as I create a new palette. But first, let's go over some basic principals.

     

    It's all about HSB

    I find it easiest to understand and control color through HSB.

    Hue - The actual color (0 - 360º)
    Saturation - The intensity or purity of a color (0 - 100%)
    Brightness - The amount of black or white mixed with a color (0 - 100%)

    By understanding and adjusting these 3 fundamental properties you can create custom colors with precise control. I recommend this article by Steven Bradley for more detailed definitions of HSB.

     

    Color Ramps

    A color ramp is a specific range of colors that work well together, arranged according to brightness. Here is an example of what I consider a good color ramp. 

    Color_Ramp_Red.png

     

    Brightness steadily increases from left to right in this example. As the colors reach high brightness levels it's important to decrease saturation, or you'll end up with intense eye burning colors. Also, colors with very low brightness can become overly rich and weighty with high saturation. Saturation peaks in the middle swatch in this example.  

    A good color ramp should also apply hue-shifting, which is a transition in hue across the color ramp. In the previous example the hue is shifting by positive degrees as the brightness increases. 

    Many beginners overlook hue-shifting and end up with 'straight ramps' that only transition brightness and saturation. There is no law that says you can't do this but the resulting colors will lack interest and be difficult to harmonize with ramps of a different hue. This only makes sense to me if you want a monochromatic look and stick to one straight ramp.

     

    The Palette

    A color ramp is essentially a palette, but most palettes contain multiple ramps. I like to create large palettes with lots of ramps, which I can then pull smaller palettes from per assignment. 

    Mondo  - 128 colors

    Mondo_Intro.png

    Become a Pixel Insider member and download Mondo

     

    I took the opportunity to make a brand new palette for this tutorial. My intention was to create a general purpose palette that strikes a balance between vibrant colors and desaturated natural colors. So, how to make such a large palette?

    First I decide how many swatches I want per ramp and how many degrees of hue shift. For this palette I want 9 swatches per ramp with 20 degrees of positive hue shift between each swatch. I like a lot of hue shift because it creates harmony between ramps and just looks neat, but 20 is about as high as I go.

    Color_Picker.png

    The color picker panel in Photoshop. We only need to be concerned with adjusting HSB.

     

    I use Photoshop, but a similar color picker panel should be accessible in just about any graphics software. To start I pick a color that will fit right in the the middle of a ramp. The hue is somewhat arbitrary, but the saturation and brightness is critical. I want the middle color to be be the most vibrant so I set the saturation and hue to the max combined number I'm willing to go.

    Palette_Scales_1-02.png

     

    After I've chosen my first color I can set the hue for the remaining swatches based on the positive 20 degree shift I wanted. I could reverse the direction of hue shift if I want but positive hue shift usually results in more natural colors, warming as they become brighter. 

    I still need to sort out the increments for S&B. Unlike hue, shifting the S&B in uniform increments doesn't necessarily produce satisfactory results. However, there are a few tendencies I follow. Brightness consistently increases from left to right and usually never starts at 0, unless I want black. Saturation peaks around the middle and never fully goes to 100, or 0. The goal in mind is to create even contrast between each color.

    Palette_Scales_2-02.png

     

    After some tuning and eyeballing these are my final values and resulting color ramp. The hue shift looks pretty strong but it will make sense when I add more ramps.

    Palette_Scales_3-03.png

     

    This version shows the difference in the increments. Pay attention to what the S&B are doing. You can see there is some consistency in the pattern. The saturation takes larger steps on the ends and smaller steps in the middle where it's the highest percentage. The brightness takes smaller steps as it gets closer to the end at full 100%.

    Palette_Graphs_3-05.png

     

    Here's another visualization that clearly shows the flow of S&B as line graphs. You don't have to follow this general flow of S&B. It just depends what look you're going for. I've made ramps where the saturation continues to climb as the brightness decreases, creating an X pattern. This results in vivid dark colors. The biggest mistake is combining high saturation and brightness, unless you want to burn some eyeballs. I recommend a lot of experimentation with the HSB values of your ramp. I've tried to come up with mathematically precise formulas but it always seems to come down to trusting the eyeballs to some extent.  

    Now let's finish the palette.

    Step_1.jpg

     

    Up to this point all I have been doing is picking colors and drawing them as single pixel dots on a tiny canvas. I haven't actually added any swatches into the swatch panel. With the first ramp established all I have to do to create more ramps for my palette is shift the entire set of hues.

     

    Step_3.png

     

    I want 8 ramps total so I will shift the hues of each ramp by 45 degrees to complete the 360 degree cycle around the color wheel. I could do this in the color picker by adjusting the H value one color at a time, but In Photoshop I can save a lot of time by duplicating the ramp and changing the hue of the entire selection (Image-Adjustments-hue/saturation, or ⌘+U).

    Step_4.png

     

    After adjusting the hue of all my color ramps my palette appears like this. It looks pretty nice but It's lacking more neutral desaturated colors.

    Step_5.png

     

    To add desaturated colors I duplicate the whole middle section of the palette, omitting only the darkest and lightest colors on the ends, flip it over and desaturate them with the Hue/Saturation panel. I omit the light and dark columns because they appear nearly the same as the originals. I flip the colors because it makes for easy navigation, and it looks cool. The desaturated colors can provide a more natural look, and work well as grays in combination with the vibrant colors.

    Color_Picker_Highlight.png

     

    The final task is actually adding the colors into the swatch panel. With the color picker panel open I sample each color with the eyedropper and click the 'Add to Swatches' button. I add them from left to right, top to bottom so they will appear in the swatch panel in the correct order. This is quite tedious but the only way I know of to add the colors in the particular order I want. 

    Step_6.png

     

    Once I've added all the colors into the swatch panel I click on the panel options and make sure to save my palette. I can then easily load the palette as a .aco file into the swatch panel anytime. Also, by selecting 'Save Swatches for Exchange' you can create a .ase file, which can be loaded into several other Adobe programs. Save the image of your palette as a .png file and you can load it into Aseprite.   

    Well, that completes my 128 color palette - Mondo. Now let's look at how I use the palette with some examples. 

     

    Picking Colors

    Promo_Image_1-4.png

     

    This example keeps it pretty simple, mostly relying on horizontal ramps of adjacent colors. You can also see how the warm desaturated colors work nicely with the vivid hues. I've added white into palette for extra contrast. 

     

    Promo_Image_1-1.png

     

    This example shows how ramps can move horizontally and diagonally. Because of the hue shift every color is surrounded by colors that can work together.

     

    Promo_Image_1_2.png

     

    Harmony is everywhere, just pick and play!

     

    Promo_Image_1-3.png

     

    This example uses complimentary color in combination with neutrals. The result captures an ominous yet hopeful feeling that perfectly fits the mood I wanted. 

    Picking colors for your art always requires some good sense, but a versatile palette with criss-crossing ramps like this makes it much easier. A little color goes a long way with pixel art, as you can see I never use a lot of colors for any one image.

    Creating a palette with this method also works great for game art, and will ensure everything in your game has consistent colors. I used this method to create a 160 color palette for Thyrian Defenders. We've been able to depict an incredible range of environments and characters while maintaining a consistent look overall. Other aesthetic choices come into play, but color is the fundamental ingredient that ties everything together.  

     

    Final Word

    Overall I'm quite happy with how this palette turned out. I think you'll be seeing more of my work in the Mondo palette from now on!

    I hope this helps you come up with some palettes of your own. I know It can take a bit of time to get a feel for HSB, but even if you're a beginner I think making palettes like this is a great way to understand color. Go crazy with HSB and don't be afraid to experiment with formulas that look different than my example. Also, you don't have to make such a large palette. Start with trying to make a small ramp.

     

    About The Author

    Raymond Schlitter (Slynyrd) is a former graphic designer who turned his creative passion to pixel art and game design in early 2015. Now he shares his knowledge with tutorials while he continues to make fantastic art and work on games. Support him on Patreon and get the inside scoop on his latest work.

     

    Note: This post was originally published on Raymond's blog, and is reproduced here with kind permission from the author.  If you enjoyed this article please consider supporting Raymond on Patreon, where he provides backers with exclusive downloads such the Mondo palette as .aco, .ase, and .png files. Get Mondo!  You can also make a one time donation to the author if you prefer not to subscribe on Patreon.

    [Wayback Machine Archive]



      Report Article


    User Feedback


    Great guide!

    I want to share this web page in case you didn't know it: https://encycolorpedia.com/

    Is a great web page with a big amount of info about a single color. One of then are "Color Schemes" it can help building a color palette too.

    And you can download the color scheme.

    Example of #2bb3b3:1603212950_Screenshot_2018-10-042bb3b3HexColorCodeSchemesandPaints.png.919f93693391359b36190c106906df96.png

    Share this comment


    Link to comment
    Share on other sites


    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

  • Advertisement
  • Advertisement
  • Latest Featured Articles

  • Featured Blogs

  • Advertisement
  • Popular Now

  • Similar Content

    • By Wolfebytes
      I am currently an undergrad several months from graduation. My major is in Game Programming and Development. During the course of my studies, we've had a few modeling classes and I really took to it and feel that is the direction I really want to go, specifically I would love to become a character artist. I keep hearing about your portfolio being super important, but I've really never been able to find out what kind of work is best to put into my portfolio. There's no "put 2 of these and 1 of those in," kind of tips. I get that I'll want to put some characters I've modeled in there, but I guess what I really want to know is, if I want my portfolio to be noticed and taken seriously for a character artist position, what is the best way to present it? Since most of my courses have dealt more with programming, I need to build everything for my modeling portfolio on the side, outside of class on my own time. I know there are no specific numbers like: put 3 realistic humans, 2 robots, a creature, and a stylistic character in your portfolio. But as a general rule is there some kind basic guideline or tips for what to make to get your portfolio off to a good start?
    • By Programmer One
      I'm currently writing a 2D game engine from scratch for Android. The first iteration of the engine is just going to use the Android Canvas view for drawing. At some point, I want to support OpenGL ES - but not until I finish this first project (which is a very simply game based on this engine). Right now, I'm dealing with Sprites and I've encountered a design challenge that I'm not entirely sure which direction I should go.
      For the sprite bitmaps, I've decided to go down the sprite atlas route (as opposed to individual image files). I'm using Texture Packer and I've written a custom JSON exporter. I didn't really want to limit myself too much, so I decided I'd support sprite rotation and trimming in order to save as much space I can in the atlas. I backed off from supporting polygon trimming for now. If you're unfamiliar with Texture Packer, it's essentially a tool that will allow you to import individual sprite frames, organize them into folders and then have the application generate a sprite map and corresponding coordinate data file. This application supports trimming any blank (alpha) space around the sprite images in order to pack them closer together. It also supports rotation if it makes the image fit better.
      What I'm trying to figure out now is how to deal with loading the sprite image data. Currently, I'm at the point where I can deserialize the JSON map data into "Sprite Frame" objects. These objects contain information about each frame. My format allows grouping of sprite frames in order to organize frames that correspond to the same animation. In essence, the sprite frame object has:
      The original (untrimmed) size of the sprite image. The original position of the sprite image within it's bounding box. The rect of where the image is in the sprite atlas. A flag indicating if it had been trimmed. A flag indicating if it has been rotated (CW). This will give me all the information I need to draw the image onto the Canvas. If I didn't support all the other fancy features I want (packed rotation, trimming) and pre-transformation (i.e. mirroring a sprite so I can reuse it for things like changing the walking animation without having to pack in more sprites), then drawing the image from the sprite atlas onto the canvas would be as simple as a simple Canvas.drawBitmap([Source Bitmap], [Destination Rect], [Source Rect]).
      But, since the image I'd be drawing MIGHT have been rotated, trimmed or otherwise transformed, I can't just simply blit it onto the Canvas. I'd first would need to apply some transformations in order to "undo" changes that were done during packing. This means I would need to either:
      Slice out the child image from the sprite atlas into a new bitmap, and apply the "unpacking" transformations (i.e. rotate back, realign, etc). Apply a transformation to the Canvas itself. (I don't think I want to go down this road since I've read that transforming the Canvas tends to be rather slow). So, I'm probably left with having to create smaller bitmaps from the sprite atlas and then keep those in memory for as long as I would need them. So, for a single sprite character, I'd be looking at around 36 sprite frames (9 different animations, each with 4 frames). What I'm concerned about is memory consumption. So now I'm thinking:
      I should read in all the sprite bitmaps from the sprite atlas and shove them into an LRU cache. This means all the sprite image data is now in memory, all ready to go for whatever animation sequence and frame I want. Once I'm done with the atlas, I dispose of it and just work with what I have in memory. I can perform this caching when I load levels and then clear items from the cache that I no longer need. I should just keep the sprite atlas, blit directly from that onto the canvas, and get rid of the fancy packing features so that I don't have to process any transformations. The only problem with this approach is that I will also have to shelve shearing and rotation on the sprite object itself. TL;DR: Am I being overly memory conscientious or having a couple frames of sprite data in memory not a super big deal?
       
    • By JoAndRoPo
      Hi!
      Is there by any chance you can give me an idea/concept that's different but related to the game Tower of London? (Is it called Tower of London?)
      Can you show me some reference images, games or videos related to the same?
      I've attached a reference image.
      Thanks!

    • By Esteban5XG
      Hi everybody,
      So, me and my colleagues are now joining Unity Game Jam. It's gonna be two weeks and we are trying to make a Third Person Shooter with RPG and RTT mechanics video game. We've started yesterday with the main concept and this is what we have:
       
      Game Storyline
      Nobody could imagine the falling of the whole world until the deaths woke up. That nonliving ones became something we cannot consider as human being. They change into a new creature, stronger, more frightening, and almost unbeatable. Society broke in pieces and the few ones alive had to survive at any cost.
      As the Major of a ranger platoon you have found an abandoned Military Outpost crowded of helpless people closer to one of the coldest parts in the world. You must keep them in safe until the reinforcements arrive.
      There’s only one way to kill the damn zombies: the BlockchainZ Ammo.
      Search for the BlockchainZ Ammo and destroy the hordes of zombies, but beware of the raiders: they will take your BlockchainZ Ammo whatever it takes.
      Right now the Raiders have all the BlockchainZ ammo, you must fight them and spoil it, but be on guard, they will counterattack.
      Remember, the survival of the people depends on you. Don’t let them down!
       
      Gameflow.
      Once you start playing Project BlockchainZ, you must defend the bunker against the hordes of zombies and raiders on a fixed map where you'll fight with your troops and traps.
      The bunker is basically the main area where you'll not only have to keep the people within alive, but also yourself during the reinforcements arrive.
      The zombies are extremely resistant, so you will need a type of ammo called BlockchainZ, which contains a very strong poison that acts directly against the brain traveling through the body.
      The BlockchainZ Ammo is hidden in Raiders's Facility Bases and you must spoil it from them. The more  B-Z Ammo you spoil, the more Raiders will attack you, increasing the game difficulty level.
       
      Features.
      Third Person Shooter. Tactical map to manage your troops across the battle. Deploy defensive elements to direct the action where you want. Post apocalypse - scify style. RPG character development.  
      Right now, we've just opened our Project page in the forum. We only have two weeks to develope this idea. Our team is formed by two programmers, one game designer/ scriptwriter and one artist. So, we will update this thread to show you our improvements. Hope you like it. Any suggestions are always welcome. Thanks for all the support!
       

    • By jbadams
      Whilst a lot of people find programming to be a stimulating activity, for others, traditional programming can be very intimidating; needing to remember what seems like arcane symbology, and seemingly endless streams of specific keywords into an editor can be very off-putting.  As many of us know, this actually gets easier with practice and soon becomes a less daunting task, but fortunately for those who struggle, there are other options available.
      Many modern game engines offer different types of visual interface with which you can set up an environment and characters, and input the logic required to turn those pieces into a functioning game.  In this article, I aim to give a brief overview of some of the currently available options for creating games without traditional programming.  This list will not be exhaustive, but instead, aim to cover a few of the more popular and capable options, and I will leave it as an exercise for the reader to further research those options and choose what may be most suitable for their own goals.
      Features and prices listed are current at the time of writing in October 2018.  Many of the options presented offer free trials, which I would encourage you to try out before spending your hard earned money -- in the case that no trial is available I would suggest checking out some written and video tutorials of the software to see if it looks like something you could understand and work with, as well as some games made with the software to see if it may be able to create the types of games you have in mind.
      The first option I'm going to introduce is a simpler one suitable for introducing programming to younger would-be developers and is more limited in its capabilities, so if you're interested in more complex options please don't be put off and keep scrolling to the following items.  Below the list of options you'll find a few thoughts on visual systems.
       
      Scratch
      Scratch is a freely available programming environment created by the Lifelong Kindergarten Group at MIT Media Lab, and allows you to create games, interactive stories, and animations.  There is also an active online community of people sharing their creations and giving positive feedback.  Programming in Scratch is done by snapping building blocks together to input your logic, and although it's usable by people of all ages and abilities it's specially designed for younger learners ages 8 to 16.  Scratch works right in the web browser via the Flash plugin, so there are also no large downloads.  If you prefer working offline, there is also a downloadable version available.
       
      Honestly, you're not going to create a smash hit video game with Scratch, but it's the perfect introduction for a child with an interest and may be a valuable starting point for people who find other systems intimidating.  Working with the visual system in scratch will encourage logical, structured thinking that can be applied to more complex systems or even to traditional programming at a later stage, and although it's fairly basic children will be excited to see and play with their own creations.  You can view (and play with!) some projects created with Scratch in the Explore section of their community.  Note that while you can share and play your creations with the Scratch community, but won't be able to deploy to other platforms such as mobile, consoles, etc.
       
      Game Maker
      Game Maker is a popular option amongst hobbyist and indie developers and is able to create games for a wide variety of platforms including mobile and many of the consoles. The engine has only rudimentary 3d capabilities and is not intended for making 3d games, but is very capable when it comes to 2d.  A number of very successful games including Hyper Light Drifter, Hotline Miami, Risk of Rain, Nuclear Throne and more have been created with Game Maker.  Check out the Game Maker Showcase for examples of what the engine is capable of.
      Developers can use a simplified programming language called GML (Game Maker Language), or with a visual "drag and drop" system, and almost anything that can be done with GML can also be done with drag and drop -- albeit sometimes it might be a bit more clunky.  As a popular engine, you'll find plenty of tutorials (including lengthy series of officially provided video tutorials), sample projects, and people willing to help with learning and creating your projects.
      You can get started with an unlimited free trial, and publish to additional platforms with a yearly subscription starting from US$39/year for Windows, up to US$1500/year for all available platforms.
       
       
      Construct
      Construct is a browser-based game engine that allows you to create games with a visual editor - in fact, in this case, programming is not even an option.  Games are created by applying and configuring "behaviours", and by using a visual "event sheet" that runs commands in order, and you are able to create most types of 2d game.  Because the editor runs in a browser you can create your game from any platform with a suitable browser, including mobile -- although you'll find it awkward to work with on a smaller screen.  A downloadable version is also available, and many functions of the editor are able to work offline.

      Note that Construct is strictly a HTML5 engine, so exports for other platforms are provided via wrappers -- essentially packing your game up with a cut-down web browser to create an executable for the platform in question.  Their is an active community using the software, and plenty of tutorials and examples available to help you get started.  A free trial is available with some limitations, with full features available via subscription starting at US$99/year for a personal license or US$149/year for a business license (which you'll probably want if you're planning to monetize).
       
      Stencyl
      Stencyl is another visual editor aimed at creating 2d games, and able to publish to a range of platforms.  Stencyl's editor uses logic blocks similar to those available in Scratch, but also allows more advanced users to write some code if they wish to do so.  You can view some games created with Stencyl is the showcase.  Stencyl seems to have a slightly less active community than some other options, but there is some help available, and plenty of tutorials.  Some of the tutorials seem to be for previous versions of the software.

       
      Unity + PlayMaker
      Unity is an incredibly popular and very capable engine that can be used to create great games.  By itself, Unity doesn't provide visual scripting capabilities (programming is done with the C# programming language), but a third party add-on called PlayMaker comes to the rescue by adding a visual system and allowing developers to create games without writing code.  PlayMaker will currently set you back US$45.50 (or cheaper with a Unity Plus or Pro subscription).
      PlayMaker games are created with a flow-based system that involves toggling settings on nodes, which you connect in different orders to achieve the desired behaviour.  You will find PlayMaker more limiting than programming Unity with C#, but the experience you gain with the visual system may encourage you to try to C# and give you some fundamental logical thinking skills to build upon.
       
      Unreal BluePrints
      Unreal is another popular engine used by professional developers.  In this case, a visual system is built into the engine in the form of Blueprints, intended to allow non-coding designers to work with the engine and create interactive content.  You can get started using Unreal with no upfront cost, and pay just 5% of your game's earnings once you surpass a certain threshold.  Like many of the other options, there is an active community using Unreal, and plenty of tutorial content available, although most users do the majority of their Unreal development via C++ programming, with Blueprints used by non-coding team members.

       
      Are There Limitations?
      Honestly, yes.  Just as those using an engine might find themselves more limited than those developing their game "from scratch", you will often find that visual systems are more limited than traditional development.  Some things may be difficult or more time-consuming to implement in a visual editor, or if the creator hasn't exposed some data or a function you need your idea may be impossible.
      However, many find these options to be more approachable, and some very impressive and successful games have been created using them.  Just be sure to do your due diligence about any limitations you might face before spending money hoping to create your dream game.
       
      Other Options
      The above are just a few of the popular options that can allow you to create games without traditional programming, but there are other options available if you're willing to do some further research.  Some others you might wish to look in to include GameSalad, RPG Maker, Unity + uScript Professional, Buildbox (,I found this editor to be especially limiting), and more.  
       
      Why Do I Keep Calling It "Traditional Programming"?
      You may have noticed I keep saying "traditional programming" rather than just "programming".  Some people don't consider visual systems like those provided by the engines above to be programming, but I would disagree.  Wikipedia describes programming as:
      and goes on to say:
       
      I would argue that you are still doing the same task with a visual system, just via a different input method where you join blocks (or whatever the system in question provides) rather than typing special keywords.  Although some people find this type of visual programming less intimidating and easier to understand, you'll find that you're developing the same skills of logical thinking, planning out solutions, and finding (hopefully elegant) solutions.  After some time with visual systems, you may find the concepts used in traditional programming more familiar and approachable.
       
      Conclusion
      There are numerous options available to create games without traditional programming, and with the right selection you can likely find something capable of the type of games you wish to create.  Remember to research your options carefully, and don't be bothered by those who try to tell you it isn't "real game development".  I hope the above list helps to get you started with finding a suitable option for your project.
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!