Farbkonverter — HEX, RGB, HSL & OKLCH

Was ist ein Farbkonverter?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;

// XYZ D65 → LMS (Ottosson 2020 matrix), cube-root, → OKLAB
const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;

// OKLAB → OKLCH (Cartesian to polar)
const C = Math.sqrt(a * a + b * b);
const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Hauptfunktionen

Farbkonverter-Alternativen im Vergleich

Beispiele für Farbkonvertierungen

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

So verwenden Sie den Farbkonverter

1. 1

   Eine Farbe in einem beliebigen Format eingeben oder einfügen

   Jedes der 9 Format-Felder (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Named) ist direkt editierbar — es gibt keinen Konvertieren-Button. Fügen Sie einen HEX aus Figma ein, tippen Sie einen `oklch()`-Wert aus einer Tailwind-Konfiguration, legen Sie einen `hsl()`-Wert aus einem alten Stylesheet ab oder tippen Sie sogar einen benannten CSS-Farbnamen wie `tomato`. Das Tool parst inkrementell beim Tippen, sodass ein halb getippter Wert die anderen Felder nicht überschreibt, bevor Sie ein gültiges Format eingegeben haben. Ungültige Eingaben werden mit einem zurückhaltenden Inline-Fehler markiert; gültige Eingaben aktualisieren das gesamte Raster.

2. 2

   Alle 9 Formate aktualisieren sich sofort

   Die interne Source-of-Truth ist OKLCH (perzeptuell gleichförmig, gamut-unbeschränkt), und jedes andere Format wird bei jedem Tastenanschlag daraus abgeleitet. Das Feld, in dem Sie gerade tippen, behält seine Cursorposition unverändert — nur die *anderen* acht Felder werden neu gerendert. So können Sie die L-Achse von OKLCH direkt bearbeiten und sehen, wie HEX, RGB, HSL und CMYK in Echtzeit mitziehen, ohne den Cursor zu verlieren. Die Konvertierungsmathematik läuft vollständig in JavaScript und verwendet dieselben OKLAB-Grundbausteine, die in modernen Browsern ausgeliefert werden.

3. 3

   Den Picker für visuelle Erkundung nutzen

   Unterhalb des Format-Rasters finden Sie ein Sättigung-Helligkeit-Quadrat (überall hineinziehen, um S+L für den aktuellen Farbton zu setzen), einen Hue-Schieber (ziehen, um auf dem Farbkreis zu rotieren) und einen Alpha-Schieber (ziehen, um die Transparenz einzustellen). In Chromium-basierten Browsern (Chrome, Edge, Brave) aktiviert der **EyeDropper**-Button die native `EyeDropper`-API — klicken Sie irgendwo auf den Bildschirm, auch außerhalb des Browserfensters, um diesen Pixelwert zu übernehmen. Safari und Firefox liefern die API noch nicht aus, deshalb wird der Button in diesen Browsern ausgeblendet und das SL-Quadrat plus der Hue-Schieber bleiben der primäre Picker.

4. 4

   Gamut und Kontrast auf einen Blick prüfen

   Drei Gamut-Badges (**sRGB**, **Display P3**, **Rec2020**) zeigen, ob die aktuelle Farbe innerhalb des reproduzierbaren Bereichs des jeweiligen Farbraums liegt — nützlich, wenn Sie in OKLCH arbeiten und wissen wollen, welche Displays den Wert exakt wiedergeben. Die Kontrastzeile zeigt das WCAG-2.1-Verhältnis gegen Weiß und Schwarz sowie den APCA-Lc-Wert (zukunftsgerichtete WCAG-3-Metrik). Pass-/Fail-Badges (AA, AAA) erscheinen inline. Liegt eine Farbe außerhalb des sRGB-Farbumfangs, verkleinert ein Klick auf **Snap to sRGB** die Chroma, bis sie passt.

5. 5

   In der nativen Syntax Ihrer Plattform kopieren

   Jedes der 9 Format-Felder hat einen eigenen **Copy**-Button — ein Klick, der Wert landet in der Zwischenablage, und das Label wechselt kurz zu „Copied!“, damit Sie es bemerken. Unter dem Picker erzeugt der Abschnitt **Copy as code** sofort einsetzbare Snippets für fünf Plattformen: CSS-Custom-Property, Tailwind-v4-`@theme`-Token, SwiftUI-`Color(red:green:blue:)`-Literal, Jetpack-Compose-`Color(0xFF...)`-Konstante und Flutter-`Color(0xFF...)`. Auch der URL-Hash (`#hex=...` oder `#oklch=...`) aktualisiert sich, sodass Sie einen Live-Link zur exakten Farbe teilen können.

Häufige Fehler bei der Farbkonvertierung

Annehmen, dass eine HSL-Palette perzeptuell gleichförmig ist:
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
Auf dem Bildschirm wirken die Abstände ungleichmäßig.

OKLCH für perzeptuell gleichmäßige Skalen nutzen:
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
Auf dem Bildschirm wirken die Abstände gleichmäßig.

Unsere CMYK-Ausgabe direkt an eine Druckmaschine schicken:
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
Gedrucktes Ergebnis kann schlammig oder überzogen aussehen.

Den ursprünglichen HEX an die Druckerei senden:
hex #FF6347 → Druckerei mit ICC gegen ihre Maschine konvertieren lassen
Gedrucktes Ergebnis trifft die Bildschirmfarbe deutlich besser.

So tun, als wäre Lc 60 = WCAG 4,5:1:
APCA Lc 60 → „besteht AA“
Das WCAG-2-Verhältnis für dasselbe Paar kann 3,8:1 sein (besteht AA nicht).

Beide Metriken unabhängig prüfen:
WCAG-2-Verhältnis ≥ 4,5:1 für AA-Fließtext-Konformität UND
APCA |Lc| ≥ 75 für reale Lesbarkeit.
Beide müssen bestehen, keines ersetzt das andere.

HSL-L für Shades verändern:
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
90 % wirkt verwaschen; 30 % wirkt viel dunkler als der Abstand zu 60 %.

OKLCH-L für Shades verändern:
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Jeder Schritt wirkt wie derselbe visuelle Abstand.

8-stelligen HEX in einen Legacy-Parser kopieren:
#FF573380 → Parser schneidet ab → #FF5733 (kein Alpha)
Die 50-prozentige Transparenz geht stillschweigend verloren.

Prüfen, dass das Ziel 8-stelligen HEX unterstützt, sonst rgba() nutzen:
für modernes CSS: #FF573380 (8-stelliger HEX)
für Legacy-Unterstützung: rgba(255, 87, 51, 0.5) (immer unterstützt)
Explizite Alpha-Syntax verhindert stilles Abschneiden.

Jede OKLCH-Farbe standardmäßig auf sRGB snappen:
oklch(0.7 0.25 30) → snap → oklch(0.7 0.18 30)
P3-Displays verlieren ohne Grund über 30 % Sättigung.

Zuerst das Display-P3-Badge prüfen:
in-P3: den Wide-Gamut-Wert behalten, sRGB-Fallback über @supports ergänzen
über P3 hinaus: dann auf sRGB snappen
Lassen Sie die Wide-Gamut-Hardware ihre Arbeit tun.

Wer dieses Tool nutzt

Frontend-Entwickler, die auf Tailwind-v4-OKLCH-Tokens migrieren

Tailwind v4 hat sich 2024 für seine Standardpalette auf OKLCH festgelegt. Die Migration eines alten HSL- oder HEX-basierten Designsystems bedeutet, Hunderte von Markenfarben in OKLCH umzuwandeln. Jeden HEX einfügen, die OKLCH-Ausgabe kopieren und in den `@theme`-Block ablegen. Die Live-Gamut-Badges markieren Farben, die sRGB überschreiten, damit Sie entscheiden können, ob Sie den breiteren Gamut-Wert für Display-P3-Displays behalten wollen.

Designer, die Figma-Farben für iOS / Android übersetzen

Figma exportiert standardmäßig HEX, iOS will aber SwiftUI-`Color(red:green:blue:)`-Literale und Android Jetpack-Compose-`Color(0xFF...)`-Konstanten. Den Figma-HEX einmal einfügen, das SwiftUI-Snippet für den iOS-Entwickler und das Compose-Snippet für den Android-Entwickler kopieren — beide bereits in genau der Syntax, die jede Plattform erwartet, mit dem ursprünglichen HEX als Kommentar zur Nachvollziehbarkeit.

Designer, die Druckabzüge vorbereiten (CMYK-Näherung)

Wenn eine Markenfarbe auf einer gedruckten Visitenkarte erscheinen muss, liefert die CMYK-Näherung eine schnelle Schätzung, die man der Druckerei vor der eigentlichen ICC-Konvertierung weitergeben kann. Den Marken-HEX einfügen, die CMYK-Prozente kopieren und der Druckerei für einen schnellen Kostenvoranschlag schicken — und anschließend für den finalen Farbabgleich auf die ICC-Profil-bewusste Konvertierung der Druckerei gegen die konkrete Maschine vertrauen.

Accessibility-Engineers, die WCAG und APCA verifizieren

WCAG 2.1 ist heute der regulatorische Standard (ADA, EAA, Section 508); APCA Lc ist der vorgeschlagene WCAG-3-Nachfolger. Beide Metriken nebeneinander zu sehen bedeutet, dass eine Designerin in einem Bildschirm prüfen kann, ob eine Fließtextfarbe 4,5:1 WCAG gegen Weiß erreicht, und gleichzeitig gegenprüfen kann, dass sie auch APCA Lc 75 erreicht — ohne zwischen zwei separaten Rechnern hin- und herzuwechseln.

Dozenten, die Konzepte von Farbräumen lehren

Die gleichzeitige Neun-Felder-Ansicht macht die Beziehungen zwischen Farbräumen sichtbar. Tippen Sie einen OKLCH-Wert ein und beobachten Sie, wie HSL driftet, weil L in jedem Raum etwas anderes bedeutet. Ziehen Sie den Hue-Schieber und beobachten Sie, wie HEX, RGB und CMYK alle mitaktualisieren. Zeigen Sie, wie die Gamut-Badges rot werden, sobald Sie die Chroma über sRGB hinausschieben. Das Tool ist eine eigenständige Klassendemo für einen Grafik- oder HCI-Kurs auf Hochschulniveau.

Brand-Manager, die den nächsten benannten CSS-Farbnamen finden

Wenn der Marketingtext „eine tomatenfarbene Akzentfarbe“ sagt, der tatsächliche Marken-HEX aber `#FF6347` ist, liefert das Named-Feld `tomato (exact)`, weil `tomato` in der CSS-Spezifikation genau das ergibt. Für knapp daneben liegende HEX-Werte liefert das Feld den nächsten benannten Farbnamen mit der ΔE-Distanz im OKLAB-Raum — nützlich für Dokumentation, Fließtext und beiläufige Farbbenennung.

Webentwickler, die Legacy-HEX-Paletten auf OKLCH umstellen

Eine ältere Website kann eine 50-Farben-Markenpalette haben, die in CSS-Custom-Properties als HEX-Codes definiert ist. Die Modernisierung auf OKLCH erlaubt es dem Brand-Team, dieselben Skalen in einem perzeptuell gleichförmigen Raum auszudrücken. Jeden HEX einfügen, die OKLCH-Ausgabe kopieren, in die Variablendefinitionen tauschen. Das darunter liegende Tints/Shades-Panel verifiziert, dass die resultierende Skala visuell gleichmäßig ist, bevor sie ausgeliefert wird.

Open-Source-Maintainer, die Designtokens dokumentieren

Designtoken-Dokumentation muss meist dieselbe Farbe in mehreren Syntaxen zeigen — HEX für den CSS-Code-Block, OKLCH für die Spezifikationstabelle, den benannten Farbnamen für die Erläuterungen im Fließtext. Die gleichzeitige Felder-Ansicht erlaubt einem Maintainer, jede in einem Durchgang zu kopieren, statt drei separate Konvertierungen erneut auszuführen. Der teilbare URL-Hash erlaubt es Contributors außerdem, in einem GitHub-Issue auf die exakte besprochene Farbe zu verlinken.

Mathematik und Algorithmen der Farbkonvertierung

OKLCH als interne Source-of-Truth

Das Tool hält den kanonischen Farbwert intern als OKLCH-Tripel. Jedes editierbare Feld leitet seinen Anzeigewert bei jedem Tastenanschlag aus diesem Tripel ab; jede Nutzerbearbeitung aktualisiert zuerst das Tripel und löst dann das Neu-Rendern der anderen acht Felder aus. Das eliminiert den Pro-Schritt-Float-Drift, der Konverter plagt, die HSL oder sRGB als Pivot verwenden. Die Wahl von OKLCH gegenüber OKLAB ist bewusst — die Polarform hält den Hue als stabile Achse, sodass das Ziehen am Hue-Schieber nicht versehentlich durch Grau überblendet. Nach Björn Ottossons Aufsatz aus dem Jahr 2020 ist die perzeptuelle Gleichförmigkeit von OKLAB das stärkste Argument dafür, es als Lingua franca der modernen Farb-Mathematik zu behandeln.

Matrix-Quellen (W3C CSS Color 4 + Ottosson 2020)

Jede Konvertierungsmatrix im Code ist auf ihre Primärquelle zurückgeführt. Die stückweise Gammafunktion für sRGB ↔ linear-sRGB ist W3C CSS Color 4 §11.2 (`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`). Die 3×3-Matrix für linear-sRGB ↔ CIE-XYZ-D65 ist CSS Color 4 §15.1. Die Matrix für XYZ-D65 ↔ LMS und der Kubikwurzel-Schritt OKLAB stammen aus Ottossons Referenzimplementierung unter `https://bottosson.github.io/posts/oklab/`, exakt wie veröffentlicht. Es werden keine Matrizen neu berechnet oder neu hergeleitet — sie wörtlich zu übernehmen hält die Ausgabe identisch zu den Referenzvektoren der Spezifikation.

Naive CMYK-Formel und der ICC-Vorbehalt

Unsere CMYK-Ausgabe nutzt die Standard-Lehrbuchformel: `K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K)`, angewendet auf normalisierte sRGB-Werte. Das ist eine bewusste Näherung. Echte Druckgenauigkeit erfordert eine ICC-Profilkonvertierung gegen die konkrete Maschine, Farbe (z. B. US Web Coated SWOP v2, Fogra39, Japan Color 2011) und das Papier, was Kanäle um 5–15 % verschieben kann. Wir zeigen das CMYK-Feld mit einem sichtbaren Hinweis, damit Nutzer unsere Werte nicht direkt an eine Druckerei schicken. Behandeln Sie die Ausgabe als Plausibilitätsprüfung für Kostenvoranschläge, nicht als Lieferartefakt.

Gamut-Erkennung über Kanal-Range-Check

Eine Farbe gilt als in-gamut für einen Zielraum (sRGB, Display P3, Rec2020), wenn jeder Kanal nach Konvertierung in die Primärfarben dieses Raums in `[-ε, 1 + ε]` liegt, mit `ε = 1e-7`, um Float-Präzisions-Rauschen rund um die Grenzen aufzufangen. Das Gamut-Badge des jeweiligen Raums wird rot, wenn ein Kanal den Bereich überschreitet. Das erwischt den häufigen Fall — eine Wide-Gamut-OKLCH-Farbe wie `oklch(0.7 0.4 30)` wird als out-of-sRGB, aber in-P3 gemeldet und Sie wissen, welche Displays sie genau wiedergeben. Die Prüfung läuft bei jedem Tastenanschlag.

Snap-Algorithmus mit Chroma-Reduktion

Snap to sRGB nutzt eine binäre Suche auf der Chroma-Achse: L und H werden auf den aktuellen Werten gehalten, und auf C ∈ [0, currentC] wird das größte C gesucht, dessen sRGB-Konvertierung in-gamut bleibt. Die Suche läuft maximal 30 Iterationen (Präzision ~10⁻⁹), was für visuelle Genauigkeit mehr als genügt. Das entspricht dem informativen Gamut-Mapping-Algorithmus aus CSS Color 4 §13 — Lightness und Hue zu erhalten und nur die Chroma zu reduzieren hält die geschnappte Farbe erkennbar in derselben Hue-Familie. Wir kappen RGB-Kanäle nicht direkt, weil das den Hue spürbar verzerrt (besonders bei Blautönen).

CVD-Matrizen nach Brettel + Machado

Die Farbenblindheits-Simulation nutzt zwei veröffentlichte Matrizenfamilien. Die drei Dichromasien — Protanopie, Deuteranopie, Tritanopie — nutzen die Brettel-Viénot-Mollon-1997-Matrizen, angewandt im linear-RGB (zuerst Gamma dekodieren, Matrix anwenden, Gamma zurück encodieren). Die drei anomalen Trichromasien — Protanomalie, Deuteranomalie, Tritanomalie — nutzen die Machado-Oliveira-Fernandes-2009-Matrizen bei Schwere 0,66, was einer typischen anomalen Trichromasie entspricht. Achromatopsie und partielle Achromatomalie nutzen rec601-Luminanzgewichte (`0.299R + 0.587G + 0.114B`) für eine Graustufenprojektion. Alle acht Simulationen werden bei jeder Farbänderung gerendert.

WCAG 2 vs APCA: Welches wann nutzen

WCAG 2.x (aktueller Standard) berechnet ein symmetrisches Kontrastverhältnis aus der relativen Luminanz: `(L1 + 0.05) / (L2 + 0.05)`, Zielwert 4,5:1 für normalen Fließtext und 7:1 für AAA. Das ist 2026 der rechtliche Mindeststandard für Accessibility-Audits. APCA (Accessible Perceptual Contrast Algorithm) ist der vorgeschlagene WCAG-3-Nachfolger — polaritätsempfindlich (Hell-auf-Dunkel wird anders bewertet als Dunkel-auf-Hell), besser korreliert mit der menschlich wahrgenommenen Lesbarkeit, Zielwert `|Lc| ≥ 75` für Fließtext. Beide Metriken in einer Zeile zu sehen erlaubt einer Designerin, WCAG 2 für die Compliance und APCA für die reale Lesbarkeit zu erreichen, ohne zwischen zwei separaten Rechnern hin- und herzuwechseln.

Best Practices für Farbkonvertierung

OKLCH für Designsystem-Tokens bevorzugen; HEX für Legacy

Für jedes neue Designsystem, das 2025 oder später ausgeliefert wird, definieren Sie Markenfarben und Palettenskalen in OKLCH. Die L-Achse liefert automatisch perzeptuell gleichmäßige Skalen; die Chroma-Achse kann Wide-Gamut-Farben adressieren, die HEX nicht kodieren kann. Halten Sie für ältere Browser einen HEX-Fallback über `@supports not (color: oklch(0 0 0))` oder Build-Zeit-PostCSS bereit, machen Sie aber OKLCH zum kanonischen Wert in Ihrem Token-Store. Legacy-Systeme mit Tausenden existierender HEX-Variablen können HEX behalten, bis eine geplante Migration ansteht — keine Bewegung um ihrer selbst willen.

CMYK-Ausgabe als Näherung behandeln, mit der Druckerei bestätigen

Die CMYK-Werte, die dieses Tool ausgibt, sind eine naive sRGB-basierte Formel, keine ICC-Profilkonvertierung. Verwenden Sie sie für grobe Kostenvoranschläge und interne Comps. Schicken Sie vor jedem echten Druckauftrag den ursprünglichen HEX (nicht die CMYK-Näherung) an die Druckerei und lassen Sie sie die ICC-Konvertierung gegen die konkrete Maschine, Farbe und das Papier durchführen. Die 5–15-prozentige Kanal-Verschiebung aus einer ordentlichen Konvertierung kann ein scharfes Rot leicht in ein schlammiges Orange verwandeln, wenn die Näherung direkt ausgeliefert wird.

APCA Lc für zukunftsgerichtete Accessibility nutzen

WCAG 2.x wird noch einige Jahre der regulatorische Mindeststandard bleiben, aber APCA ist die Richtung, in die der Standard wandert. Für neue Designs erreichen Sie zusätzlich zu den WCAG-2.1-Mindestwerten `|Lc| ≥ 75` für Fließtext und `|Lc| ≥ 60` für große Schrift. APCA erwischt Lesbarkeitsprobleme, die das symmetrische WCAG-2-Verhältnis übersieht — insbesondere dünn gestrichelten Text auf hellen Hintergründen, bei dem das WCAG-Verhältnis in Ordnung aussieht, der Text aber im normalen Leseabstand tatsächlich verschwindet.

Wide-Gamut-Farben durch die Display-P3-Gamut-Prüfung laufen lassen

Wenn Sie auf moderne Apple-Hardware (iPhone, iPad, MacBook ab 2017) zielen oder HDR-bewusste Inhalte ausliefern, definieren Sie Markenfarben in OKLCH und nutzen Sie das Display-P3-Badge, um sicherzustellen, dass sie in P3 passen, auch wenn sie sRGB überschreiten. Die breiteren Gamut-Farben wirken auf P3-Displays spürbar gesättigter und degradieren auf reinen sRGB-Bildschirmen über die browserseitige Chroma-Kompression sanft. Snappen Sie nicht vorzeitig auf sRGB, es sei denn, Sie wissen, dass Ihre gesamte Zielgruppe auf Legacy-Displays unterwegs ist.

Perzeptuell gleichförmige Shades über OKLCH-Tones wählen

Wenn Sie eine 50/100/200/.../900-Skala für eine Markenfarbe erzeugen, nutzen Sie das Tones-Panel: Es verändert L in gleichen Schritten, während C und H konstant bleiben. Das Ergebnis ist eine perzeptuell gleichmäßige Skala, bei der der visuelle Abstand zwischen 400 und 500 identisch zum Abstand zwischen 500 und 600 wirkt. HSL-Skalen für dieselbe Gleichmäßigkeit von Hand nachzujustieren ist eine mehrstündige Übung pro Farbe; OKLCH liefert es geschenkt.

Den Eyedropper sparsam für tab-übergreifende Farbabgleiche nutzen

Die EyeDropper-API (ab 2026 nur Chromium) erlaubt es, irgendwo auf den Bildschirm zu klicken — auch außerhalb des Browsers — um diesen Pixelwert zu übernehmen. Nützlich, um eine Farbe aus einem Screenshot, einem Videoframe oder einer anderen App-UI abzugreifen. Behandeln Sie das Ergebnis als Startpunkt, nicht als finalen Wert — die Bildschirmwiedergabe wendet Color-Management an, das sich von der Quelldatei unterscheiden kann. Holen Sie kanonische Markenfarben immer aus der Designquelle (Figma, Sketch, das Markenleitfaden-PDF), statt einen Screenshot mit dem Eyedropper anzustechen.

URLs mit `#hex=...` für teilbare Paletten-Entscheidungen bookmarken

Die aktuelle Farbe wird automatisch in den URL-Hash als `#hex=...` oder `#oklch=...` kodiert. Kopieren Sie die URL, fügen Sie sie in einen Slack-Thread oder ein GitHub-Issue ein, und wer den Link öffnet, landet bei genau derselben Farbe. Nützlich für Design-Review-Threads, in denen „das Markenblau“ ein bestimmtes OKLCH-Tripel bedeuten muss. Der Hash aktualisiert sich bei jeder Änderung, sodass die URL in Ihrer Adressleiste stets die aktuelle Live-Farbe ist — bookmarken Sie sie, um später zu einer bestimmten Palette zurückzukehren.

Häufig gestellte Fragen