step4 property

Color step4

For UI component backgrounds.

Step 4 is for hover states.

For call-to-action components that you want to draw particular attention to, you can bump the color one step higher to step 5

For complex components where you need many subtle colors to communicate different meanings, you can get creative and do something like:

  • Step 3 for hovered backgrounds.

  • Step 4 for selected / pressed backgrounds.

  • Step 5 for "unread" backgrounds.

  • Step 6 for hovered "unread" backgrounds.

Steps 11 and 12—which are designed for text—are guaranteed to pass 4.5:1 contrast ratio on top of a step 3 background from the same scale.

Implementation

Color get step4 => this[4]!;