Detecting if background is light or dark from hex, changing text colour based on it

Need help
1

I’m building an app that lets users pick background colours from a colourpicker. I want to change the colour of the text (white or black) that’s laid over these backgrounds depending on whether the user picks a light or dark background.

I know there’s javascript that achieves this, but I can’t write it or get the examples online working. I have toolbox installed. Any advice on a way of determining the brightness of a colour is appreciated.

2

I think the below website can help you solve the problem, and the codes seems not difficult to understand. Sometimes we need to use other expression to make the codes work in Bubble, let me know if you need further help.

Samson @ Plugin Developer
Plugin Page
Plugin Forum

3

@cha_james a continuation from samson:

Use this snippet on page load:

var rgb = $('#test').css('backgroundColor');
var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var brightness = 1;

var r = colors[1];
var g = colors[2];
var b = colors[3];

var ir = Math.floor((255-r)*brightness);
var ig = Math.floor((255-g)*brightness);
var ib = Math.floor((255-b)*brightness);

$('#test').css('color', 'rgb('+ir+','+ig+','+ib+')');
4

This topic was automatically closed after 70 days. New replies are no longer allowed.