What font does calculator.net use?

calculator.net’s website uses one typeface: arial (headings and body text), a system font.

What are calculator.net’s brand colours?

The main colours on calculator.net are Royal Blue (#336699), Midnight Blue (#003366), Light Forest Green (#518428), Green (#4C7B25), Light Steel Blue (#AEC0D3) and Dark Slate Blue (#044284).

What colour is calculator.net’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is calculator.net’s logo from?

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

Is this calculator.net’s official style guide?

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

calculator.net Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: Calculator.net: Free Online Calculators - Math, Fitness, Finance, Science; ▲ 73 / 60 characters
Meta description: Online calculator for quick calculations, along with a large collection of calculators on math, finance, fitness, and more, each with in-depth information.; ● 155 / 160 characters
Language: en

In search results

calculator.nethttps://www.calculator.net/

Calculator.net: Free Online Calculators - Math, Fitness, Fina…

Online calculator for quick calculations, along with a large collection of calculators on math, finance, fitness, and more, each with in-depth information.

When shared

No og:image, so no picture

calculator.net

Calculator.net: Free Online Calculators - Math, Fitness, Finance, Science

Online calculator for quick calculations, along with a large collection of calculators on math, finance, fitn…

Back to top ↑

Logo & favicons

Found as: image linked to the homepage. SVG, 208 × 22.

Logo

On white

On black

On Royal Blue

Favicons

5 found

192 px · PNG manifest
180 px · PNG apple-touch-icon
32 px · PNG icon
32 px · ICO favicon.ico
16 px · PNG icon

Calculator.net: Free Online Calculators - Math, Fitness, Finance, Science

Light browser tab

Calculator.net: Free Online Calculators - Math, Fitness, Finance, Science

Dark browser tab

Back to top ↑

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

Colour

Balance

How much each colour is used

White 32.5%
Royal Blue 14.7%
Black 14.5%
Off White 11.1%
Midnight Blue 7.4%
Charcoal 5.6%
Light Forest Green 3.1%
Green 2.7%
Light Steel Blue 2.5%
Dark Slate Blue 2.4%
Steel Blue 2.1%
Deep Forest Green 1.5%

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

On white
—

Text, background, border · body, #sciout
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · body, input
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 7

On text
18.10:1 AAA

On white
1.16:1 Fail

Background, border, text · fieldset, #footer
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 85

On text
1.39:1 Fail

On white
15.13:1 AAA

Border, text, background · .calinfoinner, #sciout

Colours

Brand colours and accents, most used first

Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
67 33 0 40

On text
3.50:1 AA large

On white
6.00:1 AA

Background, border · #octitle, #sectitle
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 50 0 60

On text
1.67:1 Fail

On white
12.61:1 AAA

Text, background · #header, h1
Light Forest Green

HEX

RGB

HSL

OKLCH

CMYK
39 0 70 48

On text
4.68:1 AA

On white
4.49:1 AA large

Background, border · .h2result, .topNavOn
Green

HEX

RGB

HSL

OKLCH

CMYK
38 0 70 52

On text
4.17:1 AA large

On white
5.04:1 AA

Background · input[type=submit], fieldset a:hover
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
18 9 0 17

On text
11.28:1 AAA

On white
1.86:1 Fail

Background, border · .scinm, .scieq
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
97 50 0 48

On text
2.12:1 Fail

On white
9.92:1 AAA

Border, background · table.cinfoT th, fieldset div
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 33 0 40

On text
3.36:1 AA large

On white
6.25:1 AA

Text · a, #breadcrumbs a
Deep Forest Green

HEX

RGB

HSL

OKLCH

CMYK
73 0 67 49

On text
4.35:1 AA large

On white
4.82:1 AA

Text · .hh, .hh a

Back to top ↑

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.

arial

Aa 700

arial

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

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

Type scale

From the site’s CSS

Heading 1 26px weight 700

calculator.net

Heading 2 22px weight 700

Calculator.net: Free Online Calculators - Math,…

Heading 3 19px weight 700

Calculator.net: Free Online Calculators - Math,…

Body 16px arial

Online calculator for quick calculations, along with a large collection of calculators on math, finance, fitness, and more, each with in-de…

Paragraph 16px arial

Online calculator for quick calculations, along with a large collection of calculators on math, finance, fitness, and more, each with in-de…

Link 16px uppercase

Sizes in use

Most common across the site

26px1 rules
22px4 rules
19px1 rules
18px7 rules
16px13 rules
15px2 rules
14px1 rules
13px10 rules

Back to top ↑

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

input[type=submit] · #4C7B25

Link

Read our latest news today.

a · #006699

Corner radius

3px · 6×
50% · 2×
2px · 1×
1px · 1×

Shadows

1px 1px 2px #666

Back to top ↑

Layout

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

Grid

Breakpoints

490

650

720

1140

On a scale of 0 to 1440 px.

Back to top ↑

Notes

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

Notes

▲ CheckThe title is 73 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.

Back to top ↑

Questions

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

Questions

What font does calculator.net use?: calculator.net’s website uses one typeface: arial (headings and body text), a system font.
What are calculator.net’s brand colours?: The main colours on calculator.net are Royal Blue (#336699), Midnight Blue (#003366), Light Forest Green (#518428), Green (#4C7B25), Light Steel Blue (#AEC0D3) and Dark Slate Blue (#044284).
What colour is calculator.net’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is calculator.net’s logo from?: The logo shown in this guide was found on calculator.net’s homepage. For official logo files and usage rules, check calculator.net’s own brand or press page.
Is this calculator.net’s official style guide?: No. SiteStyleGuide made it from calculator.net’s public web pages on 31 October 2026, and isn’t affiliated with calculator.net. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

calculator-net-tokens.css

Download

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

/* calculator.net design tokens, from SiteStyleGuide (https://sitestyleguide.com/calculator.net) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-off-white: #EEEEEE;
  --colour-charcoal: #262626;
  --colour-royal-blue: #336699;
  --colour-midnight-blue: #003366;
  --colour-light-forest-green: #518428;
  --colour-green: #4C7B25;
  --colour-light-steel-blue: #AEC0D3;
  --colour-dark-slate-blue: #044284;
  --colour-steel-blue: #006699;
  --colour-deep-forest-green: #23832B;

  /* Typefaces */
  --font-body: 'arial', 'helvetica', sans-serif;

  /* Type scale */
  --text-h1: 26px;
  --text-h2: 22px;
  --text-h3: 19px;
  --text-body: 16px;
  --text-p: 16px;
  --text-a: 16px;

  /* Shape */
  --radius-1: 3px;
  --radius-2: 50%;
  --radius-3: 2px;
  --radius-4: 1px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 490px;
  --breakpoint-2: 650px;
  --breakpoint-3: 720px;
  --breakpoint-4: 1140px;
}

{
    "site": "calculator.net",
    "source": "https://sitestyleguide.com/calculator.net",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Off White",
            "hex": "#EEEEEE",
            "rgb": [
                238,
                238,
                238
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#262626",
            "rgb": [
                38,
                38,
                38
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#336699",
            "rgb": [
                51,
                102,
                153
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#003366",
            "rgb": [
                0,
                51,
                102
            ]
        },
        {
            "name": "Light Forest Green",
            "hex": "#518428",
            "rgb": [
                81,
                132,
                40
            ]
        },
        {
            "name": "Green",
            "hex": "#4C7B25",
            "rgb": [
                76,
                123,
                37
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#AEC0D3",
            "rgb": [
                174,
                192,
                211
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#044284",
            "rgb": [
                4,
                66,
                132
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#006699",
            "rgb": [
                0,
                102,
                153
            ]
        },
        {
            "name": "Deep Forest Green",
            "hex": "#23832B",
            "rgb": [
                35,
                131,
                43
            ]
        }
    ],
    "fonts": [
        {
            "name": "arial",
            "stack": "arial, helvetica, sans-serif",
            "weights": [
                700
            ],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run calculator.net?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/calculator.net" title="calculator.net style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

calculator.netstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Charcoal

Colours

Royal Blue

Midnight Blue

Light Forest Green

Green

Light Steel Blue

Dark Slate Blue

Steel Blue

Deep Forest Green

arial

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

European Union

360官网 -360安全中心

LMGTFY

Transport for London

ProBlogger

Go

Pew Research Center

fidelity.com

calculator.netstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Charcoal

Colours

Royal Blue

Midnight Blue

Light Forest Green

Green

Light Steel Blue

Dark Slate Blue

Steel Blue

Deep Forest Green

arial

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run calculator.net?

Also set in arial

European Union

360官网 -360安全中心

LMGTFY

Transport for London

Similar colours

ProBlogger

Go

Pew Research Center

fidelity.com

Title &
description