Use shadows and other visual cues: Some elements need an extra layer of definition, such as a drop shadow to create separation between elements.Use a bold typeface: Consider typefaces with thicker strokes than you might normally use to help “lift” them off single color backgrounds.Use a color overlay: Maintain the integrity of your color by converting images to black and white before adding the overlay to stay true to your palette.Using simple elements with monochrome can keep the design from getting too busy. Use a monochrome palette with black and what text and other elements to establish flow and contrast. With fewer color variances this can be a little more difficult. See the Pen HSL by Dan Wilson ( on CodePen.The toughest part about using a monochromatic design is pulling different elements together in a way that keeps the eye moving across the design. Lots of great goodies in there to up your understanding of working with color. Wanna learn more about color on the web in general? Don’t miss Sarah Drasner’s A Nerd’s Guide to Color on the Web. See the Pen HSL by Graham Pyne ( on CodePen. There is also the HSL Color Picker and Mothereffering HSL if you want options. See the Pen HSL Explorer by Chris Coyier ( on CodePen. Need a quick color picker? I put this one together ages ago and I quickly ported it over to CodePen: 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.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |