![]() ![]() If you’re messing with color in JavaScript and want randomization to result in pleasing colors, give PleaseJS a spin. See the Pen Sparklegate by Chris Coyier ( on CodePen. Not long ago, I basically did the same thing but rotated the hue to animate this stargate: See the Pen Random Reds by Chris Coyier ( on CodePen. You could randomize the H, S, and L tightly around some values: For example, say you want to generate some different red tones. I really like HSL when playing with color in JavaScript. See the Pen Sass Color Functions by Chris Coyier ( on CodePen. Or, you might get hot and heavy with Sass color functions or your own home brew thing. Those of you on the cutting edge might recall the working draft of Color Level 4 with the color() function and more intuitive sub-functions. Still, nothing nearly as intuitive as HSL. You might even be the clever sort who can identify color by Hex codes. You might have some mental chops with rgb(), knowing that rgb(255, 0, 0) is clearly red or rgb(0, 0, 0) is black, but manipulating those to get to a light purple or starting with a forest green and getting a little lighter isn’t exactly mental math. Change the lightness to essentially mix in black or white. Change the saturation to get deeper or more muted colors. Change the hue to take a trip around the color wheel. You can hand-manipulate any of those four values and have a decent sense of what is going to happen. Lightness: 0% is completely dark (black). ![]() Saturation: 0% is completely desaturated (grayscale).Values above and below will be modulus 360. 120 o is where greens are and 240 o are blues. We’ve talked about it before but we can break it down a little more and do some interesting things with it. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. Now that you have monochromatic color palettes on the mind, it’s time to toss ya a few examples of how you can use them.If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. They also play nicely with well-chosen contrasting colors, and they’re a smart choice for melding your brand to a specific and familiar hue. They’re not inherently loud or brassy, but can enhance provocative designs. For instance, if you choose a blue monochromatic color scheme, you can use variations of the hue, all made by changing its saturation levels and ending with either the hue itself, or a tint, tone, or shade.Įffective monochromatic schemes create refined simplicity and total visual cohesion. So, monochromatic schemes aren’t based on a single color rather, they’re centered around a single hue. Shade: A mixture of a hue and the color black, resulting in something darker, richer, and more intense. Tone: A mixture of a hue with gray (made from black and white). Tint: A mixture of a hue and the color white, resulting in a less intense and less saturated look. Hue: The dominant color family of any particular color (ex: blue) When working with these color choices, it’s important to familiarize yourself with a few key terms: Those who live by the principles of color theory know monochromatic color schemes (or “palettes”) to consist of much more than just “one” color, as the term’s ' mono-’ prefix might suggest. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |