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.
- What is the Color Bar?
- Using the Color Picker and Foreground/Background Colors
- Changing the Color Picker Type
- Using the Palette
- Loading, Saving, and Creating Palettes
- Color Modes
- Palette Sorting & Gradients
- FAQ/Troubleshooting
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.
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).
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).
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).
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.
To change the type of color picker, go to the Options
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
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.
To add a color to the palette, click the red icon
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.
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
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).
You can turn on Edit Color mode by pressing A, toggling the lock button
above the palette, or toggling the Edit Palette option in the Options
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.
To load a palette from a file, open the Options
menu and then click on Load Palette. To save a palette to a file, open the Options menu and then click on Load Palette.
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
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
menu and click on Save Palette as Preset. The saved filename will be the name of palette in the Presets menu.
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
and clicking Load Default Palette; you can set the default palette by going to Options and clicking Save Palette As Default.
You can create a palette from the current sprite's colors by going to the Options
menu and opening the New Palette from Sprite menu.
A sprite's color mode is how it represents and uses colors. There are three color modes in Aseprite: RGB, Indexed, and Grayscale.
The RGB color mode means that each pixel on the sprite maps directly to an RGB value.
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.
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.
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 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.
The Grayscale color mode means that each pixel is a grayscale value from 0 to 255. Useful for grayscale sprites.
The Sort & Gradients
button contains options for palette sorting and for creating gradients.
There are eight different sorting options in the Sort & Gradients
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.
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
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.
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.
Alternatively, loading palettes as a .gpl or .pal file will load them correctly without the need to change any settings.
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.
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
See the Changing the Color Picker Type section.
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.
See the Workspace Layout page.















