Color

Figma

🧪 Beta

Guidelines

🔭 Alpha

Web

🔭 Alpha

Mobile

🔭 Alpha

Color is a critical element that influences aesthetics, conveys emotions, and enhances usability. It plays a pivotal role in creating visual hierarchy, drawing attention to key elements, and establishing brand identity.

Through the strategic use of color, designers can guide user, interaction improve readability, and create a cohesive look and feel across products.

Effective color management involves understanding color theory, cultural color associations, and accessibility standards to ensure a design is both visually appealing and functional for all users.

Guidelines

Tip

Use tools like PageSpeed Insights to check color contrast ratios and ensure compliance with accessibility standards.

Correct / Incorrect

Correct

Make sure to maintain sufficient contrast between text and background colors to ensure readability.

Incorrect

Avoid using low-contrast color combinations that make text difficult to read.

Correct

Use color combinations that enhance readability and create visual harmony.

Incorrect

Avoid using color combinations that make content hard to distinguish or cause visual discomfort.

Correct

Use color to communicate status, highlight key information, and guide user interactions. Be mindful of established color conventions.

Incorrect

Avoid using color in a way that contradicts established conventions or creates confusion.

Correct

Use text labels, icons, or patterns to support color-coded information and ensure important information is still understandable without color.

Incorrect

Avoid using color alone, as it may be inaccessible to users with color vision deficiencies and leads to confusion.

Caution

Be aware of cultural differences in color interpretation. Colors can have varying meanings in different cultures, which can impact user perception.

Tip

Test color choices with real users to gather feedback and make data-driven decisions.

Conduct A/B tests to determine which color schemes perform better in terms of user engagement and conversion rates.

Takeaways

• Maintain consistency in color usage to avoid confusion and ensure a cohesive user experience.

• Consider color vision deficiencies by using patterns, textures, or labels in addition to color to convey information.

• Use different colors to establish visual hierarchy, guiding users’ attention to important elements like buttons or alerts.

• Stick to a limited color palette to maintain visual consistency across the UI. This helps in creating a cohesive and professional look.

• Use color changes to provide feedback for user interactions, such as hovering, clicking, or loading states.

Usage

Implementation

Properties

Color

Type : CSS Variable

Green

--light-green

Hex:

#e7f2a6

RGB:

rgb(231, 242, 166)

--green

Hex:

#c4df20

RGB:

rgb(196, 223, 32)

--dark-green

Hex:

#4e590d

RGB:

rgb(78, 89, 13)

Water green

--light-water-green

Hex:

#9febbf

RGB:

rgb(159, 235, 191)

--water-green

Hex:

#71e3a1

RGB:

rgb(113, 227, 161)

--dark-water-green

Hex:

#187f5a

RGB:

rgb(24, 127, 90)

Coral

--light-coral

Hex:

#f2b4a6

RGB:

rgb(242, 180, 166)

--coral

Hex:

#e25536

RGB:

rgb(226, 85, 54)

--dark-coral

Hex:

#591b0d

RGB:

rgb(89, 27, 13)

Ocean

--light-ocean

Hex:

#a8f0e7

RGB:

rgb(168, 240, 231)

--ocean

Hex:

#26d9c3

RGB:

rgb(38, 217, 195)

--dark-ocean

Hex:

#0f574e

RGB:

rgb(15, 87, 78)

Gold

--light-gold

Hex:

#f2cfa6

RGB:

rgb(242, 207, 166)

--gold

Hex:

#df8820

RGB:

rgb(223, 136, 32)

--dark-gold

Hex:

#59360d

RGB:

rgb(89, 54, 13)

Blue

--light-blue

Hex:

#a6d2f2

RGB:

rgb(166, 210, 242)

--blue

Hex:

#208fdf

RGB:

rgb(32, 143, 223)

--dark-blue

Hex:

#0d3959

RGB:

rgb(13, 57, 89)

Purple

--light-purple

Hex:

#d9bcdc

RGB:

rgb(217, 188, 220)

--purple

Hex:

#a058a7

RGB:

rgb(160, 88, 167)

--dark-purple

Hex:

#402343

RGB:

rgb(64, 35, 67)

Red

--light-red

Hex:

#f0a8b1

RGB:

rgb(240, 168, 177)

--red

Hex:

#d9263c

RGB:

rgb(217, 38, 60)

--dark-red

Hex:

#570f18

RGB:

rgb(87, 15, 24)

Neutral

Type : CSS Variable

White

--white

Hex:

#ffffff

RGB:

rgb(255, 255, 255)

--white-0

Hex:

#f9f9f9

RGB:

rgb(249, 249, 249)

--white-1

Hex:

#f4f5f5

RGB:

rgb(244, 245, 245)

--white-2

Hex:

#eceeee

RGB:

rgb(236, 238, 238)

--white-3

Hex:

#d4d8d8

RGB:

rgb(212, 216, 216)

--white-4

Hex:

#c4caca

RGB:

rgb(196, 202, 202)

--white-5

Hex:

#a4adad

RGB:

rgb(164, 173, 173)

Black

--black

Hex:

#000000

RGB:

rgb(0, 0, 0)

--black-1

Hex:

#1d2020

RGB:

rgb(29, 32, 32)

--black-2

Hex:

#353b3b

RGB:

rgb(53, 59, 59)

--black-3

Hex:

#4e5656

RGB:

rgb(78, 86, 86)

--black-4

Hex:

#687373

RGB:

rgb(104, 115, 115)

--black-5

Hex:

#849090

RGB:

rgb(132, 144, 144)