Personal Project

Color Roulette

A lightweight web-based tool for generating color palettes and their complementary colors.

Role

Creator

Stack

HTML CSS JavaScript

Personal project: Sole developer

Colors Roulette is a web app that generates random colors and shows their complementary pairs, giving designers and hobbyists instant inspiration for palettes.

Project overview

Color Roulette is a single‑page web application built with vanilla HTML, CSS and JavaScript. The interface includes controls to start, stop and reset the color generator, a numeric input that lets the user adjust the generation speed, a list showing all generated colors, and a pop‑up panel that reveals detailed information about the current color and its complement. Everything runs entirely in the browser without a backend.

My role and ownership

I designed and implemented the entire application. I built the static HTML layout, styled it using custom CSS with responsive design considerations, and wrote the JavaScript to handle random color generation, complementary color calculation, interval timing, DOM manipulation and user interactions. I also structured the project folder with separate modules for color data and logic, ensuring the code was easy to read and extend.

Key features

  • Start, stop and reset the color generator with a single click.
  • Adjustable generation speed between 100 ms and 5000 ms.
  • Display of the color name, hexadecimal, RGB and HSL values along with complementary color information.
  • Interactive list of generated colors; clicking on a color changes the display background, and hovering highlights items.
  • Real‑time status indicator showing whether the generator is idle, running or stopped, plus the current speed and the number of colors generated.

Skills demonstrated

  • Front‑end web development (HTML, CSS, JavaScript).
  • DOM manipulation and event handling.
  • Implementing real‑time UI updates with timers.
  • Data representation and color conversions (hex to RGB and HSL).
  • Responsive layout and user experience design.

Tech stack

  • HTML, CSS, JavaScript.

Project type

Single‑page interactive web application.