Last active
August 1, 2019 18:14
-
-
Save johnsfuller/7c162c010577f8c413bb17e3588fdc38 to your computer and use it in GitHub Desktop.
This hubl macro will determine text color based on a set background color. This macro is based off of this sass color function by John W Long https://gist.github.com/jlong/f06f5843104ee10006fe which is based off of this article http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# This macro is based off of this sass color function by John W Long | |
# https://gist.github.com/jlong/f06f5843104ee10006fe | |
# which gets its brightness math from this article: | |
# http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx | |
# Thanks to Matt Coley (https://github.com/mattcoley) and the HubSpot Team | |
# for introducing the root filter which makes this macro possible. | |
#} | |
{% macro find_text_color(bg_color) %} | |
{%- set rgb_array = bg_color|convert_rgb|split(',') -%} | |
{%- set r = rgb_array[0] -%} | |
{%- set g = rgb_array[1] -%} | |
{%- set b = rgb_array[2] -%} | |
{%- set red_changer = 241 -%} | |
{%- set green_changer = 691 -%} | |
{%- set blue_changer = 68 -%} | |
{%- set brightness_divisor = red_changer + green_changer + blue_changer -%} | |
{%- set light_text = '#f6f6f6' -%} | |
{%- set dark_text = '#222222' -%} | |
{%- set to_calculate = (((r * r * red_changer) + (g * g * green_changer) + (b * b * blue_changer)) / brightness_divisor )|root -%} | |
{%- set brightness = 100 * to_calculate / 255 -%} | |
{%- if brightness < 65 -%}{{ light_text }}{%- else -%}{{ dark_text }}{%- endif -%} | |
{% endmacro %} | |
{# example use | |
# {{ find_text_color('#073B3A') }} | |
# will output #f6f6f6 | |
#} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nioooce