Farbcodes in CSS, Figma und Design-Tools verwenden

Ein Color-Picker liefert dir am Ende immer das Gleiche: einen HEX-Code wie #1a56db, dazu die RGB- und HSL-Entsprechung. Diese drei Zahlen sind aber nur ein Zwischenstand. Der eigentliche Wert entsteht erst, wenn die Farbe sauber in deinem Projekt landet, sei es im Stylesheet, in einer Figma-Komponente oder in der Markenvorlage fuer die naechste Praesentation. Dieser Ratgeber zeigt dir, wie du ausgelesene Farbwerte in den gaengigen Werkzeugen praktisch einsetzt und dabei nicht im Wartungschaos endest.

Die drei Formate und wann welches zaehlt

Bevor wir die Werte verteilen, ein kurzer Blick auf die Formate selbst, denn ihre Staerken sind unterschiedlich.

Format	Beispiel	Staerke	Typischer Einsatz
HEX	#1a56db	Kompakt, ueberall lesbar	Austausch zwischen Tools, Design-Dateien
RGB	rgb(26 86 219)	Direkter Kanalzugriff, Alpha leicht	Wenn Transparenz oder JS-Berechnung noetig ist
HSL	hsl(220 70% 48%)	Intuitive Anpassung von Helligkeit und Saettigung	Hover-Varianten, Farbsysteme aus einem Grundton

Der Browser rechnet diese Formate intern alle in denselben Farbraum um, am Ende ist es also egal, welche Schreibweise im Stylesheet steht. Den Unterschied merkst du beim Arbeiten: Willst du aus einem Blau einen etwas dunkleren Hover-Zustand bauen, drehst du in HSL einfach den Helligkeitswert von 48% auf 40% und der Farbton bleibt erhalten. In HEX muesstest du dafuer raten oder neu rechnen.

Farbwerte in CSS einsetzen

In CSS landen Farben an drei typischen Stellen: bei color fuer Text, bei background beziehungsweise background-color fuer Flaechen und bei border-color fuer Rahmen. Die einfachste Form ist der direkte Wert.

.button {
  color: #ffffff;
  background-color: #1a56db;
  border: 1px solid #1640a8;
}

Das funktioniert, hat aber einen Haken: Die Farbe #1a56db steht jetzt fest im Selektor. Taucht sie an zwanzig Stellen auf und die Marke wechselt den Blauton, suchst und ersetzt du zwanzigmal. Genau hier kommen die moderneren Schreibweisen und vor allem die Variablen ins Spiel.

Die heutige RGB- und HSL-Syntax kommt ohne Kommata aus und unterstuetzt einen Alpha-Kanal nach einem Schraegstrich:

.overlay {
  background-color: rgb(26 86 219 / 0.85);
}

.badge {
  background-color: hsl(220 70% 48%);
}

.badge--muted {
  background-color: hsl(220 70% 48% / 0.4);
}

Der Alpha-Wert 0.85 bedeutet 85 Prozent Deckkraft. Das ist praktisch, weil du fuer eine halbtransparente Variante einer Farbe nicht extra einen neuen Wert auslesen musst, sondern denselben Grundwert nimmst und nur die Deckkraft senkst.

Custom Properties als Single Source of Truth

Der entscheidende Schritt fuer wartbares CSS sind Custom Properties, oft auch CSS-Variablen genannt. Du definierst die Farbe einmal zentral und referenzierst sie ueberall.

:root {
  --color-primary: #1a56db;
  --color-primary-dark: #1640a8;
  --color-text: #1f2937;
  --color-surface: #ffffff;
}

.button {
  color: var(--color-surface);
  background-color: var(--color-primary);
}

.button:hover {
  background-color: var(--color-primary-dark);
}

Jetzt liegt jeder Farbwert genau einmal im :root-Block. Ein Markenwechsel ist eine Zeile statt einer Suchaktion. Custom Properties sind ausserdem dynamisch: Du kannst sie per Media Query oder per Klasse ueberschreiben, was sie zur naheliegenden Grundlage fuer einen Dark Mode macht.

:root {
  --color-text: #1f2937;
  --color-surface: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e5e7eb;
    --color-surface: #111827;
  }
}

body {
  color: var(--color-text);
  background-color: var(--color-surface);
}

Die Komponenten selbst aendern sich nicht. Sie lesen weiter var(--color-text), und der Wert dahinter passt sich dem Modus an. Das ist der praktische Kern dessen, was Design-Tokens leisten: ein Name, der sich im Kontext anders aufloest.

Farbwerte in Figma und anderen Design-Tools

In Figma fuehrt der direkteste Weg ueber das Farbfeld. Du waehlst ein Element, klickst im rechten Panel auf das Farbquadrat unter Fill und siehst oben das Hexadezimal-Eingabefeld. Dort fuegst du den ausgelesenen Wert ein, allerdings ohne die Raute, also 1a56db statt #1a56db. Figma akzeptiert auch direkte RGB-Eingabe, wenn du das Format ueber das kleine Dropdown umstellst.

Das pro Element zu tippen ist aber genau die Hardcoding-Falle in Bildform. Figma bietet zwei Wege, Farben wiederverwendbar zu machen:

• Color Styles: Du legst eine Farbe als benannten Style an, etwa Primary/Blue. Jedes Element referenziert den Style statt eines rohen Werts. Aenderst du den Style, ziehen alle verknuepften Elemente nach.
• Variables: Der modernere Mechanismus. Variablen koennen in Modi gruppiert werden, etwa Light und Dark, und bilden damit dasselbe Prinzip ab wie deine CSS-Custom-Properties. Eine Variable color/primary haelt in Light den Wert #1a56db und in Dark einen passenden helleren Ton.

Der grosse Gewinn entsteht, wenn die Variablennamen in Figma und die Custom-Property-Namen in CSS uebereinstimmen. Heisst die Figma-Variable color/primary und die CSS-Variable --color-primary, sprechen Design und Code dieselbe Sprache. Genau das meint der Begriff Design-Token: ein benannter Wert, der ueber Werkzeuggrenzen hinweg konsistent bleibt. Plugins wie Tokens Studio koennen solche Tokens sogar als JSON exportieren und so den Sync zwischen Figma und Codebasis automatisieren.

Andere Design-Tools folgen demselben Muster. In Sketch heissen die wiederverwendbaren Farben Color Variables, in Adobe XD Document Colors. Das Vorgehen bleibt gleich: Wert einmal ablegen, ueberall referenzieren.

Farbwerte in Tailwind CSS

Tailwind ist ein Sonderfall, weil Farben dort nicht im Stylesheet, sondern in der Konfiguration leben. Den ausgelesenen Wert traegst du in die tailwind.config ein und bekommst dafuer fertige Utility-Klassen.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#1a56db',
          dark: '#1640a8',
        },
      },
    },
  },
};

Danach nutzt du bg-primary, text-primary oder border-primary-dark direkt im Markup. Der DEFAULT-Schluessel sorgt dafuer, dass bg-primary ohne Suffix funktioniert.

Brauchst du eine Farbe nur einmal und willst sie nicht in die Config aufnehmen, gibt es die Arbitrary Values. Den Wert schreibst du in eckigen Klammern direkt in die Klasse:

<div class="bg-[#1a56db] text-[hsl(220_70%_48%)]">
  Einmaliger Farbwert
</div>

Beachte die Unterstriche statt Leerzeichen im HSL-Wert, weil Tailwind Leerzeichen als Klassentrenner liest. Arbitrary Values sind praktisch fuer Ausnahmen, aber wiederkehrende Markenfarben gehoeren in die Config, sonst verstreust du dieselbe Hardcoding-Problematik ueber das ganze Markup.

In Tailwind 4 verschiebt sich das Ganze in CSS-Custom-Properties unter @theme, was den Kreis zu den oben gezeigten CSS-Variablen schliesst. Auch hier gilt: ein zentraler Ort, viele Referenzen.

Farbwerte in Office und Canva

Nicht jedes Projekt landet im Code. Wenn die Markenfarbe in eine Praesentation, ein Plakat oder eine Canva-Vorlage soll, hilft derselbe ausgelesene Wert.

In Canva klickst du auf das Farbfeld eines Elements, dann auf das Plus oder das Eingabefeld am oberen Rand des Farbwaehlers und fuegst den HEX-Code ein. Canva zeigt unter Markenfarben auch eine eigene Palette, in die du die Farbe einmal eintraegst und dann projektweit wiederverwendest. Das ist das Token-Prinzip in der Canva-Variante.

In Microsoft Office, also Word, PowerPoint und Excel, fuehrt der Weg ueber das Farb-Dropdown zu Weitere Farben und dort in den Reiter Benutzerdefiniert. Du kannst entweder die drei RGB-Kanaele einzeln eingeben oder, in neueren Versionen, direkt den HEX-Code in das dafuer vorgesehene Feld setzen. So triffst du eine Corporate-Farbe exakt, statt sie aus der vorgegebenen Palette zu schaetzen. Auch Office bietet mit den Designfarben einen Mechanismus, eine Palette zentral zu hinterlegen, damit nicht jede Folie ihren eigenen Blauton mitbringt.

Hardcoding vermeiden, Tokens etablieren

Quer durch alle Werkzeuge zieht sich dieselbe Lektion. Ein roher Farbwert, der direkt an einem Element klebt, ist schnell gesetzt und teuer in der Pflege. Sobald eine Farbe mehr als ein- oder zweimal vorkommt, lohnt sich der benannte Token, ob als CSS-Custom-Property, Figma-Variable, Tailwind-Config-Eintrag oder Canva-Markenfarbe.

Ein praktischer Ablauf sieht so aus: Du liest die Farbe im Color-Picker aus, legst sie als benannten Token an genau einer Stelle pro Werkzeug ab und referenzierst diesen Token ueberall sonst. Hilfreich ist eine kleine Namenskonvention, die du ueber alle Tools gleich haeltst, etwa color-primary, color-text, color-surface. Wenn der Figma-Name, der CSS-Variablenname und der Tailwind-Key uebereinstimmen, wird aus drei getrennten Welten ein zusammenhaengendes System.

Worauf es ankommt

Der Color-Picker gibt dir HEX, RGB und HSL, aber der praktische Nutzen entsteht erst dahinter. In CSS gewinnst du mit Custom Properties Wartbarkeit und einen einfachen Dark Mode, in Figma mit Styles und Variables die Wiederverwendung, in Tailwind mit der Config saubere Utility-Klassen und in Office oder Canva mit zentralen Paletten die exakte Markenfarbe. Das verbindende Prinzip ist immer dasselbe: Lege jeden Farbwert genau einmal als benannten Token ab und referenziere ihn ueberall. Wer das einhaelt, aendert eine Marke in einer Zeile statt in einer langen Suchaktion und haelt Design und Code dauerhaft konsistent.