How to Use Pigment by ShapeFactory to Create a Color Palette

Updated

Pigment by ShapeFactory is a free browser-based color palette generator that produces palettes based on lighting and pigment rather than pure math. To use it, open the site, adjust the lighting control, and browse the generated swatches until you find a palette that fits your project. Each color is shown with its hex code, which you can copy into any design or development tool. No account or download is required to generate and read palettes.

What Pigment Does Differently

Most palette generators work by rotating hues on a color wheel or applying fixed harmony rules. Pigment instead simulates how pigment behaves under different lighting conditions. The result is palettes that tend to look more natural and less mechanically balanced — colors shift in saturation and warmth the way real pigments do under changing light.

The site's own description frames this as "a unique way to generate fresh and vibrant colors based on lighting and pigment, instead of math."

Step-by-Step: Generating a Palette

1. Open the site

Go to pigment.shapefactory.co in any modern browser. The generator loads immediately with a default palette and a lighting control.

2. Adjust the lighting

The core interaction is the Lighting control. Moving it changes the light condition applied to the pigment, which shifts every color in the palette at once. This is the main lever for steering the mood of a palette — warmer, cooler, brighter, or more muted.

3. Browse or refresh palettes

If the current palette doesn't fit, generate a new one and repeat the lighting adjustment. Each palette presents a set of swatches, and the lighting control lets you re-tune any palette you land on rather than starting over.

4. Read the hex codes

Every swatch displays its hex value (for example, #702824, #F6D253, #0DEFE2). These are the values you'll copy — they're what make the palette usable outside the site.

5. Copy into your tools

Take the hex codes into whichever tool you're working in:

Tool Where the hex goes
Figma / Sketch Fill or style color field
CSS color, background-color, or a custom property
Tailwind config theme.colors entries
Photoshop / Illustrator Color picker hex input

What You Get

A generated palette is a set of swatches, each with a hex code. The palettes in the source material range widely — from warm earth tones like #E2A68D and #C4AC7A to saturated accents like #0DEFE2 and #FF2A59 to deep darks like #111518 and #330408. That spread is the point: the lighting model produces both muted and vivid results from the same control.

Common Snags

  • Palette feels off after copying. Hex codes are exact, but a palette designed under one lighting condition may look different against your actual background. Test the swatches in context before committing.
  • Too many colors to choose from. Don't use every swatch. Pick two or three as primaries and treat the rest as accents or neutrals.
  • Lighting control feels subtle. Small moves can shift the whole palette. Adjust in small increments and compare rather than jumping to the extremes.

When to Use It

Pigment is a good fit when you want a palette that feels organic rather than mathematically balanced — branding, illustration, or UI work where you want colors that sit together naturally. If you need strict accessibility contrast ratios or a palette built to a specific harmony rule, you'll still want to verify contrast separately after generating.