Konversi RGB ke RGBA di atas putih

Saya memiliki warna hex, misalnya #F4F8FB(atau rgb(244, 248, 251)) yang ingin saya ubah menjadi warna rgba yang setransparan mungkin (bila ditampilkan di atas putih). Masuk akal? Saya sedang mencari suatu algoritma, atau setidaknya ide dari suatu algoritma untuk bagaimana melakukannya.

Sebagai contoh:

rgb( 128, 128, 255 ) --> rgba(   0,   0, 255,  .5 )
rgb( 152, 177, 202 ) --> rgba(  50, 100, 150,  .5 ) // can be better(lower alpha)

Ide ide?

Solusi FYI berdasarkan jawaban Guffa:

function RGBtoRGBA(r, g, b){
    if((g == null) && (typeof r === 'string')){
        var hex = r.replace(/^\s*#|\s*$/g, '');
        if(hex.length === 3){
            hex = hex.replace(/(.)/g, '$1$1');
        }
        r = parseInt(hex.substr(0, 2), 16);
        g = parseInt(hex.substr(2, 2), 16);
        b = parseInt(hex.substr(4, 2), 16);
    }

    var min, a = (255 - (min = Math.min(r, g, b))) / 255;

    return {
        r    : r = 0|(r - min) / a,
        g    : g = 0|(g - min) / a,
        b    : b = 0|(b - min) / a,
        a    : a = (0|1000*a)/1000,
        rgba : 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')'
    };
}

RGBtoRGBA(204, 153, 102) == RGBtoRGBA('#CC9966') == RGBtoRGBA('C96') == 
    {
       r    : 170,
       g    : 85 ,
       b    : 0  ,
       a    : 0.6,
       rgba : 'rgba(170, 85, 0, 0.6)' 
    }

Ambil komponen warna terendah, dan ubah itu menjadi nilai alpha. Kemudian skala komponen warna dengan mengurangi yang terendah, dan membaginya dengan nilai alpha.

Contoh:

152 converts to an alpha value of (255 - 152) / 255 ~ 0.404

152 scales using (152 - 152) / 0.404 = 0
177 scales using (177 - 152) / 0.404 ~ 62
202 scales using (202 - 152) / 0.404 ~ 123

Jadi, rgb(152, 177, 202)tampilkan sebagai rgba(0, 62, 123, .404).

Saya telah memverifikasi di Photoshop bahwa warnanya benar-benar cocok dengan sempurna.

Biarkan r, g, dan b menjadi nilai input dan r ', g', b ', dan a' menjadi nilai output, semua diskalakan (untuk saat ini, karena membuat matematika lebih cantik) antara 1 dan 0. Kemudian, dengan rumus untuk overlay warna:

r = a' * r' + 1 - a'
g = a' * g' + 1 - a'
b = a' * b' + 1 - a'

Istilah 1 - a 'mewakili kontribusi latar belakang, dan istilah lainnya mewakili latar depan. Lakukan beberapa aljabar:

r = a' * (r' - 1) + 1
r - 1 = a' * (r' - 1)
(r - 1) / (r' - 1) = a'
(r' - 1) / (r - 1) = 1 / a'
r' - 1 = (r - 1) / a'
r' = (r - 1) / a' + 1

Secara intuitif, tampaknya nilai warna minimum akan menjadi faktor pembatas dalam masalah, jadi ikat ini ke m:

m = min(r, g, b)

Tetapkan nilai output yang sesuai, m ', ke nol, karena kami ingin memaksimalkan transparansi:

0 = (m - 1) / a' + 1
-1 = (m - 1) / a'
-a' = m - 1
a' = 1 - m

Jadi, dalam javascript (menerjemahkan dari 1 hingga 255 sepanjang jalan):

function rgba(r, g, b) {
    var a = 1 - Math.min(r, Math.min(g, b)) / 255;
    return [255 + (r - 255) / a, 255 + (g - 255) / a, 255 + (b - 255) / a, a];
}

Perhatikan bahwa saya berasumsi bahwa 'opacity di sini. Sangat mudah untuk mengubahnya menjadi transparansi - cukup hapus "1 -" dari rumus untuk a '. Yang perlu diperhatikan adalah bahwa ini tampaknya tidak menghasilkan hasil yang tepat - dikatakan bahwa opacity adalah 0,498 untuk contoh yang Anda berikan di atas (128, 128, 255). Namun, ini sangat dekat.

Saya akan melihat konversi RGB <-> HSL. Yaitu luminositas == jumlah putih == jumlah transparansi.

Sebagai contoh Anda rgb( 128, 128, 255 ), kami perlu menggeser nilai RGB ke 0pertama dengan jumlah maksimum, yaitu ke rgb( 0, 0, 128 )- yang akan menjadi warna kami dengan sesedikit mungkin putih. Dan setelah itu, menggunakan formula untuk luminance, kita menghitung jumlah putih yang kita perlu tambahkan ke warna gelap kita untuk mendapatkan warna asli - yang akan menjadi alpha kita:

L = (MAX(R,G,B) + MIN(R,G,B))/2
L1 = (255 + 128) / 2 = 191.5
L2 = (128 + 0) /2 = 64
A = (191,5 - 64) / 255 = 0,5;

Harapan itu masuk akal. :)

Bagi Anda yang menggunakan SASS / SCSS, saya telah menulis fungsi SCSS kecil sehingga Anda dapat dengan mudah menggunakan algoritma yang dijelaskan oleh @Guffa

@function transparentize-on-white($color)
{
    $red: red($color);
    $green: green($color);
    $blue: blue($color);
    $lowestColorComponent: min($red, $green, $blue);
    $alpha: (255 - $lowestColorComponent) / 255;

    @return rgba(
        ($red - $lowestColorComponent) / $alpha,
        ($green - $lowestColorComponent) / $alpha,
        ($blue - $lowestColorComponent) / $alpha,
        $alpha
    );
}

Saya hanya menjelaskan ide untuk algoritma, tidak ada solusi lengkap:

Pada dasarnya, Anda memiliki tiga angka x, y, zdan Anda mencari tiga angka baru x', y', z'dan pengganda adalam rentang [0,1] sehingga:

x = a + (1 - a) x'
y = a + (1 - a) y'
z = a + (1 - a) z'

Ini ditulis dalam satuan di mana saluran juga mengambil nilai dalam kisaran [0,1]. Dalam nilai diskrit 8bit, itu akan menjadi seperti ini:

x = 255 a + (1 - a) x'
y = 255 a + (1 - a) y'
z = 255 a + (1 - a) z'

Selain itu, Anda menginginkan nilai sebesar mungkin a. Anda dapat memecahkan:

a  = (x - x')/(255 - x')          x' = (x - 255 a)/(1 - a)

Dll. Dalam nilai riil ini memiliki banyak solusi tak terbatas, cukup tancapkan bilangan real mana pun a, tetapi masalahnya adalah menemukan nomor yang kesalahan diskritasinya minimal.

Ini harus dilakukan:

let x = min(r,g,b)
a = 1 - x/255                    # Correction 1
r,g,b = ( (r,g,b) - x ) / a      # Correction 2

Jawaban teratas tidak berfungsi untuk saya dengan komponen warna rendah. Misalnya tidak menghitung alpha yang benar jika warnanya # 80000. Secara teknis itu harus membuatnya menjadi # ff0000 dengan alpha 0,5. Untuk mengatasi ini, Anda perlu menggunakan RGB -> HSL -> konversi RGBA. Ini adalah kode semu untuk mendapatkan nilai yang benar:

//Convert RGB to HSL
hsl = new HSL(rgb)

//Use lightness as alpha
alpha = hsl.Lightness

//For #80000 lightness is 0.5, so we have to take this into account.
//Lightness more than 0.5 converts to alpha 1 and below is a linear ratio
if (alpha > 0.5)
{
    alpha = 1;
}
else
{
    alpha = alpha / 0.5;
    //We need to drop the lightness of the color to 0.5 to get the actual color
    //that needs to display. Alpha blending will take care of that.
    hsl.Lightness = 0.5;
}

newRgb = hsl.convertToRgb()

"newRgb" akan berisi nilai warna yang disesuaikan baru dan menggunakan variabel "alpha" untuk mengontrol transparansi.