Colors

Pega color palette

Consistency of color is critical to maintaining a coherent family of products, and accurately communicating the nature of specific content within an application.

Colors are also used to distinguish where on the screen particular content resides, such as on mobile devices where users need to be able to see visual breaks while scrolling.

Primary palette

  • #10132E

    Content
  • rgba(16,19,46,.66)

    Labels (#626475)
  • #cacdd6

    Borders
  • #F2F3F4

    Secondary bkg
  • #ffffff

    Card bkg
  • #295ED9

    Interactive items
  • rgba(41,94,217,.06)

    Hover (#F3F6FC)
  • rgba(41,94,217,.1)

    Selected (#EAEFFA)
  • #1F2555

    App header
  • #344780

    App search
  • #E8EAEF

    App bkg

Secondary palette

  • #A6020D

    Dark red
  • #D91C29

    Red
  • #FFD9DB

    Pale red, pink
  • #C44500

    Dark orange
  • #FD6000

    Orange
  • #FFE0CC

    Light orange
  • #CC8914

    Dark yellow
  • #FEB53A

    Yellow
  • #FFECCC

    Light yellow
  • #7F9F00

    Dark olive
  • #A9D400

    Olive
  • #EEF2DA

    Light olive
  • #006624

    Dark green
  • #20AA50

    Green
  • #DAF2E3

    Light green
  • #00647D

    Dark teal
  • #179595

    Teal
  • #C3E6E6

    Light teal
  • #113DA6

    Dark blue
  • #295ED9

    Blue
  • #E6EDFF

    Light blue
  • #202A79

    Dark purple
  • #2B38A1

    Purple
  • #D9DDFF

    Light purple
  • #A9085B

    Dark magenta
  • #E10B81

    Magenta
  • #FFD9EE

    Light magenta
  • #3A3C4D

    Dark grey
  • #585B73

    Grey
  • #CFD1E6

    Light grey
  • Blue - Status - info / no issues, app search background, interaction
  • Green - Successes, completions, increases, positive messaging
  • Red - Errors, negative messaging, losses, high priority, overdue, important
  • Orange - Warnings

Last updated: Aug 2018

Next: Interaction