Farbschatten-Generator

Ein Farbschatten-Generator nimmt ein CSS-Hex als Basis und eine Schrittanzahl und liefert eine vollständige Leiter dunklerer Schatten und hellerer Aufhellungen, indem er nur den Helligkeitskanal im HSL-Raum verschiebt. Farbton und Sättigung bleiben fest, sodass Markenblau blau und Markenrot rot bleibt, während Oberflächen sanft von nahezu Schwarz über die Basis bis nahezu Weiß fortschreiten. Die Schrittanzahl ist die Zahl der Stufen auf jeder Seite der Basis: drei Schritte ergeben drei dunklere Schatten, die Originalfarbe und drei hellere Aufhellungen — insgesamt sieben von dunkel nach hell geordnete Felder. Ungültige Hex-Zeichenketten und Schrittanzahlen außerhalb des erlaubten Ganzzahlbereichs werden mit einem klaren Validierungsfehler abgewiesen statt still geklemmt.

Wie Aufhellungen und Schatten die Helligkeit stufen

Beginnen Sie mit einer CSS-Hex-Farbe wie Hash drei drei sechs sechs c c oder der Kurzform Hash drei sechs c. Der Parser expandiert dreistellige Codes, setzt die Ziffern in Kleinbuchstaben und wandelt jedes Paar in Rot-, Grün- und Blau-Ganzzahlen von null bis zweihundertfünfundfünfzig um.

Diese Kanäle werden mit den Standardformeln von CSS und W3C auf Farbton, Sättigung und Helligkeit abgebildet: Die Helligkeit ist der Mittelwert der maximalen und minimalen Kanalfaktionen, die Sättigung hängt von dieser Helligkeit ab, und der Farbton wird in Grad um das Farbrad gemessen, wobei achromatische Grautöne Farbton null melden. Schatten mischen nicht in RGB Richtung Schwarz; sie senken nur den Helligkeitsprozentsatz, während Farbton und Sättigung fest bleiben.

Für den Schrittindex k von eins bis zur gewählten Schrittanzahl nutzt jeder Schatten eine Helligkeit gleich der Basishelligkeit multipliziert mit eins minus k durch Schritte, sodass der fernste Schatten bei reinem Schwarz mit Helligkeit null landet und der nächste Schatten knapp unter der Basis liegt. Aufhellungen heben die Helligkeit auf dieselbe Weise Richtung Weiß: Die Helligkeit wird zur Basishelligkeit plus der verbleibenden Distanz bis hundert, skaliert mit k durch Schritte, sodass die fernste Aufhellung reines Weiß ist.

Sobald jede neue Helligkeit bekannt ist, wandelt derselbe CSS-Pfad von Farbton zu RGB HSL zurück in Ganzzahlkanäle und einen sechsstelligen Hex-Code in Kleinbuchstaben. Es gibt keine Zufallskeime, Wanduhr-Zeitstempel oder Netzwerkanrufe, sodass dieselben Eingaben stets dieselbe geordnete Skala ergeben. Alpha-Hex-Formen mit vier oder acht Ziffern werden abgewiesen, weil dieser Vertrag nur opakes RGB ist.

Nichtganzzahlige Schritte oder Werte außerhalb von eins bis zwanzig scheitern an der Validierung, damit Clients den erlaubten Bereich nicht still überschreiten.

Was Sie senden und was Sie zurückerhalten

Senden Sie zwei Felder: color als Hex-Zeichenkette und steps als Ganzzahl zwischen eins und zwanzig einschließlich. Jedes Farbfeld enthält role, index, step, hex, Ganzzahlen r g b, Zahlen für Farbton Sättigung Helligkeit sowie druckbare rgb- und hsl-Zeichenketten. Role ist shade für dunklere Schritte, base für das Original und tint für hellere Schritte; step ist negativ für Schatten, null für die Basis und positiv für Aufhellungen, sodass Clients ohne erneute Ableitung der Helligkeit sortieren oder filtern können.

Eine kurze formula-Zeichenkette dokumentiert die L-Stufenregeln für Dokumentation und Support. Typische Prüfungen: drei Schritte auf Hash drei drei sechs sechs c c, fünf Schritte auf reinem Rot und Bestätigung, dass ungültiges Hex an der Validierung scheitert. Nutzen Sie das kostenlose Browserformular für Designreviews und schnelle Rampen und rufen Sie denselben Vertrag aus Skripten auf, wenn Sie Massengenerierung von Token-Skalen brauchen.

Halten Sie steps im dokumentierten Bereich, statt auf stille Klemmung zu vertrauen — dieses Werkzeug scheitert laut, damit Designsysteme vorhersagbar bleiben.

Wo Schattenskalen in der realen Arbeit vorkommen

Produktdesigner bauen vollständige UI-Rampen, indem sie dunklere active-Zustände und hellere Hover-Hintergründe aus einem Markenprimär ohne Farbtonverschiebung erzeugen, sodass eine Marineblau-CTA-Leiter vom gedrückten Zustand bis zur weichen Fläche marineblau bleibt. Barrierefreiheitsprüfer erkunden Begleiter von Text- oder Icon-Farben entlang einer Helligkeitsleiter und übergeben Kandidaten an einen Kontrastprüfer, statt Mitteltöne aus dem Auge zu raten. Marketingteams erzeugen Kampagnenpastelle und tiefe Akzente aus gesättigten Logos für Social-Banner und E-Mail-Köpfe und bewahren dabei die Farbtonidentität der Marke.

Frontend-Ingenieure skripten Schattenrampen in der kontinuierlichen Integration, sodass eine einzelne Markenfarbe eine dokumentierte Leiter für Diagramme, Chips, Badges und Sekundärschaltflächen liefert. Wenn Sie später nur einen einzelnen Aufhellungsschritt, eine HSL-zu-RGB-Umwandlung, eine analoge Palette oder eine WCAG-Kontrastprüfung brauchen, behandeln Sie diese als getrennte Suchintentionen und Landings statt diese Schattenseite zu überladen.