HCT-Editor

Googles offizieller Farbraum hinter Material 3: wahrnehmungsgleichmäßige Bearbeitung von Farbton / Chroma / Ton mit der 13-stufigen Tonpalette und Material 3-Rollenableitung — passen Sie eine Markenfarbe an und erstellen Sie das Thema in einem Durchgang.

Basisfarbe (HEX)

Farbton0

Sättigung Chroma0

Ton0

000000

HCT-Kombinationen außerhalb von sRGB werden auf die nächste anzeigbare Farbe abgebildet.

Im Board öffnen →

Tonpalette

13 Tonstufen (0–100) bei gleichem Farbton / Chroma — das Rückgrat jedes Material 3-Themas.

100

Material 3-Rollen

Werte für Rollen im Hellmodus, abgeleitet von Ihrer Farbe gemäß der Material 3-Spezifikation.

primarytone 40#5e5e5e

onPrimarytone 100#ffffff

primaryContainertone 90#e2e2e2

onPrimaryContainertone 10#1b1b1b

surfaceTinttone 80#c6c6c6

Drei Schritte: Geben Sie eine Farbe ein, passen Sie drei Dimensionen an, lesen Sie die Rollen.

Googles offizieller Material 3-Farbraum – Farbton / Sättigung / Helligkeit, wahrnehmungsgleichmäßig mit vorhersehbarem Kontrast.

01
Geben Sie eine Grundfarbe ein
Fügen Sie einen HEX-Code ein, und die HCT-Regler springen an die passende Stelle; Sie können auch eine Farbe aus dem Editor oder jeder Farbprofilseite übernehmen.
02
Passen Sie Farbton / Sättigung / Helligkeit an
Farbton H reicht von 0–360, Sättigung C bestimmt die Lebendigkeit und Helligkeit T 0–100 passt direkt zur Material-Design-Skala; Kombinationen außerhalb des Farbraums werden auf die nächste anzeigbare Farbe abgebildet.
03
Lesen Sie die Tonpalette und Rollen
Die 13-stufige Tonpalette ist das Grundgerüst jedes Material 3-Designs, und das Rollen-Panel listet Empfehlungen für Primärfarben / Primärcontainer-Helligkeit auf, die Sie direkt kopieren können.

HCT Häufig gestellte Fragen

Drei häufige Fragen zu HCT und Material 3-Paletten.

Wie unterscheidet sich HCT von OKLCH?: Beide zielen auf wahrnehmungsgleiche Gleichmäßigkeit ab, aber HCT basiert auf dem CAM16-Farberscheinmodell, das auch Betrachtungsbedingungen und chromatische Anpassung berücksichtigt. Es ist der offizielle Farbraum von Googles Material 3-Designsystem – Paletten aus Material-Tools stimmen exakt mit HCT überein.
Warum Ton statt eines Helligkeitsprozentsatzes?: Ton 0–100 entspricht grob linear der relativen Leuchtdichte (Y), und die Material-Spezifikation definiert Rollen nach Ton: Primär=40, Oberfläche=98 usw. – die Auswahl nach Ton ermöglicht es, den Textkontrast im Voraus vorherzusagen.
Warum genau 13 Stufen in der Tonalpalette?: 0/10/20 ... 100 ist die offizielle Material 3-Werteskala, die den gesamten Bereich von Schwarz bis Weiß abdeckt. Eine feste Skala hält Themen strukturell identisch bei verschiedenen Quellfarben, sodass sie direkt ausgetauscht werden können.

Nach der Bearbeitung

Übertrage die Farbe in den Board-Editor, um eine Palette zu erstellen, oder verfeinere sie im OKLCH-Editor im gleichen wahrnehmungsgerechten Stil.

OKLCH-Editor

Passen Sie L / C / H im wahrnehmungsgleichmäßigen OKLCH-Raum an mit Live-Vorschau und Ausgabe als oklch() / HEX / RGB.

Semantische UI-Farbpalette

Geben Sie eine Markenfarbe ein, erhalten Sie Primär-/Sekundär-/Erfolgs-/Warn-/Gefahrfarben — exportiert als Tailwind-Konfiguration und CSS-Variablen.

Kontrastprüfer

WCAG 2.1-Kontrastprüfung zwischen beliebigen Vordergrund- und Hintergrundfarben.

Drei Schritte: Geben Sie eine Farbe ein, passen Sie drei Dimensionen an, lesen Sie die Rollen.

Googles offizieller Material 3-Farbraum – Farbton / Sättigung / Helligkeit, wahrnehmungsgleichmäßig mit vorhersehbarem Kontrast.

Geben Sie eine Grundfarbe ein

Fügen Sie einen HEX-Code ein, und die HCT-Regler springen an die passende Stelle; Sie können auch eine Farbe aus dem Editor oder jeder Farbprofilseite übernehmen.

Passen Sie Farbton / Sättigung / Helligkeit an

Farbton H reicht von 0–360, Sättigung C bestimmt die Lebendigkeit und Helligkeit T 0–100 passt direkt zur Material-Design-Skala; Kombinationen außerhalb des Farbraums werden auf die nächste anzeigbare Farbe abgebildet.

Lesen Sie die Tonpalette und Rollen

Die 13-stufige Tonpalette ist das Grundgerüst jedes Material 3-Designs, und das Rollen-Panel listet Empfehlungen für Primärfarben / Primärcontainer-Helligkeit auf, die Sie direkt kopieren können.

HCT Häufig gestellte Fragen

Drei häufige Fragen zu HCT und Material 3-Paletten.

Wie unterscheidet sich HCT von OKLCH?

Beide zielen auf wahrnehmungsgleiche Gleichmäßigkeit ab, aber HCT basiert auf dem CAM16-Farberscheinmodell, das auch Betrachtungsbedingungen und chromatische Anpassung berücksichtigt. Es ist der offizielle Farbraum von Googles Material 3-Designsystem – Paletten aus Material-Tools stimmen exakt mit HCT überein.

Warum Ton statt eines Helligkeitsprozentsatzes?

Ton 0–100 entspricht grob linear der relativen Leuchtdichte (Y), und die Material-Spezifikation definiert Rollen nach Ton: Primär=40, Oberfläche=98 usw. – die Auswahl nach Ton ermöglicht es, den Textkontrast im Voraus vorherzusagen.

Warum genau 13 Stufen in der Tonalpalette?

0/10/20 ... 100 ist die offizielle Material 3-Werteskala, die den gesamten Bereich von Schwarz bis Weiß abdeckt. Eine feste Skala hält Themen strukturell identisch bei verschiedenen Quellfarben, sodass sie direkt ausgetauscht werden können.