loading

v33.0.2

select option

Color Usage

Use color systematically to reduce confusion, improve predictability, and make the product easier to use

General Guidelines

  • Color should be used to differentiate elements and communicate meaning.
  • Color must be selected carefully and used consistently across the product. People often remember how color is used and will look for intentional, or unintentional, patterns.
  • Only use colors from the palette. The Usage section lists our standard color combinations/applications.
  • Colors have traditional meanings which vary between cultures. When employing color in a new situation ensure that proper research has been done to understand cultural connotations of color in that situation.
  • Never use color as the sole signifier of meaning. Perception and understanding of color varies considerably between all people.
  • Contrast between adjacent colors (whether text or graphical elements) must be high to ensure that legibility. See Usage for combinations with suitable contrast.
  • The size of a colored element and the color of adjacent elements will greatly change how easy it is to identify that color. For example, two small circles which are orange and red, respectively, will be harder to tell apart than two large rectangles in the same two colors.
  • Use complimentary colors (e.g. blue, orange, purple) instead of similar hues or values (e.g. green, light green, blue, light blue) for color-coding elements in a chart, list, etc.
  • Understand the Carta brand colors. Do not change the colors of graphical brand expressions, such as the Carta Logo and associated text. Do not use brand colors elsewhere in ways which are contradictory or confusing. The color palette and standard combinations already take this guideline into account.

Accessibility Standards

Usage

There are standard color combinations for many common situations. Use these when possible:

white

#ffffff

black text

#000000

Text

Page body content, titles, sub-titles, tables, data, vertical navigation items, drop-down menu items

white

#ffffff

gray-70 text (was gray)

#797675

Reduced

Drop-down menu section titles

blue-60 (was blue)

#3a81c2

white text

#ffffff

Informational

Informational messages, keyboard focus indications, inline text links

green-60 (was green)

#49a471

white text

#ffffff

Positive

Success messages, positive numbers

red-60 (was red-dark)

#e23333

white text

#ffffff

Negative

Error alerts, destructive action buttons, negative numbers

orange-60 (was orange-dark)

#ea711a

white text

#ffffff

Notice

Warning about potential errors, cautionary states, call to action

yellow-60 (was yellow-dark)

#f8d648

black text

#000000

Pending

Generating export, waiting state, in-progress but not actionable

orange-60 (was orange-dark)

#ea711a

white text

#ffffff

Staff

Staff-only tools or information

Do

Use standard color combinations when applicable.

Don't

Do not force users to figure out unexplained differences in color. The primary button here is a different color from other primary buttons in the product, which is likely to cause confusion.

Do

Use standard color combinations when applicable.

Don't

Do not force users to figure out unexplained differences in color. The primary button here is a different color from other primary buttons in the product, which is likely to cause confusion.

$
$
Price exceeds maximum of $5.00

Do

Do use standard color combinations to distinguish between types of information.

Don't

Here, the required field marker and an error message use similar colors. Many users will assume that both items are related to the error, which is untrue.

$

Do

Do use standard color combinations to distinguish between types of information.

$
Price exceeds maximum of $5.00

Don't

Here, the required field marker and an error message use similar colors. Many users will assume that both items are related to the error, which is untrue.

Color and State

  • Specific changes in color can be one way to communicate that an element is in an alternate state.
  • Do change the hue of an interactive element when it changes state.
  • Opacity is used in a limited way to show differences in state for interactive elements (primarily buttons).
  • The visual difference between the normal and hover state can be relatively subtle.
  • It must be easy to tell whether an interactive element is enabled. If it is not enabled ("inactive" or "disabled") it must have a substantial, visual difference from the normal and hover states.
  • For standard color combinations, use these matching hover and inactive state color:

Text

Vertical navigation items

white background

#ffffff

black text

#000000

Enabled

gray-30 background (was gray-lightest-3)

#ecebeb

black text

#000000

Enabled with hover

Drop-down menu items

white background

#ffffff

black text

#000000

Enabled

gray-20 background (was gray-lightest-2)

#f7f7f7

blue-70 text (was blue-dark)

#1668af

Enabled with hover

Utility

Utility action buttons, secondary context menu trigger buttons

white background

#ffffff

black text

#000000

Enabled

white

#ffffff

blue-70 (was blue-dark)

#1668af

Enabled with hover

white

#ffffff

gray-40 (was gray-light-1)

#d6d5d5

Disabled

Primary

Primary buttons, primary action in Block and Modal

gray-90 background (was gray-dark-2)

#3d3b3b

white text

#ffffff

Enabled

blue-70 (was blue-dark)

#1668af

white

#ffffff

Enabled with hover

gray-30 (was gray-lightest-3)

#ecebeb

gray-50 (was gray-light-2)

#bbb9b9

Disabled

Danger

Error alerts, destructive action buttons

red-70 background (was red-darkest)

#c52220

white text

#ffffff

Enabled

red-60 (was red-dark)

#e23333

white

#ffffff

Enabled with hover

red-20

#ffeaea

red-40 (was red-light)

#eea2a2

Disabled

Full Palette

  • The full palette is used in cases not described above.
  • When making color decisions, be aware of both the hue and value of the colors under consideration. Solving problems, such as poor contrast, can often be easier when adjusting these independently. The palette is arranged by hue and saturation/value:

blue-10

#edf4f7

blue-20

#e3eef3

blue-30 (was blue-lightest)

#cce0ea

blue-40 (was blue-light)

#9ec6de

blue-50

#68a2d3

blue-60 (was blue)

#3a81c2

blue-70 (was blue-dark)

#1668af

blue-80 (was blue-darkest)

#00528e

blue-90

#003c6b

blue-100

#00294b

turquoise-10

#f8fefe

turquoise-20

#e8fbfb

turquoise-30

#c9f5f6

turquoise-40

#9ce9ea

turquoise-50

#68d7d9

turquoise-60

#38c2c4

turquoise-70

#15a1a6

turquoise-80

#037e87

turquoise-90

#005f6b

turquoise-100

#004453

green-10

#f6faf8

green-20

#eaf5ef

green-30 (was green-lightest)

#d1e9db

green-40

#a8d8bc

green-50 (was green-light)

#79c298

green-60 (was green)

#49a471

green-70 (was green-dark)

#2a8652

green-80 (was green-darkest)

#156d3b

green-90

#045624

green-100

#004316

lime-10

#fafdee

lime-20

#f5fcd5

lime-30

#ebfcac

lime-40

#ddfb74

lime-50

#c9ec56

lime-60

#b1d636

lime-70

#94b524

lime-80

#738c12

lime-90

#536507

lime-100

#384202

yellow-10

#fffef7

yellow-20

#fffced

yellow-30 (was yellow-lightest)

#fef8da

yellow-40 (was yellow-light)

#fcefb6

yellow-50 (was yellow)

#fbe284

yellow-60 (was yellow-dark)

#f8d648

yellow-70 (was yellow-darkest)

#ddb31f

yellow-80

#b48804

yellow-90

#825a00

yellow-100

#4d2f00

orange-10

#fffaf8

orange-20

#fff3ec

orange-30 (was orange-lightest)

#fbdbca

orange-40 (was orange-light)

#f7bea0

orange-50 (was orange)

#f79864

orange-60 (was orange-dark)

#ea711a

orange-70

#c65400

orange-80 (was orange-darkest)

#a03b00

orange-90

#772900

orange-100

#4f1a00

red-10

#fff9f9

red-20

#ffeaea

red-30 (was red-lightest)

#f6c6c6

red-40 (was red-light)

#eea2a2

red-50 (was red)

#ec6a6a

red-60 (was red-dark)

#e23333

red-70 (was red-darkest)

#c52220

red-80

#aa0e16

red-90

#890112

red-100

#610011

brown-10

#FAF8F6

brown-20

#F9F4F0

brown-30

#F5E7D9

brown-40

#EEDBCA

brown-50

#E4C4A6

brown-60

#BA8D63

brown-70

#966E4A

brown-80

#6D4B33

brown-90

#4D3222

brown-100

#321E13

gray-10 (was gray-lightest-1)

#fcfcfc

gray-20 (was gray-lightest-2)

#f7f7f7

gray-30 (was gray-lightest-3)

#ecebeb

gray-40 (was gray-light-1)

#d6d5d5

gray-50 (was gray-light-2)

#bbb9b9

gray-60 (was gray-light-3)

#9d9a99

gray-70 (was gray)

#797675

gray-80 (was gray-dark-1)

#5b5958

gray-90 (was gray-dark-2)

#3d3b3b

gray-100 (was gray-dark-3)

#222120

black

#000000

white

#ffffff

blue-10

#edf4f7

blue-20

#e3eef3

blue-30 (was blue-lightest)

#cce0ea

blue-40 (was blue-light)

#9ec6de

blue-50

#68a2d3

blue-60 (was blue)

#3a81c2

blue-70 (was blue-dark)

#1668af

blue-80 (was blue-darkest)

#00528e

blue-90

#003c6b

blue-100

#00294b

turquoise-10

#f8fefe

turquoise-20

#e8fbfb

turquoise-30

#c9f5f6

turquoise-40

#9ce9ea

turquoise-50

#68d7d9

turquoise-60

#38c2c4

turquoise-70

#15a1a6

turquoise-80

#037e87

turquoise-90

#005f6b

turquoise-100

#004453

green-10

#f6faf8

green-20

#eaf5ef

green-30 (was green-lightest)

#d1e9db

green-40

#a8d8bc

green-50 (was green-light)

#79c298

green-60 (was green)

#49a471

green-70 (was green-dark)

#2a8652

green-80 (was green-darkest)

#156d3b

green-90

#045624

green-100

#004316

lime-10

#fafdee

lime-20

#f5fcd5

lime-30

#ebfcac

lime-40

#ddfb74

lime-50

#c9ec56

lime-60

#b1d636

lime-70

#94b524

lime-80

#738c12

lime-90

#536507

lime-100

#384202

yellow-10

#fffef7

yellow-20

#fffced

yellow-30 (was yellow-lightest)

#fef8da

yellow-40 (was yellow-light)

#fcefb6

yellow-50 (was yellow)

#fbe284

yellow-60 (was yellow-dark)

#f8d648

yellow-70 (was yellow-darkest)

#ddb31f

yellow-80

#b48804

yellow-90

#825a00

yellow-100

#4d2f00

orange-10

#fffaf8

orange-20

#fff3ec

orange-30 (was orange-lightest)

#fbdbca

orange-40 (was orange-light)

#f7bea0

orange-50 (was orange)

#f79864

orange-60 (was orange-dark)

#ea711a

orange-70

#c65400

orange-80 (was orange-darkest)

#a03b00

orange-90

#772900

orange-100

#4f1a00

red-10

#fff9f9

red-20

#ffeaea

red-30 (was red-lightest)

#f6c6c6

red-40 (was red-light)

#eea2a2

red-50 (was red)

#ec6a6a

red-60 (was red-dark)

#e23333

red-70 (was red-darkest)

#c52220

red-80

#aa0e16

red-90

#890112

red-100

#610011

brown-10

#FAF8F6

brown-20

#F9F4F0

brown-30

#F5E7D9

brown-40

#EEDBCA

brown-50

#E4C4A6

brown-60

#BA8D63

brown-70

#966E4A

brown-80

#6D4B33

brown-90

#4D3222

brown-100

#321E13

gray-10 (was gray-lightest-1)

#fcfcfc

gray-20 (was gray-lightest-2)

#f7f7f7

gray-30 (was gray-lightest-3)

#ecebeb

gray-40 (was gray-light-1)

#d6d5d5

gray-50 (was gray-light-2)

#bbb9b9

gray-60 (was gray-light-3)

#9d9a99

gray-70 (was gray)

#797675

gray-80 (was gray-dark-1)

#5b5958

gray-90 (was gray-dark-2)

#3d3b3b

gray-100 (was gray-dark-3)

#222120

black

#000000

white

#ffffff

Is this page helpful?