Be the web designer or UI designer; you should know the basics of color. you need to have primary color and secondary color, then take the primary color to do a lightening color and set opacity range from 0 to 100 Use this tool to check and insert your primary solid color and select a variant to view. If you select 2, you will see 2 that is 100% and 50% of opacity. <a href="https://www.v-norm.com/tools/lighten-color/">https://www.v-norm.com/tools/lighten-color/</a> <a href="https://www.v-norm.com/wp-content/uploads/2025/02/Screenshot-2025-02-14-232159.png"><img class="alignnone size-full wp-image-3041" src="https://www.v-norm.com/wp-content/uploads/2025/02/Screenshot-2025-02-14-232159.png" alt="" width="1236" height="755" /></a> take your primary color opacity 100% as color and take primary color opacity 20% or 30% to check in adobe Color: <a href="https://color.adobe.com/create/color-contrast-analyzer">https://color.adobe.com/create/color-contrast-analyzer </a> <a href="https://www.v-norm.com/wp-content/uploads/2025/02/Screenshot-2025-02-14-231653.png"><img class="alignnone size-full wp-image-3040" src="https://www.v-norm.com/wp-content/uploads/2025/02/Screenshot-2025-02-14-231653.png" alt="" width="1894" height="974" /></a> For the result, you will see it contrast together. I hope this concept helps you.
