An interactive colour practice for understanding light and pigment mixing through observation and answers.
Features · Colour Rules · Contributing
IROLOGIC turns fundamental colour theory into a focused interactive exercise. Each visit produces a question about additive or subtractive mixing. Once an answer is selected, the six-colour wheel animates the recipe and its result, helping learners connect colour names with the relationships between them.
IROLOGIC combines IRO and LOGIC. IRO (いろ) is the Japanese word for “colour”, while LOGIC represents reasoning. The name reflects the project’s purpose: go beyond memorising colour-mixing results by understanding the rules through observation, choices, and feedback.
- Random questions drawn from light and pigment colour recipes.
- Two question directions: identify a mixing result or work backwards from a target colour.
- Immediate feedback, including correct and incorrect selections with a short explanation.
- Move directly to the next question after completing one.
- A six-colour reference wheel with fixed positions for red, yellow, green, cyan, blue, and magenta.
- Animated links, glow effects, and labels reveal the correct recipe after answering.
- Covers the essential RGB additive and CMY subtractive mixing rules.
- Respects the system “reduce motion” preference to limit animation.
| System | Recipe | Result |
|---|---|---|
| Light (additive) | Red + Green | Yellow |
| Light (additive) | Green + Blue | Cyan |
| Light (additive) | Red + Blue | Magenta |
| Pigment (subtractive) | Yellow + Cyan | Green |
| Pigment (subtractive) | Cyan + Magenta | Blue |
| Pigment (subtractive) | Magenta + Yellow | Red |
- Nuxt 4 — application framework
- Vue 3 + TypeScript — component model and type safety
- Tailwind CSS 4 — utility-first styling
- Motion for Vue — colour-wheel animations
- Mori UI — interaction components
- Vitest — unit and component testing
Suggestions and contributions are welcome.
- Fork this repository.
- Create a branch:
git checkout -b feature/your-feature. - Make your changes, then run
pnpm test:runandpnpm typecheck. - Commit your work and open a Pull Request.
This project is released under the MIT License.
If this exercise is helpful, please consider giving the repository a Star.