bb trading E-Shop: Inspiration mittels eines «Smart Filters» // Elastic Suche mit integrierter Farbraum (hclcolorspace mit Euklidische Distanz) Lösung
Für den Schweizer Marktführer in Sachen kreative Werbeartikel, innovative Kundengeschenke, trendige Corporate Wear und sowieso alles, auf das ein Firmenlogo passt (also eigentlich alles) haben wir den neuen WebShop erstellt.
Dabei haben wir unseren klassischen Tech Stack verwendet:
Integration von Shopware 6 und WordPress
Wir haben Shopware 6 als Herzstück des Online-Shops gewählt, um eine flexible und skalierbare Lösung zu gewährleisten. Durch die vollständige Integration mit WordPress können Inhalte einfach verwaltet und aktualisiert werden, was die Benutzererfahrung erheblich verbessert.
Visueller Konfigurator und Grafikservice
Kunden haben die Möglichkeit, ihre Produkte in Echtzeit über einen visuellen Konfigurator zu individualisieren. Dieser bietet eine intuitive Benutzeroberfläche, die es ermöglicht, Designs einfach anzupassen. Alternativ steht der kostenlose Grafik- und Layoutservice von bb trading zur Verfügung, der zusätzliche Unterstützung bietet.
Intelligente Suche mit Elasticsearch
Ein zentrales Feature des Shops ist die intelligente Suche, die auf Elasticsearch basiert. Diese leistungsstarke Suchtechnologie ermöglicht es den Nutzern, Produkte schnell und effizient zu finden. Die Suchergebnisse sind präzise und relevant, wodurch die Wahrscheinlichkeit eines Kaufs steigt.
Smarte Filtersuche für personalisierte Ergebnisse Zusätzlich zur Standard Produktsuche haben wir eine innovative Smartfilter-Suche implementiert. Kunden können durch Eingabe einer Preisrange und einer gewünschten Produktzielfarbe gezielt nach Produkten suchen, die möglichst nah an ihrer Zielfarbe liegen. Diese Funktion wird durch einen speziell präparierten Elasticindex unter Verwendung von hclcolorspace ermöglicht.
Euklidische Distanz im RGB-Farbraum
Die euklidische Distanz lässt sich direkt auf RGB-Werte (oder Hex-Codes, die in RGB umgewandelt werden können) anwenden. Sie misst den Abstand zwischen zwei Farben in einem 3D-Raum (R, G, B). Die Formel zwischen zwei RGB-Farben C1(R1,G1,B1) und C2(R2,G2,B2) lautet:
[ d=(R2−R1)2+(G2−G1)2+(B2−B1)2d = \sqrt{(R2 – R1)^2 + (G2 – G1)^2 + (B2 – B1)^2} d=(R2−R1)2+(G2−G1)2+(B2−B1)2 ]
Diese Methode ist einfach, jedoch nicht perfekt für die menschliche Farbwahrnehmung, da unser Auge empfindlicher auf einige Farben als auf andere reagiert.
Gibt es da auch etwas geeignetes für den Farbraum, wenn Hex-Codes bekannt sind?
Ja, um Entfernungen oder Ähnlichkeiten zwischen Farben im Farbraum zu messen, gibt es spezielle Metriken, die auf Hex- oder RGB-Werten basieren. Da die Wahrnehmung von Farben im menschlichen Auge komplex ist, sind einige Farbdifferenzmethoden dafür optimiert. Hier sind einige gebräuchliche Methoden:
Next Smartfilter mit HSL-Farbraum – Was ist der HSL-Farbraum?
Der HSL-Farbraum (auch als HLS bezeichnet) hat die Parameter Farbwinkel H, Farbsättigung S und Farbhelligkeit L. Im Gegensatz zum HSV-Farbraum wird er jedoch auf den zwischen Weiss und Schwarz liegenden Graupunkt als neutrales Grau bezogen. Der Graupunkt liegt in der Mitte und die Buntwerte aussen, der Farbkörper wird daher als Doppelkegel, (Doppel-)Zylinder oder sechsseitiges Prisma dargestellt.
Ähnlich aufgebaut ist das CIE-LCh°-Modell mit Farbhelligkeit L, Buntheit C (entspricht der Sättigung) und dem Bunttonwinkel h° (entspricht dem Farbwinkel), das gewissermassen einem Lab-Farbraum in Zylinderkoordinaten entspricht.
HSB und HSI-An den Bedürfnissen der Farbmetrik und der phototechnischen Reproduktion orientieren sich das HSB- und das HSI-Modell. Auch hierbei steht H für Buntwert (hue) und S für Sättigung. Der Unterschied bezieht sich auf die dritte Koordinate:
– HSB mit der Strahlungsgrösse der absoluten Helligkeit B
– HSI mit der Lichtintensität I.
Quelle: https://de.wikipedia.org/wiki/HSV-Farbraum#HSL
Was ist hclcolorspace?
Der HCL-Farbraum (Hue, Chroma, Lightness) ist eine moderne Methode zur Beschreibung von Farben, die es ermöglicht, Farbvariationen intuitiver und benutzerfreundlicher darzustellen. Im Gegensatz zu traditionellen Farbmodellen (wie RGB oder CMYK) berücksichtigt der HCL-Farbraum die menschliche Farbwahrnehmung viel besser.
Vorteile des HCL-Farbraums:
- Intuitive Farbwahrnehmung: HCL orientiert sich an der Art und Weise, wie Menschen Farben wahrnehmen, was die Auswahl und Anpassung von Farben für Kunden erleichtert.
- Einfache Farbfilterung: Mit HCL können Benutzer gezielt nach Farbnuancen suchen, die ihren Vorstellungen entsprechen, was die Produktauswahl verbessert.
- Höhere Genauigkeit: Der HCL-Farbraum reduziert die Unterschiede zwischen den angezeigten und den tatsächlichen Farben, wodurch eine genauere Farbdarstellung erreicht wird.
Die euklidische Distanz ist ein mathematisches Maß, das die «Luftlinie» zwischen zwei Punkten in einem mehrdimensionalen Raum beschreibt. Man kann sie sich als die kürzeste Entfernung zwischen zwei Punkten in einem 2D- oder 3D-Koordinatensystem vorstellen. Diese Distanz wird oft in der Geometrie, Mathematik, Physik und Informatik verwendet, um Abstände zu berechnen und Muster zu erkennen.
Mathematisch wird die euklidische Distanz zwischen zwei PunktenA(x1,y1)A(x1,y1)A(x1,y1)undB(x2,y2)B(x2,y2)B(x2,y2)im 2D-Raum durch folgende Formel berechnet:
d=(x2−x1)2+(y2−y1)2d=(x2−x1)2+(y2−y1)2d=(x2−x1)2+(y2−y1)2
Für den 3D-Raum erweitert sich die Formel zu:
d=(x2−x1)2+(y2−y1)2+(z2−z1)2d=(x2−x1)2+(y2−y1)2+(z2−z1)2d=(x2−x1)2+(y2−y1)2+(z2−z1)2
Hierbei wird die Differenz der jeweiligen Koordinaten (z.B. xxx- und yyy-Koordinaten) quadriert, aufsummiert und dann die Quadratwurzel genommen, um die tatsächliche Distanz zu erhalten.
Euklidische Distanz im RGB-Farbraum
Die euklidische Distanz lässt sich direkt auf RGB-Werte (oder Hex-Codes, die in RGB umgewandelt werden können) anwenden. Sie misst den Abstand zwischen zwei Farben in einem 3D-Raum (R, G, B). Die Formel zwischen zwei RGB-Farben C1(R1,G1,B1) und C2(R2,G2,B2) lautet:
d=(R2−R1)2+(G2−G1)2+(B2−B1)2d=(R2−R1)2+(G2−G1)2+(B2−B1)2d=(R2−R1)2+(G2−G1)2+(B2−B1)2
Diese Methode ist einfach, jedoch nicht perfekt für die menschliche Farbwahrnehmung, da unser Auge empfindlicher auf einige Farben als auf andere reagiert.
CIE76-Distanz im LAB-Farbraum
Der LAB-Farbraum wurde entwickelt, um menschliche Farbwahrnehmung zu berücksichtigen. Er besteht aus drei Komponenten: L* (Helligkeit), a* (grün-rot) und b* (blau-gelb). Die CIE76-Distanz berechnet den euklidischen Abstand in diesem Farbraum und ist genauer als die einfache RGB-Distanz:
d=(L2−L1)2+(a2−a1)2+(b2−b1)2d=(L2−L1)2+(a2−a1)2+(b2−b1)2d=(L2−L1)2+(a2−a1)2+(b2−b1)2
Hex-Werte müssen hierfür in LAB-Werte umgewandelt werden. Die CIE76-Distanz ist die einfachste LAB-Metrik, aber es gibt noch genauere Methoden.
CIE94 und CIEDE2000 (Farbdifferenz-Algorithmen)
Diese sind verbesserte Versionen des CIE76-Standards und berücksichtigen menschliche Wahrnehmungsunterschiede noch stärker. CIE94 und CIEDE2000 berücksichtigen Faktoren wie Farbton, Sättigung und Helligkeit. Die Formel ist komplexer, aber diese Methoden sind sehr präzise und werden in der Industrie oft verwendet, z.B. bei Druck- und Bildverarbeitungsanwendungen.
Delta-E (ΔE)
Delta-E ist eine allgemeine Bezeichnung für Farbdifferenzmetriken wie CIE76, CIE94 und CIEDE2000. Der Wert gibt an, wie unterschiedlich zwei Farben für das menschliche Auge erscheinen. Ein niedriger ΔE-Wert bedeutet, dass die Farben sehr ähnlich sind; höhere Werte zeigen größere Unterschiede an.
- Delta-E (1976): Verwendet die CIE76-Distanz im LAB-Raum.
- Delta-E (1994): Korrigiert bestimmte Wahrnehmungsprobleme von CIE76.
- Delta-E (2000): Aktuell die präziseste Methode zur Messung von Farbunterschieden.
HSV-Farbraum-Distanz (Helligkeit und Sättigung im Mittelpunkt)
Im HSV-Farbraum (Farbton, Sättigung und Helligkeit) kann man auch Entfernungen messen, besonders wenn Farben ähnliche Helligkeiten oder Sättigungen haben. Die Umrechnung in den HSV-Raum und eine darauf basierende Metrik hilft oft, die visuelle Ähnlichkeit besser abzubilden.
Insgesamt sind CIE94 und CIEDE2000 die genauesten Methoden, da sie Wahrnehmungseigenschaften integrieren.
Fazit
Das Projekt für die bb trading werbeartikel ag ist ein Paradebeispiel für innovative E-Commerce-Lösungen. Durch die Kombination modernster Technologien und benutzerfreundlicher Features haben wir eine Plattform geschaffen, die nicht nur die Bedürfnisse der Kunden erfüllt, sondern auch das Wachstum des Unternehmens unterstützt. Wir sind stolz darauf, Teil dieses Erfolgs zu sein und freuen uns auf zukünftige Projekte, die das Einkaufserlebnis weiter verbessern werden.
Wenn Sie mehr über unsere Dienstleistungen erfahren möchten oder Ihr eigenes E-Commerce-Projekt in Angriff nehmen wollen, kontaktieren Sie uns gerne!
