এমন একটি সিস্টেম (উদাহরণস্বরূপ একটি ওয়েবসাইট) দেওয়া হয়েছে যা ব্যবহারকারীকে কিছু অংশের জন্য পটভূমির রঙ কাস্টমাইজ করতে দেয় তবে হরফের রঙ নয় (অপশনগুলির সংখ্যাকে ন্যূনতম রাখতে রাখে), সেখানে "হালকা" বা "প্রোগ্রামারিকভাবে নির্ধারণ করার কোনও উপায় আছে? গা dark় "ফন্টের রঙ প্রয়োজনীয়?
আমি নিশ্চিত যে এখানে কিছু অ্যালগরিদম রয়েছে তবে আমি নিজে থেকে তা বের করার জন্য রঙ, আলোকসজ্জা ইত্যাদি সম্পর্কে পর্যাপ্ত পরিমাণে জানি না।
উত্তর:
আমিও একই সমস্যার মুখোমুখি হয়েছি। রঙের ক্যালস / হিটম্যাপে পাঠ্য লেবেল প্রদর্শনের জন্য আমার বিপরীত ফন্টের রঙ নির্বাচন করার একটি ভাল পদ্ধতি খুঁজে পেতে হয়েছিল। এটি সর্বজনীন পদ্ধতি হতে হয়েছিল এবং উত্পাদিত রঙটি "সুদর্শন" হতে হয়েছিল, যার অর্থ সরল উত্পন্ন পরিপূরক রঙ ভাল সমাধান ছিল না - কখনও কখনও এটি অদ্ভুত, খুব নিবিড় রঙের জন্ম দেয় যা দেখতে এবং পড়া শক্ত ছিল।
দীর্ঘ ঘন্টা ধরে পরীক্ষা করার পরে এবং এই সমস্যাটি সমাধান করার চেষ্টা করার পরে আমি জানতে পেরেছি যে "ডার্ক" রঙের জন্য সাদা ফন্ট এবং "উজ্জ্বল" রঙের জন্য কালো ফন্ট নির্বাচন করা সবচেয়ে ভাল সমাধান।
আমি সি # তে যে ফাংশনটি ব্যবহার করছি তার একটি উদাহরণ এখানে:
Color ContrastColor(Color color)
{
int d = 0;
// Counting the perceptive luminance - human eye favors green color...
double luminance = ( 0.299 * color.R + 0.587 * color.G + 0.114 * color.B)/255;
if (luminance > 0.5)
d = 0; // bright colors - black font
else
d = 255; // dark colors - white font
return Color.FromArgb(d, d, d);
}
এটি বিভিন্ন রঙের ক্যালস (রংধনু, গ্রেস্কেল, তাপ, বরফ এবং আরও অনেক) জন্য পরীক্ষা করা হয়েছিল এবং আমি খুঁজে পাওয়া একমাত্র "সর্বজনীন" পদ্ধতি এটি।
সম্পাদনা
গণনা সূত্রকে a"উপলব্ধিযোগ্য আলোকসজ্জা" এ পরিবর্তন করেছে - এটি সত্যিই আরও ভাল দেখাচ্ছে! এটি ইতিমধ্যে আমার সফ্টওয়্যারটিতে প্রয়োগ করা হয়েছে, দুর্দান্ত দেখাচ্ছে।
2 সম্পাদনা করুন @ ওয়েবসিড এই অ্যালগরিদমের দুর্দান্ত কাজের উদাহরণ সরবরাহ করেছেন: http://codepen.io/WebSeed/full/pvgqEq/
কেবলমাত্র যদি কেউ ছোট হতে চায় তবে গ্যাসেকের উত্তরের সংস্করণ বুঝতে আরও সহজ হতে পারে :
public Color ContrastColor(Color iColor)
{
// Calculate the perceptive luminance (aka luma) - human eye favors green color...
double luma = ((0.299 * iColor.R) + (0.587 * iColor.G) + (0.114 * iColor.B)) / 255;
// Return black for bright colors, white for dark colors
return luma > 0.5 ? Color.Black : Color.White;
}দ্রষ্টব্য: আমি লুমা মানটির বিপরীতটি সরিয়েছি (উজ্জ্বল রঙগুলির জন্য উচ্চতর মান থাকতে হবে, যা আমার কাছে প্রাকৃতিক বলে মনে হয় এবং এটি 'ডিফল্ট' গণনা পদ্ধতিও।
তারা আমার পক্ষে দুর্দান্ত কাজ করার জন্য আমি এখান থেকে গ্যাসেকের মতো একই ধ্রুবক ব্যবহার করেছি।
(আপনি নিম্নলিখিত স্বাক্ষর ব্যবহার করে এটি একটি এক্সটেনশন পদ্ধতি হিসাবে প্রয়োগ করতে পারেন :
public static Color ContrastColor(this Color iColor)তারপরে আপনি এটির মাধ্যমে কল করতে পারেন foregroundColor = background.ContrastColor()))
আপনাকে ধন্যবাদ @Gacek । এখানে অ্যান্ড্রয়েডের একটি সংস্করণ রয়েছে:
@ColorInt
public static int getContrastColor(@ColorInt int color) {
// Counting the perceptive luminance - human eye favors green color...
double a = 1 - (0.299 * Color.red(color) + 0.587 * Color.green(color) + 0.114 * Color.blue(color)) / 255;
int d;
if (a < 0.5) {
d = 0; // bright colors - black font
} else {
d = 255; // dark colors - white font
}
return Color.rgb(d, d, d);
}এবং একটি উন্নত (সংক্ষিপ্ত) সংস্করণ:
@ColorInt
public static int getContrastColor(@ColorInt int color) {
// Counting the perceptive luminance - human eye favors green color...
double a = 1 - (0.299 * Color.red(color) + 0.587 * Color.green(color) + 0.114 * Color.blue(color)) / 255;
return a < 0.5 ? Color.BLACK : Color.WHITE;
}1 - ...অংশটি থেকে মুক্তি পেয়ে নতুন নামকরণ aকরুনluminance
গ্যাসেকের জবাব আমার সুইফট বাস্তবায়ন:
func contrastColor(color: UIColor) -> UIColor {
var d = CGFloat(0)
var r = CGFloat(0)
var g = CGFloat(0)
var b = CGFloat(0)
var a = CGFloat(0)
color.getRed(&r, green: &g, blue: &b, alpha: &a)
// Counting the perceptive luminance - human eye favors green color...
let luminance = 1 - ((0.299 * r) + (0.587 * g) + (0.114 * b))
if luminance < 0.5 {
d = CGFloat(0) // bright colors - black font
} else {
d = CGFloat(1) // dark colors - white font
}
return UIColor( red: d, green: d, blue: d, alpha: a)
}
জাভাস্ক্রিপ্ট [ES2015]
const hexToLuma = (colour) => {
const hex = colour.replace(/#/, '');
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
return [
0.299 * r,
0.587 * g,
0.114 * b
].reduce((a, b) => a + b) / 255;
};
এই পোস্টের জন্য ধন্যবাদ।
যার জন্য আগ্রহী হতে পারে, এখানে ডেলফিতে সেই ফাংশনের উদাহরণ রয়েছে:
function GetContrastColor(ABGColor: TColor): TColor;
var
ADouble: Double;
R, G, B: Byte;
begin
if ABGColor <= 0 then
begin
Result := clWhite;
Exit; // *** EXIT RIGHT HERE ***
end;
if ABGColor = clWhite then
begin
Result := clBlack;
Exit; // *** EXIT RIGHT HERE ***
end;
// Get RGB from Color
R := GetRValue(ABGColor);
G := GetGValue(ABGColor);
B := GetBValue(ABGColor);
// Counting the perceptive luminance - human eye favors green color...
ADouble := 1 - (0.299 * R + 0.587 * G + 0.114 * B) / 255;
if (ADouble < 0.5) then
Result := clBlack // bright colors - black font
else
Result := clWhite; // dark colors - white font
end;এটি যেমন একটি সহায়ক উত্তর। এর জন্য ধন্যবাদ!
আমি একটি এসসিএসএস সংস্করণ ভাগ করতে চাই:
@function is-color-light( $color ) {
// Get the components of the specified color
$red: red( $color );
$green: green( $color );
$blue: blue( $color );
// Compute the perceptive luminance, keeping
// in mind that the human eye favors green.
$l: 1 - ( 0.299 * $red + 0.587 * $green + 0.114 * $blue ) / 255;
@return ( $l < 0.5 );
}
মেনু লিঙ্কগুলির জন্য হোভার রঙগুলি স্বয়ংক্রিয়ভাবে তৈরি করতে অ্যালগরিদমটি কীভাবে ব্যবহার করবেন তা এখন ভেবে দেখছি। হালকা শিরোনামগুলি আরও গা dark় হোভার পায় এবং তদ্বিপরীত হয়।
তোড়জোড় বাস্তবায়ন
Color contrastColor(Color color) {
if (color == Colors.transparent || color.alpha < 50) {
return Colors.black;
}
double luminance = (0.299 * color.red + 0.587 * color.green + 0.114 * color.blue) / 255;
return luminance > 0.5 ? Colors.black : Colors.white;
}
কুরুচিযুক্ত পাইথন যদি এটি লিখতে পছন্দ করেন না :)
'''
Input a string without hash sign of RGB hex digits to compute
complementary contrasting color such as for fonts
'''
def contrasting_text_color(hex_str):
(r, g, b) = (hex_str[:2], hex_str[2:4], hex_str[4:])
return '000' if 1 - (int(r, 16) * 0.299 + int(g, 16) * 0.587 + int(b, 16) * 0.114) / 255 < 0.5 else 'fff'
আমারও একই সমস্যা ছিল তবে আমাকে পিএইচপি-তে এটি বিকাশ করতে হয়েছিল । আমি @ গারেকের সমাধানটি ব্যবহার করেছি এবং আমি এই উত্তরটিও ব্যবহার করেছি: এইচএক্স রঙিন কোডটি আরজিবিতে রূপান্তর করতে পিএইচপি-র আরজিবি মানগুলিতে হেক্স রঙকে রূপান্তর করুন।
তাই আমি এটা ভাগ করছি।
আমি প্রদত্ত ব্যাকগ্রাউন্ড এইএইএক্স রঙের সাথে এই ফাংশনটি ব্যবহার করতে চেয়েছিলাম, তবে সর্বদা '#' থেকে শুরু হয় না।
//So it can be used like this way:
$color = calculateColor('#804040');
echo $color;
//or even this way:
$color = calculateColor('D79C44');
echo '<br/>'.$color;
function calculateColor($bgColor){
//ensure that the color code will not have # in the beginning
$bgColor = str_replace('#','',$bgColor);
//now just add it
$hex = '#'.$bgColor;
list($r, $g, $b) = sscanf($hex, "#%02x%02x%02x");
$color = 1 - ( 0.299 * $r + 0.587 * $g + 0.114 * $b)/255;
if ($color < 0.5)
$color = '#000000'; // bright colors - black font
else
$color = '#ffffff'; // dark colors - white font
return $color;
}
কোটলিন / অ্যান্ড্রয়েড এক্সটেনশন হিসাবে:
fun Int.getContrastColor(): Int {
// Counting the perceptive luminance - human eye favors green color...
val a = 1 - (0.299 * Color.red(this) + 0.587 * Color.green(this) + 0.114 * Color.blue(this)) / 255
return if (a < 0.5) Color.BLACK else Color.WHITE
}
+ (UIColor*) getContrastColor:(UIColor*) color {
CGFloat red, green, blue, alpha;
[color getRed:&red green:&green blue:&blue alpha:&alpha];
double a = ( 0.299 * red + 0.587 * green + 0.114 * blue);
return (a > 0.5) ? [[UIColor alloc]initWithRed:0 green:0 blue:0 alpha:1] : [[UIColor alloc]initWithRed:255 green:255 blue:255 alpha:1];
}
আইওএস সুইফট ৩.০ (ইউআইকলার এক্সটেনশন):
func isLight() -> Bool
{
if let components = self.cgColor.components, let firstComponentValue = components[0], let secondComponentValue = components[1], let thirdComponentValue = components[2] {
let firstComponent = (firstComponentValue * 299)
let secondComponent = (secondComponentValue * 587)
let thirdComponent = (thirdComponentValue * 114)
let brightness = (firstComponent + secondComponent + thirdComponent) / 1000
if brightness < 0.5
{
return false
}else{
return true
}
}
print("Unable to grab components and determine brightness")
return nil
}
সুইফট 4 উদাহরণ:
extension UIColor {
var isLight: Bool {
let components = cgColor.components
let firstComponent = ((components?[0]) ?? 0) * 299
let secondComponent = ((components?[1]) ?? 0) * 587
let thirdComponent = ((components?[2]) ?? 0) * 114
let brightness = (firstComponent + secondComponent + thirdComponent) / 1000
return !(brightness < 0.6)
}
}
আপডেট - 0.6এটি ক্যোয়ারির জন্য আরও ভাল পরীক্ষার বিছানা ছিল
CGColor.componentsরঙের জায়গার উপর নির্ভর করে উপাদানের সংখ্যা পরিবর্তিত হয়: উদাহরণস্বরূপ, UIColor.whiteযখন কোনও সিজি রঙে ফেলে দেওয়া হয় তখন কেবল দুটি থাকে: [1.0, 1.0]পূর্ণ আলফা সহ একটি গ্রেস্কেল (সম্পূর্ণ সাদা) রঙের প্রতিনিধিত্ব করে। একটি UIColor এর আরজিবি উপাদান আহরণের একটি ভাল মাধ্যমUIColor.getRed(_ red:, green:, blue:, alpha:)
নোট করুন গুগল ক্লোজার লাইব্রেরিতে এর জন্য একটি অ্যালগরিদম রয়েছে যা একটি ডাব্লু 3 সি সুপারিশের উল্লেখ করে: http://www.w3.org/TR/AERT#color-contrast । তবে, এই এপিআইতে আপনি প্রাথমিক পয়েন্ট হিসাবে প্রস্তাবিত রঙের একটি তালিকা সরবরাহ করেন।
/**
* Find the "best" (highest-contrast) of the suggested colors for the prime
* color. Uses W3C formula for judging readability and visual accessibility:
* http://www.w3.org/TR/AERT#color-contrast
* @param {goog.color.Rgb} prime Color represented as a rgb array.
* @param {Array<goog.color.Rgb>} suggestions Array of colors,
* each representing a rgb array.
* @return {!goog.color.Rgb} Highest-contrast color represented by an array.
*/
goog.color.highContrast = function(prime, suggestions) {
var suggestionsWithDiff = [];
for (var i = 0; i < suggestions.length; i++) {
suggestionsWithDiff.push({
color: suggestions[i],
diff: goog.color.yiqBrightnessDiff_(suggestions[i], prime) +
goog.color.colorDiff_(suggestions[i], prime)
});
}
suggestionsWithDiff.sort(function(a, b) { return b.diff - a.diff; });
return suggestionsWithDiff[0].color;
};
/**
* Calculate brightness of a color according to YIQ formula (brightness is Y).
* More info on YIQ here: http://en.wikipedia.org/wiki/YIQ. Helper method for
* goog.color.highContrast()
* @param {goog.color.Rgb} rgb Color represented by a rgb array.
* @return {number} brightness (Y).
* @private
*/
goog.color.yiqBrightness_ = function(rgb) {
return Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000);
};
/**
* Calculate difference in brightness of two colors. Helper method for
* goog.color.highContrast()
* @param {goog.color.Rgb} rgb1 Color represented by a rgb array.
* @param {goog.color.Rgb} rgb2 Color represented by a rgb array.
* @return {number} Brightness difference.
* @private
*/
goog.color.yiqBrightnessDiff_ = function(rgb1, rgb2) {
return Math.abs(
goog.color.yiqBrightness_(rgb1) - goog.color.yiqBrightness_(rgb2));
};
/**
* Calculate color difference between two colors. Helper method for
* goog.color.highContrast()
* @param {goog.color.Rgb} rgb1 Color represented by a rgb array.
* @param {goog.color.Rgb} rgb2 Color represented by a rgb array.
* @return {number} Color difference.
* @private
*/
goog.color.colorDiff_ = function(rgb1, rgb2) {
return Math.abs(rgb1[0] - rgb2[0]) + Math.abs(rgb1[1] - rgb2[1]) +
Math.abs(rgb1[2] - rgb2[2]);
};
আপনি যদি ভিজ্যুয়াল এফেক্টের জন্য রঙের স্পেসগুলি পরিচালনা করে থাকেন তবে আরজিবি থেকে এইচএসএল (হিউ, স্যাচুরেশন এবং লাইটনেস) এ কাজ করা সহজ। প্রাকৃতিকভাবে আনন্দদায়ক প্রভাবগুলি দিতে আরজিবিতে রঙগুলি সঞ্চারিত করা যথেষ্ট ধারণাগতভাবেই জটিল হয়ে ওঠে, যেখানে এইচএসএল রূপান্তরিত করে সেখানে হেরফের করে, তারপরে আবার রূপান্তরিত করা ধারণাটিতে আরও স্বজ্ঞাত এবং অদৃশ্যভাবে আরও ভাল ফলাফলের ফলাফল দেয়।
উইকিপিডিয়ায় এইচএসএল এবং ঘনিষ্ঠভাবে সম্পর্কিত এইচএসভির একটি ভাল পরিচয় রয়েছে । রূপান্তরটি করার জন্য নেটের চারপাশে নিখরচায় কোড রয়েছে (উদাহরণস্বরূপ এখানে একটি জাভাস্ক্রিপ্ট বাস্তবায়ন রয়েছে )
আপনি যে সুনির্দিষ্ট রূপান্তরটি ব্যবহার করছেন তা স্বাদের বিষয়, তবে ব্যক্তিগতভাবে আমি হিউ এবং লাইটনেস উপাদানগুলিকে বিপরীত করে প্রথম সন্নিবেশ হিসাবে ভাল উচ্চতর বিপরীতে রঙ উত্পন্ন করার বিষয়ে নিশ্চিত হতে পারি তবে আপনি আরও সূক্ষ্ম প্রভাবের জন্য সহজেই যেতে পারেন।
যে কোনও হিউ ব্যাকগ্রাউন্ডে আপনার কোনও হিউ পাঠ্য থাকতে পারে এবং তা নিশ্চিত হয়ে যায়। আমি সব সময় এটা। জাভাস্ক্রিপ্টে রঙিনের পাঠযোগ্য পাঠ্যের উপর এটির জন্য একটি সূত্র রয়েছে - এসটিডাব্লু * যেমনটি এই লিঙ্কটিতে বলা হয়েছে যে সূত্রটি বিপরীত-গামা অ্যাডজাস্টমেন্ট গণনার ক্ষেত্রে একটি প্রকরণ, যদিও কিছুটা আরও পরিচালিত আইএমএইচও। এই লিঙ্কটির ডানদিকে এবং এর সাথে যুক্ত পৃষ্ঠাগুলির মেনুগুলি সর্বদা স্পষ্টভাবে টেক্সট এবং পটভূমির জন্য এলোমেলোভাবে উত্পন্ন রঙগুলি ব্যবহার করে। সুতরাং হ্যাঁ, পরিষ্কারভাবে এটি করা যেতে পারে, কোনও সমস্যা নেই।
একটি অ্যান্ড্রয়েড বৈচিত্র যা আলফাটিকেও ক্যাপচার করে।
(ধন্যবাদ থোমাস-ভোস)
/**
* Returns a colour best suited to contrast with the input colour.
*
* @param colour
* @return
*/
@ColorInt
public static int contrastingColour(@ColorInt int colour) {
// XXX /programming/1855884/determine-font-color-based-on-background-color
// Counting the perceptive luminance - human eye favors green color...
double a = 1 - (0.299 * Color.red(colour) + 0.587 * Color.green(colour) + 0.114 * Color.blue(colour)) / 255;
int alpha = Color.alpha(colour);
int d = 0; // bright colours - black font;
if (a >= 0.5) {
d = 255; // dark colours - white font
}
return Color.argb(alpha, d, d, d);
}
base@ গ্যাসেকের উত্তর পেতে R সংস্করণ luminance(আপনি সহজেই নিজের দোরগোড়া প্রয়োগ করতে পারেন)
# vectorized
luminance = function(col) c(c(.299, .587, .114) %*% col2rgb(col)/255)
ব্যবহার:
luminance(c('black', 'white', '#236FAB', 'darkred', '#01F11F'))
# [1] 0.0000000 1.0000000 0.3730039 0.1629843 0.5698039
গ্যাসেকের উত্তরের ভিত্তিতে এবং ওয়েভ ব্রাউজার এক্সটেনশনের সাথে @ ওয়েবসিডের উদাহরণ বিশ্লেষণ করার পরে , আমি নিম্নলিখিত সংস্করণটি নিয়ে এসেছি যা বিপরীত অনুপাতের ভিত্তিতে কালো বা সাদা পাঠ্য চয়ন করে (ডাব্লু 3 সি এর ওয়েব সামগ্রী অ্যাক্সেসিবিলিটি গাইডলাইনস (ডাব্লুসিএজি) ২.১ এ সংজ্ঞায়িত ) পরিবর্তে, luminance।
এটি কোড (জাভাস্ক্রিপ্টে):
// As defined in WCAG 2.1
var relativeLuminance = function (R8bit, G8bit, B8bit) {
var RsRGB = R8bit / 255.0;
var GsRGB = G8bit / 255.0;
var BsRGB = B8bit / 255.0;
var R = (RsRGB <= 0.03928) ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
var G = (GsRGB <= 0.03928) ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
var B = (BsRGB <= 0.03928) ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};
var blackContrast = function(r, g, b) {
var L = relativeLuminance(r, g, b);
return (L + 0.05) / 0.05;
};
var whiteContrast = function(r, g, b) {
var L = relativeLuminance(r, g, b);
return 1.05 / (L + 0.05);
};
// If both options satisfy AAA criterion (at least 7:1 contrast), use preference
// else, use higher contrast (white breaks tie)
var chooseFGcolor = function(r, g, b, prefer = 'white') {
var Cb = blackContrast(r, g, b);
var Cw = whiteContrast(r, g, b);
if(Cb >= 7.0 && Cw >= 7.0) return prefer;
else return (Cb > Cw) ? 'black' : 'white';
};
একটি কার্যকারী উদাহরণ আমার ওয়েবসাইডের কোডপেনের কাঁটাচামুতে পাওয়া যেতে পারে , যা ওয়েভের শূন্য নিম্ন বিপরীতে ত্রুটি তৈরি করে।