What font does Weather Underground use?

Weather Underground’s website uses one typeface: Roboto (headings and body text), a system font.

What are Weather Underground’s brand colours?

The main colours on wunderground.com are Deep Sky Blue (#4FA7D7), Fire Brick (#C43533), Deep Steel Blue (#006F9E), Royal Blue (#2152A8), Sandy Brown (#EF8E48) and Olive Drab (#6B9D53).

What colour is Weather Underground’s text and background?

Body text is #1E2023 on a #FFFFFF background.

Is this Weather Underground’s official style guide?

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

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

Unofficial style guide

Weather Undergroundstyle guide

Weather Underground’s website (wunderground.com) uses Roboto for its headings and body text. Its palette is led by Deep Sky Blue (#4FA7D7), Fire Brick (#C43533) and Deep Steel Blue (#006F9E), with #1E2023 text on #FFFFFF. Captured from the live site on 30 October 2026.

Website: wunderground.com
Typefaces: Roboto
Palette: 4 neutrals, 12 colours, 1 gradient
Captured: 30 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the wunderground.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: Local Weather Forecast, News and Conditions | Weather Underground; ▲ 65 / 60 characters
Meta description: Weather Underground provides local & long-range weather forecasts, weather reports, maps & tropical weather conditions for locations worldwide; ● 142 / 160 characters

In search results

Weather Undergroundhttps://www.wunderground.com/

Local Weather Forecast, News and Conditions | Weather Undergr…

Weather Underground provides local & long-range weather forecasts, weather reports, maps & tropical weather conditions for locations worldwide

When shared

No og:image, so no picture

wunderground.com

Local Weather Forecast, News and Conditions | Weather Underground

Weather Underground provides local & long-range weather forecasts, weather reports, maps & tropical weather c…

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

2 found

64 px · ICO favicon.ico
32 px · PNG shortcut icon

Local Weather Forecast, News and Conditions | Weather Underground

Light browser tab

Local Weather Forecast, News and Conditions | Weather Underground

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

Colour

Balance

How much each colour is used

White 31.9%
Deep Sky Blue 16.1%
Near Black 14.6%
Fire Brick 6%
Deep Steel Blue 3.7%
Black 3.1%
Royal Blue 3.1%
Sandy Brown 3.1%
Olive Drab 3.1%
Charcoal 2.8%
Steel Blue 2.8%
Golden Rod 2.4%
Steel Blue 2%
Coral 1.8%
Light Steel Blue 1.8%
Maroon 1.8%

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.33:1 AAA

On white
—

Background, text, border · body, .segmented button.selected
Near Black

HEX

RGB

HSL

OKLCH

CMYK
14 9 0 86

On text
—

On white
16.33:1 AAA

Text, background · body, header-menu-wc .hamburger span
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.29:1 Fail

On white
21.00:1 AAA

Background, text · .bg-color-wu-black, header details li.sub-nav:hover
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
2 2 0 80

On text
1.29:1 Fail

On white
12.62:1 AAA

Used · --nav-menu-bg-color, --page-nav-bg-color

Colours

Brand colours and accents, most used first

Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
63 22 0 16

On text
6.10:1 AA

On white
2.68:1 Fail

Text, background, border · a.button.outline, a.button.blue
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 73 74 23

On text
3.04:1 AA large

On white
5.38:1 AA

Background, text, border · a.button.red, a.button.red:active
Deep Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 30 0 38

On text
2.93:1 Fail

On white
5.57:1 AA

Text · action-bar-wc .title, a
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
80 51 0 34

On text
2.21:1 Fail

On white
7.40:1 AAA

Background, border, text · .bg-color-wu-darkblue, ad-slot .ad-placeholder
Sandy Brown

HEX

RGB

HSL

OKLCH

CMYK
0 41 70 6

On text
6.71:1 AA

On white
2.43:1 Fail

Background, text, border · .bg-color-wu-orange, mobile-nav-wc ol.top li:nth-child(4):before
Olive Drab

HEX

RGB

HSL

OKLCH

CMYK
32 0 47 38

On text
5.11:1 AA

On white
3.19:1 AA large

Background, text, border · .bg-color-wu-green, feedback-link-view
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
73 38 0 27

On text
3.39:1 AA large

On white
4.82:1 AA

Text, background · .segmented button.selected, .bg-color-wu-lightblue60
Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 23 68 4

On text
9.48:1 AAA

On white
1.72:1 Fail

Background, text, border · .bg-color-wu-yellow, mobile-nav-wc ol.top li:nth-child(5):before
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
69 32 0 23

On text
4.16:1 AA large

On white
3.92:1 AA large

Background, text · .bg-color-wu-lightblue40, .color-wu-lightblue40
Coral

HEX

RGB

HSL

OKLCH

CMYK
0 46 70 10

On text
5.70:1 AA

On white
2.86:1 Fail

Background, text · .bg-color-wu-red80, .color-wu-red80
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 25 0 25

On text
4.42:1 AA large

On white
3.70:1 AA large

Background, border · a.button.blue:hover, a.button.blue
Maroon

HEX

RGB

HSL

OKLCH

CMYK
0 75 77 54

On text
1.51:1 Fail

On white
10.78:1 AAA

Background, border · a.button.red:hover, a.button.red

Gradients

linear-gradient(rgba(,.12),rgba(,.12))

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.

Roboto

Aa 400

Roboto

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

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

Type scale

From the site’s CSS

Heading 1 1.125rem · 18 px weight 700

Weather Underground

Heading 2 1.3rem · 21 px / 1.3 weight 400

Local Weather Forecast, News and Conditions | W…

Body 16px Roboto

Weather Underground provides local & long-range weather forecasts, weather reports, maps & tropical weather conditions for locations worldw…

Button .9375rem · 15 px

Get started

Link .875rem · 14 px weight 500

Sizes in use

Most common across the site

22px2 rules
18pxline 1.48rem · 3 rules
16pxline 1.5 · 8 rules
15pxline 1.4rem · 5 rules
14px6 rules
13px6 rules
12pxline 20px · 7 rules
10px3 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

a.button.blue · #4FA7D7

Link

Read our latest news today.

a · #006F9E

Corner radius

4px · 3×
50% · 2×
6px · 2×
12px · 2×
8px · 2×
16px · 2×

Shadows

0 12px 32px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06)
0 1px 2px rgba(0,0,0,.12)
0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)
1px 1px 2px rgba(0,0,0,0.2)

Layout

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

Grid

Breakpoints

640

752

768

864

992

1104

1344

1345

On a scale of 0 to 1440 px.

Content widths (max-width)

700 px

592 px

544 px

450 px

350 px

300 px

Notes

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

Notes

▲ CheckThe title is 65 characters. Google usually cuts titles near 60, so the end may not show in results.
▲ CheckThere is no og:image, so links shared on social media show no picture.
▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).

Questions

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

Questions

What font does Weather Underground use?: Weather Underground’s website uses one typeface: Roboto (headings and body text), a system font.
What are Weather Underground’s brand colours?: The main colours on wunderground.com are Deep Sky Blue (#4FA7D7), Fire Brick (#C43533), Deep Steel Blue (#006F9E), Royal Blue (#2152A8), Sandy Brown (#EF8E48) and Olive Drab (#6B9D53).
What colour is Weather Underground’s text and background?: Body text is #1E2023 on a #FFFFFF background.
Is this Weather Underground’s official style guide?: No. SiteStyleGuide made it from wunderground.com’s public web pages on 30 October 2026, and isn’t affiliated with Weather Underground. 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

wunderground-com-tokens.css

Download

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

/* wunderground.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/wunderground.com) */
:root {
  /* Colours */
  --text: #1E2023;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #1E2023;
  --colour-black: #000000;
  --colour-charcoal: #333334;
  --colour-deep-sky-blue: #4FA7D7;
  --colour-fire-brick: #C43533;
  --colour-deep-steel-blue: #006F9E;
  --colour-royal-blue: #2152A8;
  --colour-sandy-brown: #EF8E48;
  --colour-olive-drab: #6B9D53;
  --colour-steel-blue: #3374BB;
  --colour-golden-rod: #F5BC4F;
  --colour-steel-blue-2: #3D85C4;
  --colour-coral: #E67C44;
  --colour-light-steel-blue: #008FBF;
  --colour-maroon: #751D1B;
  --gradient-1: linear-gradient(rgba(,.12),rgba(,.12));

  /* Typefaces */
  --font-body: 'Roboto', 'Helvetica Neue', sans-serif;

  /* Type scale */
  --text-h1: 1.125rem;
  --text-h2: 1.3rem;
  --leading-h2: 1.3;
  --text-body: 16px;
  --text-button: .9375rem;
  --text-a: .875rem;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 640px;
  --breakpoint-2: 752px;
  --breakpoint-3: 768px;
  --breakpoint-4: 864px;
  --breakpoint-5: 992px;
  --breakpoint-6: 1104px;
  --breakpoint-7: 1344px;
  --breakpoint-8: 1345px;
  --max-width-1: 700px;
  --max-width-2: 592px;
  --max-width-3: 544px;
  --max-width-4: 450px;
  --max-width-5: 350px;
  --max-width-6: 300px;
}

{
    "site": "wunderground.com",
    "source": "https://sitestyleguide.com/wunderground.com",
    "text": "#1E2023",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1E2023",
            "rgb": [
                30,
                32,
                35
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333334",
            "rgb": [
                51,
                51,
                52
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#4FA7D7",
            "rgb": [
                79,
                167,
                215
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#C43533",
            "rgb": [
                196,
                53,
                51
            ]
        },
        {
            "name": "Deep Steel Blue",
            "hex": "#006F9E",
            "rgb": [
                0,
                111,
                158
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#2152A8",
            "rgb": [
                33,
                82,
                168
            ]
        },
        {
            "name": "Sandy Brown",
            "hex": "#EF8E48",
            "rgb": [
                239,
                142,
                72
            ]
        },
        {
            "name": "Olive Drab",
            "hex": "#6B9D53",
            "rgb": [
                107,
                157,
                83
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#3374BB",
            "rgb": [
                51,
                116,
                187
            ]
        },
        {
            "name": "Golden Rod",
            "hex": "#F5BC4F",
            "rgb": [
                245,
                188,
                79
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#3D85C4",
            "rgb": [
                61,
                133,
                196
            ]
        },
        {
            "name": "Coral",
            "hex": "#E67C44",
            "rgb": [
                230,
                124,
                68
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#008FBF",
            "rgb": [
                0,
                143,
                191
            ]
        },
        {
            "name": "Maroon",
            "hex": "#751D1B",
            "rgb": [
                117,
                29,
                27
            ]
        }
    ],
    "fonts": [
        {
            "name": "Roboto",
            "stack": "Roboto, Helvetica Neue, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Roboto as their main typeface

goo.gle

goo.gle · set in Roboto
Save1
google.rs

google.rs · set in Roboto
Save
google.com.my

google.com.my · set in Roboto
Save
google.se

google.se · set in Roboto
Save

Websites whose lead colour is closest to Weather Underground’s

Calculatio

calculat.io · 5 days ago
Save
Sketchfab

sketchfab.com · 4 days ago
Save
Sketchfab

skfb.ly · 4 days ago
Save
آپارات

aparat.com · 1 day ago
Save

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

Weather Undergroundstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Black

Charcoal

Colours

Deep Sky Blue

Fire Brick

Deep Steel Blue

Royal Blue

Sandy Brown

Olive Drab

Steel Blue

Golden Rod

Steel Blue

Coral

Light Steel Blue

Maroon

Gradients

Roboto

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run wunderground.com?

Also set in Roboto

goo.gle

google.rs

google.com.my

google.se

Similar colours

Calculatio

Sketchfab

Sketchfab

آپارات

Title &
description