जावास्क्रिप्ट

में विपरीत रंगों की गणना करना उन पृष्ठों में से एक पर हम वर्तमान में काम कर रहे पाठ की पृष्ठभूमि को बदल सकते हैं।जावास्क्रिप्ट

हम पाठ के विपरीत उचित बनाए रखने के लिए स्वचालित रूप से अग्रभूमि रंग को बदलना चाहते हैं।

हम रंग सीमा को विवेकाधीन भी पसंद करेंगे। उदाहरण के लिए, यदि पृष्ठभूमि 255 वृद्धि में सफेद से काले रंग में बदल रही है, तो हम अग्रभूमि रंग के 255 रंगों को देखना नहीं चाहते हैं। इस परिदृश्य में, शायद 2 से 4, उचित विपरीत बनाए रखने के लिए।

फॉर्मूला को बाहर निकालने के लिए वहां कोई यूआई/डिज़ाइन/रंग विशेषज्ञ/चित्रकार?

स्रोत

2009-03-11 georged

सरासर पठनीयता के मामले में, आप जो भी पृष्ठभूमि पर काले और सफेद पाठ का उपयोग करना चाहते हैं। तो आरजीबी को एचएसवी में परिवर्तित करें, और जांचें कि वी < 0.5 है या नहीं। यदि हां, तो सफेद, अगर नहीं, काला।

पहले इसे आज़माएं और देखें कि क्या आपको यह आकर्षक लगता है।

यदि आप नहीं करते हैं, तो शायद आप चाहते हैं कि सफेद और काला इतना तेज न हो जब आपकी पृष्ठभूमि बहुत उज्ज्वल या बहुत गहरा हो। इस नीचे नमनीय करने के लिए, एक ही रंग और संतृप्ति रखने के लिए, और चमक के लिए इन मूल्यों का उपयोग करें: एक मध्यम रंग पर

background V foreground V 
0.0-0.25  0.75 
0.25-0.5  1.0 
0.5-0.75  0.0 
0.75-1.0  0.25

, आप अभी भी काला या सफेद पाठ जो अच्छी तरह से पढ़ा जा सके देखेंगे। एक गहरे रंग या हल्के रंग पर, आपको एक ही रंगीन पाठ दिखाई देगा लेकिन कम से कम 3/4 दूर चमक के मामले में और इसलिए अभी भी पठनीय होगा। मुझे उम्मीद है कि यह अच्छा लग रहा है :)

स्रोत

2009-03-11 15:31:29

किसी भी कारण से एचएसवी वांछित प्रभाव नहीं देता है। एचएसएल, दूसरी तरफ, कुछ संतृप्त रंगों के उत्थान के साथ, शुद्ध बी/डब्ल्यू (काले रंग की ओर थोड़ा सा पूर्वाग्रह के साथ) में भी काम काफी अच्छी तरह से करता है। – georged

ठीक है, हो सकता है कि एचएसएल वास्तव में मेरा मतलब था :) मुझे पूरी तरह से यकीन नहीं है। –

शायद आप रंग बदलना चाहते हैं, लेकिन संतृप्ति या मूल्य नहीं।

तो, अपने आरजीबी मूल्य को एचएसवी में परिवर्तित करें, 180 डिग्री एच (मॉड्यूल 360 डिग्री कोर्स) में जोड़ें, और आरजीबी में वापस कनवर्ट करें।

Conversion forumlas are here।

स्रोत

2009-03-11 15:25:37

उह, यह एक भयानक विचार है। घुमावदार रंग आपको सबसे खराब (लकड़ी का भूरा + गहरा नीला) और सबसे खराब (लाल + हरा) पर एक अंधेरा सिरदर्द देता है।एक अधिक सुरक्षित पाठ्यक्रम मूल्य बदल रहा है। –

यह कुछ जटिल टी लागू है क्योंकि जावास्क्रिप्ट के दशमलव मानों से निपटने का तरीका है। इस उद्देश्य के लिए मैंने पृष्ठभूमि को किसी भी रंग को बदलने देने के लिए बहुत बेहतर पाया है लेकिन पाठ सिर्फ काले और सफेद के बीच स्विच करता है। यदि आप संयोजनों के विपरीत रंगों का उपयोग करते हैं तो खड़े होने में वाकई मुश्किल होगी। यह भी ध्यान रखें कि कुछ लोग रंगीन हैं, इसलिए यह अभिगम्यता परिप्रेक्ष्य से बहुत अच्छा विचार नहीं है।

स्रोत

2009-03-11 15:44:01 Vasil

this example आज़माएं, जो इसे आर, जी और बी मानों के औसत के आधार पर काले या सफेद रंग में सेट करता है। परीक्षण के लिए भी अच्छा है! यदि आपको ऐसे मामले मिलते हैं जो बहुत अच्छी तरह से काम नहीं करते हैं तो वहां एक बेहतर एल्गोरिदम का चयन करें।

<html> 
<head> 
<script> 
function rgbstringToTriplet(rgbstring) 
{ 
    var commadelim = rgbstring.substring(4,rgbstring.length-1); 
var strings = commadelim.split(","); 
var numeric = []; 
for(var i=0; i<3; i++) { numeric[i] = parseInt(strings[i]); } 
return numeric; 
} 

function adjustColour(someelement) 
{ 
    var rgbstring = someelement.style.backgroundColor; 
    var triplet = rgbstringToTriplet(rgbstring); 
    var newtriplet = []; 
    // black or white: 
    var total = 0; for (var i=0; i<triplet.length; i++) { total += triplet[i]; } 
    if(total > (3*256/2)) { 
    newtriplet = [0,0,0]; 
    } else { 
newtriplet = [255,255,255]; 
    } 
    var newstring = "rgb("+newtriplet.join(",")+")"; 
    someelement.style.color = newstring; 
    return true; 
} 

function randomiseBackground(someelement) 
{ 
var vals = []; 
for(var i=0; i<3; i++) { vals[i]=Math.floor(Math.random()*256+1); } 
someelement.style.backgroundColor="rgb("+vals.join(",")+")"; 
return true; 
} 
</script> 
</head> 
<body onload="adjustColour(document.getElementById('mypara'));"> 
<p id="mypara" style="background-color:#2287ea">Some text</p> 
<form> 
    <input type=button onclick="var elem=document.getElementById('mypara'); randomiseBackground(elem); adjustColour(elem);" value="randomise background" /> 
</form> 
</body> 
</html>

स्रोत

2009-03-11 16:54:26

लुमा के अपने काले-सफेद निर्णय को बंद करना मेरे लिए बहुत अच्छा काम करता है। लुमा आर, जी, और बी मानों का भारित योग है, जो सापेक्ष चमक की मानव धारणा के लिए समायोजित है, जो वीडियो अनुप्रयोगों में स्पष्ट रूप से आम है। विभिन्न भार के साथ, समय के साथ लुमा की आधिकारिक परिभाषा बदल गई है; यहां देखें: http://en.wikipedia.org/wiki/Luma_(video)। मुझे रिक का उपयोग करके सबसे अच्छा परिणाम मिला। 70 9 संस्करण, जैसा कि नीचे दिए गए कोड में है। शायद 165 का काला-सफेद दहलीज अच्छा लगता है।

function contrastingColor(color) 
{ 
    return (luma(color) >= 165) ? '000' : 'fff'; 
} 
function luma(color) // color can be a hx string or an array of RGB values 0-255 
{ 
    var rgb = (typeof color === 'string') ? hexToRGBArray(color) : color; 
    return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); // SMPTE C, Rec. 709 weightings 
} 
function hexToRGBArray(color) 
{ 
    if (color.length === 3) 
     color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2); 
    else if (color.length !== 6) 
     throw('Invalid hex color: ' + color); 
    var rgb = []; 
    for (var i = 0; i <= 2; i++) 
     rgb[i] = parseInt(color.substr(i * 2, 2), 16); 
    return rgb; 
}

स्रोत

2011-06-28 18:50:30 enigment

जावास्क्रिप्ट

उत्तर

संबंधित मुद्दे