Farben raten

Sieh einen HEX-/RGB-Wert und wähle die passende Farbe – super für Designer

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

0points
1stufe
♥♥♥Leben
Find the one colour that's different
Spielmodus
Schwierigkeit
Beste Punktzahl
0odd one out
0🔥streak
So funktioniert es
  • 10 seconds per round - faster answers score more.
  • A wrong pick or a timeout costs a life. Three lives.
  • Colours get closer together every stage.

Über dieses Tool

Sieh einen HEX- oder RGB-Farbwert und versuche, die passende Farbe aus mehreren Optionen zu wählen – ein Übungs-Spiel für Designer und Entwickler, die ein Gespür dafür aufbauen wollen, wie Farbcodes visuell aussehen.

So verwendest du dieses Tool

  1. Format-Challenge wählenSpiele Runden mit HEX, RGB oder gemischten Farbcodes.
  2. Zielwert lesenLeite Kanäle und Intensität aus dem Code ab.
  3. Passendes Farbfeld wählenWähle die visuell nächste Farbe aus den Optionen.
  4. Genauigkeit verbessernWiederhole Runden, um dein Farbgefühl zu schärfen.

So spielst du Farbenraten

Im Modus Zuordnen siehst du einen Farbcode – HEX wie #3A7BD5 oder RGB wie rgb(58, 123, 213) – und wählst das passende Farbfeld. Im Modus Abweichung findest du das eine Feld, das sich leicht von den anderen unterscheidet. Auf Leicht sind die Farben sehr verschieden, auf Schwer nur minimal.

Lies einen HEX-Code als drei Paare für Rot, Grün und Blau: Je höher das Paar, desto mehr von dieser Farbe. #3A7BD5 hat wenig Rot, etwas Grün und viel Blau – also ein mittleres Blau.

Warum es nutzen

  • Baut praktische HEX-/RGB-Bildkompetenz auf.
  • Nützlich für Designer und Frontend-Entwickler.
  • Verbessert schnelles Einschätzen von Farben.
  • Training mit Spaß für Branding- und UI-Abläufe.

Häufige Anwendungen

  • Farbtraining für Design-Studierende.
  • Aufwärmen für Entwickler vor UI-Styling.
  • Mini-Spiele für Kreativteams.
  • Farbdenken über Kanäle lernen.

Tipps für bessere Ergebnisse

  • Merke dir Ankerwerte für Primärfarben.
  • Schätze den dominanten Kanal vor der finalen Wahl.
  • Übe helle und gedämpfte Paletten.
  • Sieh dir Fehlgriffe an, um die Zuordnung zu verfeinern.

Fehler, die du vermeiden solltest

  • Nur die Helligkeit beurteilen, nicht die Farbtonbalance.
  • Die Beziehungen der RGB-Kanäle ignorieren.
  • Nur ein Format üben und die anderen auslassen.
  • Zu schnell wählen, bevor der Code vollständig gelesen ist.

Häufig gestellte Fragen

Ein intuitives Gefühl dafür, wie ein HEX-/RGB-Wert wirklich aussieht, beschleunigt deinen Workflow deutlich – statt ständig nachzuschlagen oder Codes zu testen, baust du ein mentales Modell gängiger Werte auf.

Schau dir die Formatoptionen des Spiels an – viele Farbenrate-Spiele decken HEX und RGB ab, damit du mit beiden Formaten vertraut wirst.

Ja – in der Regel werden Punktzahl oder Genauigkeit in Prozent erfasst, sodass du siehst, wie dein Farbgefühl über mehrere Runden besser wird.

Lies die drei Paare als Rot, Grün und Blau: Das größte Paar bestimmt den Farbton, hohe Werte überall bedeuten eine helle Farbe. #E0E0FF hat überall hohe Werte und Blau am höchsten, ist also ein sehr helles Blau.

Sind Rot, Grün und Blau gleich, dominiert kein Kanal, die Farbe hat also keinen Farbton - nur Helligkeit. rgb(128,128,128) ist ein mittleres Grau.

Wer grob erkennt, wie ein Code aussieht, bemerkt eine falsche Farbe in CSS oder einer Designdatei ohne Farbwähler und passt eine Palette von Hand schneller an.

Related guides