Firefox OS color

Usage

Use these colors to guide your designs and layouts, both online and off, to ensure you’re staying consistent with the Firefox OS brand.

Swatches

Gradients

Firefox orange

#E66000 / Pantone 166 C

H 25 C 5 R 230
S 100 M 76 G 96
B 90 Y 100 B 0
K 1

Orange

#FF9500 to #E66000

Firefox light orange

#FF9500 / Pantone 144 C

H 35 C 0 R 255
S 100 M 50 G 149
B 100 Y 100 B 0
K 0

Blue

#0095DD to #00539F

Firefox blue

#00539F / Pantone 2945 C

H 209 C 99 R 0
S 100 M 75 G 83
B 62 Y 5 B 159
K 0

Light grey

#EAEFF2 to #D4DDE4

Firefox light blue

#0095DD / Pantone 2925 C

H 199 C 76 R 0
S 100 M 20 G 150
B 87 Y 0 B 221
K 0

Firefox OS brown

#330000 / Pantone 4975 C

H 0 C 0 R 51
S 100 M 73 G 0
B 20 Y 100 B 0
K 80

Mozilla charcoal

#4D4E53 / Pantone Cool Grey 11

H 230 C 67 R 77
S 7 M 59 G 78
B 33 Y 53 B 83
K 34

Type and color combinations

Never use more than two colors between type and the background. Limit one gradient per composition, whether applied to the type or the background. For maximum contrast, use white type on a color or gradient background.

Color background or type

Color background or type

Vertical gradient type

Vertical gradient type

Gradient backgrounds

Gradient backgrounds

Color and gradient don’ts

Don't use two gradients on an application example

Don't use two gradients on an application

Don’t use the Firefox OS colors as tints example

Don’t use the Firefox OS colors as tints

Don’t use colors outside of the color palette example

Don’t use colors outside of the color palette

Don't choose a color background that renders the wordmark or type illegible example

Don't choose a color background that renders the wordmark or type illegible

Don’t use or create gradients other than specified example

Don’t use or create gradients other than specified

Don’t place colored text on top of an image example

Don’t place colored text on top of an image