# Forecolor based on back/fill color

**URL:** <https://forum.inductiveautomation.com/t/forecolor-based-on-back-fill-color/31730>\
**Category:** Ignition\
**Tags:** ignition79, ignition80\
**Created:** [January 29, 2020, 8:45pm UTC](https://forum.inductiveautomation.com/t/forecolor-based-on-back-fill-color/31730 "2020-01-29T20:45:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [January 29, 2020, 8:45pm UTC](https://forum.inductiveautomation.com/t/forecolor-based-on-back-fill-color/31730/1 "2020-01-29T20:45:29Z")

</div>

Is there an easy way to set the text/fore color based on the current back or fill color? I thought maybe about getLuminance(), but wasn’t able to get this to work. One, can we get this property? Two, will this do me any good? I thought I could just look to see if it’s dark or light then use color map.

Any suggestions?

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [January 29, 2020, 9:02pm UTC](https://forum.inductiveautomation.com/t/forecolor-based-on-back-fill-color/31730/2 "2020-01-29T21:02:59Z")

</div>

Might help if you stated what component you were using. 😉

Otherwise, consider using the style customizer to drive things like color.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [January 29, 2020, 9:50pm UTC](https://forum.inductiveautomation.com/t/forecolor-based-on-back-fill-color/31730/3 "2020-01-29T21:50:25Z")

</div>

Right, a custom template. I feed it custom colors that come from a look up table, cell binding to styles. Since the colors are unknown, and I really don’t want to have set colors for fore and back, I was wanting to make the fore color automatic based on whether the back color was light or dark.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [January 31, 2020, 1:06am UTC](https://forum.inductiveautomation.com/t/forecolor-based-on-back-fill-color/31730/4 "2020-01-31T01:06:03Z")

</div>

Found the following, [https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color](https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color), it works well enough for what I need.

Have a custom property LightDark which is bound to Foreground Color and uses the simple color map.

```auto
if event.propertyName == "background":
	color = event.source.background
	r = color.getRed()
	g = color.getGreen()
	b = color.getBlue()
	if (r*0.299 + g*0.587 + b*0.114) > 186:
		event.source.parent.LightDark = 0 #Black
	else:
		event.source.parent.LightDark = 1 #White

```

My issue on getLuminance() is that it’s getLightness(), was looking at wrong docs, IA support pointed that out to me. But, didn’t really need it though.