recentpopularlog in

abberdab : colorpalettes   9

Duotone filtering w/ CSS variables 😎🌈
Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters 🌈

So here it is! A duotone filtering tester using CSS variables. The inner ring is the lightening color whilst the outer is the darkening color 👍

To change the colors, adjust the colors variable in the pug code.

Enjoy!
css  color  colorpalettes  duotone  filters  interface  interactive  images  photography 
july 2018 by abberdab
6-Color Watercolor Palette — Scratchmade Journal
I recently posted a watercolor palette option that uses only four colors, and though this setup can work very well for most nature sketching activities, like any extremely limited palette, it won’t work for everything.

In my opinion, it lacks a couple of things to make it perfect... like a really rich red to paint birds and barns and other really red things, and a way to mix a larger range of greens and blues which are good to have around when painting natureish and landscapey things.

By adding only 2 colors to the 4-color palette (creating a 6-color palette, just in case it's early in the morning when you are reading this and way too soon for math), these limitations are completely eliminated. Yet this palette is still highly portable, affordable, and seems to work for every color possibly found in nature— and then some!
watercolor  minimal  colorpalettes  media  art 
october 2017 by abberdab
Color Contrast for Better Readability | Viget
I’ve been working on a process to help me ensure good color contrast and readability in my projects. Thanks to some helpful color contrast accessibility tools, I think I have something that is working and wanted to share with others in the event that you find it helpful, too.
a11y  color  contrast  design  colorpalettes  accessibility 
august 2017 by abberdab
Signal vs. Noise: Color as a Wayfinding Tool | Viget
Used carefully, color can become a helpful wayfinding tool to better help a user know where she is and where to go next. When it comes to user interface design, you may want to limit your use of color. Instead, use it cautiously in very intentional and meaningful ways.
color  wayfinding  design  ui  ux  colorpalettes 
august 2017 by abberdab
Using Visual Loudness for Better Wayfinding | Viget
Well-designed interactive experiences use loudness to help identify and amplify wayfinding systems. Because, if everything screams all you will hear is noise. Emphasis used properly—like a loudspeaker in a crowded room—can help guide attention more effectively. Careful use of visual loudness helps illuminate priority.
color  colorpalettes  design  hierarchy  loudness  volume  wayfinding  ux  ui 
august 2017 by abberdab
From Darkness to Light: Color Versatility Using Tints, Tones, and Shades | Viget
In my last article, I wrote about how using more specific names can be useful when referencing colors. Several people shared how this is doubly useful when mapping to SASS variables—and I agree. This time around I want to share how to use more specific color names when applying lighter and darker values through tints, tones, and shades and how this can be further helpful for color reference.
color  design  sass  css  naming  naming-conventions  tints  tones  shades  colorpalettes 
august 2017 by abberdab
100 Years of Color: Beautiful Color Combinations of the 20th Century
RT @printmag: 100 Years of Color: Beautiful Color Combinations of the 20th Century
colorpalettes  arthistory 
september 2015 by abberdab

Copy this bookmark:





to read