Farbunterschied / Ähnlichkeit% zwischen zwei Werten mit JS

8

Ich muss den Unterschied zwischen zwei Hex-Farbwerten berechnen, so dass die Ausgabe ein Prozentwert ist. Das erste, was ich weggelassen habe, war die Konvertierung des Hexadezimalwertes in Dezimal, da der erste viel mehr Gewicht hat als der letzte.

Die zweite Option besteht darin, den Unterschied zwischen den einzelnen RGB-Werten zu berechnen und sie dann alle hinzuzufügen. Der Unterschied zwischen 0, 0, 0 und 30, 30, 30 ist jedoch viel geringer als der zwischen 0, 0, 0 und 90, 0, 0 .

Diese Frage empfiehlt, YUV zu verwenden, aber ich kann nicht herausfinden, wie ich es verwenden kann, um den Unterschied festzustellen.

>

Auch diese andere Frage hat eine schöne Formel, um den Unterschied zu berechnen und einen RGB-Wert auszugeben, aber es ist nicht ganz da.

    
metrobalderas 27.11.2012, 15:00
quelle

5 Antworten

4

Berechnen Sie einfach eine euklidische Entfernung :

%Vor%     
bjornd 27.11.2012, 15:05
quelle
6

Das Problem ist, dass Sie so etwas wie eine Entfernung auf einer 3 dimensionalen Welt wollen, aber diese RGB-Darstellung ist überhaupt nicht intuitiv: "Nahe" Farben können sein viel anders als diese "far" Farbe.

Nehmen wir zum Beispiel zwei Graustufen c1: (120,120,120) und c2: (150,150,150) und nehmen jetzt c3: (160,140,140) es ist näher an c2 als c1, aber es ist lila und für das Auge das dunklere Grau ist viel näher an Grau als ein Purpur.

Ich würde vorschlagen, dass Sie hsv verwenden: Eine Farbe wird durch eine "Basis" -Farbe (Farbton), die Sättigung und die Intensität definiert. Farben mit engem Farbton sind in der Tat sehr nahe. Farben mit sehr unterschiedlichem Farbton stehen nicht miteinander in Beziehung (expl: gelb und grün), scheinen aber bei einer (sehr) niedrigen Sättigung und (sehr) niedrigen Intensität näher zu sein.
(Nachts sind alle Farben gleich.)

Da der Farbton in 6 Blöcke unterteilt ist, gibt Ihnen cyl = Math.floor (hue / 6) den ersten Schritt Ihrer Ähnlichkeitsbewertung: wenn der gleiche Teil des Zylinders - & gt; ganz in der Nähe. Wenn sie nicht zum selben Zylinder gehören, könnten sie immer noch (ganz) geschlossen sein, wenn (h2-h1) klein ist, vergleiche sie mit (1/6). Wenn (h2-h1) & gt; 1/6 das könnten einfach zu unterschiedliche Farben sein.

Dann kannst du präziser mit dem (s, v) sein. Farben sind näher bei niedriger / sehr niedriger Sättigung und / oder geringer Intensität.

Spielen Sie mit einem Farbwähler, der sowohl rgb als auch hsv unterstützt, bis Sie wissen, was Sie als Differenzwert haben möchten. Aber seien Sie sich bewusst, dass Sie kein "echtes" Ähnlichkeitsmaß haben können.

Sie haben eine rgb - & gt; hsv Javascript Konverter hier: Ссылка

    
GameAlchemist 27.11.2012 15:35
quelle
3

Ich habe ein npm / Bower-Paket zur Berechnung der drei CIE-Algorithmen freigegeben: de76, de94 und de00.

Es ist gemeinfrei und auf Github:

Ссылка

Hier ist eine Kurzanleitung:

Installation über npm

%Vor%

Verwendung

%Vor%

Sie müssen zur LAB-Farbe konvertieren, um diese Bibliothek zu verwenden. d3.js hat eine ausgezeichnete API dafür - und ich bin sicher, dass Sie auch etwas Adhoc finden können.

    
Zachary Schuessler 25.03.2015 03:39
quelle
2

Die dritte Regel für Farbvergleiche auf ColorWiki lautet: "Versuchen Sie niemals, zwischen Farbunterschieden, die durch verschiedene Gleichungen berechnet wurden, mithilfe von Mittelungsfaktoren zu konvertieren". Dies liegt daran, dass Farben, die mathematisch nahe beieinander liegen, nicht immer visuell ähnlich wie wir Menschen sind.

Was Sie suchen, ist wahrscheinlich delta-e , das ist eine einzelne Zahl, die die ' Abstand 'zwischen zwei Farben.

Die beliebtesten Algorithmen sind unten aufgeführt, wobei CIE76 (auch bekannt als CIE 1976 oder dE76) am beliebtesten ist.

Jeder geht auf andere Weise vor, aber in den meisten Fällen müssen Sie alle in ein besseres (zum Vergleich) Farbmodell konvertieren als in RGB.

Wikipedia hat alle Formeln: Ссылка

Sie können Ihre Arbeit mit Online-Farbrechnern überprüfen:

Schließlich ist es kein Javascript, aber es gibt eine Open-Source-c # -Bibliothek, mit der ich einige dieser Konvertierungen und Berechnungen begonnen habe: Ссылка

    
Joe Zack 03.03.2013 18:14
quelle
0

JavaScript Farbdifferenzbibliothek, die CIE76 implementiert

Ссылка

    
ygaradon 27.10.2014 14:12
quelle

Tags und Links