Good thinking from Paul Hebert on the Cloudfour blog about colorizing a component. You might look at a design comp and see a card component with a header background of
#dddddd, content background of
#ffffff, on an overall background of
#eeeeee. OK, easy enough. But what if the overall background becomes
#dddddd? Now your header looks lost within it.
That darker header? Design-wise, it’s not being exactly
#dddddd that’s important; it’s about looking slightly darker than the background. When that’s the case, a background of, say
rgba(0, 0, 0, 0.135) is more resiliant.
That will then remain resilient against backgrounds of any kind.
You can support CSS-Tricks by being an MVP Supporter.