What font does Online Calculators & Tools use?

Online Calculators & Tools’s website uses one typeface: Segoe UI (headings and body text), a system font.

What are Online Calculators & Tools’s brand colours?

The main colours on rapidtables.com are Light Royal Blue (#0D6EFD), Sea Green (#198754), Crimson (#DC3545), Gold (#FFC107), Sky Blue (#0DCAF0) and Beige (#F0F0D0).

What colour is Online Calculators & Tools’s text and background?

Body text is #212529 on a #FFFFFF background.

Is this Online Calculators & Tools’s official style guide?

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

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

Unofficial style guide

Online Calculators & Toolsstyle guide

Online Calculators & Tools’s website (rapidtables.com) uses Segoe UI for its headings and body text. Its palette is led by Light Royal Blue (#0D6EFD), Sea Green (#198754) and Crimson (#DC3545), with #212529 text on #FFFFFF. Captured from the live site on 25 October 2026.

Website: rapidtables.com
Typefaces: Segoe UI, Arial, Courier New
Palette: 4 neutrals, 12 colours, 2 gradients
Captured: 25 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the rapidtables.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: Online Calculators & Tools - RapidTables.com; ● 44 / 60 characters
Meta description: Online reference and tools - calculators, converters, math, electricity, web design; ● 83 / 160 characters
Language: en
Theme colour: #ffffff

In search results

Online Calculators & Toolshttps://www.rapidtables.com/

Online Calculators & Tools - RapidTables.com

Online reference and tools - calculators, converters, math, electricity, web design

When shared

No og:image, so no picture

rapidtables.com

Online Calculators & Tools - RapidTables.com

Online reference and tools - calculators, converters, math, electricity, web design

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

7 found

256 px · PNG manifest
192 px · PNG manifest
180 px · PNG apple-touch-icon
48 px · ICO shortcut icon
32 px · PNG icon
16 px · PNG icon
16 px · SVG mask-icon

Online Calculators & Tools - RapidTables.com

Light browser tab

Online Calculators & Tools - RapidTables.com

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

Colour

Balance

How much each colour is used

White 26%
Black 19.6%
Light Royal Blue 8.2%
Cool Near Black 7.5%
Off White 7.3%
Sea Green 6%
Crimson 5.5%
Gold 5.2%
Sky Blue 5.2%
Beige 1.6%
Deep Royal Blue 1.5%
Dark Green 1.3%
Corn Silk 1.3%
Dark Slate Blue 1.3%
Brown 1.2%
Light Steel Blue 0.9%

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

On white
—

Background, text, theme · --bs-btn-hover-color, --bs-btn-active-color
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.36:1 Fail

On white
21.00:1 AAA

Text, background, border · --bs-table-color, --bs-table-striped-color
Cool Near Black

HEX

RGB

HSL

OKLCH

CMYK
20 10 0 84

On text
—

On white
15.43:1 AAA

Text, background, graphic · body, --bs-btn-border-color
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 12

On text
11.69:1 AAA

On white
1.32:1 Fail

Background, border · #rcol H5, .calc

Colours

Brand colours and accents, most used first

Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
95 57 0 1

On text
3.43:1 AA large

On white
4.50:1 AA

Text, background, graphic · a, --bs-btn-border-color
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
81 0 38 47

On text
3.40:1 AA large

On white
4.53:1 AA

Background, text, border · --bs-btn-border-color, --bs-btn-disabled-border-color
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 76 69 14

On text
3.41:1 AA large

On white
4.53:1 AA

Background, text, border · --bs-btn-border-color, --bs-btn-disabled-border-color
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 24 97 0

On text
9.46:1 AAA

On white
1.63:1 Fail

Background, text, graphic · --bs-btn-border-color, --bs-btn-disabled-border-color
Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
95 16 0 6

On text
7.88:1 AAA

On white
1.96:1 Fail

Background, text, graphic · --bs-btn-border-color, --bs-btn-disabled-border-color
Beige

HEX

RGB

HSL

OKLCH

CMYK
0 0 13 6

On text
13.28:1 AAA

On white
1.16:1 Fail

Background · #header, #nav a:hover
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
95 56 0 21

On text
2.40:1 Fail

On white
6.44:1 AA

Text, graphic · --bs-link-hover-color, --bs-btn-hover-border-color
Dark Green

HEX

RGB

HSL

OKLCH

CMYK
81 0 38 58

On text
2.39:1 Fail

On white
6.45:1 AA

Background, text, graphic · --bs-btn-hover-border-color, --bs-btn-active-bg
Corn Silk

HEX

RGB

HSL

OKLCH

CMYK
0 5 20 0

On text
13.92:1 AAA

On white
1.11:1 Fail

Background · --bs-warning-bg-subtle, --bs-highlight-bg
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
94 57 0 45

On text
1.52:1 Fail

On white
10.18:1 AAA

Text · a:link, a:visited
Brown

HEX

RGB

HSL

OKLCH

CMYK
0 76 69 31

On text
2.37:1 Fail

On white
6.50:1 AA

Text, graphic · --bs-btn-hover-border-color, --bs-btn-active-bg
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
19 11 0 0

On text
11.74:1 AAA

On white
1.31:1 Fail

Background · --bs-primary-bg-subtle, --bs-table-bg

Gradients

linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))

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.

Segoe UI

Aa 400

Segoe UI

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

Aa 400

Arial

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

Aa 400

Courier New

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

Aa 400

Times New Roman

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

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

Type scale

From the site’s CSS

Heading 1 1.6rem · 26 px / 1.2 weight 500

Online Calculators & Tools

Heading 2 1.4rem · 22 px / 1.2 weight 500

Online Calculators & Tools - RapidTables.com

Heading 3 calc(1.3rem + .6vw) / 1.2 weight 500

Online Calculators & Tools - RapidTables.com

Heading 4 1.2rem · 19 px / 1.2 weight 500

Online Calculators & Tools - RapidTables.com

Heading 5 1.25rem · 20 px / 1.2 weight 500

Online Calculators & Tools - RapidTables.com

Heading 6 1rem · 16 px / 1.2 weight 500

Online Calculators & Tools - RapidTables.com

Body 1rem · 16 px / 1.5 weight 400 · Segoe UI

Online reference and tools - calculators, converters, math, electricity, web design

Paragraph x-large / 1.8 weight 700

Online reference and tools - calculators, converters, math, electricity, web design

Small .875em · 14 px

Online reference and tools - calculators, converters, math, electricity, web design

Link 1rem · 16 px / 2 weight 700

Read more about Online Calculators & Tools

Sizes in use

Most common across the site

26px2 rules
22px3 rules
20px8 rules
19px4 rules
18px2 rules
16pxline 1.5 · 20 rules
15px1 rules
14px19 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

#fdbk .btn · #6C757D · radius .25rem

Link

Read our latest news today.

a · #083D8D

Corner radius

0.375rem · 13×
1rem · 5×
0.25rem · 4×
0.5rem · 4×
.25rem · 3×

Shadows

0 0 0 .25rem rgba(13,110,253,.25)
0 0 0 .25rem rgba(25,135,84,.25)
0 0 0 .25rem rgba(220,53,69,.25)

Layout

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

Grid

Breakpoints

320

576

768

799

800

992

1200

1400

On a scale of 0 to 1440 px.

Content widths (max-width)

1000 px

720 px

650 px

540 px

500 px

320 px

Notes

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

Notes

● FineThe title is 44 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 Online Calculators & Tools use?: Online Calculators & Tools’s website uses one typeface: Segoe UI (headings and body text), a system font.
What are Online Calculators & Tools’s brand colours?: The main colours on rapidtables.com are Light Royal Blue (#0D6EFD), Sea Green (#198754), Crimson (#DC3545), Gold (#FFC107), Sky Blue (#0DCAF0) and Beige (#F0F0D0).
What colour is Online Calculators & Tools’s text and background?: Body text is #212529 on a #FFFFFF background.
Is this Online Calculators & Tools’s official style guide?: No. SiteStyleGuide made it from rapidtables.com’s public web pages on 25 October 2026, and isn’t affiliated with Online Calculators & Tools. 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

rapidtables-com-tokens.css

Download

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

/* rapidtables.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/rapidtables.com) */
:root {
  /* Colours */
  --text: #212529;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-cool-near-black: #212529;
  --colour-off-white: #E0E0E0;
  --colour-light-royal-blue: #0D6EFD;
  --colour-sea-green: #198754;
  --colour-crimson: #DC3545;
  --colour-gold: #FFC107;
  --colour-sky-blue: #0DCAF0;
  --colour-beige: #F0F0D0;
  --colour-deep-royal-blue: #0A58CA;
  --colour-dark-green: #146C43;
  --colour-corn-silk: #FFF3CD;
  --colour-dark-slate-blue: #083D8D;
  --colour-brown: #B02A37;
  --colour-light-steel-blue: #CFE2FF;
  --gradient-1: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  --gradient-2: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

  /* Typefaces */
  --font-body: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans';
  --font-other: 'Courier New';

  /* Type scale */
  --text-h1: 1.6rem;
  --leading-h1: 1.2;
  --text-h2: 1.4rem;
  --leading-h2: 1.2;
  --text-h3: calc(1.3rem + .6vw);
  --leading-h3: 1.2;
  --text-h4: 1.2rem;
  --leading-h4: 1.2;
  --text-h5: 1.25rem;
  --leading-h5: 1.2;
  --text-h6: 1rem;
  --leading-h6: 1.2;
  --text-body: 1rem;
  --leading-body: 1.5;
  --text-p: x-large;
  --leading-p: 1.8;
  --text-small: .875em;
  --text-a: 1rem;
  --leading-a: 2;

  /* Shape */
  --radius-1: 0.375rem;
  --radius-2: 1rem;
  --radius-3: 0.25rem;
  --radius-4: 0.5rem;
  --radius-5: .25rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 576px;
  --breakpoint-3: 768px;
  --breakpoint-4: 799px;
  --breakpoint-5: 800px;
  --breakpoint-6: 992px;
  --breakpoint-7: 1200px;
  --breakpoint-8: 1400px;
  --max-width-1: 1000px;
  --max-width-2: 720px;
  --max-width-3: 650px;
  --max-width-4: 540px;
  --max-width-5: 500px;
  --max-width-6: 320px;
}

{
    "site": "rapidtables.com",
    "source": "https://sitestyleguide.com/rapidtables.com",
    "text": "#212529",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Cool Near Black",
            "hex": "#212529",
            "rgb": [
                33,
                37,
                41
            ]
        },
        {
            "name": "Off White",
            "hex": "#E0E0E0",
            "rgb": [
                224,
                224,
                224
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#0D6EFD",
            "rgb": [
                13,
                110,
                253
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#198754",
            "rgb": [
                25,
                135,
                84
            ]
        },
        {
            "name": "Crimson",
            "hex": "#DC3545",
            "rgb": [
                220,
                53,
                69
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFC107",
            "rgb": [
                255,
                193,
                7
            ]
        },
        {
            "name": "Sky Blue",
            "hex": "#0DCAF0",
            "rgb": [
                13,
                202,
                240
            ]
        },
        {
            "name": "Beige",
            "hex": "#F0F0D0",
            "rgb": [
                240,
                240,
                208
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#0A58CA",
            "rgb": [
                10,
                88,
                202
            ]
        },
        {
            "name": "Dark Green",
            "hex": "#146C43",
            "rgb": [
                20,
                108,
                67
            ]
        },
        {
            "name": "Corn Silk",
            "hex": "#FFF3CD",
            "rgb": [
                255,
                243,
                205
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#083D8D",
            "rgb": [
                8,
                61,
                141
            ]
        },
        {
            "name": "Brown",
            "hex": "#B02A37",
            "rgb": [
                176,
                42,
                55
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#CFE2FF",
            "rgb": [
                207,
                226,
                255
            ]
        }
    ],
    "fonts": [
        {
            "name": "Segoe UI",
            "stack": "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Arial",
            "stack": "Arial, Verdana, Helvetica, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Courier New",
            "stack": "\"Courier New\"",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Times New Roman",
            "stack": "\"Times New Roman\"",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Segoe UI as their main typeface

S

SORT

sort-office.com · set in Segoe UI
Save
CodeCanyon

codecanyon.net · set in Segoe UI
Save
xbox.com

xbox.com · set in Segoe UI
Save
orbitz

orbitz.com · set in Segoe UI
Save

Websites whose lead colour is closest to Online Calculators & Tools’s

Open Broadcaster Software

obsproject.com · 4 days ago
Save
Electronic Arts Home Page

ea.com · 3 days ago
Save
Waze

waze.com · 4 hours ago
Save
Google

thinkwithgoogle.com · 14 hours ago
Save

Captured from rapidtables.com on 25 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Online Calculators & Tools; this guide describes the public website for reference.

Online Calculators & Toolsstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Cool Near Black

Off White

Colours

Light Royal Blue

Sea Green

Crimson

Gold

Sky Blue

Beige

Deep Royal Blue

Dark Green

Corn Silk

Dark Slate Blue

Brown

Light Steel Blue

Gradients

Segoe UI

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run rapidtables.com?

Also set in Segoe UI

SORT

CodeCanyon

xbox.com

orbitz

Similar colours

Open Broadcaster Software

Electronic Arts Home Page

Waze

Google

Title &
description