# Changing text colour depending on background

**URL:** <https://forum.readymag.com/t/changing-text-colour-depending-on-background/5268>\
**Category:** Custom code\
**Created:** [July 29, 2025, 1:13pm UTC](https://forum.readymag.com/t/changing-text-colour-depending-on-background/5268 "2025-07-29T13:13:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Demi\_1234567](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/demi_1234567/32/3482_2.png) [@Demi\_1234567](https://forum.readymag.com/u/Demi_1234567)\
**Post date:** [July 29, 2025, 1:13pm UTC](https://forum.readymag.com/t/changing-text-colour-depending-on-background/5268/1 "2025-07-29T13:13:06Z")

</div>

How can I make a fixed logo text change colour based on the section background (white ↔ black) on scroll?

---

<div class="post-metadata">

**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\
**Post date:** [July 29, 2025, 6:39pm UTC](https://forum.readymag.com/t/changing-text-colour-depending-on-background/5268/2 "2025-07-29T18:39:34Z")

</div>

Maybe [Blending modes](https://forum.readymag.com/t/blending-modes/57)?

Or if you want to go the no-code way, you can use animations and have color-1 text change opacity to 0 on scroll and do the inverse with color-2 text (go from 0 to 100). Repeat as needed.