To display the color of the product similar to below. Please follow our guide steps below.
Step 01: Change Type attribute to Swatches
On Dashboard, Go to Products > Attributes, then edit color attribute
Choose Type is Swatches
Step 02: Set color for attribute
Go to Products > Attributes, then select color attribute
Finish all steps.