🎨 SwatchesGenerator – Build Smarter, More Accessible Color Themes

SwatchesGenerator is an experimental theming tool built with Next.js, Tailwind CSS, and Chroma.js, designed to help teams create perceptually uniform, accessible color palettes from a single hue input.

Originally developed as part of a smarter theming system initiative in a Appcues hackathon, the tool explores how modern color spaces like OKLCH and LAB can improve contrast consistency, accessibility, and brand alignment across UI components.

✨ Features

• Contrast-aware palette generation using oklch() notation and perceptual color spaces
• Dynamic CSS token output (via JS) to streamline theme creation
• Chroma.js fallback for CSS compatibility across all browsers
• Real-time hue input with shade generation across a luminance range
• Future extensibility for density, border radius, and more design tokens

💡 Why This Exists

Traditional HSL-based theming systems often fail to provide consistent visual contrast across hues. This tool was born from the need to:

• Create accessible and consistent themes from minimal input
• Improve speed and flexibility for non-technical users
• Prototype and validate ideas for future theming systems at scale

Tech Stack

• Next.js
• Tailwind CSS
• TypeScript
• Chroma.js for color calculations

🌐 Live Demo

https://swatches-generator.vercel.app

Further Reading & Tools

• OKLCH Color Picker
• Chroma.js
• color.js
• MDN on oklch()
• Oklab Critique by Raph Levien
• WCAG Guidelines

🚀 How to Run Locally

1. Clone the repository:

   git clone https://github.com/TheAleSch/SwatchesGenerator.git
   cd SwatchesGenerator
   npm install
   npm run dev
   

This project is both a working prototype and a color theming playground. Fork it, experiment, and help design a more accessible web.