Understanding Colors and codes

Basic Colors

1. Brand Colors
   1. Primary Brand Color - Takes 60-70% of all branded components
   2. Accent brand color - Used for contrast
2. Neutrals (Greys)
   1. Black
   2. White
   3. Greys
3. Semantics
   1. Red for Error/ Warning/ Danger
   2. Green for Success/ confirmation/ acceptance
   3. Yellow for warning/ Caution

4 components of colour

1. RGB Hexcode
2. HSL
3. Name
4. Token Name

Website to find name of the color - www.color-name.com

General Facts

• We should have at least 11-13 greys excluding black and white
• Use Contrast Plugin to check contrast of the color

Important Resources

• https://designsystemsrepo.com/design-systems/
• www.designsystems.com
• www.designsystemsforfigma.com