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

View result

Step 02: Set color for attribute
Go to Products > Attributes, then select color attribute



View result

Finish all steps.