Sự khác biệt màu/độ tương đồng% giữa hai giá trị với JS

Question

Tôi cần tính toán sự khác biệt giữa hai giá trị màu hex để đầu ra là giá trị phần trăm. Điều đầu tiên tôi discarted là chuyển đổi giá trị hex thành thập phân, như là người đầu tiên sẽ có trọng lượng cao hơn nhiều so với cuối cùng.

Tùy chọn thứ hai là tính toán sự khác biệt giữa mỗi giá trị RGB và sau đó thêm tất cả. Tuy nhiên, sự khác biệt giữa 0, 0, 0 và 30, 30, 30 thấp hơn nhiều so với số giữa 0, 0, 0 và 90, 0, 0.

This question đề xuất sử dụng YUV, nhưng tôi không thể tìm ra cách sử dụng nó để thiết lập sự khác biệt.

Ngoài ra, this other question có công thức tốt để tính toán sự khác biệt và đầu ra giá trị RGB, nhưng không hoàn toàn ở đó.

Answer 1

Chỉ cần tính toán một Euclidean distance:

var c1 = [0, 0, 0], 
    c2 = [30, 30, 30], 
    c3 = [90, 0, 0], 
    distance = function(v1, v2){ 
     var i, 
      d = 0; 

     for (i = 0; i < v1.length; i++) { 
      d += (v1[i] - v2[i])*(v1[i] - v2[i]); 
     } 
     return Math.sqrt(d); 
    }; 

console.log(distance(c1, c2), distance(c1, c3), distance(c2, c3)); 
//will give you 51.96152422706632 90 73.48469228349535 

Answer 2

vấn đề là bạn muốn một cái gì đó giống như một khoảng cách trên thế giới dimensionnal 3, nhưng điều đó đại diện rgb không phải là trực quan ở tất cả: 'gần' màu sắc có thể khác nhau nhiều màu sắc 'xa'. Ví dụ:

Lấy hai màu xám c1: (120,120,120) và c2: (150,150,150) và bây giờ lấy c3: (160,140,140) gần c2 hơn c1, nhưng màu tím và mắt tối hơn màu xám gần giống với màu xám hơn màu tím.

Tôi khuyên bạn nên sử dụng hsv: màu được xác định bằng màu 'cơ sở' (màu sắc), độ bão hòa và cường độ. màu sắc có màu gần thực sự rất gần. màu sắc có màu sắc rất khác nhau không liên quan với nhau (expl: màu vàng và màu xanh lá cây) nhưng có vẻ gần gũi hơn với độ bão hòa thấp (rất thấp) và (rất) cường độ thấp.
(Vào ban đêm tất cả các màu đều giống nhau.)

Vì màu sắc được chia thành 6 khối, cyl = Math.floor (hue/6) cung cấp cho bạn bước đầu tiên của sự đánh giá tương tự: nếu cùng một phần của hình trụ -> khá gần. Nếu chúng không thuộc cùng một hình trụ, chúng có thể vẫn đóng (nếu đóng) nếu (h2-h1) nhỏ, so sánh nó với (1/6). Nếu (h2-h1)> 1/6, điều này có thể chỉ là các màu quá khác nhau.

Sau đó, bạn có thể chính xác hơn với (s, v). Màu sắc chúng gần hơn nếu cả độ bão hòa thấp/rất thấp và/hoặc cường độ thấp.

Chơi xung quanh với bộ chọn màu hỗ trợ cả rgb và hsv cho đến khi bạn biết bạn muốn có giá trị khác biệt như thế nào. Nhưng lưu ý rằng bạn không thể có một biện pháp tương tự 'thực sự'.

bạn có một rgb -> hsv javascript chuyển đổi ở đây: http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c

Answer 3

Nguyên tắc thứ 3 để so sánh màu sắc trên ColorWiki là "Không bao giờ cố gắng để chuyển đổi giữa chênh lệch màu tính theo phương trình khác nhau thông qua việc sử dụng các yếu tố trung bình". Điều này là do các màu sắc gần giống với toán học không phải lúc nào cũng giống như con người chúng ta.

Điều bạn đang tìm kiếm có lẽ là delta-e, là một số duy nhất đại diện cho 'khoảng cách' giữa hai màu.

Các thuật toán phổ biến nhất được liệt kê bên dưới, với CIE76 (aka CIE 1976 hoặc dE76) là phổ biến nhất.

• CIE76
• CMC l:c
• dE94
• dE2000

Mỗi người đi về những điều theo một cách khác nhau, nhưng đối với hầu hết các phần họ đều yêu cầu bạn phải chuyển sang một tốt hơn (để so sánh) mô hình màu hơn RGB.

Wikipedia có tất cả các công thức: http://en.wikipedia.org/wiki/Color_difference

Bạn có thể kiểm tra công việc của bạn với máy tính màu trực tuyến:

• CIE76
• CMC l:c

Cuối cùng, nó không phải là javascript nhưng có một thư viện C# mã nguồn mở mà tôi đã bắt đầu sẽ thực hiện một số chuyển đổi và tính toán sau: https://github.com/THEjoezack/ColorMine

Answer 4

Màu Javascript Difference Thư viện mà thực hiện CIE76

https://github.com/garex/nodejs-color-difference

Answer 5

tôi phát hành một NPM/Bower gói để tính ba thuật toán CIE: de76, de94, và de00.

Đó là phạm vi công cộng và trên Github:

http://zschuessler.github.io/DeltaE/

Đây là hướng dẫn quickstart:

Cài đặt qua NPM

npm install delta-e 

Cách sử dụng

// Include library 
var DeltaE = require('delta-e'); 

// Create two test LAB color objects to compare! 
var color1 = {L: 36, A: 60, B: 41}; 
var color2 = {L: 100, A: 40, B: 90}; 

// 1976 formula 
console.log(DeltaE.getDeltaE76(color1, color2)); 

// 1994 formula 
console.log(DeltaE.getDeltaE94(color1, color2)); 

// 2000 formula 
console.log(DeltaE.getDeltaE00(color1, color2)); 

Bạn sẽ cần phải chuyển đổi thành màu LAB để sử dụng thư viện này. d3.js có một API tuyệt vời để thực hiện điều đó - và tôi chắc chắn bạn cũng có thể tìm thấy một thứ gì đó tuyệt vời.