Real Color

Sharpen your color skills with Real Color — the puzzle game that turns the world around you into a playground of hues.

Comment

Inspiration

This game draws inspiration from the board game Hues and Cues, where players select a random color card and attempt to match it to the closest shade on the game board. This game transforms the color-matching experience of the physical game into a real-world digital puzzle.

What it does

The game gives you a random color and challenges you to take a picture of something in your surroundings that closely matches this color.

There are currently two modes available:

  • Daily Puzzle: Each day, all players receive the same color. You have until the end of the day and get only one chance to capture a photo of something that best resembles the daily color.
  • Unlimited: In this mode, you're given a random color each time you play. There's no limit to how many times you can play, and the color changes with each round, keeping the challenge fresh and exciting.

How we built it

Developed with Flutter, incorporating a color dataset from Kaggle, leveraging various Flutter packages from Pub.dev, and using Revenue Cat for in-app purchases.

Challenges we ran into

The first challenge we ran into was was determining how to extract a color from an image. Initially, we considered scanning the entire image, taking the RGB values of the pixels, and identifying the most frequent color. However, we found it more effective to focus on a 50x50 pixel square in the center of the image. We then paired this with a cross hair of size 50x50 that guides the user on where they should aim.

Another challenge was how to compare colors to determine how similar the colors are. One idea was to use the RGB values of the colors and compare them. This ended up being inaccurate as visually similar colors often received lower scores than distinct colors with closer RGB values. After doing some research we found that this topic has been studied extensively and there are multiple algorithms that exist for this exact purpose. We ended up using the CIEDE 2000 algorithm for its accuracy. You can read about all the color comparison algorithms here

Accomplishments that we're proud of

  • Finished our first hackathon!

What we learned

  • How to differentiate colors and see if one color is similar to another.
  • How to scan pixels on an image.
  • How to use Revenue Cat for monetization.
  • How to use multiple Flutter packages from pub dev.

What's next for Real Color

Ideally we want to continue adding to this game. Here are some ideas we had:

  • Local mode so you can play a match with your friends when they're in the same room as you.
  • Online mode to play a real-time match with people all over the world.
  • Shareable link of your puzzle results so you can share it with others.

Built With

Share this project:

Updates