Skip to content

Instantly share code, notes, and snippets.

@sybrew

sybrew/tsf-test-relative-fontcolor.php

Last active August 20, 2018 18:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sybrew/0613283d7a56ae6ef905d665510216d4 to your computer and use it in GitHub Desktop.
Save sybrew/0613283d7a56ae6ef905d665510216d4 to your computer and use it in GitHub Desktop.
Download ZIP
The testing script used to find issues with the new color calcuation in TSF. Double-click the page to load the next sequence.
Raw
tsf-test-relative-fontcolor.php
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 12px 0;
font-weight: 600;
font-size: 14px;
vertical-align: middle;
display: inline-block;
width: 10%;
text-align: center
}
wrap {
width: 100%
}
</style>
</head>
<body><wrap>
<?php
$max = 255 ** 3; // 16M
$length = 2 ** 16; // 65536.
$start = intval( $_GET['i'] ?? 0 ) * $length;
for ( $h = $start, $i = 0; $h < $max && $i < $length; $h += 1, $i++ ) {
$color = '#' . str_pad( dechex( $h ), 6, '0', STR_PAD_LEFT );
$rel_color = '#' . get_relative_fontcolor( $color );
echo '<div style=background:'.$color.';color:'.$rel_color.'>&#9639; ' . strtoupper( $rel_color ) . ' &#9639;</div>';
}
if ( $h > $max ) {
echo 'Max i is ' . floor( $max / $length );
}
?>
</wrap>
<script>
document.body.addEventListener( 'dblclick', e => {
let i = +window.location.href.split('?i=')[1] || 0;
window.location.href = window.location.href.split( '?' )[0] + '?i=' + ( ++i );
} );
</script>
</body>
</html>
<?php
function get_relative_fontcolor( $hex = '' ) {
$hex = ltrim( $hex, '#' );
//* #rgb = #rrggbb
if ( 3 === strlen( $hex ) )
$hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
$hex = str_split( $hex, 2 );
//* Convert to numerical values.
$r = hexdec( $hex[0] );
$g = hexdec( $hex[1] );
$b = hexdec( $hex[2] );
$get_relative_luminance = function( $v ) {
//= Convert to 0~1 value.
$v /= 255;
if ( $v > .03928 ) {
$lum = pow( ( $v + .055 ) / 1.055, 2.4 );
} else {
$lum = $v / 12.92;
}
return $lum;
};
//* Use sRGB for relative luminance.
$sr = 0.2126 * $get_relative_luminance( $r );
$sg = 0.7152 * $get_relative_luminance( $g );
$sb = 0.0722 * $get_relative_luminance( $b );
$rel_lum = ( $sr + $sg + $sb );
//= Invert colors if they hit luminance boundaries.
if ( $rel_lum < 0.5 ) {
//* Build dark greyscale.
$gr = 255 - ( $r * 0.2989 / 8 ) * $rel_lum;
$gg = 255 - ( $g * 0.5870 / 8 ) * $rel_lum;
$gb = 255 - ( $b * 0.1140 / 8 ) * $rel_lum;
} else {
//* Build light greyscale.
$gr = ( $r * 0.2989 / 8 ) * $rel_lum;
$gg = ( $g * 0.5870 / 8 ) * $rel_lum;
$gb = ( $b * 0.1140 / 8 ) * $rel_lum;
}
//* Build RGB hex.
$retr = str_pad( dechex( round( $gr ) ), 2, '0', STR_PAD_LEFT );
$retg = str_pad( dechex( round( $gg ) ), 2, '0', STR_PAD_LEFT );
$retb = str_pad( dechex( round( $gb ) ), 2, '0', STR_PAD_LEFT );
return $retr . $retg . $retb;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment