Skip to content

Latest commit

 

History

History
244 lines (147 loc) · 14.6 KB

File metadata and controls

244 lines (147 loc) · 14.6 KB

Article - The Color Bar and Palettes

This article will explain the color bar and palettes, covering everything from the very basics to more niche/advanced features, like sprite color modes and color wheel picker types.

A note to the reader: because GIFs have a limit of 256 colors, color pickers/gradients shown will look compressed.

Table of Contents

What is the Color Bar?

The color bar is where the palette, color picker, and foreground/background colors are located. By default, the color bar is located on the left side of the Aseprite window.

color bar location and elements

What are the foreground/background colors?

The foreground color is the main color you'll be using to draw with. The background color is more of a secondary color that you may or may not use depending on your workflow.

When using the color bar, Left Click is associated with the foreground color and Right Click is associated with the background color (e.g: left clicking selects the foreground color, rightclicking selects the background color).

What is the palette?

The palette is a list of colors (sometimes referred to as "palette entries") that you can use in your sprite. Colors can be added, changed, moved around, etc. You can use colors that aren't in the palette (unless your sprite is in Indexed mode, which will be talked about later).

While the palette does not have a limit of how many entries it can have, palettes with more than 256 entries will not load correctly (#3804).

What is the color picker?

The color picker (not to be confused with the eyedropper tool) is how you will create new colors to use in your sprite. By default, the color picker is set to "Color Tint/Shade/Tone" (HSV).

Using the Color Picker and Foreground/Background Colors

To pick the foreground color from the color picker, Left Click and drag. To pick the background color, Right Click and drag. You can also change the foreground/background color by clicking on the foreground/background color buttons below the color pickers to open up the sliders menu; dragging the sliders menu into the sprite editor will make it stay open after unfocusing.

color picking demo

Changing the Color Picker Type

To change the type of color picker, go to the Options options icon image menu above the palette. The color picker types are located in the fourth section. At the moment, there is only five options available:

  • Color Tint/Shade/Tone (HSV)
  • Color Spectrum (HSL)
  • RGB Color Wheel
  • RYB Color Wheel
  • Normal Map Color Wheel

color picker types demo

Color Wheel Harmonies and Discrete Mode

The color wheel types have a few extra options: color harmony modes and the Discrete mode toggle, which splits the color wheel into color sections. They can be acessed from the menu icon in the top righthand corner of the color picker.

The color harmony options allow for multiple colors to be picked in accordance with a harmonious color scheme. The options are:

  • Without Harmonies (Default)
  • Complementary
  • Monochromatic
  • Analogous
  • Split-Complementary
  • Triadic
  • Tetradic
  • Square

The colors that are picked are shown in the bottom right corner of the color wheel. Right or Left Clicking on one of the colors in the bottom right will change the foreground or background color to the clicked color.

color picker wheel harmony options demo

Using the Palette

To add a color to the palette, click the red icon red icon image next to the foreground or background color below the palette. If there isn't a red icon, that means the color has already been added to the palette.

Left Click a color to select it as the foreground color; Right Click a color to select it as the background color. To select multiple colors, Right or Left Click and drag. If a color has a black or white triangle in its top left corner, that means it is selected as the foreground color; if it has a smaller triangle in its bottom left corner, it is selected as the background color.

To move a color or multiple colors, Right or Left Click the yellow selection outline and drag.

changing the palette demo

To duplicate a color or multiple colors, Right or Left Click the yellow selection outline while holding Ctrl and drag.

To quickly move between palette colors, you can press [ to move back a color and ] to move forward a color.

You can change the size of the palette entries by going into the Options options icon image menu and selecting Small Size, Medium Size, or Large Size.

Clicking and dragging the two lines at the end of the palette can delete or add entries to the palette (the color of the added entries will be #000000).

Editing colors

You can turn on Edit Color mode by pressing A, toggling the lock button alt text above the palette, or toggling the Edit Palette option in the Options options icon image menu. When disabled (or "locked"), creating/picking a color will not affect the selected palette entry. When enabled (or "unlocked"), creating/picking a color will change the selected palette entry to the picked color.

edit color demo

Loading, Saving, and Creating Palettes

Loading and Saving with Files

To load a palette from a file, open the Options options icon image menu and then click on Load Palette. To save a palette to a file, open the Options menu and then click on Load Palette.

load palette demo

Loading and Saving with Presets

A preset is a palette that is saved in the Aseprite palettes folder or that is added to Aseprite with an extension. Presets can be searched for and loaded within Aseprite, without the need to load a palette from a file.

To load a preset, open the Presets presets icon image menu above the palette and search for the name of the palette you want to load, then click on the palette or press the Load button in the bottom left corner.

To save a preset, open the Options options icon image menu and click on Save Palette as Preset. The saved filename will be the name of palette in the Presets menu.

load preset demo

Loading and Saving the Default Palette

The default palette is the palette that will be loaded when you create a new sprite.

You can load the default palette by going to Options options icon image and clicking Load Default Palette; you can set the default palette by going to Options and clicking Save Palette As Default.

New Palette from Sprite

You can create a palette from the current sprite's colors by going to the Options options icon image menu and opening the New Palette from Sprite menu.

new palette from sprite demo

Color Modes

A sprite's color mode is how it represents and uses colors. There are three color modes in Aseprite: RGB, Indexed, and Grayscale.

RGB Color Mode

The RGB color mode means that each pixel on the sprite maps directly to an RGB value.

rgb color mode diagram

The RGB color mode is great for general use. When using the RGB color mode, you aren't constrained to the palette, so you can quickly create and draw with colors without needing to add them to the palette. You also don't need to use an index of your palette as a transparent color.

rgb color mode demo

Indexed Color Mode

The Indexed color mode means that each pixel is mapped to a palette index, and then that palette index maps to an RGB value. This means that if you change an index's color in the palette, the colors on the sprite with the index change too.

indexed color mode diagram

The Indexed color mode is best for sprites with a pre-defined palette. In Indexed mode, you are constrained to the colors in the palette, so you can't draw with a color that isn't in the palette without adding it to the palette first.

indexed color mode demo

Indexed mode also needs an index to be used as the transparent color, which is indicated by a dot in the color's center. By default, the first (0th) index is the transparent color, but it can be changed in the Sprite > Properties menu.

Grayscale Color Mode

The Grayscale color mode means that each pixel is a grayscale value from 0 to 255. Useful for grayscale sprites.

grayscale color mode diagram

Palette Sorting & Gradients

The Sort & Gradients sort & gradients icon image button contains options for palette sorting and for creating gradients.

Sorting

There are eight different sorting options in the Sort & Gradients sort & gradients icon image menu:

  • Sort by Hue
  • Sort by Saturation
  • Sort by Brightness (value)
  • Sort by Luminance
  • Sort by Red (sort by RGBA red component)
  • Sort by Green (sort by RGBA green component)
  • Sort by Blue (sort by RGBA blue component)
  • Sort by Alpha (sort by RGBA alpha component)

Below these are the Ascending and Descending toggle options, which sort them in ascending or descending order.

sort palette demo

Gradients

Aseprite allows you to create a gradient between two colors in the palette. You can do this by first making a selection from your start color to your end color. The colors between the two colors in the selection will be replaced by the gradient colors (so that means if you have three in between colors, your gradient will have five colors). After your colors are selected, open the Sort & Gradients sort & gradients icon image menu and select either Gradient, which makes a normal gradient between the two colors, or Gradient by Hue which makes a gradient that changes the hue more substantially.

gradient palette demo

FAQ/Troubleshooting

Why didn't my palette load in order?

If you loaded your palette as a .png file and the palette is out of order, the "RGB to palette index mapping" setting is likely the problem. In the Preferences menu, under "Experimental", setting the RGB to palette index mapping to Table RGB 5 bits + Alpha 3 bits will make the palette load correctly.

change palette mapping demo

Alternatively, loading palettes as a .gpl or .pal file will load them correctly without the need to change any settings.

Why can't I draw with colors not in the palette?

This is likely because your sprite color mode is set to Indexed, which doesn't allow you to draw with colors outside of the palette. You can fix it by setting your color mode to RGB with Sprite > Color Mode > RGB Color.

Why can't I draw with the first color in the palette?

Your sprite color mode is likely set to Indexed, which requires a palette index to be used as the transparent color; by default, this is the first color (0th index) in the palette.

You can fix it by doing one of the following:

  • Setting your color mode to RGB with Sprite > Color Mode > RGB Color
  • Changing the transparent color index in the Sprite > Properties menu
  • Making your first index a different color

How can I change the color picker type?

See the Changing the Color Picker Type section.

How can I access the color sliders menu?

You can access the sliders menu by clicking on the foreground/background color icons below the color picker; dragging the sliders menu into the sprite editor will make it stay open after unfocusing. See Using the Color Picker and Foreground/Background Colors for a demo.

How can I change the location of the color bar?

See the Workspace Layout page.