What font does qq.com use?

qq.com’s website uses one typeface: PingFang SC (headings and body text), a system font.

What are qq.com’s brand colours?

The main colours on qq.com are Royal Blue (#3377FF), Slate Blue (#5D53CB), Crimson (#FF0055), Peru (#D2883A), Medium Purple (#958CFD) and Midnight Blue (#273240).

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

Body text is #333333 on a #FFFFFF background.

Where is qq.com’s logo from?

The logo shown in this guide was found on qq.com’s homepage. For official logo files and usage rules, check qq.com’s own brand or press page.

Is this qq.com’s official style guide?

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

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

Unofficial style guide

qq.comstyle guide

qq.com’s website (qq.com) uses PingFang SC for its headings and body text. Its palette is led by Royal Blue (#3377FF), Slate Blue (#5D53CB) and Crimson (#FF0055), with #333333 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: qq.com
Typefaces: PingFang SC, Gilroy, Helvetica Neue
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the qq.com homepage on a desktop screen — Screenshot of qq.com on a 1440 px desktop screen, 26 Oct 2026.

Screenshot of the qq.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: 腾讯网; ● 3 / 60 characters
Meta description: 腾讯网从2003年创立至今，已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道，充分满足用户对不同类型资讯的需求。同时专注不同领域内容，打造精品栏目，并顺应技术发展趋势，推出网络直播等创新形式，改变了用户获取资讯的方式和习惯。; ● 159 / 160 characters
og:title: 腾讯网
og:description: 腾讯网从2003年创立至今，已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道，充分满足用户对不同类型资讯的需求。同时专注不同领域内容，打造精品栏目，并顺应技术发展趋势，推出网络直播等创新形式，改变了用户获取资讯的方式和习惯。
Language: zh-CN
Theme colour: #FFF

In search results

qq.comhttps://www.qq.com/

腾讯网

腾讯网从2003年创立至今，已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多…

When shared

No og:image, so no picture

qq.com

腾讯网

腾讯网从2003年创立至今，已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾…

Logo & favicons

Found as: CSS background on .logo. PNG, 67 × 67.

Logo

On white

On black

On Royal Blue

Favicons

1 found

96 px · PNG shortcut icon

腾讯网

Light browser tab

腾讯网

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 (#333333) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 40%
Royal Blue 19%
Charcoal 13.2%
Grey 9.8%
Off White 8.1%
Slate Blue 2.7%
Crimson 1.7%
Peru 1.6%
Medium Purple 0.9%
Midnight Blue 0.8%
Yellow 0.4%
Green Yellow 0.4%
Cornflower Blue 0.4%
Lime Green 0.4%
Blue 0.4%
Medium Sea Green 0.4%

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
12.63:1 AAA

On white
—

Background, text, border · .rectangle_ad-item .channel-rectangle-theme .ad-cell-common .cell-title-box, .kcJFYC29AtnEJVZTGd_D .qqcom-modal-title
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
—

On white
12.63:1 AAA

Text, background, border · .QRK88bLYVnVLqZAUfuUR.JabRNpLbieCDynkfBtXW .j18dnpj10a5RTfznHYTp.S9BLDMyK7rj1Ubv, .NvQV3hWsJFxPzc87nGsT .question-content .question-title .question-title-text
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 40

On text
4.43:1 AA large

On white
2.85:1 Fail

Text, background, border · .s4nErp_zgRX2l2wW_21m.RWWDe70hyEP_wT3MU07P .match-title, .s4nErp_zgRX2l2wW_21m .live-info .live-state.already-order
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 10

On text
10.12:1 AAA

On white
1.25:1 Fail

Border, text, background · --border-color, .QRK88bLYVnVLqZAUfuUR.JabRNpLbieCDynkfBtXW .j18dnpj10a5RTfznHYTp.S9BLDMyK7rj1Ubv

Colours

Brand colours and accents, most used first

Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
80 53 0 0

On text
3.14:1 AA large

On white
4.02:1 AA large

Background, text, border · .fI9EjGX4TJtKFnClWCbT .xc-calendar .calendar-content .date-content-item .item-in, .local-station-block .local-actions .btn.ok
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
54 59 0 20

On text
2.14:1 Fail

On white
5.89:1 AA

Background, text, border · .s4nErp_zgRX2l2wW_21m .live-info .live-state.live-playback, .FqdrydlBuoMerZc0zNig .hWMt54n9Gu3LFIf5esy2 .kdeZJvOdf10sDnE3IGVg .zVAFZU8lHYVZq
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 100 67 0

On text
3.24:1 AA large

On white
3.90:1 AA large

Text, background, border · .s4nErp_zgRX2l2wW_21m .live-info .live-state.live-state-living, .qqcom-live-status .active
Peru

HEX

RGB

HSL

OKLCH

CMYK
0 35 72 18

On text
4.41:1 AA large

On white
2.87:1 Fail

Background, text · .YBzAIrsAph6e0q75fRdJ span.PYi8BPQh12Xlyc5Y2Sb0, .c21ruhc3JP0eiDDTmlw0 span.TeRpkxbmFQdFqvYVObAC
Medium Purple

HEX

RGB

HSL

OKLCH

CMYK
41 45 0 1

On text
4.48:1 AA large

On white
2.82:1 Fail

Text, background · body[qqcom-theme=dark] .ZGoAZzVVFH_iwyb1vymn .acmYVMWJMQemEwWEIBun:before, .ZVj6KHj36LdCybviSOPu.e9kbWqApnsbQwvRbJDsA .Gykryt2DTzTmUqDFUCcL
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
39 22 0 75

On text
1.03:1 Fail

On white
12.99:1 AAA

Background · .wvuIYokKNCzVX5VMS2P3 .ePRXQauBOwaAzjSu9LL4.HDXZrXLMcBN7bIZ4Jq_u .vrOM7e_W9fG3bf, .hyqgYGphxxhKMj91COs3 .hSc5DXMuaINW59iQRmea.w4EH4xBLe9rxIYAVS9L5 .fnXfl1vDnGv1Mt
Yellow

HEX

RGB

HSL

OKLCH

CMYK
0 2 93 0

On text
11.47:1 AAA

On white
1.10:1 Fail

Background · .lKfkNV12CZE3N97t79qo
Green Yellow

HEX

RGB

HSL

OKLCH

CMYK
32 0 81 6

On text
8.98:1 AAA

On white
1.41:1 Fail

Background · .lKfkNV12CZE3N97t79qo
Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
67 36 0 0

On text
4.85:1 AA

On white
2.61:1 Fail

Background · .qqcom-login .islogin .avatar-box .img-type.qq-type, .dropdown-login .dropdown-content .nick .img-type.qq-type
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
80 0 65 23

On text
5.46:1 AA

On white
2.31:1 Fail

Background · .qqcom-login .islogin .avatar-box .img-type.wx-type, .dropdown-login .dropdown-content .nick .img-type.wx-type
Blue

HEX

RGB

HSL

OKLCH

CMYK
65 71 0 21

On text
1.63:1 Fail

On white
7.75:1 AAA

Background, text · .Blp01Zv0BrfmnxNcJCXh .wLJVDe2C9pp2IC6VCEyQ .ONswqly8vWn_PTefPaUD.mmFHcxlWEP4vi8
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 38 24

On text
5.46:1 AA

On white
2.31:1 Fail

Background, text · .swHUo05JDIskT_yKzRol .HHtGV_DD2sIObjIHJuEZ .Rqywsibk5tRNhqEGg3nb .zLgMifDmzF1bf, .g3kKs43gUsbvGxYki6fI .stock .stock-row .container .text-count.green

Gradients

linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4))
linear-gradient(180deg,transparent 25.9%,#3071f2 51.8%)
linear-gradient(90deg,#fffb11,#a2ef2d)

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.

PingFang SC

Aa 400

PingFang SC

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

Aa 500

Gilroy

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

Aa 400

Helvetica Neue

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

Aa 400

QQNewsCustomFont

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

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

Type scale

From the site’s CSS

Heading 1 2em · 32 px

qq.com

Body 16px PingFang SC

腾讯网从2003年创立至今，已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐…

Paragraph 18px / 18px

Small 80%

Button 100% / 1.15 none

Get started

Link 16px / 38px

Sizes in use

Most common across the site

20pxline 20px · 6 rules
18pxline 18px · 8 rules
16pxline 22px · 17 rules
14pxline 20px · 21 rules
13pxline 18px · 3 rules
12pxline 16px · 18 rules
11pxline 10px · 7 rules
10pxline 1 · 2 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

.local-station-block .local-actions .btn.ok · #3377FF

Corner radius

4px · 39×
50% · 27×
8px · 22×
6px · 19×
5px · 17×
12px · 15×

Shadows

0 6px 20px hsla(0,0%,51%,.16)
0 6px 20px #121212
0 1px 5px #ccc
1px 1px 10px #d9d9d9

Layout

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

Grid

Breakpoints

800

899

950

999

1100

1650

On a scale of 0 to 1650 px.

Content widths (max-width)

320 px

Notes

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

Notes

● FineThe title is 3 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 qq.com use?: qq.com’s website uses one typeface: PingFang SC (headings and body text), a system font.
What are qq.com’s brand colours?: The main colours on qq.com are Royal Blue (#3377FF), Slate Blue (#5D53CB), Crimson (#FF0055), Peru (#D2883A), Medium Purple (#958CFD) and Midnight Blue (#273240).
What colour is qq.com’s text and background?: Body text is #333333 on a #FFFFFF background.
Where is qq.com’s logo from?: The logo shown in this guide was found on qq.com’s homepage. For official logo files and usage rules, check qq.com’s own brand or press page.
Is this qq.com’s official style guide?: No. SiteStyleGuide made it from qq.com’s public web pages on 26 October 2026, and isn’t affiliated with qq.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

qq-com-tokens.css

Download

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

/* qq.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/qq.com) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-grey: #999999;
  --colour-off-white: #E6E6E6;
  --colour-royal-blue: #3377FF;
  --colour-slate-blue: #5D53CB;
  --colour-crimson: #FF0055;
  --colour-peru: #D2883A;
  --colour-medium-purple: #958CFD;
  --colour-midnight-blue: #273240;
  --colour-yellow: #FFFB11;
  --colour-green-yellow: #A2EF2D;
  --colour-cornflower-blue: #54A3FF;
  --colour-lime-green: #28C445;
  --colour-blue: #463AC9;
  --colour-medium-sea-green: #00C378;
  --gradient-1: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4));
  --gradient-2: linear-gradient(180deg,transparent 25.9%,#3071f2 51.8%);
  --gradient-3: linear-gradient(90deg,#fffb11,#a2ef2d);

  /* Typefaces */
  --font-body: 'PingFang SC', sans-serif;
  --font-other: 'Gilroy', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --text-body: 16px;
  --text-p: 18px;
  --leading-p: 18px;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: 16px;
  --leading-a: 38px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 800px;
  --breakpoint-2: 899px;
  --breakpoint-3: 950px;
  --breakpoint-4: 999px;
  --breakpoint-5: 1100px;
  --breakpoint-6: 1650px;
  --max-width-1: 320px;
}

{
    "site": "qq.com",
    "source": "https://sitestyleguide.com/qq.com",
    "text": "#333333",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Grey",
            "hex": "#999999",
            "rgb": [
                153,
                153,
                153
            ]
        },
        {
            "name": "Off White",
            "hex": "#E6E6E6",
            "rgb": [
                230,
                230,
                230
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#3377FF",
            "rgb": [
                51,
                119,
                255
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#5D53CB",
            "rgb": [
                93,
                83,
                203
            ]
        },
        {
            "name": "Crimson",
            "hex": "#FF0055",
            "rgb": [
                255,
                0,
                85
            ]
        },
        {
            "name": "Peru",
            "hex": "#D2883A",
            "rgb": [
                210,
                136,
                58
            ]
        },
        {
            "name": "Medium Purple",
            "hex": "#958CFD",
            "rgb": [
                149,
                140,
                253
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#273240",
            "rgb": [
                39,
                50,
                64
            ]
        },
        {
            "name": "Yellow",
            "hex": "#FFFB11",
            "rgb": [
                255,
                251,
                17
            ]
        },
        {
            "name": "Green Yellow",
            "hex": "#A2EF2D",
            "rgb": [
                162,
                239,
                45
            ]
        },
        {
            "name": "Cornflower Blue",
            "hex": "#54A3FF",
            "rgb": [
                84,
                163,
                255
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#28C445",
            "rgb": [
                40,
                196,
                69
            ]
        },
        {
            "name": "Blue",
            "hex": "#463AC9",
            "rgb": [
                70,
                58,
                201
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#00C378",
            "rgb": [
                0,
                195,
                120
            ]
        }
    ],
    "fonts": [
        {
            "name": "PingFang SC",
            "stack": "PingFang SC, sans-serif",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Gilroy",
            "stack": "Gilroy, sans-serif",
            "weights": [
                500
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Helvetica Neue",
            "stack": "Helvetica Neue, Helvetica, Arial, sans-serif",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "QQNewsCustomFont",
            "stack": "QQNewsCustomFont, system-ui, -apple-system, Segoe UI, roboto, helvetica, arial, avenir, \"Microsoft Sans Serif\", PingFang SC, Microsoft Yahei, Hiragino Sans GB, stheiti, WenQuanYi Micro Hei, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using PingFang SC as their main typeface

博客园

cnblogs.com · set in PingFang SC
Save
bilibili.com

bilibili.com · set in PingFang SC
Save
淘宝网

cnzz.com · set in PingFang SC
Save
xinhuanet.com

xinhuanet.com · set in PingFang SC
Save

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

S

SORT

sort-office.com · 1 day ago
Save
Plarium

plarium.com · 2 days ago
Save
Dillard's

dillards.com · 6 days ago
Save
Open Broadcaster Software

obsproject.com · 4 days ago
Save

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

qq.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Grey

Off White

Colours

Royal Blue

Slate Blue

Crimson

Peru

Medium Purple

Midnight Blue

Yellow

Green Yellow

Cornflower Blue

Lime Green

Blue

Medium Sea Green

Gradients

PingFang SC

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run qq.com?

Also set in PingFang SC

博客园

bilibili.com

淘宝网

xinhuanet.com

Similar colours

SORT

Plarium

Dillard's

Open Broadcaster Software

Title &
description