How to mix colors based on State layers in Material Design
You might know that Material Design introduced new concepts in UI design and especially for mobile devices, but you might find it pretty challenging to apply these concepts to web development for the first time.
The focus of this article will be on state layers in material design, so let’s take a look at how they work.
A state layer is a semi-transparent covering on an element that indicates its state. State layers provide a systematic approach to visualizing states by using opacity. A layer can be applied to an entire element or in a circular shape and only one state layer can be applied at a given time.
To transition from an enabled style to a stateful style requires the addition of a state layer.
The state layer is an overlay with a fixed opacity for each state and uses the same color as the content.
For example, if the enabled style uses secondary container color for the container and on-secondary container for content, the state layer will be an overlay using the on-secondary container color.
If the enabled style uses the surface role for the container and the primary color role for content, then the state layer will be an overlay using the primary color.
- Container
- State layer
- Content
In this concept, there are two color layers and a single content layer for each interactive atom (the atom is based on atomic design) like a button.
The layers are Container, State layer, Content
In Material 2 tokens or color variables should be defined for each interaction state like hover and focus by using pseudo-classes in CSS that should be applied predefined color variables.
It’s good to mention that :
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.
Question: What is the challenge in material 3 state layers?
Answer: Mixing colors based on state layers
In web development, CSS handles the interaction states:
For the hover state, By defining a primary color value of #7C4DFF as a container and #FFFFFF with 16% opacity as a state layer above the container the final color is #9169FF as a mix of these color layers.
Four ways for mixing colors in CSS:
- color-mix()
- mix-blend-mode
- background property
- sass:color
1. Color mix
The color mix is a great feature that was added to CSS in the first months of 2023 and its major problem is browser compatibility and support in browsers older than 2023.
With the color-mix function, the layers should mix like below:
2. Blend mode
The mix-blend mode most of the time is used for images but it’s a powerful feature that you can use for mixing colors and it’s a bit tricky.
The mix-blend-mode CSS property sets how an element’s content should blend with the content of the element’s parent and the element’s background.
The mixing color should be like the below:
In mix-blend mode should use linear-gradient and the opacity should be applied in hex code for example instead of #FFFFFF 16% should place #ffff29.
3. background property
Another alternative for solving this problem is using just background property like the below:
Pay attention to the order of linear-gradient layers.
4. SASS
If you are using Sass for styling, the Sass: color built-in module is a powerful full module to solve this problem.
color.mix($color1, $color2, $weight: 100%-16%)
mix($color1, $color2, $weight: 84%) //=> color
Conclusion
After reading this article you should understand the State Layers concept and how to solve this challenge in CSS using mix-color, mix-blend-mode, or background property.
By the way, if this article helped you, don’t forget to clap & subscribe! 🙂
thanks.
