Automatically change text color to assure readability

前端 未结 8 2018
生来不讨喜
生来不讨喜 2020-12-08 00:42

Users can set the background-color of a button through a textbox that accept RGB hexadecimal notation: ff00ff, ccaa22, etc. So I need to set the te

相关标签:
8条回答
  • 2020-12-08 01:45

    You could use this simple schema to achieve that goal. Just convert the color from RGB to HSV form. You can use this link . Then use this pseudo code;

    rr = (color>>16)&0xFF;
    gg = (color>>8)&0xFF;
    bb = color & 0xFF;
    
    someBrightColor = 0xFFFFFF;
    someDarkColor = 0x000000;
    
    hsvColor = rgbToHsv( rr, gg, bb );
    //
    //hsv is array: [h,s,v]...all values in [0,1]
    //
    //color is from dark range, if hsv < 0.5, so we need bright color to draw text, because    in dark color bright color 'will be more visible'.  
    if( hsvColor[2] <= 0.5 )
      textColor = someBrightColor ;
    //this is opposite case , when in more bright color, the dark color 'will be more visible'
    else
      textColor = someDarkColor ;
    

    Also you could divide [0,1] range into more parts. And instead of defining 2 colors (someBrightColor,someDarkColor) , define more colors. My suggested method is 'how bright is background color , thas text color must be dark, and vice versa'.

    0 讨论(0)
  • 2020-12-08 01:48

    A bit late to the party, but IMO all text should either be light or dark. Colored text is for links.

    Here's a coffeescript function I've written to decide which to use:

    is_light = (hex_color) ->
      c = hex_color.replace(/^#/,'')
      sum = parseInt(c[0]+c[1], 16)
      sum += parseInt(c[2]+c[3], 16)
      sum += parseInt(c[4]+c[5], 16)  
      log "sum is #{sum}"
      sum > 382.6
    
    0 讨论(0)
提交回复
热议问题