Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to set text color Constraint according to background color. #21

Open
vikasinnoeye opened this issue Dec 21, 2017 · 8 comments
Open
Labels

Comments

@vikasinnoeye
Copy link

Hi,
can you please tell me how can I implement functionality like this =>https://material.io/color/#!/?view.left=0&view.right=1&primary.color=c4e0a4&primary.text.color=d5ffca

I want to set background color of box and and auto set text according to background color automatically.
Can you please tell me is there any function of parameter in this plugin.

Thanks

@fujaru
Copy link
Owner

fujaru commented Dec 21, 2017

Hi vikasinnoeye,
You can bind 'slidermove' or 'change' event of the input to set the background color of corresponding boxes.

<input type="text" id="color-input" />
<div id="box"></div>
$('#color-input').on('slidermove', function() {
    $('#box').css('background-color', $(this).wheelColorPicker('getValue', 'css'));
});

@vikasinnoeye
Copy link
Author

Hi @fujaru

Thanks for replaying, can you please tell me how can I set set text color according to the background color like the example link?

@fujaru
Copy link
Owner

fujaru commented Dec 21, 2017

I am not sure what did you mean by "text color", but you can get the color value in hex (e.g. #ffffff) with

$('#color-input').wheelColorPicker('getValue', 'css')

Please refer to the example.html page for samples on how to assign colors and labels to other elements with the color picker.

@vikasinnoeye
Copy link
Author

vikasinnoeye commented Dec 21, 2017

By "text color" I mean this, please check the screenshot:
color tool material design

I want to change these text inside the Div to be in "Black" Color or "White Color" According to the background color.

Hope this makes sense.

@fujaru
Copy link
Owner

fujaru commented Dec 21, 2017

I see that. You can get the "brightness" (v value) of the object returned by this

$('#color-input').wheelColorPicker('getColor').v

The value is between 0 to 1, we can check whether the value is more or less than, say, 0.5 to alter the color between black or white.

@vikasinnoeye
Copy link
Author

Hi, for that looking into the issue but with above code:
$('#color-input').wheelColorPicker('getColor').v

I am always getting value 1, can you please check that.

@vikasinnoeye
Copy link
Author

Please check this video recording on result: https://streamable.com/1ctjq

@fujaru
Copy link
Owner

fujaru commented May 9, 2019

The v value refers to V component of HSV/HSB colorspace. In this case, we would need to convert it to HSL and use L component instead.

https://stackoverflow.com/questions/3423214/convert-hsb-hsv-color-to-hsl

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants