Bird Paletteperch
back

Bird Palette

I extracted colors from ten thousand bird photos. The pipeline took longer than the interface. Bird Palette is what came out: a searchable catalog of real plumage color, not generated guesses.

Nature already balances contrast and hue. This project makes those combinations easy to browse, filter, and copy.

10,000+
species in the catalog
~24
primary colors scanned per bird
3
ways to search or copy color

The problem

Color inspiration usually means generated palettes or mood boards. Beautiful, but invented. Birds already wear finished combinations under real light.

The gap was access. Those palettes lived in photos and field guides, not in a tool you could search and copy from.

How it started

On walks and in reference books, the same thought kept returning: nature is already beautiful, and birds especially so. Why not take inspiration from that directly?

Not another random generator. A catalog of combinations evolution already signed off on.

The product

Browse birds in a grid. Search by name, color, or hex. Open a species, study its palette bar, hover the photo to grab any color.

Bird Palette home grid with palette bars
Each card shows the bird, its name, and a proportional palette bar.
Search results filtered by orange
Search by name or color. Type orange and see every bird that wears it.
Bird detail with palette study and photo sampling
Open a bird for context, palette study, and sampling from the photo.

Key decisions

Four choices shaped the product.

  • Real plumage, not generated swatches

    Extract color from photos at build time. Every palette bar reflects what is on the bird.

  • One grid, not ten thousand pages

    Browse every species in one place. Detail opens in a modal. Shared links still land on the right bird.

  • Search fixed to the bottom

    The bar stays reachable on a long grid. Name, color family, and hex filter together.

  • Sample from the photograph

    Hover the image, read the pixel, copy the hex. Precision straight from the plumage.

How it works

Color is read from photos in two ways. One powers every card in the grid. The other lets you pick a single pixel on demand.

  • Before deploy

    Build-time extraction

    Each photo is scanned once. The palette bar on every card is the summary: main plumage hues and the share each one takes up.

  • In the browser

    Live photo sampling

    Hover any spot on the bird photo. The app reads that exact pixel and shows the hex. Click to copy a specific feather shade.

The build pipeline

How each palette bar is made before the site ships.

  1. 01

    Source photos

    One species photo each from BirdNET or iNaturalist.

  2. 02

    Remove the background

    An automatic cutout strips sky, branches, and blur so only the bird stays in the image.

  3. 03

    Scan every pixel

    The build walks the cutout pixel by pixel. Similar RGB values land in the same bucket. Each bucket gets a hex and a share: what percent of the bird that color covers.

  4. 04

    Shape the palette

    Close shades in the same family merge into one swatch. Tiny slivers drop off. The palette bar widths match those shares.

  5. 05

    Write static data

    Palettes, names, and a search index go into JSON files the site loads from the CDN.

  6. 06

    Ship

    Static export to Firebase Hosting. No server needed to browse.

Outcome

The library is live at birdpalette.web.app. Ten thousand species are browsable. The interface stayed quiet so the birds and their color stay central.

The harder win was the pipeline: turning messy nature photography into consistent, copy-ready color data at scale.

Stack

  • ChatGPT· Ideas & copy
  • Cursor· Build & ship
  • A brain· Taste & decisions

Questions or feedback: heymachineni@gmail.com

Open Bird PaletteWhy I built this