Интеллектуальное обнаружение цвета

Мы работаем над системой медицинского планирования, которая позволяет пользователям определять цвета для отображения в календаре на основе определенного статуса. Проблема в том, что если пользователь выбирает темный цвет фона, а мы используем темный шрифт, шрифт не отображается. Аналогично, если они выбирают светлый цвет, а мы используем светлый шрифт. По разным причинам мы не хотим, чтобы пользователь устанавливал оба цвета.

Но мы задаемся вопросом, существует ли какой-либо конкретный шаблон для шестнадцатеричных кодов цветов. Возможно, если оно меньше заданного значения, следует использовать темный шрифт, а в противном случае - светлый шрифт?

Итак, есть ли интеллектуальный способ программно выбрать цвет шрифта на основе выбора пользователем цвета фона?

Эми

Источник

5 ответов

Решение

Вы можете использовать шестнадцатеричные коды для математического расчета контрастности между двумя цветами. С этой информацией вопрос заключается в том, какой цвет текста (белый или черный) более контрастен с выбранным цветом фона. На этом сайте показано, как написать этот код на PHP или Javascript, но его можно легко адаптировать к другим языкам.

http://24ways.org/2010/calculating-color-contrast

Источник

На ваш первый вопрос шестнадцатеричные значения цветовых кодов в формате RGB, я полагаю. Это означает, что первый байт - это количество красного цвета в цвете; второй байт - это количество зелени в цвете; и третий байт - это количество синевы в цвете.

Если вы хотите попытаться угадать цвет шрифта, вы можете попытаться увидеть, насколько он близок к #FFFFFF, и использовать темный цвет, если он меньше # 777777.

Я ни в коем случае не специалист по цветам, поэтому я не гарантирую правильность этого ответа.

Источник

Если все, что вам нужно, это простой флиппер белого / черного цвета на основе неизвестного цвета фона, ответ на самом деле очень прост.

Плохая и грязная яркость Энди:

        let luminance = (sR/255.0)**2.2*0.2126 + (sG/255.0)**2.2*0.7152 + (sB/255.0)**2.2*0.0722;

Затем переверните, когда яркость фона составит около 0,37:

      function textColor (luminance) { return (luminance < 0.37) ? '#fff' : '#000' }

Я подробно обсуждаю это здесь: /questions/10835959/opredelite-tsvet-shrifta-na-osnove-tsveta-fona/59631288#59631288

Источник

Яркость цвета: http://www.webmasterworld.com/forum88/9769.htm

Но на самом деле, почему бы просто не инвертировать фон и использовать результирующий цвет как передний план?

Источник

Попробуйте эту функцию;

function wc_light_or_dark( $color, $dark = '#000000', $light = '#FFFFFF' ) {

    $hex = str_replace( '#', '', $color );

    $c_r = hexdec( substr( $hex, 0, 2 ) );
    $c_g = hexdec( substr( $hex, 2, 2 ) );
    $c_b = hexdec( substr( $hex, 4, 2 ) );

    $brightness = ( ( $c_r * 299 ) + ( $c_g * 587 ) + ( $c_b * 114 ) ) / 1000;

    return $brightness > 155 ? $dark : $light;
}

Источник: http://woocommerce.wp-a2z.org/oik_api/wc_light_or_dark/

Источник
Другие вопросы по тегам