← Back to the lab

Hue Hunt

A free daily color game: match five colors by eye with hue, saturation and lightness sliders, scored by perceptual distance (ΔE). Share your result.

How to use Hue Hunt

  1. Look at the target color.
  2. Move the hue, saturation and lightness sliders until your mix looks the same.
  3. Press Lock in my guess to see your score, then go to the next color. A game has five colors.
  4. Play the daily challenge (the same five colors for everyone that day) and share your result, or keep practicing in free play.

About Hue Hunt

Hue Hunt is a color matching game that trains your eye for color. Every color can be described by its hue (where it sits on the color wheel), its saturation (how vivid it is) and its lightness (how light or dark it is), and learning to judge each one separately is what makes designers fast at picking colors.

Your score uses the same perceptual distance (ΔE in CIE Lab) that color scientists use, so it rewards what the eye actually notices. A few minutes a day sharpens your sense of color for palettes, brand work and UI.

What it does

  • Daily challenge with the same five colors for everyone
  • Scored by CIE ΔE, the perceptual distance designers use
  • Big touch-friendly sliders that work great on phones
  • Shareable emoji result, plus unlimited free play

FAQ

How is Hue Hunt scored?

Each guess is compared to the target in CIE Lab color space. A ΔE around 2 is barely noticeable and scores about 96; every point of ΔE costs two points.

Any tips for a better score?

Match lightness first, then hue, then saturation. Our eyes are most sensitive to lightness differences.

Is Hue Hunt free?

Yes. It is free, needs no account and works on phones and computers.

Is there a new challenge every day?

Yes. The daily challenge changes every day and gives everyone the same five colors, so you can compare scores with friends.

📖 Color matching game: how to train your eye for color

More free tools

  • Palette Generator - Pick a hue, choose a color harmony, and get a full accessible palette with live AA/AAA contrast checking.
  • Contrast Checker - Paste two colors, see the WCAG ratio, and fix a failing pair with a single click.
  • Image → Palette - Drop in an image, pull out its dominant colors, and see which pairs are safe to use together.
  • Color Blindness Simulator - See a palette through protanopia, deuteranopia, tritanopia and achromatopsia - and catch colors that collapse.
  • Type Scale Generator - Pick a base size and a ratio, get a full type scale with live preview, fluid clamp() and tokens to copy.
  • Gradient & Mesh Generator - Linear, radial, conic or blobby mesh gradients - drag the points, shuffle the colors, copy the CSS.
  • Component States Explorer - Buttons, inputs and cards in every state - hover, focus, pressed, disabled, error - side by side with contrast checks.
  • Design Token Converter - Paste W3C tokens, Tokens Studio or Figma Variables JSON and get CSS, SCSS, Tailwind v4 or SwiftUI - aliases included.
  • Motion & Easing Playground - Drag cubic-bezier handles, tune a real spring, watch them race, and export motion tokens as CSS linear(), Framer Motion or SwiftUI.
  • Auto-Trim - Drop in PNGs and get them back without the empty transparent edges - in bulk, in your browser, as one ZIP.
  • Text Expansion Stress Test - See how a UI breaks in German, Spanish or pseudo-localized text - and which CSS fixes make it survive translation.
  • Mini A11y Audit - Paste HTML and find missing alt text and labels, unnamed buttons, heading jumps, tiny tap targets and low contrast.
  • Multi-size Preview - One message laid out across social and display-ad sizes, with platform safe zones and a draggable focal point. Export every PNG.
  • Mobile Preview - Open any website inside iPhone, Pixel, Galaxy and iPad frames at their real viewport sizes. Rotate it or compare four devices at once.
  • Pass or Fail - Twenty quick rounds: does this text pass WCAG AA contrast? Trust your eye, then see the real ratios.
  • Optical Eye - Fix seven layout flaws by eye: center a play icon, even out padding, size a circle against a square.
  • State Panic - Components fall with something happening to them. Pick the right UI state before they hit the floor.
  • Easing Golf - Mini golf with animation curves: shape a cubic-bezier so the puck hits every flag on time. Par is three.
  • Contrast Survival - The background keeps shifting. Hold the text lightness so it passes WCAG AA, then AAA, as long as you can.
  • Token Rush - Swap hard-coded values for the right design tokens, fast. Then flip the theme and see what breaks.
  • Kern Me - Space six words by eye. Each has one letter pair too tight or too loose; the answer is the font designer’s own kerning.
  • Tab Order - Tap a screen’s buttons, links and fields in the order the Tab key should visit them. Five screens, one WCAG rule.