হেক্স রঙ "খুব কালো" কিনা তা কীভাবে পরীক্ষা করবেন?

Question

আমি "খুব কালো" এটির জন্য রঙ চয়নকারী দ্বারা বেছে নেওয়া কোনও রঙের অন্ধকারকে মূল্যায়নের চেষ্টা করছি এবং যদি তা হয় তবে এটি সাদাতে সেট করুন। আমি ভেবেছিলাম এটিকে টানতে আমি হেক্স মানের প্রথম অক্ষর ব্যবহার করতে পারি। এটি কাজ করছে তবে এটি বৈধভাবে কিছু কিছু "হালকা" রংও স্যুইচ করছে।

আমার কোডটি করছে:

        if (lightcolor.substring(0,3) == "#00"|| lightcolor.substring(0,3) == "#010"){
            lightcolor="#FFFFFF";
            color=lightcolor;
        }

একটি রঙ অন্ধকারের একটি নির্দিষ্ট স্তর ছাড়িয়ে গেছে তা জানতে হেক্স গণিতের সাথে আরও কার্যকর উপায় থাকতে হবে? যদি হালকা রঙ + "কিছু হেক্স মান" <= "কিছু হেক্স মান" থাকে তবে এটি সাদাতে সেট করুন।

আমি টিনল কালার যুক্ত করেছি, যা এটির জন্য কার্যকর হতে পারে তবে আমি নিশ্চিতভাবে জানি না।

Comments

আপনি কি কোনও রঙ চয়নকারী এবং মানগুলি পরীক্ষা করার চেষ্টা করেছেন? আমি লক্ষ্য করেছি যে আর, জি এবং বি সমস্ত all 70 এর নিচে থাকলে অন্ধকার হয়ে যায়। এটি সঠিক উপায় নাও হতে পারে তবে এটি এক।

— রিক কুইপার্স

আপনি যেমন ইতিমধ্যে টিনকলার ব্যবহার করছেন, রঙটি এইচএসএল রূপান্তর করুন এবং এল উপাদানটি দেখুন। 1 = সাদা, 0 = কালো

— অ্যান্ড্রেয়াস

@ আন্ড্রেয়াস এইচএসএল স্বল্পতা মানুষের উপলব্ধি বিবেচনায় নেয় না। ০.৫ এর একটি এল মানের বিভিন্ন বর্ণের জন্য আলাদা আলাদা ধারণাযুক্ত উজ্জ্বলতা থাকবে।

— Alnitak

@ অ্যালনিটাক আপনি ঠিকই বলেছেন তবে TO এর বর্ণনাটি ঠিক তেমনটি নয়। সুতরাং 3/8 এর নীচের যে কোনও মান তার উদ্দেশ্যে যথেষ্ট অন্ধকার হতে পারে।

— অ্যান্ড্রিয়াস

@ আন্ড্রেস যা নির্ভর করে - আপনি যদি আমার উত্তরের আইটিইউ আলোকিত মানগুলি দেখেন তবে আপনি দেখতে পাবেন যে নীলকে কেবল 1/10 তম হিসাবে সবুজ হিসাবে উজ্জ্বল মনে করা হয়।

— Alnitak

Answer 1

আপনাকে পৃথকভাবে তিনটি আরজিবি উপাদান বের করতে হবে এবং তারপরে আরজিবি মানগুলি তাদের অনুভূতিতে রূপান্তর করতে একটি মানক সূত্র ব্যবহার করবে।

ছয় বর্ণের বর্ণটি ধরে নেওয়া:

var c = c.substring(1);      // strip #
var rgb = parseInt(c, 16);   // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff;  // extract red
var g = (rgb >>  8) & 0xff;  // extract green
var b = (rgb >>  0) & 0xff;  // extract blue

var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

if (luma < 40) {
    // pick a different colour
}

সম্পাদনা

উপরোক্ত আইটিইউ-আর এর পরিবর্তে সিসিআইআর 6060 ওজনযুক্ত উপাদানগুলি ব্যবহার করে, মে ২০১৪ এর tinycolorএখন একটি getBrightness()কার্যকারিতা রয়েছে ।

সম্পাদনা

ফলস্বরূপ লুমার মান পরিসর 0..255, যেখানে 0 সবচেয়ে অন্ধকার এবং 255 সবচেয়ে হালকা। 128 এর চেয়ে বেশি মানগুলি হালকা হিসাবে বিবেচনা করা হয় tinycolor। (@ পাউ.মোরেনো এবং @ অ্যালনিটাক মন্তব্য দ্বারা নির্লজ্জভাবে অনুলিপি করেছেন)

Comments

জাভাস্ক্রিপ্টে কিছুক্ষণের মধ্যে কিছু ভাল বিট ম্যানিপুলেশন দেখেনি। শীতল জিনিস। en.wikipedia.org/wiki/Rec._709#Luma_coefficients

— jbabey

ভাল কোড, তবে পরীক্ষার পরে আমি var luma = (r + g + b) / 3 এর পরামর্শ দিচ্ছি; যদি (লুমা <128) {// আরও দরকারী হবে। }

— টেরি লিন

@ টেরিলিন কেন? প্রদত্ত সহগগুলি হ'ল মানক আইটিইউ মান যা সত্য যে সবুজকে লাল (এবং তারপরে নীল) এর চেয়ে আরও উজ্জ্বল মনে করা হয় for

— আলনিটাক

ফলস্বরূপ lumaমানটির পরিসীমা হ'ল 0..255, যেখানে 0অন্ধকার এবং 255সবচেয়ে হালকা (তিনটি সহগের সমষ্টি)।

— pau.moreno

@ গাবসনকে কেবল মে ২০১৪ সাল থেকে, এবং isDark()প্রান্তিকরটি 128-এ হার্ড-কোডড রয়েছে

— অ্যালনিটাক

Answer 2

TinyColor লাইব্রেরী (যদি আপনি ইতিমধ্যে এটি উল্লেখ করেছি) পরিদর্শন ও তাদের মধ্যে রং সাধিত জন্য বিভিন্ন ফাংশন প্রদান করে:

• getBrightness

  ওয়েব সামগ্রীর অ্যাক্সেসিবিলিটি গাইডলাইনগুলি (সংস্করণ 1.0) দ্বারা সংজ্ঞায়িত হিসাবে 0-255 থেকে কোনও রঙের অনুভূত উজ্জ্বলতা প্রদান করে ।

  tinycolor("#fff").getBrightness(); // 255

• isLight

  রঙের অনুভূতিযুক্ত উজ্জ্বলতা হালকা কিনা তা নির্দেশ করে একটি বুলিয়ান ফেরত দিন।

  tinycolor("#fff").isLight(); // true
  tinycolor("#000").isLight(); // false
  

• অন্ধকার

  রঙের বোধকৃত উজ্জ্বলতা অন্ধকার কিনা তা নির্দেশ করে একটি বুলিয়ান ফিরিয়ে দিন।

  tinycolor("#fff").isDark(); // false
  tinycolor("#000").isDark(); // true
  

• getLuminance

  ওয়েব সামগ্রী অ্যাক্সেসিবিলিটি গাইডলাইনগুলি (সংস্করণ 2.0) দ্বারা সংজ্ঞায়িত 0-1 থেকে কোনও রঙের অনুভূত আলোকসজ্জা প্রদান করে ।

  tinycolor("#fff").getLuminance(); // 1

Answer 3

আমি এই WooCommerce ওয়ার্ডপ্রেস পিএইচপি ফাংশন ( wc_hex_is_light ) পেয়েছি এবং আমি জাভাস্ক্রিপ্টে রূপান্তর করেছি। ঠিকভাবে কাজ করে!

function wc_hex_is_light(color) {
    const hex = color.replace('#', '');
    const c_r = parseInt(hex.substr(0, 2), 16);
    const c_g = parseInt(hex.substr(2, 2), 16);
    const c_b = parseInt(hex.substr(4, 2), 16);
    const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
    return brightness > 155;
}

Comments

সুপার শীতল! আমি এটি বেশ কয়েকটি রঙ দিয়ে পরীক্ষা করেছি, তাদের সবার সাথে সনাক্তকরণটি সঠিক ছিল :)

— ডেভিড ডাল বাসকো

colorIsDarkOrLight (রঙ) {var hex = color.replace ("#", ""); var c_r, c_g, c_b, উজ্জ্বলতা = ""; if (hex.length == 3) _ c_r = parseInt (hex.substr (0, 2), 16); c_g = parseInt (hex.substr (1, 2), 16); c_b = parseInt (hex.substr (2, 2), 16); উজ্জ্বলতা = (সি_আর * 299 + সি_জি * 587 + সি_বি * 114) / 1000; } অন্য {c_r = parseInt (hex.substr (0, 2), 16); c_g = parseInt (hex.substr (2, 2), 16); c_b = parseInt (hex.substr (4, 2), 16); } ফিরে আসুন> 155; ।,

— পেড্রো হেনরিক

হেক্স 3 বৈশিষ্ট্য এবং 6

— পেড্রো হেনরিক

Answer 4

আপনি আলোকসজ্জা গণনা করতে পারেন :

আলোকসজ্জাটি পৃষ্ঠটি কত উজ্জ্বল প্রদর্শিত হবে তার একটি সূচক।

সুতরাং পাঠ্যটি সাদা বা কালো হওয়া উচিত তা চয়ন করা দুর্দান্ত।

var getRGB = function(b){
    var a;
    if(b&&b.constructor==Array&&b.length==3)return b;
    if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b))return[parseInt(a[1]),parseInt(a[2]),parseInt(a[3])];
    if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b))return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55];
    if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b))return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],
16)];
    if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b))return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)];
    return (typeof (colors) != "undefined")?colors[jQuery.trim(b).toLowerCase()]:null
};

var luminance_get = function(color) {
    var rgb = getRGB(color);
    if (!rgb) return null;
        return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
}

উপরের পদ্ধতিটি আপনাকে বিভিন্ন ফর্ম্যাটে রঙটি পাশ করার অনুমতি দেয় তবে অ্যালগরিদম মূলত ঠিক এর মধ্যে luminance_get।

আমি যখন এটি ব্যবহার করেছি তখন আমি রঙটি কালো করে দিচ্ছিলাম যদি 180অন্যথায় ল্যামিন্যান্সের চেয়ে বেশি সাদা হয়।

Answer 5

এখানে আলোক এবং উজ্জ্বলতার মধ্যে একটি গুরুত্বপূর্ণ পার্থক্য রয়েছে। দিনের শেষে, লুমিন্যান্স হ'ল একটি পরিমাপ যা নির্দিষ্ট অঞ্চল দিয়ে কত শক্তি ভ্রমণ করে এবং আমাদের উপলব্ধিযোগ্য সিস্টেমগুলি সেই শক্তি কীভাবে উপলব্ধি করে তা সম্পূর্ণ উপেক্ষা করে। অন্যদিকে, উজ্জ্বলতা হ'ল একটি শক্তি যা আমরা বুঝতে পারি যে শক্তিটি এবং লুমিন্যান্স এবং আমাদের উপলব্ধি ব্যবস্থার মধ্যে সম্পর্কটিকে অ্যাকাউন্টে গ্রহণ করে। (বিভ্রান্তির কারণ হিসাবে, এখানে একটি আপেক্ষিক আলোকসজ্জা বলা হয়, যা উজ্জ্বলতার সাথে সমার্থক শব্দ হিসাবে ব্যবহৃত হয়েছিল বলে মনে হয় It এটি আমাকে ভালভাবে ছড়িয়ে দিয়েছে)।

সুনির্দিষ্টভাবে বলতে গেলে, আপনি অন্যরা যেমন পরামর্শ দিয়েছেন তেমন "উজ্জ্বলতা" বা "মান" বা "তুলনামূলক আলোকসজ্জা" খুঁজছেন। আপনি এটি বিভিন্ন উপায়ে গণনা করতে পারেন (যেমন মানব হতে হবে!) Http://en.wikedia.org/wiki/HSL_and_HSV# লাইটনেস

1. সর্বোচ্চ পরিমাণে আর, জি এবং বি নিন Take
2. আর, জি এবং বি থেকে সর্বাধিক এবং মিনিটের গড় ধরুন
3. তিনটিই গড়ে নিন।
4. অন্যরা এখানে যেমন পরামর্শ দিয়েছে তেমন কিছু ওজনযুক্ত গড় ব্যবহার করুন।

Comments

এএফআইকিপি উইকিপিডিয়া পৃষ্ঠায় বর্ণিত লুমার গণনাটি উপলব্ধি ভিত্তিক মডেল।

— Alnitak

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

— জন ওয়াই

@ জন হ্যাঁ, আমি যা বলার চেষ্টা করছিলাম - তিনি কেবলমাত্র তাঁর বাকী উত্তরটি মিলে যাচ্ছেন।

— Alnitak

হ্যাঁ, দেখা যাচ্ছে যে আমি এখানে কেবল বিভ্রান্ত ছিলাম। আমি তার সাথে ঠিক আছি :) আমি কেবল প্রধান পয়েন্টটি পেতে চেয়েছিলাম যে শক্তি এবং উপলব্ধি মধ্যে আলাদা আছে। আমি সেই অনুযায়ী আমার উত্তর আপডেট করব।

— ডেভিড এনগুইন

Answer 6

এই কাজটি হেক্স সহ উদাহরণস্বরূপ #fefefe

function isTooDark(hexcolor){
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    // Return new color if to dark, else return the original
    return (yiq < 40) ? '#2980b9' : hexcolor;
}

---

আপনি এটি পরিবর্তন trueবা falseপরিবর্তন করে পরিবর্তন করতে পারেন change

return (yiq < 40) ? '#2980b9' : hexcolor;

প্রতি

return (yiq < 40);

Comments

@ ভিভেক এর কারণ আপনাকে পূর্ণ হেক্স মান (# 000000 এবং #ffffff) ব্যবহার করতে হবে

— TheCrazyProfender

Answer 7

একটি সম্ভাব্য সমাধান হ'ল আপনার রঙটি আরজিবি থেকে এইচএসবিতে রূপান্তর করা । এইচএসবি হ'ল হিউ, স্যাচুরেশন এবং উজ্জ্বলতা (এটি এইচএসভি হিসাবেও পরিচিত, যেখানে ভি মানের জন্য হয়)। তারপরে আপনার চেক করার জন্য একটি মাত্র প্যারামিটার রয়েছে: উজ্জ্বলতা।

Answer 8

আমি বুঝতে পারি এই কথোপকথনটি কয়েক বছরের পুরানো, তবে এটি এখনও প্রাসঙ্গিক। আমি যুক্ত করতে চেয়েছিলাম যে আমার দলে জাভাতে (এসডাব্লুটি) একই সমস্যা ছিল এবং এটি কিছুটা নির্ভুল বলে মনে হয়েছিল:

private Color getFontColor(RGB bgColor) {
    Color COLOR_BLACK = new Color(Display.getDefault(), 0, 0, 0);
    Color COLOR_WHITE = new Color(Display.getDefault(), 255, 255, 255);

    double luminance = Math.sqrt(0.241 
       * Math.pow(bgColor.red, 2) + 0.691 * Math.pow(bgColor.green, 2) +  0.068 
       * Math.pow(bgColor.blue, 2));
    if (luminance >= 130) {
        return COLOR_BLACK;
    } else {
        return COLOR_WHITE;
    }
}