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

Change the contrast between two colors to the target value in NPM #148

Open
yankovichv opened this issue Jan 19, 2022 · 1 comment
Open
Labels
enhancement New feature or request npm packages Issues related to the leonardo npm packages

Comments

@yankovichv
Copy link

yankovichv commented Jan 19, 2022

Description

Colleagues, I need your help. It seems to me that I have a very simple task that I can easily solve in the web interface of Leonardo, but I can not solve through the package.

My task. I have text color. I have a background color that I want to edit in such a way as to achieve a certain contrast between the background color and the text.

And I can do it elementarily on Leonardo's website, here's an example - https://leonardocolor.io/?colorKeys=%230362fc&base=151b1e&ratios=7&mode=HSL.

How do I get a package to do the same? Working with themes and the required lightness parameter make this impossible.

Please help me. And I am sure that such a simple method of IPA is simply necessary.

Why do you need this feature?

Judging by the number of topics and questions on SOF, this is what people really need. Few people need adaptive themes, but automatically paint the background of the block - thousands of people face such a task.

Leonardo package and version

Last.

@yankovichv yankovichv added enhancement New feature or request npm packages Issues related to the leonardo npm packages labels Jan 19, 2022
@yankovichv
Copy link
Author

I think I'm a complete donkey and @NateBaldwinDesign kindly shared the decision with me in the mail a few months ago. I'll leave it here:

const myColor = new Color({ name: ‘myColor’, colorKeys: [‘#a270ff’], ratios: [6]})

const myTheme = new Theme({ colors: [myColor], backgroundColor: ‘#ffffff’ });

And to return the result, call:

myTheme.contrastColors;
Or
myTheme.contrastColorValues;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request npm packages Issues related to the leonardo npm packages
Projects
None yet
Development

No branches or pull requests

1 participant