SlashGearstyle guide

• 448 px · PNG shortcut icon

• White 31.1%
• Steel Blue 22.4%
• Medium Orchid 22.4%
• Near Black 16.4%
• Black 4.2%
• Off White 1.8%
• Dodger Blue 1.6%

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

• Aa Copied

  White

  HEX

  #FFFFFF

  RGB

  255, 255, 255

  HSL

  0 0% 100%

  OKLCH

  100% 0 0

  CMYK

  0 0 0 0

  On text

  15.91:1 AAA

  On white

  —

  Background, text, graphic · body, header

• Aa Copied

  Near Black

  HEX

  #222222

  RGB

  34, 34, 34

  HSL

  0 0% 13%

  OKLCH

  25.2% 0 0

  CMYK

  0 0 0 87

  On text

  —

  On white

  15.91:1 AAA

  Text, border, background · body, #aside-nav .main-nav li label:after

• Aa Copied

  Black

  HEX

  #010101

  RGB

  1, 1, 1

  HSL

  0 0% 0%

  OKLCH

  6.7% 0 0

  CMYK

  0 0 0 100

  On text

  1.31:1 Fail

  On white

  20.87:1 AAA

  Text · h1, mark

• Aa Copied

  Off White

  HEX

  #DDDDDD

  RGB

  221, 221, 221

  HSL

  0 0% 87%

  OKLCH

  89.8% 0 0

  CMYK

  0 0 0 13

  On text

  11.71:1 AAA

  On white

  1.36:1 Fail

  Background · .article-item .image-holder>a, --color-surface-media

• Aa Copied

  Steel Blue

  HEX

  #267CCB

  RGB

  38, 124, 203

  HSL

  209 68% 47%

  OKLCH

  57.6% 0.145 250.6

  CMYK

  81 39 0 20

  On text

  3.66:1 AA large

  On white

  4.35:1 AA large

  Background · h1 a, a.button button

• Aa Copied

  Medium Orchid

  HEX

  #BB52CD

  RGB

  187, 82, 205

  HSL

  291 55% 56%

  OKLCH

  62% 0.202 321.6

  CMYK

  9 60 0 20

  On text

  3.94:1 AA large

  On white

  4.04:1 AA large

  Background · h1 a, a.button button

• Aa Copied

  Dodger Blue

  HEX

  #008EEC

  RGB

  0, 142, 236

  HSL

  204 100% 46%

  OKLCH

  63.3% 0.172 248.5

  CMYK

  100 40 0 7

  On text

  4.61:1 AA

  On white

  3.45:1 AA large

  Text · p a, --color-text-link

• Copied

  linear-gradient(90deg,#267CCB 0%,#BB52CD 100%)

• Copied

  linear-gradient(90deg,#BB52CD 0%,#267CCB 100%)

• 36pxline 1.2 · 1 rules
• 26pxline 1.2 · 2 rules
• 24pxline 1.3 · 2 rules
• 22pxline 1 · 3 rules
• 20pxline 1.3 · 2 rules
• 18pxline 1.5 · 2 rules
• 16pxline 1.3 · 8 rules
• 14pxline inherit · 9 rules

Breakpoints

On a scale of 0 to 1440 px.

Download

• CSS variables
• Design tokens (JSON)
• Tailwind 3 config
• Tailwind 4 theme

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

/* slashgear.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/slashgear.com) */
:root {
  /* Colours */
  --text: #222222;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #222222;
  --colour-black: #010101;
  --colour-off-white: #DDDDDD;
  --colour-steel-blue: #267CCB;
  --colour-medium-orchid: #BB52CD;
  --colour-dodger-blue: #008EEC;
  --gradient-1: linear-gradient(90deg,#267CCB 0%,#BB52CD 100%);
  --gradient-2: linear-gradient(90deg,#BB52CD 0%,#267CCB 100%);

  /* Typefaces */
  --font-headings: 'Arial', 'Helvetica', sans-serif;
  --font-body: 'Arial', 'Helvetica', sans-serif;
  --font-buttons: 'Arial', 'Helvetica', sans-serif;
  --font-other: 'eurostile-bold', 'eurostile-bold-fallback', sans-serif;

  /* Type scale */
  --text-h1: 3.6rem;
  --leading-h1: 1.2;
  --text-h2: 2.6rem;
  --leading-h2: 1.3;
  --text-h3: 2rem;
  --leading-h3: 1.3;
  --text-h4: 1.8rem;
  --leading-h4: 1.3;
  --text-body: 10px;
  --leading-body: 1.5;
  --text-p: 1.8rem;
  --leading-p: 1.5;
  --text-small: 80%;
  --text-button: 1.4rem;
  --leading-button: 1;
  --text-a: 1.4rem;
  --leading-a: 100%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 750px;
  --breakpoint-2: 768px;
  --breakpoint-3: 926px;
  --max-width-1: 384px;
}

{
    "site": "slashgear.com",
    "source": "https://sitestyleguide.com/slashgear.com",
    "text": "#222222",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#222222",
            "rgb": [
                34,
                34,
                34
            ]
        },
        {
            "name": "Black",
            "hex": "#010101",
            "rgb": [
                1,
                1,
                1
            ]
        },
        {
            "name": "Off White",
            "hex": "#DDDDDD",
            "rgb": [
                221,
                221,
                221
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#267CCB",
            "rgb": [
                38,
                124,
                203
            ]
        },
        {
            "name": "Medium Orchid",
            "hex": "#BB52CD",
            "rgb": [
                187,
                82,
                205
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#008EEC",
            "rgb": [
                0,
                142,
                236
            ]
        }
    ],
    "fonts": [
        {
            "name": "Arial",
            "stack": "Arial, Helvetica, sans-serif",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "eurostile-bold-oblique",
            "stack": "eurostile-bold-oblique, eurostile-bold-oblique-fallback, sans-serif",
            "weights": [
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "eurostile-bold",
            "stack": "eurostile-bold, eurostile-bold-fallback, sans-serif",
            "weights": [
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "nimbus-sans-regular",
            "stack": "nimbus-sans-regular, nimbus-sans-regular-fallback, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}