An open API service indexing awesome lists of open source software.

https://github.com/atomantic/hueknew

mobile app game for teaching players the names of obscure colors
https://github.com/atomantic/hueknew

Last synced: 9 months ago
JSON representation

mobile app game for teaching players the names of obscure colors

Awesome Lists containing this project

README

          

# Hue Knew 🎨

- [🎯 Goal](#-goal)
- [📸 Screenshots](#-screenshots)
- [🎯 Game Overview](#-game-overview)
- [📚 Learning Phase](#-learning-phase)
- [🎮 Challenge Phase](#-challenge-phase)
- [🌟 Features](#-features)
- [🎨 Color Categories](#-color-categories)
- [🏆 Learning Objectives](#-learning-objectives)
- [🎮 How to Play](#-how-to-play)
- [🔮 Future Enhancements](#-future-enhancements)
- [📄 License](#-license)
- [🙏 Acknowledgments](#-acknowledgments)
- [Development](#development)
- [🤝 Contributing](#-contributing)
- [🔧 Technical Details](#-technical-details)
- [📱 Requirements](#-requirements)
- [🚀 Getting Started](#-getting-started)

The ability for humans to observe and record memories of the world is limited by the language they have to describe it.

Hue Knew is an open-source SwiftUI color learning game that helps humans discover new colors, learn the subtle differences between similar colors, and learn their proper names.

## 🎯 Goal

As a human, I want to be able to articulate the visual reality that humans experience with more accuracy. Rather than saying "that person is wearing a yellow-orange shirt with brown-ish accent lines," if I know the names of more colors, I can say, "that person is wearing a gamboge shirt with brown-sugar accent lines."

I want to be able to recognize colors in the real world and connect them to more distinct language.
I want to be able to hear a color name and visualize it in my mind.

## 📸 Screenshots


Home Screen
Learning
Game


Lesson
Catalog
Details

## 🎯 Game Overview

**Hue Knew** is designed to train your eye to distinguish between similar colors that are often confused, such as:

| Color Pair | Differences |
|------------|-------------|
| ![](https://placehold.co/16x16/E49B0F/E49B0F.png) **Gamboge** (#E49B0F) vs. ![](https://placehold.co/16x16/E3B505/E3B505.png) **Indian Yellow** (#E3B505) | • Gamboge is more orange and warmer
• Indian Yellow is slightly brighter and more yellow
• Gamboge has deeper, richer undertones |
| ![](https://placehold.co/16x16/003153/003153.png) **Prussian Blue** (#003153) vs. ![](https://placehold.co/16x16/002147/002147.png) **Oxford Blue** (#002147) | • Prussian Blue is slightly more green-tinted
• Oxford Blue has more purple undertones
• Prussian Blue is marginally lighter |
| ![](https://placehold.co/16x16/DC143C/DC143C.png) **Crimson** (#DC143C) vs. ![](https://placehold.co/16x16/B22222/B22222.png) **Firebrick** (#B22222) | • Crimson is brighter and more vibrant
• Firebrick is darker and more muted
• Crimson has a slight blue undertone |
| ![](https://placehold.co/16x16/6A0DAD/6A0DAD.png) **Purple** (#6A0DAD) vs. ![](https://placehold.co/16x16/702670/702670.png) **Midnight** (#702670) | • Purple is more saturated and vibrant
• Midnight is darker and more mysterious
• Purple has more blue undertones |
| ![](https://placehold.co/16x16/CC5500/CC5500.png) **Burnt Orange** (#CC5500) vs. ![](https://placehold.co/16x16/D2691E/D2691E.png) **Chocolate** (#D2691E) | • Burnt Orange is more orange and vibrant
• Chocolate is more brown and muted
• Burnt Orange is brighter and warmer |
| ![](https://placehold.co/16x16/FFFF00/FFFF00.png) **Yellow** (#FFFF00) vs. ![](https://placehold.co/16x16/FFF700/FFF700.png) **Lemon** (#FFF700) | • Yellow is pure and more saturated
• Lemon is slightly more green-tinted
• Yellow is brighter and more electric |
| ![](https://placehold.co/16x16/228B22/228B22.png) **Forest Green** (#228B22) vs. ![](https://placehold.co/16x16/355E3B/355E3B.png) **Hunter Green** (#355E3B) | • Forest Green is brighter and more vibrant
• Hunter Green is darker and more muted
• Forest Green has more yellow undertones |
| ![](https://placehold.co/16x16/696969/696969.png) **Dim Gray** (#696969) vs. ![](https://placehold.co/16x16/555555/555555.png) **Davy's Grey** (#555555) | • Dim Gray is lighter and more neutral
• Davy's Grey is darker and more saturated
• Dim Gray has a cooler undertone |

The game uses a progressive learning approach with two main phases:

### 📚 Learning Phase
- **Side-by-side comparison**: View two similar colors together with their names
- **Study the differences**: Learn the subtle variations that distinguish each color
- **Take your time**: No pressure - focus on understanding the nuances

### 🎮 Challenge Phase
- **Name-to-color matching**: Given a color name, select the correct hue
- **Color-to-name matching**: Given a color, choose the correct name
- **Multiple choice format**: Pick from carefully selected similar options
- **Immediate feedback**: Learn from mistakes with explanations

## 🌟 Features

- **Progressive difficulty**: Start with obvious differences, advance to subtle variations
- **Smart color pairs**: Curated color combinations that are commonly confused
- **Achievement system**: Track your progress and unlock new color categories
- **Streak tracking**: Monitor your learning momentum
- **Color vision test**: Optional accessibility test to adapt challenges
- **Category-based learning**: Focus on specific color families (blues, yellows, reds, etc.)
- **Imagine environments**: Brainstorm colors for scenes like forests or deserts
- **Autocomplete suggestions**: Get prompted with likely colors for each environment

## 🎨 Color Categories

- **Yellows**: Gamboge, Indian Yellow, Cadmium Yellow, Lemon Yellow, Saffron, Goldenrod
- **Blues**: Prussian Blue, Navy, Cerulean, Glaucous, Ultramarine, Cobalt Blue
- **Reds**: Crimson, Firebrick, Vermillion, Carmine, Burgundy, Venetian Red
- **Greens**: Forest Green, Hunter Green, Viridian, Malachite, Sage, Emerald
- **Purples**: Purple, Midnight, Royal Purple, Lavender, Amethyst, Byzantium
- **Oranges**: Burnt Orange, Chocolate, Cadmium Orange, Tangerine, Marigold, Persimmon
- **Neutrals**: Dim Gray, Davy's Grey, Silver, Platinum, Ivory, Charcoal

## 🏆 Learning Objectives

- **Develop color vocabulary**: Learn proper names for specific hues
- **Train visual discrimination**: Improve ability to spot subtle differences
- **Build confidence**: Reduce uncertainty when describing colors
- **Practical application**: Use knowledge in art, design, and daily life

## 🎮 How to Play

1. **Start with Learning Mode**: Choose a color category to study
2. **Compare colors**: Study two similar colors side-by-side
3. **Read the differences**: Learn what makes each color unique
4. **Take the challenge**: Test your knowledge with randomized questions
5. **Track progress**: Build streaks and unlock new categories

## 🔮 Future Enhancements

- **Custom color sets**: Import your own color palettes
- **Timed challenges**: Speed rounds for advanced users
- **Color blindness support**: Accommodations for different vision types
- **Social features**: Share progress and compete with friends
- **Advanced analytics**: Detailed learning progress tracking

## 📄 License

This project is licensed under the HueKnew License - see the [LICENSE.md](LICENSE.md) file for details.

## 🙏 Acknowledgments

- Color definitions sourced primarily from the Wikipedia pages but curated and tailored with aggregate LLM knowledge:
- https://en.wikipedia.org/wiki/List_of_colors:_A%E2%80%93F
- https://en.wikipedia.org/wiki/List_of_colors:_G%E2%80%93M
- https://en.wikipedia.org/wiki/List_of_colors:_N%E2%80%93Z
- Thanks to [Placehold.co](https://placehold.co/) for the color swatch previews in this file and other places :)

# Development

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request or simply file an issue and we will get to work on it!

## 🔧 Technical Details

- **Platform**: iOS 18.2+
- **Framework**: SwiftUI
- **Architecture**: MVVM with @Observable
- **Language**: Swift 5.9

## 📱 Requirements

- iOS 18.2 or later
- Xcode 16.0 or later
- Swift 5.9 or later

## 🚀 Getting Started

1. Clone the repository:
```bash
git clone https://github.com/atomantic/HueKnew.git
cd HueKnew
```

2. Open the project in Xcode:
```bash
open "HueKnew.xcodeproj"
```

3. Build and run the project on a simulator or device