What font does gmail.com use?

gmail.com’s website uses one typeface: Google Sans (headings and body text), a system font.

What are gmail.com’s brand colours?

The main colours on gmail.com are Deep Royal Blue (#0B57D0), Light Royal Blue (#1A73E8), Blue (#6200EE), Fire Brick (#B3261E), Deep Slate Blue (#004A77) and Royal Blue (#1967D2).

What colour is gmail.com’s text and background?

Body text is #202124 on a #FFFFFF background.

Is this gmail.com’s official style guide?

No. SiteStyleGuide made it from gmail.com’s public web pages on 4 November 2026, and isn’t affiliated with gmail.com. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from gmail.com’s public web pages. Not affiliated with or endorsed by gmail.com. The real site is gmail.com ↗

Unofficial style guide

gmail.comstyle guide

gmail.com’s website (gmail.com) uses Google Sans for its headings and body text. Its palette is led by Deep Royal Blue (#0B57D0), Light Royal Blue (#1A73E8) and Blue (#6200EE), with #202124 text on #FFFFFF. Captured from the live site on 4 November 2026.

Website: gmail.com
Typefaces: Google Sans, Roboto
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 4 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the gmail.com homepage on a desktop screen — Screenshot of gmail.com on a 1440 px desktop screen, 4 Nov 2026.

Screenshot of the gmail.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Gmail; ● 5 / 60 characters
Meta description: Gmail is email that’s intuitive, efficient, and useful. 15 GB of storage, less spam, and mobile access.; ● 103 / 160 characters
Language: en-US

In search results

gmail.comhttps://accounts.google.com/v3/signin/identifier?continue=https://mail.google.com/mail/u/0/&emr=1&followup=https://mail.google.com/mail/u/0/&osid=1&passive=1209600&service=mail&flowName=WebLiteSignIn&flowEntry=ServiceLogin&dsh=S-854158139:1793723402855712

Gmail

Gmail is email that’s intuitive, efficient, and useful. 15 GB of storage, less spam, and mobile access.

When shared

No og:image, so no picture

gmail.com

Gmail

Gmail is email that’s intuitive, efficient, and useful. 15 GB of storage, less spam, and mobile access.

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

1 found

32 px · ICO favicon.ico

Gmail

Light browser tab

Gmail

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#202124) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 18.5%
Near Black 16.9%
Deep Royal Blue 14.3%
Charcoal 10.9%
Black 9.4%
Light Royal Blue 7.1%
Blue 6.3%
Fire Brick 5.9%
Deep Slate Blue 1.9%
Royal Blue 1.6%
Light Slate Blue 1.5%
Midnight Blue 1.5%
Slate Blue 1.4%
Lavender 1.1%
Maroon 1%
Steel Blue 1%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
16.10:1 AAA

On white
—

Background, text, graphic · body, .S7xv8
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 88

On text
1.02:1 Fail

On white
16.48:1 AAA

Text, background, border · .jR8x9d [data-style=heading], .jR8x9d
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
4 0 1 72

On text
1.71:1 Fail

On white
9.39:1 AAA

Text, graphic · .fAlnEc .PsAlOe.YFdWic a:not(.TrZEUc), .PsAlOe.YFdWic .yTaH4c
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.30:1 Fail

On white
21.00:1 AAA

Text, background · :not(.VfPpkd-StrnGf-rymPhb-ibnC6b-OWXEXe-OWB6Me).VfPpkd-StrnGf-rymPhb-ibnC6b .Vf, --Fe5l0b

Colours

Brand colours and accents, most used first

Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
95 58 0 18

On text
2.52:1 Fail

On white
6.39:1 AA

Text, background, border · .fAlnEc button:not(.TrZEUc):before, .fAlnEc a:not(.TrZEUc):not(.WpHeLc)
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
89 50 0 9

On text
3.57:1 AA large

On white
4.51:1 AA

Background, text, graphic · .nCP5yc:not(:disabled), .Rj2Mlf .VfPpkd-Jh9lGc:after
Blue

HEX

RGB

HSL

OKLCH

CMYK
59 100 0 7

On text
2.11:1 Fail

On white
7.63:1 AAA

Background, text, graphic · :not(.VfPpkd-StrnGf-rymPhb-ibnC6b-OWXEXe-OWB6Me).VfPpkd-StrnGf-rymPhb-ibnC6b-OWX, :not(.VfPpkd-rymPhb-ibnC6b-OWXEXe-OWB6Me).VfPpkd-rymPhb-ibnC6b-OWXEXe-pXU01b .Vf
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 79 83 30

On text
2.46:1 Fail

On white
6.54:1 AA

Text, border · .i79UJc.IYewr.CDELXb .zHQkBf:not([disabled])~.snByac, .njnYzb.Jj6Lae .Ly8vae
Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
100 38 0 53

On text
1.72:1 Fail

On white
9.35:1 AAA

Text, graphic · .FOBRw-vQzf8d, .FOBRw-kBDsod-Rtc0Jf
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
88 51 0 18

On text
3.00:1 AA large

On white
5.37:1 AA

Text, background, graphic · .Kjnxrf .VfPpkd-Jh9lGc:after, .BDEI9 .fegW5d a:not(.TrZEUc)
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
86 53 0 35

On text
2.05:1 Fail

On white
7.85:1 AAA

Text, border, background · .Rj2Mlf.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe:not(:disabled), .b9hyVd.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe:not(:disabled)
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 45 0 79

On text
1.06:1 Fail

On white
17.11:1 AAA

Used · --upgradeable-gm3-button-filled-tonal-focus-label-text-color, --upgradeable-gm3-button-filled-tonal-hover-label-text-color
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
95 59 0 37

On text
1.76:1 Fail

On white
9.14:1 AAA

Text · .fAlnEc .PsAlOe.sj692e a:not(.TrZEUc), .PsAlOe.sj692e .x9zgF
Lavender

HEX

RGB

HSL

OKLCH

CMYK
17 10 0 1

On text
12.40:1 AAA

On white
1.30:1 Fail

Background, border · .PsAlOe.sj692e, .i3HiPd.sj692e
Maroon

HEX

RGB

HSL

OKLCH

CMYK
0 53 100 74

On text
1.09:1 Fail

On white
14.71:1 AAA

Text · .fAlnEc .PsAlOe.rNe0id a:not(.TrZEUc), .PsAlOe.rNe0id .x9zgF
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 36 0 39

On text
2.50:1 Fail

On white
6.45:1 AA

Text · --jF0a9c, .uW2Fw-k2Wrsb-Bz112c

Gradients

linear-gradient(top,rgba(233,233,233,0),rgba(233,233,233,0) 62.22%,rgb(233,233,233) 0,rgba(233,233,233,0))
linear-gradient(180deg,rgba(233,233,233,0) 0,rgba(233,233,233,0) 62.22%,rgb(233,233,233) 0,rgba(233,233,233,0))
linear-gradient(top,rgba(243,243,243,0),rgba(243,243,243,.9))

Dark mode

When the device is set to dark

Off White

#E8EAED
Cornflower Blue

#8AB4F8
Cool Grey

#9AA0A6
Light Steel Blue

#AECBFA
Off White

#F8F9FA
Near Black

#202124
Cool Light Grey

#BDC1C6
Light Coral

#F28B82
Light Pink

#F6AEA9
Cool Dark Grey

#5F6368
Lavender

#D2E3FC
Royal Blue

#1A73E8

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Google Sans

Aa 400 Aa 500

Google Sans

System font, or not loaded on this page · weights 400, 500 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 500

Roboto

System font, or not loaded on this page · weights 400, 500 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Body 14px / 1.4286 arial

Gmail is email that’s intuitive, efficient, and useful. 15 GB of storage, less spam, and mobile access.

Button — arial

Get started

Sizes in use

Most common across the site

24pxline 2rem · 7 rules
22pxline 1.75rem · 1 rules
20pxline 1.2 · 6 rules
18pxline 1.5rem · 9 rules
16pxline 1.5rem · 34 rules
14pxline 1.25rem · 64 rules
13px1 rules
12pxline 1.3333333333 · 18 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.fAlnEc button:not(.TrZEUc):before · #0B57D0 · radius 8px

Corner radius

4px · 42×
inherit · 20×
8px · 18×
20px · 17×
50% · 16×
12px · 10×

Shadows

0 1px 3px 0 rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15)
0 1px 2px 0 rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15)
0 1px 2px 0 rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15)
0 0 0 2px rgb(232,240,254)

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

450

592

600

601

720

840

960

1600

On a scale of 0 to 1600 px.

Content widths (max-width)

400 px

380 px

320 px

312 px

304 px

300 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 5 characters, short enough to show in full in search results.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does gmail.com use?: gmail.com’s website uses one typeface: Google Sans (headings and body text), a system font.
What are gmail.com’s brand colours?: The main colours on gmail.com are Deep Royal Blue (#0B57D0), Light Royal Blue (#1A73E8), Blue (#6200EE), Fire Brick (#B3261E), Deep Slate Blue (#004A77) and Royal Blue (#1967D2).
What colour is gmail.com’s text and background?: Body text is #202124 on a #FFFFFF background.
Is this gmail.com’s official style guide?: No. SiteStyleGuide made it from gmail.com’s public web pages on 4 November 2026, and isn’t affiliated with gmail.com. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

gmail-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* gmail.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/gmail.com) */
:root {
  /* Colours */
  --text: #202124;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #1F1F1F;
  --colour-charcoal: #444746;
  --colour-black: #000000;
  --colour-deep-royal-blue: #0B57D0;
  --colour-light-royal-blue: #1A73E8;
  --colour-blue: #6200EE;
  --colour-fire-brick: #B3261E;
  --colour-deep-slate-blue: #004A77;
  --colour-royal-blue: #1967D2;
  --colour-light-slate-blue: #174EA6;
  --colour-midnight-blue: #001D35;
  --colour-slate-blue: #0842A0;
  --colour-lavender: #D3E3FD;
  --colour-maroon: #421F00;
  --colour-steel-blue: #00639B;
  --gradient-1: linear-gradient(top,rgba(233,233,233,0),rgba(233,233,233,0) 62.22%,rgb(233,233,233) 0,rgba(233,233,233,0));
  --gradient-2: linear-gradient(180deg,rgba(233,233,233,0) 0,rgba(233,233,233,0) 62.22%,rgb(233,233,233) 0,rgba(233,233,233,0));
  --gradient-3: linear-gradient(top,rgba(243,243,243,0),rgba(243,243,243,.9));

  /* Typefaces */
  --font-headings: 'Google Sans', 'Roboto', 'Arial', sans-serif;
  --font-buttons: 'Google Sans', 'Roboto', 'Arial', sans-serif;
  --font-other: 'Roboto', sans-serif;

  /* Type scale */
  --text-body: 14px;
  --leading-body: 1.4286;

  /* Shape */
  --radius-1: 4px;
  --radius-2: inherit;
  --radius-3: 8px;
  --radius-4: 20px;
  --radius-5: 50%;
  --radius-6: 12px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 450px;
  --breakpoint-2: 592px;
  --breakpoint-3: 600px;
  --breakpoint-4: 601px;
  --breakpoint-5: 720px;
  --breakpoint-6: 840px;
  --breakpoint-7: 960px;
  --breakpoint-8: 1600px;
  --max-width-1: 400px;
  --max-width-2: 380px;
  --max-width-3: 320px;
  --max-width-4: 312px;
  --max-width-5: 304px;
  --max-width-6: 300px;
}

{
    "site": "gmail.com",
    "source": "https://sitestyleguide.com/gmail.com",
    "text": "#202124",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1F1F1F",
            "rgb": [
                31,
                31,
                31
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#444746",
            "rgb": [
                68,
                71,
                70
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#0B57D0",
            "rgb": [
                11,
                87,
                208
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#1A73E8",
            "rgb": [
                26,
                115,
                232
            ]
        },
        {
            "name": "Blue",
            "hex": "#6200EE",
            "rgb": [
                98,
                0,
                238
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#B3261E",
            "rgb": [
                179,
                38,
                30
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#004A77",
            "rgb": [
                0,
                74,
                119
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#1967D2",
            "rgb": [
                25,
                103,
                210
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#174EA6",
            "rgb": [
                23,
                78,
                166
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#001D35",
            "rgb": [
                0,
                29,
                53
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#0842A0",
            "rgb": [
                8,
                66,
                160
            ]
        },
        {
            "name": "Lavender",
            "hex": "#D3E3FD",
            "rgb": [
                211,
                227,
                253
            ]
        },
        {
            "name": "Maroon",
            "hex": "#421F00",
            "rgb": [
                66,
                31,
                0
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#00639B",
            "rgb": [
                0,
                99,
                155
            ]
        }
    ],
    "fonts": [
        {
            "name": "Google Sans",
            "stack": "Google Sans, Roboto, Arial, sans-serif",
            "weights": [
                400,
                500
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Roboto",
            "stack": "Roboto, sans-serif",
            "weights": [
                400,
                500
            ],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Google Sans as their main typeface

Waze

waze.com · set in Google Sans
Save
Google

thinkwithgoogle.com · set in Google Sans
Save
blog.google

blog.google · set in Google Sans
Save
Google Design

design.google · set in Google Sans
Save

Websites whose lead colour is closest to gmail.com’s

google.rs

google.rs · 23 hours ago
Save
google.com.my

google.com.my · 23 hours ago
Save
google.se

google.se · 23 hours ago
Save
google.com.mx

google.com.mx · 1 day ago
Save

Captured from gmail.com on 4 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by gmail.com; this guide describes the public website for reference.

gmail.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Charcoal

Black

Colours

Deep Royal Blue

Light Royal Blue

Blue

Fire Brick

Deep Slate Blue

Royal Blue

Light Slate Blue

Midnight Blue

Slate Blue

Lavender

Maroon

Steel Blue

Gradients

Dark mode

Google Sans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run gmail.com?

Also set in Google Sans

Waze

Google

blog.google

Google Design

Similar colours

google.rs

google.com.my

google.se

google.com.mx

Title &
description