পটভূমির রঙের উপর নির্ভর করে সাদা বা কালোতে ফন্টের রঙ কীভাবে সিদ্ধান্ত নেবেন?

Question

আমি উদাহরণের মতো কিছু চিত্র দেখাতে চাই

ভরাট রঙটি হেক্সের রঙের সাথে ডেটা বেসের একটি ক্ষেত্র দ্বারা স্থির করা হয় (উদা: ক্লাসএক্স -> রঙ: # 66FFFF)। এখন, আমি নির্বাচিত রঙ (যেমন উপরের চিত্রের মতো) দিয়ে একটি ফিলের উপরে তথ্য প্রদর্শন করতে চাই তবে রঙটি গা dark় বা হালকা কিনা তা আমার জানা দরকার তাই শব্দগুলি সাদা বা কালো হওয়া উচিত কিনা তা আমি জানি। কোন উপায় আছে? tks

Comments

সম্পর্কিত (কিন্তু এছাড়াও dupes): stackoverflow.com/questions/3942878/... stackoverflow.com/questions/3116260/...

— JYelton

Answer 1

আমার অনুরূপ প্রশ্নের উত্তর নিয়ে বিল্ডিং ।

স্বতন্ত্র লাল, সবুজ এবং নীল তীব্রতা পেতে আপনাকে হেক্স কোডটি 3 টুকরো টুকরো করতে হবে। কোডের প্রতিটি 2 ডিজিট হেক্সাডেসিমাল (বেস -16) স্বরলিপিতে একটি মান উপস্থাপন করে। আমি রূপান্তরটির বিশদটি এখানে পাবেন না, তারা সন্ধান করা সহজ।

একবারে আলাদা আলাদা রঙের জন্য আপনার তীব্রতা হয়ে গেলে আপনি রঙের সামগ্রিক তীব্রতা নির্ধারণ করতে এবং সংশ্লিষ্ট পাঠ্যটি চয়ন করতে পারেন।

if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff

186 এর প্রান্তিকতা তত্ত্বের ভিত্তিতে, তবে এটি স্বাদে সামঞ্জস্য করা যেতে পারে। 150 এর এক প্রান্তিকের নীচের মন্তব্যের উপর ভিত্তি করে আপনার জন্য আরও ভাল কাজ করতে পারে।

---

সম্পাদনা করুন: উপরেরটি সহজ এবং যুক্তিসঙ্গতভাবে ভাল কাজ করে এবং স্ট্যাক ওভারফ্লোতে এখানে ভাল গ্রহণযোগ্যতা রয়েছে বলে মনে হয়। তবে নীচের মন্তব্যগুলির মধ্যে একটিতে দেখা যাচ্ছে যে এটি কিছু পরিস্থিতিতে ডাব্লু 3 সি নির্দেশিকা মেনে চলতে না পারে। এর সাথে আমি একটি পরিবর্তিত ফর্ম পেয়েছি যা সর্বদা নির্দেশিকাগুলির উপর ভিত্তি করে সর্বোচ্চ বিপরীতে চয়ন করে। আপনার যদি ডাব্লু 3 সি নিয়ম মেনে চলার দরকার না হয় তবে আমি উপরের সরল সূত্রটি বদ্ধ থাকি।

ডাব্লু 3 সি সুপারিশগুলিতে বৈপরীত্যের জন্য প্রদত্ত সূত্রটি হল (L1 + 0.05) / (L2 + 0.05), যেখানে L1হালকা রঙের L2আলোকরশ্মি এবং 0.0-1.0 এর স্কেলের অন্ধকারের আলোকসজ্জা। কালো রঙের আলোকসজ্জা ০.০ এবং সাদা ০.০, সুতরাং এই মানগুলি প্রতিস্থাপন করা আপনাকে সর্বোচ্চ বিপরীতে একটি নির্ধারণ করতে দেয়। যদি সাদা রঙের জন্য বিপরীতে সাদা রঙের তুলনা বেশি হয় তবে কালো ব্যবহার করুন, অন্যথায় সাদা ব্যবহার করুন। Lপরীক্ষাটি হওয়ার সাথে সাথে আপনি যে রঙটি পরীক্ষা করছেন তা আলোকিত করে :

if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff

এটি বীজগণিতভাবে এটিকে সহজতর করে:

if L > sqrt(1.05 * 0.05) - 0.05

বা আনুমানিক:

if L > 0.179 use #000000 else use #ffffff

একমাত্র জিনিসটি গণনা করা L। সেই সূত্রটিও গাইডলাইনে দেওয়া হয়েছে এবং এটি দেখে মনে হচ্ছে যে এসআরবিবি থেকে রৈখিক আরজিবিতে রূপান্তরিত হবে তারপরে আইটিইউ-আর সুপারিশটি বিটি.70০৯ দ্বারা আলোকিততার জন্য।

for each c in r,g,b:
    c = c / 255.0
    if c <= 0.03928 then c = c/12.92 else c = ((c+0.055)/1.055) ^ 2.4
L = 0.2126 * r + 0.7152 * g + 0.0722 * b

ডাব্লু 3 সি নির্দেশিকাতে আবদ্ধ হওয়ার কারণে 0.179 এর প্রান্তিক পরিবর্তন করা উচিত নয়। যদি ফলাফলগুলি আপনার পছন্দ অনুসারে না পেয়ে থাকে তবে উপরের সরল সূত্রটি ব্যবহার করে দেখুন।

Comments

Tks মার্ক। কয়েকটি পরিবর্তন চেষ্টা করেছেন: প্রথম অঙ্কের দ্বারা কেবল সবুজ এবং নীল গণনা করা হয়েছে (কম সুনির্দিষ্ট তবে আরও ওজনযুক্ত এটি হ'ল) ​​এবং 186 এর পরিবর্তে 9. আমার জন্য কিছুটা আরও ভাল কাজ করে, বিশেষত সবুজ শাক দিয়ে।

— ডিজেপিবি

এই সূত্রটি অনেকটা ভুল। একটি উদাহরণ নিতে, এটি হলুদকে #D6B508171 এর মান দেয় , তাই একটি সাদা বৈসাদৃশ্য। বৈসাদৃশ্যটি কালো হওয়া উচিত, তবে (এখানে নিশ্চিত করা হয়েছে: webaim.org/resources/contrastchecker )

— ম্যাকগার্নাগল

@ মার্করানসাম হ্যাঁ, আমার চোখে কালোটি হলুদ রঙের সাথে অনেক ভাল দেখাচ্ছে। যেহেতু আমি সীমিত রঙের সেট নিয়ে কাজ করছি, আমি কেবলমাত্র 186 থেকে কাট অফকে কম মূল্যে স্থানান্তর করতে সক্ষম হয়েছি।

— ম্যাকগার্নাগল 21

এই উত্তরে প্রদত্ত দুটি সূত্রের তুলনায় এখানে আরও একটি ডেমো রয়েছে mo রঙ চয়নকারী (সাম্প্রতিক ফায়ারফক্স বা ক্রোমে) ব্যবহার করে আপনি যে কোনও রঙের বিপরীতে পরীক্ষা করতে পারেন।

— চেসটনের

@ চেসটনের ডেমো নিয়ে কিছুটা খেলার পরে, আমি মনে করি সহজ সূত্রটি আমার পক্ষে সবচেয়ে ভাল কাজ করে, আমি থ্রেশোল্ডের সুপারিশের সাথে একমত নই। খাঁটি সবুজ ফলাফলের ভিত্তিতে, আমি প্রান্তিকতা 149 এ সেট করার চেষ্টা করেছি এবং এটি আমার মতে আরও ভাল কাজ করে। আমি এটি প্রদর্শনের জন্য সত্যই বোবা একদল তৈরি করেছি ; আসল পরামর্শটি দেখতে আপনি উপরে পিছনে প্রান্তিক পরিবর্তনটি চেষ্টা করতে পারেন।

— মিরাল

Answer 2

এই কোডটি আমার নয় বলে আমি কোনও ক্রেডিট নিই না, তবে অন্যদের জন্য ভবিষ্যতে দ্রুত এটি খুঁজে পেতে আমি এখানে রেখে দিই:

মার্ক র্যানসমস উত্তরের ভিত্তিতে, সাধারণ সংস্করণের জন্য এখানে একটি কোড স্নিপেট রয়েছে:

function pickTextColorBasedOnBgColorSimple(bgColor, lightColor, darkColor) {
  var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
  var r = parseInt(color.substring(0, 2), 16); // hexToR
  var g = parseInt(color.substring(2, 4), 16); // hexToG
  var b = parseInt(color.substring(4, 6), 16); // hexToB
  return (((r * 0.299) + (g * 0.587) + (b * 0.114)) > 186) ?
    darkColor : lightColor;
}

এবং উন্নত সংস্করণটির জন্য কোড স্নিপেট এখানে রয়েছে:

function pickTextColorBasedOnBgColorAdvanced(bgColor, lightColor, darkColor) {
  var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
  var r = parseInt(color.substring(0, 2), 16); // hexToR
  var g = parseInt(color.substring(2, 4), 16); // hexToG
  var b = parseInt(color.substring(4, 6), 16); // hexToB
  var uicolors = [r / 255, g / 255, b / 255];
  var c = uicolors.map((col) => {
    if (col <= 0.03928) {
      return col / 12.92;
    }
    return Math.pow((col + 0.055) / 1.055, 2.4);
  });
  var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
  return (L > 0.179) ? darkColor : lightColor;
}

এগুলি ব্যবহার করতে কেবল কল করুন:

var color = '#EEACAE' // this can be any color
pickTextColorBasedOnBgColorSimple(color, '#FFFFFF', '#000000');

এছাড়াও, ধন্যবাদ Alxএবং chetstone।

Comments

আমি সাধারণ ফাংশনটি ব্যবহার করেছি এবং এটি আরও কিছুটা নিচে নামিয়ে দিয়েছি: 2 টি শেষ প্যারামিটারগুলি নামিয়ে দিয়ে নামকরণ করা হয়েছে কেবল isDark(bgColor)আমার ব্যবহারটি তখন ঠিক'color': isDark(color)?'white':'black'

— diynevala

আমার জন্য একটি কবজ মত কাজ। আপনাকে অনেক ধন্যবাদ! এটি পিএইচপি-তে করেছে যদিও কেবল সিনট্যাক্স এবং ফাংশনগুলিকে রূপান্তর করে।

— সেজারবাস্টোস

Answer 3

এটি (জাভাস্ক্রিপ্ট কোড) কীভাবে?

/**
 * Get color (black/white) depending on bgColor so it would be clearly seen.
 * @param bgColor
 * @returns {string}
 */
getColorByBgColor(bgColor) {
    if (!bgColor) { return ''; }
    return (parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff';
}

Comments

এটি বেশিরভাগ সময় কাজ করে তবে i.imgur.com/3pOUDe5.jpg এর মতো কেস দেখতে পাওয়া যায় যা অদ্ভুত দেখায়, পটভূমির রঙটি আসলে আরজিবি হয় (6, 247, 241);

— ম্যাডপ্রপস

আমি প্রশংসা করি যে আপনি ইতিমধ্যে রঙটি আরজিবি মানগুলিতে রূপান্তর করেননি এমন ক্ষেত্রে তুলনামূলকভাবে সস্তার উপায় (এটি যে খুব জটিল নয়, কেবল অতিরিক্ত গণিতের ধাপগুলি নয়)

— ফ্রেমবার্ট ২ '

Answer 4

গাণিতিক সমাধানগুলির সাথে সাথে একটি এআই নিউরাল নেটওয়ার্ক ব্যবহার করাও সম্ভব। সুবিধাটি হ'ল আপনি এটিকে নিজের স্বাদ এবং প্রয়োজন অনুসারে তৈরি করতে পারেন (যেমন: উজ্জ্বল স্যাচুরেটেড রেডগুলিতে অফ-সাদা পাঠ্যটি দেখতে ভাল লাগে এবং এটি কালো রঙের মতোই পঠনযোগ্য)।

এখানে একটি ঝরঝরে জাভাস্ক্রিপ্ট ডেমো যা ধারণাটি চিত্রিত করে। ডেমোতে আপনি নিজের জেএস সূত্রটিও তৈরি করতে পারেন।

https://harthur.github.io/brain/

নীচে কিছু চার্ট দেওয়া হয়েছে যা আমাকে সমস্যাটি সম্পর্কে আমার মন পেতে সহায়তা করেছিল । প্রথম চার্টে, হালকাতা একটি ধ্রুবক 128, যখন হিউ এবং স্যাচুরেশন পৃথক হয়। দ্বিতীয় চার্টে, স্যাচুরেশন একটি ধ্রুবক 255 হয়, তবে হিউ এবং লাইটনেস পরিবর্তিত হয়।

Answer 5

অ্যান্ড্রয়েডের জন্য জাভাতে আমার সমাধানটি এখানে দেওয়া হয়েছে:

// Put this method in whichever class you deem appropriate
// static or non-static, up to you.
public static int getContrastColor(int colorIntValue) {
    int red = Color.red(colorIntValue);
    int green = Color.green(colorIntValue);
    int blue = Color.blue(colorIntValue);
    double lum = (((0.299 * red) + ((0.587 * green) + (0.114 * blue))));
    return lum > 186 ? 0xFF000000 : 0xFFFFFFFF;
}

// Usage
// If Color is represented as HEX code:
String colorHex = "#484588";
int color = Color.parseColor(colorHex);

// Or if color is Integer:
int color = 0xFF484588;

// Get White (0xFFFFFFFF) or Black (0xFF000000)
int contrastColor = WhateverClass.getContrastColor(color);

Comments

আসলেই কি 'পারফেক্ট'? খাঁটি সবুজ পটভূমি চেষ্টা করুন, # 00FF00।

— অ্যান্ড্রেস রেজব্রান্ড 21

এটি সত্য যে এটি সমস্ত রঙের জন্য পরীক্ষিত নয় .... তবে ব্যবহারকারীদের বিরক্ত করার জন্য তৈরি করা হয়নি এমন কোনও কিছুর জন্য খাঁটি সবুজ পটভূমি ব্যবহার করবেন কে?

— mwieczorek

@ মিভিয়েজোরেক লোকেরা যারা ব্যবহারকারী-দ্বারা উত্পাদিত সামগ্রী বা এলোমেলোভাবে নির্বাচিত রঙগুলি নির্ভর করে।

— মার্ক প্লানো-লেসেই

Answer 6

@ মার্করানসমের উত্তরের ভিত্তিতে, আমি একটি পিএইচপি স্ক্রিপ্ট তৈরি করেছি যা আপনি এখানে পেতে পারেন:

function calcC($c) {
    if ($c <= 0.03928) {
        return $c / 12.92;
    }
    else {
        return pow(($c + 0.055) / 1.055, 2.4);
    }
}

function cutHex($h) {
    return ($h[0] == "#") ? substr($h, 1, 7) : $h;
}

function hexToR($h) {
    return hexdec(substr(cutHex($h), 0, 2));
}

function hexToG($h) {
    return hexdec(substr(cutHex($h), 2, 2)); // Edited
}

function hexToB($h) {
    return hexdec(substr(cutHex($h), 4, 2)); // Edited
}

function computeTextColor($color) {
    $r = hexToR($color);
    $g = hexToG($color);
    $b = hexToB($color);
    $uicolors = [$r / 255, $g / 255, $b / 255];


    $c = array_map("calcC", $uicolors);

    $l = 0.2126 * $c[0] + 0.7152 * $c[1] + 0.0722 * $c[2];
    return ($l > 0.179) ? '#000000' : '#ffffff';
}

Answer 7

এটি ইউআইসিওলরের এক্সটেনশন হিসাবে মার্ক রান্সমের উত্তরের একটি দ্রুত সংস্করণ

extension UIColor {

// Get the rgba components in CGFloat
var rgba: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {
    var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0

    getRed(&red, green: &green, blue: &blue, alpha: &alpha)

    return (red, green, blue, alpha)
}

/// Return the better contrasting color, white or black
func contrastColor() -> UIColor {
    let rgbArray = [rgba.red, rgba.green, rgba.blue]

    let luminanceArray = rgbArray.map({ value -> (CGFloat) in
        if value < 0.03928 {
            return (value / 12.92)
        } else {
            return (pow( (value + 0.55) / 1.055, 2.4) )
        }
    })

    let luminance = 0.2126 * luminanceArray[0] +
        0.7152 * luminanceArray[1] +
        0.0722 * luminanceArray[2]

    return luminance > 0.179 ? UIColor.black : UIColor.white
} }

Answer 8

এটি কেবলমাত্র একটি উদাহরণ যা কোনও উপাদানটিতে ক্লিক করার সময় একটি এসভিজি চেকমার্কের রঙ পরিবর্তন করবে। এটি ক্লিক করা উপাদানের ব্যাকগ্রাউন্ড-রঙের উপর ভিত্তি করে চেকমার্ক রঙটি কালো বা সাদাতে সেট করবে।

checkmarkColor: function(el) {
    var self = el;
    var contrast = function checkContrast(rgb) {
        // @TODO check for HEX value

        // Get RGB value between parenthesis, and remove any whitespace
        rgb = rgb.split(/\(([^)]+)\)/)[1].replace(/ /g, '');

        // map RGB values to variables
        var r = parseInt(rgb.split(',')[0], 10),
            g = parseInt(rgb.split(',')[1], 10),
            b = parseInt(rgb.split(',')[2], 10),
            a;

        // if RGBA, map alpha to variable (not currently in use)
        if (rgb.split(',')[3] !== null) {
            a = parseInt(rgb.split(',')[3], 10);
        }

        // calculate contrast of color (standard grayscale algorithmic formula)
        var contrast = (Math.round(r * 299) + Math.round(g * 587) + Math.round(b * 114)) / 1000;

        return (contrast >= 128) ? 'black' : 'white';
    };

    $('#steps .step.color .color-item .icon-ui-checkmark-shadow svg').css({
        'fill': contrast($(self).css('background-color'))
    });
}

onClickExtColor: function(evt) {
    var self = this;

    self.checkmarkColor(evt.currentTarget);
}

---

https://gist.github.com/dcondrey/183971f17808e9277572

Answer 9

আমি এই জাভাস্ক্রিপ্ট ফাংশনটি rgb/ এ রূপান্তর rgbaকরতে 'white'বা ব্যবহার করতে চাই 'black'।

function getTextColor(rgba) {
    rgba = rgba.match(/\d+/g);
    if ((rgba[0] * 0.299) + (rgba[1] * 0.587) + (rgba[2] * 0.114) > 186) {
        return 'black';
    } else {
        return 'white';
    }
}

আপনি এই বিন্যাসগুলির যে কোনওটি প্রবেশ করতে পারেন এবং এটি আউটপুট 'black'বা হবে'white'

• rgb(255,255,255)
• rgba(255,255,255,0.1)
• color:rgba(255,255,255,0.1)
• 255,255,255,0.1

Comments

এখন খাঁটি সবুজ পটভূমিতে এটি চেষ্টা করুন: # 00FF00।

— আন্দ্রেয়াস রেজব্র্যান্ড

এই জন্য আপনাকে ধন্যবাদ! সুইফটে অনুবাদ এবং এটি আমার আইওএস অ্যাপ্লিকেশনটিতে ব্যবহার করেছে!

— লুকাস পি।

Answer 10

মার্কের বিস্তারিত উত্তর দুর্দান্ত কাজ করে। এখানে জাভাস্ক্রিপ্ট একটি বাস্তবায়ন:

function lum(rgb) {
    var lrgb = [];
    rgb.forEach(function(c) {
        c = c / 255.0;
        if (c <= 0.03928) {
            c = c / 12.92;
        } else {
            c = Math.pow((c + 0.055) / 1.055, 2.4);
        }
        lrgb.push(c);
    });
    var lum = 0.2126 * lrgb[0] + 0.7152 * lrgb[1] + 0.0722 * lrgb[2];
    return (lum > 0.179) ? '#000000' : '#ffffff';
}

তারপরে এই ফাংশনটি lum([111, 22, 255])সাদা বা কালো হওয়ার জন্য কল করতে পারেন ।

Answer 11

আমি এর আগে কখনও কিছু করিনি, তবে হেক্স 7 এফ (এফএফ / 2) এর মাঝারি রঙের বিপরীতে প্রতিটি বর্ণের মানগুলি পরীক্ষা করার জন্য একটি ফাংশন লেখার বিষয়ে কী আছে। তিনটি রঙের মধ্যে দুটি যদি 7F এর চেয়ে বেশি হয়, তবে আপনি গা dark় রঙ নিয়ে কাজ করছেন।

Answer 12

লিঙ্ক থেকে বিভিন্ন ইনপুট উপর ভিত্তি করে উপর ভিত্তি করে পটভূমির উপর নির্ভর করে ফোরগ্রাউন্ড কালারটিকে কালো বা সাদা করুন এবং এই থ্রেডের , আমি রঙের জন্য একটি এক্সটেনশন ক্লাস তৈরি করেছি যা আপনাকে প্রয়োজনীয় বিপরীতে রঙ দেয়।

কোড নীচে হিসাবে যায়:

 public static class ColorExtension
{       
    public static int PerceivedBrightness(this Color c)
    {
        return (int)Math.Sqrt(
        c.R * c.R * .299 +
        c.G * c.G * .587 +
        c.B * c.B * .114);
    }
    public static Color ContrastColor(this Color iColor, Color darkColor,Color lightColor)
    {
        //  Counting the perceptive luminance (aka luma) - human eye favors green color... 
        double luma = (iColor.PerceivedBrightness() / 255);

        // Return black for bright colors, white for dark colors
        return luma > 0.5 ? darkColor : lightColor;
    }
    public static Color ContrastColor(this Color iColor) => iColor.ContrastColor(Color.Black);
    public static Color ContrastColor(this Color iColor, Color darkColor) => iColor.ContrastColor(darkColor, Color.White);
    // Converts a given Color to gray
    public static Color ToGray(this Color input)
    {
        int g = (int)(input.R * .299) + (int)(input.G * .587) + (int)(input.B * .114);
        return Color.FromArgb(input.A, g, g, g);
    }
}

Answer 13

আমার মতো আপনি যদি একটি আরজিবিএ সংস্করণ সন্ধান করছিলেন যা আলফাকে অ্যাকাউন্টে নেয়, এখানে একটি উচ্চতর বৈপরীত্য দেখতে সত্যিই ভাল কাজ করে।

function getContrastColor(R, G, B, A) {
  const brightness = R * 0.299 + G * 0.587 + B * 0.114 + (1 - A) * 255;

  return brightness > 186 ? "#000000" : "#FFFFFF";
}

Answer 14

এটি কেবল বেস আর ব্যবহার করে মার্ক র্যানসমের উত্তরের একটি আর সংস্করণ।

hex_bw <- function(hex_code) {

  myrgb <- as.integer(col2rgb(hex_code))

  rgb_conv <- lapply(myrgb, function(x) {
    i <- x / 255
    if (i <= 0.03928) {
      i <- i / 12.92
    } else {
      i <- ((i + 0.055) / 1.055) ^ 2.4
    }
    return(i)
  })

 rgb_calc <- (0.2126*rgb_conv[[1]]) + (0.7152*rgb_conv[[2]]) + (0.0722*rgb_conv[[3]])

 if (rgb_calc > 0.179) return("#000000") else return("#ffffff")

}

> hex_bw("#8FBC8F")
[1] "#000000"
> hex_bw("#7fa5e3")
[1] "#000000"
> hex_bw("#0054de")
[1] "#ffffff"
> hex_bw("#2064d4")
[1] "#ffffff"
> hex_bw("#5387db")
[1] "#000000"

Answer 15

@ সোবিট, আমি আপনার উত্তরটি খুঁজছিলাম, যা দেখতে ভাল লাগছে, তবে এতে একটি ছোট্ট ভুল রয়েছে mistake আপনার ফাংশন hexToG, এবং hextoB এর একটি ছোটখাটো সম্পাদনা দরকার। সাবস্ট্রাস্টারে শেষ সংখ্যাটি স্ট্রিংয়ের দৈর্ঘ্য এবং তাই এই ক্ষেত্রে এটি 4 বা 6 এর পরিবর্তে "2" হওয়া উচিত।

function hexToR($h) {
    return hexdec(substr(cutHex($h), 0, 2));
}
function hexToG($h) {
    return hexdec(substr(cutHex($h), 2, 2));
}
function hexToB($h) {
    return hexdec(substr(cutHex($h), 4, 2));
}

Answer 16

কমের একটি দুর্দান্ত contrast()ফাংশন রয়েছে যা আমার পক্ষে সুন্দরভাবে কাজ করেছে, দেখুন http://lesscss.org/funitions/#color-operation-contrast

"দুটি রঙের মধ্যে কোনটি অন্যটির সাথে সবচেয়ে বড় বৈপরীত্য সরবরাহ করে তা চয়ন করুন a এটি কোনও রঙের পটভূমির বিরুদ্ধে পঠনযোগ্য তা নিশ্চিত করার জন্য দরকারী যা অ্যাক্সেসিবিলিটি কমপ্লায়েন্সের জন্যও কার্যকর This ডাব্লুসিএজি ২.০ অনুসারে রঙগুলি তাদের গামা-সংশোধিত লুমা মান ব্যবহার করে তুলনা করা হয়, স্বল্পতা নয় ""

উদাহরণ:

p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}

আউটপুট:

p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}

Answer 17

হেক্স থেকে কালো বা সাদা:

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16)
      ]
    : [0, 0, 0];
}

function lum(hex) {
  var rgb = hexToRgb(hex)
  var lrgb = [];
  rgb.forEach(function(c) {
    c = c / 255.0;
    if (c <= 0.03928) {
      c = c / 12.92;
    } else {
      c = Math.pow((c + 0.055) / 1.055, 2.4);
    }
    lrgb.push(c);
  });
  var lum = 0.2126 * lrgb[0] + 0.7152 * lrgb[1] + 0.0722 * lrgb[2];
  return lum > 0.179 ? "#000000" : "#ffffff";
}

Answer 18

মার্কের উত্তরের ভিত্তিতে আইওএসের জন্য উদ্দেশ্য-সি সংস্করণ কোড:

- (UIColor *)contrastForegroundColor {
CGFloat red = 0, green = 0, blue = 0, alpha = 0;
[self getRed:&red green:&green blue:&blue alpha:&alpha];
NSArray<NSNumber *> *rgbArray = @[@(red), @(green), @(blue)];
NSMutableArray<NSNumber *> *parsedRGBArray = [NSMutableArray arrayWithCapacity:rgbArray.count];
for (NSNumber *item in rgbArray) {
    if (item.doubleValue <= 0.03928) {
        [parsedRGBArray addObject:@(item.doubleValue / 12.92)];
    } else {
        double newValue = pow((item.doubleValue + 0.055) / 1.055, 2.4);
        [parsedRGBArray addObject:@(newValue)];
    }
}

double luminance = 0.2126 * parsedRGBArray[0].doubleValue + 0.7152 * parsedRGBArray[1].doubleValue + 0.0722 * parsedRGBArray[2].doubleValue;

return luminance > 0.179 ? UIColor.blackColor : UIColor.whiteColor;
}

Answer 19

সমস্ত 24 বিট রঙের সাথে পরীক্ষার কী হবে?

সচেতন থাকুন যে ওয়াইআইকিউ পদ্ধতিটি একটি নূন্যতম বিপরীতে অনুপাতটি ১.৯: ১ প্রদান করবে, যা এএ এবং এএএ ডাব্লুসিএজি ২.০ পরীক্ষা পাস করবে না, এটি একটি 128 থ্রোসোল্ডলড ধরে।

ডাব্লু 3 সি পদ্ধতির জন্য এটি 4.58: 1 এর ন্যূনতম বৈপরীত্য অনুপাতটি ফিরিয়ে দেবে, এটি বড় পাঠ্যের জন্য এএ এবং এএএ পরীক্ষাগুলি এবং ছোট পাঠ্যের জন্য এএ পরীক্ষায় উত্তীর্ণ হয়, এটি প্রতিটি রঙের জন্য ছোট পাঠ্যের জন্য এএএ পরীক্ষায় উত্তীর্ণ হয় না।

Answer 20

এখানে আমার নিজস্ব পদ্ধতি যা আমি ব্যবহার করছি এবং এখনও পর্যন্ত সমস্যা নেই 😄

const hexCode = value.charAt(0) === '#' 
                  ? value.substr(1, 6)
                  : value;

const hexR = parseInt(hexCode.substr(0, 2), 16);
const hexG = parseInt(hexCode.substr(2, 2), 16);
const hexB = parseInt(hexCode.substr(4, 2), 16);
// Gets the average value of the colors
const contrastRatio = (hexR + hexG + hexB) / (255 * 3);

contrastRatio >= 0.5
  ? 'black'
  : 'white';

Answer 21

ব্যাকগ্রাউন্ডের রঙের আরজিবি বা এইচএক্স মানের উপর ভিত্তি করে অগ্রণী রঙ নির্বাচন করতে আমি পাইথন মডিউলটি তৈরি করেছি: https://github.com/azaitsev/ পূর্বভূমি

Answer 22

মার্কের আশ্চর্যজনক উত্তরের ভিত্তিতে জাভা সুইংয়ের জন্য আমার কোডটি এখানে রয়েছে:

public static Color getColorBasedOnBackground(Color background, Color darkColor, Color lightColor) {
    // Calculate foreground color based on background (based on https://stackoverflow.com/a/3943023/)
    Color color;
    double[] cL = new double[3];
    double[] colorRGB = new double[] {background.getRed(), background.getGreen(), background.getBlue()};

    for (int i = 0; i < colorRGB.length; i++)
        cL[i] = (colorRGB[i] / 255.0 <= 0.03928) ? colorRGB[i] / 255.0 / 12.92 :
                Math.pow(((colorRGB[i] / 255.0 + 0.055) / 1.055), 2.4);

    double L = 0.2126 * cL[0] + 0.7152 * cL[1] + 0.0722 * cL[2];
    color = (L > Math.sqrt(1.05 * 0.05) - 0.05) ? darkColor : lightColor;

    return color;
}