HEX, RGB und HSL: ein Web-Farbformat wählen

Jede Farbe in diesen Notationen ist dieselbe sRGB-Farbe in anderer Kleidung. HEX ist RGB zur Basis sechzehn: #4F46E5 sind die Rot-, Grün- und Blaukanäle als je zwei Hexadezimalziffern. rgb(79, 70, 229) nennt dieselben drei Kanäle dezimal, und hsl() beschreibt dasselbe Pixel als Position auf einem Farbkreis.

HEX und rgb() können dieselben 8-Bit-sRGB-Kanäle exakt darstellen. Auch ein hsl()-Wert kann die Farbe beschreiben, doch gerundeter Farbton, Sättigung oder Helligkeit können das Ergebnis einer Rückumwandlung verschieben.

• HEXHEX ist kompakt und stabil für Copy-Paste zwischen Designtools und Code – darum werden Paletten und Styleguides meist als Hex veröffentlicht.
• RGBRGB liest sich als drei Kanal-Intensitäten von 0 bis 255 und entspricht der Art, wie Bildschirme und Bildformate Pixel tatsächlich speichern.
• HSLHSL liest sich als Farbton, Sättigung und Helligkeit – näher daran, wie Menschen Farbe beschreiben, und weit leichter gezielt zu justieren.

Transparenz lässt sich an jede Notation anflanschen. rgb() und hsl() nehmen ein viertes Argument – rgba(79, 70, 229, 0.5) –, und HEX bekam eine achtstellige Form, #4F46E580, bei der das letzte Paar Alpha von 00 bis FF ist.

• 0–1 oder 00–FFDer Alpha-Wert reicht in Funktionsschreibweise von 0 bis 1; achtstelliger Hex-Code nutzt 00 bis FF. Das Byte 80 entspricht 128/255, also etwa 0,502 – nahe an 0,5, aber nicht genau gleich.
• Auf Flächen testenEine halbtransparente Ebene wird entsprechend ihrem Alpha-Wert mit dem Hintergrund zusammengesetzt. Prüfe sie auf jeder Fläche, auf der sie erscheinen soll.
• Verwandte TokensWenn ein Designsystem eine deckende und eine transluzente Version desselben Farbtons ausliefert, hält ein achtstelliges Hex sie sichtbar verwandt.

RGB-Kanäle direkt zu bearbeiten ist Arithmetik; Absicht zu bearbeiten ist in HSL leichter. Eine Aufhellung ist derselbe Farbton mit mehr Helligkeit, eine Abdunkelung derselbe mit weniger, und eine gedämpfte Variante derselbe Farbton mit heruntergedrehter Sättigung – drei Ein-Regler-Züge statt dreier gemeinsam driftender Kanäle.

Color Shades Generator erzeugt die Abstufung mechanisch: Aus einer Hex-Farbe mischt er in Richtung Schwarz und Weiß und liefert drei bis zwanzig gewichtete Stufen als Hex-Werte. Diese Stufen sind nicht wahrnehmungsgleichmäßig; prüfe jeden Kandidaten im tatsächlichen UI-Kontext.

• Auf- und AbdunklungenAuf- und Abdunklungen: Halte Farbton und Sättigung, fahre die Helligkeit von fast Weiß bis fast Schwarz, und du erhältst eine brauchbare Rampe für Hintergründe, Zustände und Text.
• SättigungszuständeGedämpfte und lebhafte Varianten kommen allein aus dem Sättigungsregler – so bleiben Hover- und Disabled-Zustände in derselben Familie.
• FarbtonrotationFarbtonrotation erzeugt verwandte Farben: Analoge Nachbarn liegen innerhalb von etwa dreißig Grad, Komplementäre hundertachtzig Grad entfernt.

Farbharmonien sind Geometrie auf dem Farbkreis: Komplementärpaare liegen gegenüber, triadische Sets teilen den Kreis in Drittel, analoge Gruppen rücken zusammen. HSL macht die Mathematik sichtbar – ändere eine Zahl, und das ganze Schema bewegt sich.

Color Harmony Builder wendet exakt dieses Modell an. Aus einem sechsstelligen Seed-Hex generiert er Fünf-Farben-Paletten in sechs klassischen Schemata – analog, komplementär, split-komplementär, triadisch, tetradisch und monochrom – und prüft den Kontrast jedes Felds gegen schwarzen und weißen Text an WCAG-Zielwerten von 3, 4,5 oder 7.

Das Ergebnis lässt sich als CSS-Custom-Properties und als JSON exportieren. Teile Ausgangsfarbe und Schema, um die fünf Farben zu reproduzieren; wenn dieselben Bestehen/Nichtbestehen-Markierungen wichtig sind, gib auch das Kontrastziel an.

Modernes CSS hat die alten Funktionsformen vereinigt: leerzeichengetrennte Kanäle mit optionalem Slash für Alpha – rgb(79 70 229 / 0.5) – ersetzen das kommalastige rgba(). Die Spezifikation der Stufe 4 fügt außerdem Notationen wie hwb(), lab() und oklch() für größere Farbräume und wahrnehmungsgleichmäßige Rampen hinzu.

Color Mixer akzeptiert unterstützte Hex-Farben, bietet Alpha-bewusste Interpolation oder Source-over-Compositing und liefert Hex- und RGBA-Ergebnisse. Wähle Operation und Gewichtung, bevor du zwei Markenfarben vergleichen.

Das Eingabefeld akzeptiert Hex-Text, keine beliebigen CSS-Farbausdrücke. Wandle rgb()- oder hsl()-Werte vor der Verwendung in eine unterstützte Hex-Form um.

• Neue SyntaxLeerzeichengetrennte Kanäle mit Slash-Alpha sind in jedem aktuellen Browser gültig; die Kommaformen bleiben als Legacy-Aliase unterstützt.
• Warum OKLCHoklch() behebt einen echten HSL-Fehler: Gleiche Helligkeitsstufen sehen in HSL über Farbtöne hinweg nicht gleich hell aus, OKLCH hält die wahrgenommene Helligkeit dagegen konsistent.
• Bewusst übernehmenÜbernimm neue Notationen dort, wo sie ein Problem lösen – konsistente Rampen, Wide-Gamut-Displays –, und behalte Hex oder rgb() dort, wo Werkzeuge und Gewohnheiten bereits funktionieren.

Paletten beginnen oft mit einem Screenshot, Logo oder Foto. Das Abtasten eines decodierten Pixels im Browser liefert einen für diese Darstellung reproduzierbaren Wert – hilfreicher als eine Schätzung nach Augenmaß.

Image Color Picker öffnet PNG, JPEG oder WebP im Tab und zeigt den RGBA-Wert des decodierten Pixels, den der Browser über Canvas an der angeklickten Stelle abtastet. Das hilft bei alten Grafiken oder geglätteten Kanten; der Wert kann jedoch von Decodierung und Farbkonvertierung beeinflusst sein.

Alles läuft lokal: Das Bild wird in deinem Browser dekodiert und nie hochgeladen – was zählt, wenn das Artwork ein unveröffentlichtes Design ist. Trage den gewählten Wert in die Shades- oder Harmony-Tools, und die ganze Kette vom Artwork zur Palette bleibt auf deinem Gerät.