Учитывая систему (например, веб-сайт), которая позволяет пользователю настроить цвет фона для какого-либо раздела, но не цвет шрифта (чтобы свести количество параметров к минимуму), есть ли способ программно определить, есть ли "свет" "или" темный "цвет шрифта?
Я уверен, что есть какой-то алгоритм, но я не знаю достаточно о цветах, яркости и т.д., чтобы понять это самостоятельно.
Я столкнулся с подобной проблемой. Мне нужно было найти хороший метод выбора цвета контрастного шрифта для отображения текстовых меток на цветовых шкалах/тепловых картах. Это должен был быть универсальный метод, и генерируемый цвет должен был быть "хорошо выглядящим", а это значит, что простое создание дополнительного цвета не было хорошим решением - иногда оно генерировало странные, очень интенсивные цвета, которые было трудно смотреть и читать.
После долгих часов тестирования и попыток решить эту проблему, я обнаружил, что лучшим решением является выбор белого шрифта для "темных" цветов и черного шрифта для "ярких" цветов.
Вот пример функции, которую я использую в С#:
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 на "воспринимаемую яркость" - это действительно выглядит лучше! Уже реализовано это в моем программном обеспечении, выглядит великолепно.
Edit 2 @WebSeed предоставил отличный рабочий пример этого алгоритма: http://codepen.io/WebSeed/full/pvgqEq/
На тот случай, если кому-то понравится более короткая, может быть, более понятная версия ответа GaceK:
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().)
Спасибо @Гачек. Здесь версия для Android:
@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;
}
Моя быстрая реализация ответа Гачека:
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)
}
Javascript [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;
};
Спасибо за этот пост.
Для тех, кто может быть заинтересован, вот пример этой функции в Delphi:
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;
Это такой полезный ответ. Спасибо за это!
Я хотел бы поделиться версией SCSS:
@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 );
}
Теперь выясним, как использовать алгоритм для автоматического создания цветов наведения для ссылок меню. Световые заголовки получают более темный наведение и наоборот.
Уродливый Python, если вам не нравится писать его:)
'''
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'
У меня была такая же проблема, но я должен был разработать ее на PHP. Я использовал решение @Garek, и я также использовал этот ответ: конвертировать шестнадцатеричный цвет в значения RGB в PHP, чтобы преобразовать код цвета HEX в RGB.
Так что я делюсь этим.
Я хотел использовать эту функцию с заданным фоновым цветом HEX, но не всегда начиная с '#'.
//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;
}
iOS Swift 3.0 (расширение UIColor):
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
}
+ (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];
}
Swift 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 был лучшим испытательным стендом для запроса
Реализация флаттера
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;
}
Если вы манипулируете цветовыми пространствами для визуального эффекта, обычно проще работать в HSL (оттенок, насыщенность и легкость), чем RGB. Перемещение цветов в RGB для получения естественно приятных эффектов имеет тенденцию быть довольно концептуально трудным, тогда как преобразование в HSL, манипулирование там, а затем преобразование обратно снова более интуитивно понятное в концепции и неизменно дает лучшие результаты.
Википедия имеет хорошее введение в HSL и тесно связанную с HSV. И там бесплатный код для сети, чтобы сделать преобразование (например вот реализация javascript)
Какая точная трансформация, которую вы используете, является вопросом вкуса, но лично я бы подумал, что обратная связь с компонентами Hue и Lightness, несомненно, создаст хороший контрастный цвет в первом приближении, но вы можете легко пойти на более тонкие последствия.
Вы можете получить любой оттенок текста на любом цветовом фоне и убедиться, что он разборчивый. Я делаю это все время. Там формула для этого в Javascript на Readable Text in Color - STW * Как говорится в этой ссылке, формула является вариацией для расчета корректировки обратной гаммы, хотя немного более управляемой ИМХО. Меню в правой части этой ссылки и связанные с ней страницы используют случайно генерируемые цвета для текста и фона, всегда разборчивые. Так что да, ясно, что это можно сделать, никаких проблем.
Как расширение Kotlin/Android:
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
}
Вариант Android, который также фиксирует альфу.
(спасибо @Томас-Вос)
/**
* Returns a colour best suited to contrast with the input colour.
*
* @param colour
* @return
*/
@ColorInt
public static int contrastingColour(@ColorInt int colour) {
// XXX https://stackoverflow.com/questions/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);
}
Обратите внимание, что для этого есть библиотека закрытия Google, которая ссылается на рекомендацию w3c: http://www.w3.org/TR/AERT#color-contrast. Однако в этом API вы предоставляете список предлагаемых цветов в качестве отправной точки.
/**
* 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]);
};