অস্বচ্ছতার সাথে "সমতুল্য" রঙ সন্ধান করা

Question 1

বলুন যে আমার একটি পটভূমি রঙ রয়েছে যার সাথে একটি "ফিতা" এটি আরও শক্ত রঙে চলছে। এখন, আমি চাই কিছু বিবরণ মিশ্রিত করতে ফিতাটি আংশিক স্বচ্ছ হোক, তবে পটভূমির উপরে পটিটিকে "একই রঙ" রাখুন।

প্রদত্ত বর্ণা ?্যতা / আলফা <100% ফিতা রঙের জন্য (সহজেই) এটি নির্ধারণ করার কোনও উপায় আছে, ব্যাকগ্রাউন্ডে 100% অস্বচ্ছতার সাথে আরজিবিটির বর্ণটি এর বর্ণের সাথে কী সমান হওয়া উচিত?

এখানে একটি ছবি। পটভূমি হয় rgb(72, 28, 97), ফিতা rgb(45, 34, 70)। আমি rgba(r, g, b, a)ফিতাটির জন্য একটি চাই যাতে এটি এই শক্ত রঙের সাথে অভিন্ন হয়।

এখানে চিত্র বর্ণনা লিখুন

Question 2

রঙের মিশ্রণটি প্রতি চ্যানেলটিতে কেবল একটি লিনিয়ার ইন্টারপোলেশন হয়, তাই না? সুতরাং গণিত বেশ সহজ। আপনার যদি আরজিবি 2 এর উপরে আরজিবিএ 1 থাকে তবে কার্যকর ভিজ্যুয়াল ফলাফল আরজিবি 3 হবে:

r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1

… যেখানে আলফা চ্যানেলটি 0.0 থেকে 1.0 পর্যন্ত।

বিচক্ষণতা পরীক্ষা: যদি আলফা 0 হয়, আরজিবি 3 কি আরজিবি 2 এর সমান? হ্যাঁ. আলফা যদি 1 হয়, আরজিবি 3 কি আরজিবি 1 এর সমান? হ্যাঁ.

আপনি যদি কেবল ব্যাকগ্রাউন্ড রঙ এবং চূড়ান্ত রঙ লক করে রাখেন তবে প্রচুর পরিমাণে আরজিবিএ রঙ রয়েছে (অসীম, ভাসমান-পয়েন্ট স্পেসে) যা প্রয়োজনীয়তাগুলি পূরণ করতে পারে। সুতরাং আপনাকে বারটি বা আপনার পছন্দসই অস্পষ্ট স্তরটি বেছে নিতে হবে এবং অন্যটির মান খুঁজে বের করতে হবে।

আলফা উপর ভিত্তি করে রঙ বাছাই

আপনি যদি আরজিবি 3 (চূড়ান্ত পছন্দসই রঙ), আরজিবি 2 (পটভূমির রঙ), এবং এ 1 (আপনি কতটা অস্বচ্ছতা চান) জানেন এবং আপনি কেবল আরজিবি 1-এর সন্ধান করছেন, তবে আমরা সমীকরণগুলি এভাবে পুনরায় সাজিয়ে তুলতে পারি:

r1 = (r3 - r2 + r2*a1)/a1
g1 = (g3 - g2 + g2*a1)/a1
b1 = (b3 - b2 + b2*a1)/a1

কিছু রঙ সমন্বয় রয়েছে যা তাত্ত্বিকভাবে সম্ভব, তবে মানক আরজিবিএ পরিসীমা দেওয়া অসম্ভব। উদাহরণস্বরূপ, যদি পটভূমিটি খাঁটি কালো হয়, পছন্দসই অনুভূত রঙটি শুভ্র সাদা এবং পছন্দসই আলফাটি 1% হয়, তবে আপনার প্রয়োজন হবে:

r1 = g1 = b1 = 255/0.01 = 25500

… যে কোনও উপলভ্য তুলনায় একটি উজ্জ্বল সাদা 100 100 উজ্জ্বল।

রঙের উপর ভিত্তি করে আলফা বাছাই করা

আপনি যদি আরজিবি 3 (চূড়ান্ত পছন্দসই রঙ), আরজিবি 2 (পটভূমির রঙ), এবং আরজিবি 1 (আপনার বর্ণটি যে ধরণের ধাপে অস্বচ্ছভাবে পরিবর্তন করতে চান) জানেন এবং আপনি কেবল এ 1 খুঁজছেন, তবে আমরা আবার ব্যবস্থা করতে পারি সমীকরণগুলি এভাবে:

a1 = (r3-r2) / (r1-r2)
a1 = (g3-g2) / (g1-g2)
a1 = (b3-b2) / (b1-b2)

এগুলি যদি বিভিন্ন মান দেয় তবে আপনি এটিকে ঠিক মিলতে পারবেন না, তবে যতটা সম্ভব আপনি কাছে থেকে আলফাসগুলি গড় করতে পারেন। উদাহরণস্বরূপ, পৃথিবীতে এমন কোনও অস্বচ্ছতা নেই যা আপনাকে নীল হতে লালচে সবুজ রঙের রঙ দেয়।

Question 3

আমি ফ্রোগজ উত্তরটি ব্যবহার করে একটি কম মিশ্রিন তৈরি করেছি। আপনি ইনপুট:

রঙটি দেখতে কেমন হওয়া উচিত
একটি নির্দিষ্ট আলফা সঙ্গে
প্রদত্ত পটভূমিতে (ডিফল্ট সাদা হওয়া)

কোডটি এখানে:

.bg_alpha_calc (@desired_colour, @desired_alpha, @background_colour: white) {
    @r3: red(@desired_colour);
    @g3: green(@desired_colour);
    @b3: blue(@desired_colour);

    @r2: red(@background_colour);
    @g2: green(@background_colour);
    @b2: blue(@background_colour);

    // r1 = (r3 - r2 + r2 * a1) / a1
    @r1: ( @r3 - @r2 + (@r2 * @desired_alpha) ) / @desired_alpha;
    @g1: ( @g3 - @g2 + (@g2 * @desired_alpha) ) / @desired_alpha;
    @b1: ( @b3 - @b2 + (@b2 * @desired_alpha) ) / @desired_alpha;

    background-color: @desired_colour;
    background-color: rgba(@r1, @g1, @b1, @desired_alpha);

}

যেমন ব্যবহার:

@mycolour: #abc;
@another_colour: blue;
.box_overlay {
  // example:
  .bg_alpha_calc (@mycolour, 0.97, @another_colour);
  // or (for white bg) just:
  .bg_alpha_calc (@mycolour, 0.97);
}

স্পষ্টতই অসম্ভব সম্মিলনের জন্য কাজ করে না (যেমন ফ্রোগজ উল্লেখ করেছেন), এর অর্থ কেবল স্বল্প মাত্রার স্বচ্ছতা সমর্থনযোগ্য supported আপনি কিভাবে এটি সঙ্গে যান দেখুন।

Question 4

ফ্রোগজ এবং ইফিমারের দুর্দান্ত উত্তরের জন্য ধন্যবাদ , এখানে একটি SASS ফাংশন যা স্বয়ংক্রিয়ভাবে সর্বোত্তম সমতুল্য আরজিবিএ রঙ গণনা করে।

আপনি এটিকে পছন্দসই রঙ এবং বিদ্যমান পটভূমি দিয়ে কল করেছেন এবং এটি সর্বোত্তম (অর্থ স্বচ্ছ) সমতুল্য আরজিবিএ রঙ গণনা করবে যা প্রতিটি আরজিবি অংশের (গোলাকার ত্রুটির কারণে) ± 1/256 এর মধ্যে কাঙ্ক্ষিত ফলাফল দেয়:

@function alphaize($desired-color, $background-color) {

    $r1: red($background-color);
    $g1: green($background-color);
    $b1: blue($background-color);

    $r2: red($desired-color);
    $g2: green($desired-color);
    $b2: blue($desired-color);

    $alpha: 0;
    $r: -1;
    $g: -1;
    $b: -1;

    @while $alpha < 1 and ($r < 0 or $g < 0 or $b < 0
                           or $r > 255 or $g > 255 or $b > 255) {
        $alpha: $alpha + 1/256;
        $inv: 1 / $alpha;
        $r: $r2 * $inv + $r1 * (1 - $inv);
        $g: $g2 * $inv + $g1 * (1 - $inv);
        $b: $b2 * $inv + $b1 * (1 - $inv);
    }

    @return rgba($r, $g, $b, $alpha);
}

আমি কেবল এটি বেশ কয়েকটি সংমিশ্রণের (সমস্ত বুটসওয়াচ থিম) বিপরীতে পরীক্ষা করেছি এবং এটি অন্ধকার অন্ধকার এবং হালকা অন্ধকার ফলাফলের জন্য উভয়ই কাজ করে।

পিএস: ফলাফলের রঙে যদি আপনার ± 1/256 নির্ভুলতার চেয়ে আরও ভাল প্রয়োজন হয়, আপনি আরজিবিএ রঙ মিশ্রন করার সময় কোন ধরণের বৃত্তাকার অ্যালগরিদম ব্রাউজারগুলি প্রয়োগ করতে হবে তা জানতে হবে (এটি মানক কিনা তা আমি জানি না) এবং একটি উপযুক্ত যুক্ত করা উচিত বিদ্যমানটির শর্ত @while, যাতে এটি $alphaকাঙ্ক্ষিত নির্ভুলতা অর্জন না হওয়া অবধি বাড়তে থাকে।

Question 5

@ ফ্রোগজ এর উত্তর থেকে:

r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1

সুতরাং:

r3 - r2 = (r1-r2)*a1
g3 - g2 = (g1-g2)*a1
b3 - b2 = (b1-b2)*a1

সুতরাং:

r1 = (r3 - r2) / a1 + r2
g1 = (g3 - g2) / a1 + g2
b1 = (b3 - b2) / a1 + b2

উল্লেখ্য তোমাদের কেউ মান বাছাই করতে পারেন a1, এবং এই সংশ্লিষ্ট মান পাবেন r1, g1এবং b1প্রয়োজন। উদাহরণস্বরূপ, 1 এর একটি আলফা বাছাই আপনাকে বলে যে আপনার আরজিবি 1 = আরজিবি 3 প্রয়োজন, তবে 0 এর একটি আলফা বাছাই কোনও সমাধান দেয় না (স্পষ্টতই)।

Question 6

আমি এখনও অবধি সবচেয়ে কার্যকর সমাধানটি খুঁজে পেয়েছি: কেবল রঙ চয়নকারী সরঞ্জামের ফলে ফলাফলটি রঙটি পরিমাপ করুন এবং তারপরে ওভারলেয়ের জন্য পরিমাপ করা রঙটি ব্যবহার করুন। এই পদ্ধতিটি একটি নিখুঁত রঙের মিল দেয়।

আমি বিভিন্ন মিক্সিন ব্যবহার করার চেষ্টা করেছি কিন্তু গোলাকৃতির ত্রুটির কারণে, আমি এখনও খালি চোখে পার্থক্যটি দেখতে সক্ষম হয়েছি

Question 7

@ টোবিয়ার উত্তরে প্রসারিত করতে এবং অপসারণকে আরও রূপান্তরের মতো নির্দিষ্ট করার অনুমতি দিন:

@function rgbaMorph($desired-color, $background-color: rgb(255,255,255), $desired-alpha: 0) {

    $r1: red($desired-color);
    $g1: green($desired-color);
    $b1: blue($desired-color);

    $r2: red($background-color);
    $g2: green($background-color);
    $b2: blue($background-color);

    $r: -1;
    $g: -1;
    $b: -1;

    @if ($desired-alpha != 0) {
        $r: ( $r1 - $r2 + ($r2 * $desired-alpha) ) / $desired-alpha;
        $g: ( $g1 - $g2 + ($g2 * $desired-alpha) ) / $desired-alpha;
        $b: ( $b1 - $b2 + ($b2 * $desired-alpha) ) / $desired-alpha;
    }

    @if (($desired-alpha == 0) or ($r < 0 or $g < 0 or $b < 0
                           or $r > 255 or $g > 255 or $b > 255)) {
        //if alpha not attainable, this will find lowest alpha that is

        $alpha: $desired-alpha;
        @while $alpha < 1 and ($r < 0 or $g < 0 or $b < 0
                           or $r > 255 or $g > 255 or $b > 255) {
            $alpha: $alpha + 1/256;
            $inv: 1 / $alpha;
            $r: $r1 * $inv + $r2 * (1 - $inv);
            $g: $g1 * $inv + $g2 * (1 - $inv);
            $b: $b1 * $inv + $b2 * (1 - $inv);
        }
        @debug "Color not attainable at opacity using alpha: " $alpha " instead of: " $desired-alpha;

        $desired-alpha: $alpha;
    }

    @return rgba($r, $g, $b, $desired-alpha);
}