Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@johnsfuller
Last active August 1, 2019 18:14
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 johnsfuller/7c162c010577f8c413bb17e3588fdc38 to your computer and use it in GitHub Desktop.
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 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
#}
@adesignl
Copy link

Nioooce

@TheWebTech
Copy link

Like a Boss

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment