The idea was simple: enter one brand color, get a complete design system. Shade scales, harmonies, dark mode palettes, accessibility audits, export to CSS/Tailwind/SCSS. All from a single hex code. What made this project interesting was the color science behind it. Most tools just lighten and darken colors in HSL, which looks uneven to the human eye. I used LAB and LCH color spaces instead, so the shade steps actually feel perceptually uniform. Dark shades shift slightly toward blue the way natural shadows do. Light tints desaturate subtly. Small details, but they make the output feel considered rather than computed. React, TypeScript, Tailwind, Chroma.js for the color math, Framer Motion for the interactions. The UI adapts its own accent color to whatever you input, which was a fun detail to implement. Also spent time on accessibility. Every shade gets WCAG contrast ratings against white and black text. There's a live preview where you can test your actual copy against any color combination at different font sizes. Felt important for a tool aimed at designers. Some features I'm happy with: Interactive color wheel you can drag to adjust hue in real time Harmony mixer showing side by side pairings with contrast ratios Dark mode preview that renders a fake UI using your generated palette Save palettes locally and export in multiple formats Tech: React 18, TypeScript, Tailwind CSS, Chroma.js, Framer Motion, Vite

ChromaCraft Studio

A premium color system generator.

A premium color system generator.