Palettes and colour in LibreSprite

#The colour bar: palette, foreground and background

Everything colour-related sits in the column on the left of the window:

• Four buttons across the top: Edit Color (opens the Palette Editor, F4), Sort & Gradients, Presets and Options.
• The palette grid. Left-click a swatch to make it the foreground colour; right-click to make it the background colour.
• The colour selector below it: Tint/Shade/Tone by default. Options switches it to Color Spectrum, RGB Color Wheel or RYB Color Wheel.
• Foreground (top) and background (bottom) colour boxes with their hex values. A red ! next to one means that colour is not in the palette; click it to add it.

#Load one of the 38 built-in palettes

The Presets button opens Available Palettes: every palette in LibreSprite’s data/palettes folder, alphabetically, with a strip of its colours. Select one and press Load. Palettes you add yourself are listed after the built-in ones (see importing).

A few of the built-in palettes, drawn from the files in LibreSprite 1.3:

• pico-8.gpl16 colours
• db16.gpl16 colours
• db32.gpl32 colours
• aap-64.gpl64 colours
• arne16.gpl16 colours
• nes.gpl56 colours
• gameboy.gpl4 colours
• commodore64.gpl16 colours
• cga.gpl16 colours
• zx-spectrum.gpl16 colours
• solarized.gpl16 colours
• monokai.gpl12 colours

All 38, with download links and hex values, are in our palette browser. Load Default Palette (in Options) brings back the 32-colour palette new sprites start with.

#Import a palette from Lospec, GIMP or elsewhere

We made one 16-colour palette (Sweetie 16) in every format Lospec offers and loaded each into LibreSprite 1.3:

Any image LibreSprite can open also works as a palette source (it uses the image’s colours), and so does an Animator Pro .col file.

1. Load it once, for this sprite

   Options → Load Palette → choose the file. The colour bar changes at once; save the sprite to keep the palette with it.

2. Or install it, so it is always in Presets

   Click Presets → Open Folder. This opens your user palettes folder (~/.config/libresprite/palettes/ on Linux, %AppData%\LibreSprite\palettes\ on Windows, ~/Library/Application Support/LibreSprite/palettes/ on macOS). Copy the .gpl, .pal or .png file into it.

3. Restart LibreSprite

   The Presets list is read when the app starts. Our copied file only appeared after a restart.

#Save and share a palette

Options → Save Palette, then pick the format by typing the extension. What LibreSprite wrote when we saved our demo sprite’s 9 colours:

Save as Default Palette makes the current palette the one every new sprite starts with. It is stored as default.ase in the user palettes folder, so deleting that file brings back the original default.

#Edit colours with the Palette Editor

Select a swatch and press F4 (or the Edit Color button). The editor docks at the bottom of the window:

• RGB or HSB sliders, plus A (alpha), each with a number box.
• A hex field: type ef7d57 to set the colour exactly.
• Abs / Rel. In Abs mode the sliders set values. In Rel mode they add to each selected colour’s values, which is how you shift several colours at once.

Editing a palette entry changes every pixel that uses it only in an indexed sprite. In an RGB sprite the pixels keep their old colour, and the edited swatch simply becomes a new colour to paint with.

#Add, remove, move and sort colours

• Select several entries: click the first, Shift-click the last.
• Add a colour: set it as foreground (from the colour selector, the hex box or the eyedropper) and click the red ! next to it. It is added at the end of the palette.
• Move colours: drag the outline of the selected entries to a new position. Hold Ctrl or Alt while dropping to copy instead of move.
• Remove colours / change the count: drag the small handle after the last swatch, or use Options → Palette Size. Shrinking removes entries from the end, so move the colours you want to drop to the end first.
• Swatch size: Options → Small, Medium or Large Size.

The Sort & Gradients button works on the selected entries:

In an indexed sprite, moving or sorting entries changes which colour each pixel points to. A Remap button appears under the palette after such a change; press it to keep the picture looking the same with the new order.

#Make a palette from your sprite

Options → Create Palette from Current Sprite collects the colours the sprite actually uses. The dialog offers:

• Create new palette with N colors or less (256 by default). LibreSprite reduces the colours if the sprite has more.
• Replace current palette, or Replace current range (only the selected entries).
• Create entries with alpha component, for semi-transparent colours.

Handy after painting freely in RGB: build the palette, then save it or convert the sprite to indexed.

#Replace a colour across the sprite

Edit → Replace Color… (Shift+R) swaps one colour for another. Set From and To (they start as your foreground and background colours) and a Tolerance (0–255; 0 replaces only the exact colour, higher values also catch similar shades).

By default it changes only the active cel: the current layer in the current frame. The button next to the channel buttons cycles through all frames in the active layer, all layers in the active frame and all cels in the sprite. Its tooltip tells you which is set. With a selection active, only the selected area changes.

#Hue, saturation and brightness: what 1.3 has

LibreSprite 1.3 has no Hue/Saturation dialog (Aseprite added one after the fork). These do the same jobs:

#Change the background colour

“Background colour” can mean three different things in LibreSprite:

1. The sprite’s background when you create it. The New Sprite dialog (Ctrl+N) offers Transparent, White or Black. White and Black create an opaque Background layer. For a transparent image, pick Transparent or use Layer → Layer from Background. More in transparent backgrounds.
2. The background colour box under the palette. It is what the eraser paints on a Background layer. Right-click a swatch to set it, or press X to swap it with the foreground.
3. The grey checkerboard that shows transparency. Edit → Preferences (Ctrl+K) → Grid & Background → Checked Background sets its size and its two colours. It never appears in exports.

#RGB, grayscale and indexed colour modes

Every sprite has one colour mode, chosen in the New Sprite dialog and changed later with Sprite → Color Mode:

The menu offers Indexed (No Dithering) and Indexed (Ordered Dither). Both map every pixel to the nearest colour in the current palette, so load the palette you want before converting. We converted a smooth-shaded ball (48 × 48, drawn in RGB) with LibreSprite 1.3 itself:

Notice that the conversion uses only the palette colours closest to the image: the ball used 5 of PICO-8’s 16 colours without dithering and 8 with it, and only 2 of the Game Boy’s 4 greens. For a better result, pick or build a palette that matches the image’s range first (Create Palette from Current Sprite).

Transparency in indexed mode: one palette entry acts as transparent (entry 0 by default). Change it in Sprite → Properties (Ctrl+P) → Transparent Color. That setting only exists for indexed sprites.

#Dithering

LibreSprite 1.3 dithers in one place: converting to indexed with Indexed (Ordered Dither), which uses a regular dot pattern (see the images above). There is no dithering brush or dither ink. To dither by hand, draw a checkerboard with the Pencil and pixel-perfect mode on, or make a small checkerboard pattern into a custom brush (Edit → New Brush). Our gradients and dithering guide walks through both.

#The Shading ink

Shading is an ink, not a separate tool: choose it from the ink menu in the tool options bar while using the Pencil (or another painting tool). Each stroke moves a pixel one step along a colour ramp instead of painting a fixed colour.

1. Pick the ramp

   In the palette, click the darkest colour of a ramp and Shift-click the lightest, so the colours are next to each other from dark to light. The tool options bar shows the ramp as the current shade.

2. Set Shading ink

   Pencil (B), then choose Shading in the ink menu.

3. Paint

   The left button moves each pixel one colour towards the first colour of the ramp (darker, with a dark-to-light ramp). The right button moves it towards the last colour (lighter). Go over an area again to step it further.

Rules we confirmed in the source: only pixels that exactly match a palette colour change, so anti-aliased or off-palette pixels are left alone. With fewer than two colours selected, the whole palette is the ramp, in palette order. The shade menu in the tool options bar can Reverse Shade (swap what each mouse button does) and Save Shade for later.

#FAQ

Found something wrong or out of date? Tell us: hello@libresprite.dev. We fix mistakes within a day.