Colors

Learn how to work with our color system. Right click to copy raw values.

Scales

There are 10 color scales in the system. P3 colors are used on supported browsers and displays.

Backgrounds

Gray

Gray alpha

Blue

Red

Amber

Green

Teal

Purple

Pink

Backgrounds

There are two background colors for pages and UI components. In most instances, you should use Background 1—especially when color is being placed on top of the background. Background 2 should be used sparingly when a subtle background differentiation is needed.

Background 1

Default element background

Background 2

Secondary background

1
2
1
2

Colors 1–3: Component Backgrounds

These three colors are designed for UI component backgrounds.

Color 1

Default background

Color 2

Hover background

Color 3

Active background

If your UI component’s default background is Background 1, you can used Color 1 as your hover background and Color 2 as your active background. On smaller UI elements like badges, you can use Color 2 or Color 3 as the background.

  • APR 26 15:54:21.12

    /overview

  • APR 26 15:54:21.12

    /overview

  • APR 26 15:54:21.12

    /overview

  • APR 26 15:54:21.12

    /overview

HobbyProEnterprise

Colors 4-6: Borders

These three colors are designed for UI component borders.

Color 4

Default border

Color 5

Hover border

Color 6

Active border

Colors 7-8: High Contrast Backgrounds

These two colors are designed for high contrast UI component backgrounds.

Color 7

High contrast background

Color 8

Hover high contrast background

90

55

20

Colors 9-10: Text and Icons

These two colors are designed for accessible text and icons.

Color 9

Secondary text and icons

Color 10

Primary text and icons

The Frontend Cloud

Build, scale, and secure a faster, personalized web with Vercel.

Learn More