https://github.com/agrawal-rohit/color-cruncher

Generate accessible UI color palettes from a single base color using nature-inspired algorithms.
https://github.com/agrawal-rohit/color-cruncher

color-palettes genetic-algorithm hill-climbing simulated-annealing ui-design

Last synced: 15 days ago
JSON representation

Generate accessible UI color palettes from a single base color using nature-inspired algorithms.

• Host: GitHub
• URL: https://github.com/agrawal-rohit/color-cruncher
• Owner: agrawal-rohit
• License: mit
• Created: 2024-01-30T10:45:03.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-09-02T09:57:11.000Z (about 1 month ago)
• Last Synced: 2025-09-17T22:11:05.134Z (20 days ago)
• Topics: color-palettes, genetic-algorithm, hill-climbing, simulated-annealing, ui-design
• Language: TypeScript
• Homepage: https://color-cruncher.rohit.build
• Size: 5.63 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          


  

## Color Cruncher


[Installation](#installation) • [Demo](https://color-cruncher.rohit.build) • [Algorithms](#algorithms) • [Contributing](#contributing) • [License](#license)




![Demo](https://cdn.rohit.build/github-gifs%3Acolor-cruncher.gif)



**Color Cruncher** is a small experiment that asks:  

what if we let nature-inspired algorithms pick our UI color palettes?

You give it a base color → it crunches numbers, mutates a few generations, and spits out a palette that’s aesthetically pleasing and optimised for accessibility checks.  

No more _“does this shade of blue look good with off-white #fefefe?”_ debates.

## Introduction

Choosing colors for an interface is weirdly hard. Designers think in vibes, developers think in hex codes, and accessibility standards hover over everyone’s shoulders.

This project tries to bridge that gap. Instead of eyeballing palettes, **algorithms explore the search space for you**. The result is a palette that’s not only aesthetic but also WCAG-compliant.

- Start with a single **primary color**

- Generate five supporting colors (accent, background, surface, button text, main text)

- All palettes checked against [WCAG 2.0](https://www.w3.org/WAI/standards-guidelines/wcag/) for contrast ratios

- Uses **Hill Climbing**, **Simulated Annealing**, and **Genetic Algorithms** under the hood

## Algorithms

The fun part. Instead of a fixed formula, palettes are discovered through optimization techniques that mimic natural processes:

- **Hill Climbing** – keep tweaking until it stops getting better

- **Simulated Annealing** – sometimes accept worse choices to avoid local minima

- **Genetic Algorithm** – evolve a population of palettes with crossover + mutation

At the center is an **objective function** that scores palettes based on:

- Contrast between text and background

- Harmony between primary and accent colors

- WCAG AA+ compliance

Basically: if a palette looks nice but fails accessibility, it gets thrown out.

## Installation

Clone the repo and install dependencies _(ensure you use [Yarn](https://yarnpkg.com/) as your package manager)_:

```bash

git clone https://github.com/agrawal-rohit/color-cruncher

cd color-cruncher

yarn install

yarn start

```

## Contributing

Contributions are welcome. Please read the [contributing guide](CONTRIBUTING.md) for more information.

## License

[MIT License](LICENSE).