Google Fiber uses the same color palette as Google, but we lean into blue a little more.

Build from white

Always start with white. White lends friendliness and simplicity to our communication, and it’s where we begin with all Google Fiber designs, illustrations, photography, and products.

White

RGB: 255 / 255 / 255
#FFFFFF

Core colors

Fiber Blue

After white, blue is the most important of the four core colors, and helps us identify ourselves as Google Fiber. It represents Google Fiber: bold, useful, and (when appropriate) accessible.

Google Blue Core

RGB: 66 / 133 / 244
CMYK: 88 / 40 / 0 / 0
PMS 2193 U
#4285F4

500

Red, yellow, and green

The other three core colors come from the Google Fiber logo, and help us align ourselves with the Google Family. A light hand with these will help add interest and playfulness.

Google Red Core

RGB: 234 / 67 / 53
CMYK: 0 / 87 / 89 / 0
PMS 2347 U
#EA4335

500

Google Yellow Core

RGB: 251 / 188 / 4
CMYK: 0 / 37 / 100 / 0
PMS 7549 U
#FBBC04

500

Google Green Core

RGB: 52 / 168 / 83
CMYK: 85 / 0 / 92 / 0
PMS 2271 U
#34A853

500

Grey for text

Grey is useful because it doesn’t compete with the core colors. Use this for text, icons, UX elements, background elements and off states.

Grey Dark

RGB: 95 / 99 / 104
#5F6368

700

Advanced palette

When you need a little more detail, these shades and tones of the core colors can help you out. The dark colors are best for adding contrast and depth, indicating links and buttons, and shading illustrations. The light colors are best for highlighting illustrations, data visualization, and creating points of focus within UI (such as notifications).

Google Blue 50

Google Blue 100

Google Blue 500

Google Blue 700

Google Blue 800

Google Blue 900

Google Red 50

Google Red 100

Google Red 500

Google Red 700

Google Red 800

Google Red 900

Google Yellow 50

Google Yellow 100

Google Yellow 500

Google Yellow 700

Google Yellow 800

Google Yellow 900

Google Green 50

Google Green 100

Google Green 500

Google Green 700

Google Green 800

Google Green 900

Google Grey 50

Google Grey 100

Google Grey 500

Google Grey 700

Google Grey 800

Google Grey 900

Usage

The ways we use color help us convey the Google Fiber identity, and reinforce our connection to Google.

Color do’s and don’ts

Document with white background

Please do

Build from white. Use it more than any other color.

Document with yellow background

Please do

Use solid blocks of color sparingly.

Fiber illustration with white space

Please do

Use white space and neutral backgrounds in illustrations.

Slide with too many Fiber colors

Please don’t

Don’t feel the need to use all four core Google colors equally.

Advanced colors used in illustrations

Please do

Only use the advanced colors in more complex illustrations and graphics.

Illustration with altered colors

Please don’t

Don’t change the color of illustrated elements.