algorithm - para - como poner color de fondo en html en bloc de notas

Determinar el color de la fuente basado en el color de fondo

Question

Dado un sistema (un sitio web por ejemplo) que le permite a un usuario personalizar el color de fondo para alguna sección pero no para el color de la fuente (para mantener la cantidad de opciones al mínimo), hay una manera de determinar mediante programación que una "luz" o "luz" ¿El color de fuente oscuro es necesario?

Estoy seguro de que hay algún algoritmo, pero no sé lo suficiente sobre los colores, la luminosidad, etc. para resolverlo por mi cuenta.

Answer 1

Una implementación para objetivo-c

+ (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];
}

Answer 2

Como extensión de 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
}

Answer 3

En caso de que alguien quisiera una versión más corta, tal vez más fácil de entender, de la respuesta de 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;
}

Nota: eliminé la inversión del valor de luma (para que los colores brillantes tengan un valor más alto, lo que me parece más natural y también es el método de cálculo "predeterminado").

Usé las mismas constantes que GaceK desde here ya que funcionaron muy bien para mí.

(También puede implementar esto como un método de extensión utilizando la siguiente firma:

public static Color ContrastColor(this Color iColor)

Luego puedes llamarlo a través de foregroundColor = background.ContrastColor() .)

Answer 4

Esta es una respuesta tan útil. ¡Gracias por eso!

Me gustaría compartir una versión de 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 );

}

Ahora averigüe cómo usar el algoritmo para crear automáticamente los colores de desplazamiento para los enlaces del menú. Los encabezados de luz tienen una posición más oscura, y viceversa.

Answer 5

Gracias @Gacek . Aquí hay una versión para 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);
}

Y una versión mejorada (más corta):

@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;
}

Answer 6

Gracias por este post.

Para quien esté interesado, aquí hay un ejemplo de esa función en 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;

Answer 7

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;
};

Answer 8

Me encontré con un problema similar. Tuve que encontrar un buen método para seleccionar el color de fuente contrastivo para mostrar etiquetas de texto en escalas de colores / mapas de calor. Tenía que ser un método universal y el color generado tenía que ser "bien parecido", lo que significa que generar un color complementario simple no era una buena solución; a veces generaba colores extraños y muy intensos que eran difíciles de ver y leer.

Después de largas horas de pruebas y tratando de resolver este problema, descubrí que la mejor solución es seleccionar la fuente blanca para los colores "oscuros" y la fuente negra para los colores "brillantes".

Aquí hay un ejemplo de la función que estoy usando en C #:

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);
}

Esto se probó en varias escalas de colores (arco iris, escala de grises, calor, hielo y muchos otros) y es el único método "universal" que descubrí.

Editar
Cambió la fórmula de contar a "luminancia perceptiva": ¡realmente se ve mejor! Ya lo implementé en mi software, se ve muy bien.

Edit 2 @WebSeed proporcionó un gran ejemplo funcional de este algoritmo: http://codepen.io/WebSeed/full/pvgqEq/

Answer 9

Mi implementación Swift de la respuesta de Gacek:

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)
}

Answer 10

Pitón feo si no tienes ganas de escribirlo :)

''''''
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''

Answer 11

Puede tener cualquier texto de matiz en cualquier fondo de matiz y asegurarse de que sea legible. Lo hago todo el tiempo. Hay una fórmula para esto en Javascript en Texto legible en color - STW * Como se dice en ese enlace, la fórmula es una variación en el cálculo del ajuste de gamma inversa, aunque un poco más manejable IMHO. Los menús en el lado derecho de ese enlace y sus páginas asociadas utilizan colores generados aleatoriamente para texto y fondo, siempre legibles. Así que sí, claramente se puede hacer, no hay problema.

Answer 12

Si está manipulando espacios de color para efectos visuales, generalmente es más fácil trabajar en HSL (Tono, Saturación y Luminosidad) que en RGB. Mover colores en RGB para dar efectos agradables por naturaleza tiende a ser bastante difícil conceptualmente, mientras que la conversión en HSL, la manipulación allí, luego la conversión de nuevo es más intuitiva en el concepto e invariablemente da mejores resultados.

Wikipedia tiene una buena introducción a HSL y al HSV estrechamente relacionado. Y hay código libre en la red para hacer la conversión (por ejemplo, aquí hay una implementación de javascript )

La transformación precisa que utilice es cuestión de gustos, pero personalmente pensé que revertir los componentes de Tono y Luminosidad generaría un buen color de alto contraste como primera aproximación, pero puede obtener fácilmente efectos más sutiles.

Answer 13

Swift 4 Ejemplo:

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)
    }

}

ACTUALIZACIÓN : se encontró que 0.6 era un mejor banco de pruebas para la consulta

Answer 14

Tuve el mismo problema pero tuve que desarrollarlo en PHP . Utilicé la solution de @Garek y también utilicé esta respuesta: convertir el color hexadecimal a valores RGB en PHP para convertir el código de color HEX a RGB.

Así que lo estoy compartiendo.

Quería usar esta función con el color HEX de fondo dado, pero no siempre comenzando desde ''#''.

//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;
}

Answer 15

iOS Swift 3.0 (extensión 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
}

Answer 16

Una variación de Android que captura el alfa también.

(gracias @ thomas-vos)

/**
 * Returns a colour best suited to contrast with the input colour.
 *
 * @param colour
 * @return
 */
@ColorInt
public static int contrastingColour(@ColorInt int colour) {
    // XXX https://.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);
}