Treemap color palette generator

A color palette generator for your disk map.

Pick a hue and a color scheme and the sample treemap follows. When every label reads, download the file and drop it into SpaceSharp. Nothing is uploaded: the whole tool runs in this page.

Palette

Made for

Colors

Scheme

These decide all twelve folder colors at once. Moving one after you edited single colors below makes the twelve again.

Depth and files

Every color

Click a color to change it. Type the full hex or use the sliders.

Folders, by depth
File types
Color by
Preview on

Using your palette in SpaceSharp

  1. Download the palette file. It is a small .json named after your palette.
  2. Open your palettes folder. In SpaceSharp: Settings › Treemap › Custom palettes › Open folder. It is %LocalAppData%\SpaceSharp\palettes.
  3. Drop the file in and press Reload. The palette shows up in the picker's Custom tab, next to the built-in ones.
  4. Share it. Send the file, or copy a link to this page that opens with your colors in it.

What is a treemap color palette?

A treemap draws a disk as boxes inside boxes, each sized by the space it takes. Its palette is twelve folder colors, one per level of depth, cycled when a drive goes deeper. Files take their folder's color lifted toward white, and each file type has a color for the File type mode.

What does the contrast check look at?

Every name on the map is drawn near-black or near-white, whichever reads better on its box. The check wants a contrast of at least 4.5 to 1 on all twelve colors, the WCAG level for normal text, and no two colors so alike that neighboring levels blur together. Fix them moves the failing colors until they pass.

Is this the same as the palette editor in SpaceSharp?

Yes. The colors are generated the same way as in SpaceSharp's own palette editor, and the file is the one the app writes. This page just needs no install.

Is the palette generator free?

Yes. It is free to use with no account, and SpaceSharp itself is free and open source under the MIT license.

Can I use the colors outside SpaceSharp?

Yes. Copy the twelve hex codes and paste them into any tool that takes hex colors: another treemap, a chart library, a design file. Only the downloaded file is in SpaceSharp's own format.

Can I make a palette from a picture?

Yes. From a picture reads the dominant hues of any image and makes the twelve folder colors from them, at the lightness you have set. The picture is read in your browser and never uploaded.

Where does my palette go?

Nowhere. Your draft is kept in this browser so it is still here next time, and a shared link carries the colors in the address itself.

Five color schemes, one base hue

A treemap nests boxes inside boxes, so its palette has a job a chart palette does not: every level of depth must stand apart from the level around it. Each scheme spreads twelve colors from the hue you pick in a different way.

One hue

A monochromatic palette: one hue in twelve steps from dark to light. Calm, and depth reads as a ramp. Good when the map sits next to other colorful things.

Neighbors

An analogous palette: hues within a quarter turn of the base. Harmonious like One hue, with a little more to tell levels apart.

Two-tone

A complementary palette: the base hue and its opposite on the color wheel, alternating by level, so a folder always contrasts with what it holds.

Triad

A triadic palette: three hues a third of the wheel apart, cycling. Lively without being a rainbow.

Rainbow

Twelve hues around the whole wheel, ordered so neighbors in depth sit far apart. The most distinct levels, and the busiest map.