Quick Tip: Color Picker

Today I'm going to share a quick tip to help you select and match colors in your game.

I mentioned previously that I wanted to choose a cohesive color palette for my game, to make it look better and more polished.  I also talked about how I have to create some additional visual assets with the right colors.  Yesterday I worked on the message box backgrounds.

I wanted to make the message box background mostly tan, with a darker brown outline, to match with the bunny archer character.  To pick the right colors, I used a tool called a color picker.  It allows you to click part of your computer screen and get the color code for that part of the screen. 

If you're using the Firefox browser, open the developer tools menu.  You'll see an icon that looks like an eye dropper.  Click on that icon to select it, and you'll see a circle pop up, which should follow your mouse as you move it.  Move the circle to the area of the screen where you want to get the color, then click the screen.  The tool will copy the color code.  For example, in the screenshot below, I'm getting the brown off part of the bunny archer.

When you have the color code, you can then go to your art editor or whatever tool you're using, and paste the color code.  In the screenshot below, I go to my GDevelop image editor, and change the paint color to the code I copied with the color picker.  Now I can match the colors I need.

If you want to copy colors from an image you have saved on your computer, you can also upload the image to an online image editor in your Firefox browser (just do a search for online image editors), and then use the color picker.  Or, if you have MS Paint, Paint.net, or some other image editor installed, those usually have color picker tools, too.  You can check the links on this page for more information.