First game with Akali
First of all, I would like to point out that this post is the first publication of my life, so please don't be too critical. However, I would be happy with any reaction in the comment section. Even a simple +1 or -1 if you don't like to comment.
Introduction
Anyway, I'm working on an Open Source project, and the question arose, what if I split the project into modules, to allow the modules to be used independently in other projects? So, I didn't hesitate and created a pretty package containing only the functions related to the colors.
I want to present this package to you, might you can use it in your next project. But, instead of copying the documentation here, which you can read on GitHub or NPM, I'd like to point out its real-world usage.
The Basics
First, let's look at the basics.
Convert colors
It was clear that converting colors is always a sudden problem, and we spend unnecessary time on Google searches.
Currently, there are three functions available for this purpose, which support every 3-digit, 6-digit, and 8-digit hexadecimal color.
hex2rgb(), rgb2hex(), hsl2hex()
At the moment, I've been able to solve all the cases with this kit as a Full Stack Developer.
Random colors
Sometimes it may be necessary to generate a random color. And if we quickly create a short code, we're in for a surprise. What useless and ugly colors come out? Right?
randomHex(), randomRgb(), randomHsl()
As in all cases HSL colors are generated under the hood, it is possible to specify saturation and lightness parameters to the generators. You'll always get the colors you've always imagined.
The Big Boys
And now, the stronger features.
Brightness
How many times have you encountered the difficulty of deciding whether to use white or black text color based on the background color?
brightness()
You can forget the problem forever because here's a tool that tells you whether a color is dark or light. Bang! One less problem.
Tone Map
Creating color variations (lighter, light, dark, darker, etc.) for a brand is also a task that comes up in most projects. It is not as easy as it seems and a lot of unnecessary time is spent on it.
toneMap()
This feature solves that problem and gives 18 variations, 9 darker and 9 lighter, so you never have to worry about palettes again.
Color Shift
If you don't need complete palettes, just a simple color shift, well, use this feature for that purpose.
colorShift()
Under the hood, a full RGB offset is applied, so you can be sure that the resulting color will match the original perfectly.
Colorify
And finally, a super tool. If you've developed an application where you've managed user accounts with profile pictures, you already know that most users don't upload profile pictures.
In these cases, it is now almost standard practice to display the user's monogram in a colored circle as a profile picture.
colorify()
As there are HSL colors under the hood, it is possible to set the saturation and lightness parameters for the generators.
Summary
As you have seen, a pretty useful package has been put together, so feel free to use it in any of your projects!
Related links:
Final words
Thank you for your interest, I hope you enjoyed my article. I look forward to receiving your feedback in the comment section!
If you found this project interesting, please consider supporting my open source work by sponsoring me / give the repo a star / follow the nextcss project.
Top comments (0)