SiteStyleGuide

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

kakaku.com logo

Unofficial style guide

kakaku.comstyle guide

kakaku.com’s website (kakaku.com) uses メイリオ for its headings and body text. Its palette is led by Deep Royal Blue (#0867BF), Deep Dodger Blue (#1E85E5) and Dark Blue (#001789), with #333333 text on #FFFFFF. Captured from the live site on 30 October 2026.

Website
kakaku.com
Typefaces
メイリオ
Palette
4 neutrals, 12 colours, 3 gradients
Captured
30 Oct 2026 · added by @sitestyleguide
https://kakaku.com/ Screenshot
Screenshot of the kakaku.com homepage on a desktop screen
Screenshot of kakaku.com on a 1440 px desktop screen, 30 Oct 2026.

Identity & metadata

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

Title &
description

Page title
価格.com - 「買ってよかった」をすべてのひとに。
● 27 / 60 characters
Meta description
「買ってよかった!」と思えるお買い物は価格.comから! パソコンや家電から、ファッション、食品に至るまで、あらゆる製品・サービスを、販売価格やクチコミ情報、ランキングなどの視点から比較・検討できる、お買い物支援サイトです。
● 112 / 160 characters
Site name
kakaku.com
og:title
価格.com
Language
ja

In search results

kakaku.comhttps://kakaku.com/

価格.com - 「買ってよかった」をすべてのひとに。

「買ってよかった!」と思えるお買い物は価格.comから! パソコンや家電から、ファッション、食品に至るまで、あらゆる製品・サービスを、販売価格やクチコミ情報、ランキン…

When shared

The image kakaku.com shares with links

kakaku.com

価格.com

「買ってよかった!」と思えるお買い物は価格.comから! パソコンや家電から、ファッション、食品に至るまで、あらゆ…

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 (#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 20.6%
  • Deep Royal Blue 16.2%
  • Deep Off White 12.7%
  • Deep Dodger Blue 9.2%
  • Light Grey 7.8%
  • Light Off White 6.2%
  • Dark Blue 5.8%
  • Midnight Blue 3.7%
  • Light Dodger Blue 3.7%
  • Red 2.6%
  • Light Royal Blue 2.6%
  • Steel Blue 2.1%
  • Golden Rod 1.9%
  • Light Steel Blue 1.6%
  • Light Slate Grey 1.6%
  • Crimson 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.

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 · .c-feed_btn_more, .p-ranking .is-biggerlinkHover .s-ranking_hover-1

  • Deep Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 13
    On text
    9.30:1 AAA
    On white
    1.36:1 Fail

    Border, background, text · .c-feed_btn_more, .c-box_regularTtl

  • Light Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 27
    On text
    6.58:1 AA
    On white
    1.92:1 Fail

    Border, text, background · .p-pr, input::-moz-placeholder

  • Light Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 7
    On text
    10.89:1 AAA
    On white
    1.16:1 Fail

    Background, border · .c-feed_btn_more, .c-box-menuBox

Colours

Brand colours and accents, most used first
  • Deep Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    96 46 0 25
    On text
    2.23:1 Fail
    On white
    5.67:1 AA

    Text · .c-ad-blue .title, .l-h_bread_drops_link

  • Deep Dodger Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    87 42 0 10
    On text
    3.33:1 AA large
    On white
    3.79:1 AA large

    Text, border · .c-feed_btn_more.is-hover .c-feed_btn_more_in:after, .is-biggerlinkHover .c-box-attachment_more:after

  • Dark Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 83 0 46
    On text
    1.12:1 Fail
    On white
    14.15:1 AAA

    Text, border, background · .l-f_copy, .c-box-menuTtl-icon-1:before

  • Midnight Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 60 0 57
    On text
    1.05:1 Fail
    On white
    13.25:1 AAA

    Text · .p-relation, .c-box_regularTtl

  • Light Dodger Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    57 28 0 20
    On text
    3.88:1 AA large
    On white
    3.26:1 AA large

    Text, border · .p-pagetop_link:after, .c-box-search_text-1:before

  • Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 72 83 14
    On text
    2.85:1 Fail
    On white
    4.44:1 AA large

    Text · .p-coupon_price_discount, .p-ranking_cont_item_price

  • Light Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    75 50 0 20
    On text
    2.35:1 Fail
    On white
    5.37:1 AA

    Border, text · .l-color-9 .c-box-menuTtl-icon-1:before, .l-color-26 .c-box-menuTtl-icon-1:before

  • Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    75 25 0 20
    On text
    3.91:1 AA large
    On white
    3.23:1 AA large

    Background, border, text · .p-cat-photohito, .l-color-14 .c-box-menuTtl-icon-1:before

  • Golden Rod

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 16 75 17
    On text
    6.08:1 AA
    On white
    2.08:1 Fail

    Text · .p-ranking_cont_rank-1, .p-ranking_-bb-_item_category:before

  • Light Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    16 8 0 5
    On text
    9.20:1 AAA
    On white
    1.37:1 Fail

    Background · .c-gSearch, .c-box-search

  • Light Slate Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    27 16 0 30
    On text
    4.20:1 AA large
    On white
    3.01:1 AA large

    Background · .p-cat, .p-tvInfo_station

  • Crimson

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 62 65 26
    On text
    2.48:1 Fail
    On white
    5.10:1 AA

    Background · .p-cat-furusatoplus, .p-furusato_municipality

Gradients

  • linear-gradient(#fff, #e7e9ec 98%, #d5d7da)

  • linear-gradient(left, #fdfce9, #fff)

  • linear-gradient(to right right, #fdfce9, #fff)

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.

メイリオ

Aa 400

メイリオ

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 · root 10 px
Body 1.3em · 13 px メイリオ

「買ってよかった!」と思えるお買い物は価格.comから! パソコンや家電から、ファッション、食品に至るまで、あらゆる製品・サービスを、販売価格や…

Paragraph 100%

「買ってよかった!」と思えるお買い物は価格.comから! パソコンや家電から、ファッション、食品に至るまで、あらゆる製品・サービスを、販売価格や…

Small 100%

「買ってよかった!」と思えるお買い物は価格.comから! パソコンや家電から、ファッション、食品に至るまで、あらゆる製品・サービスを、販売価格や…

Link 100%

Read more about kakaku.com

Sizes in use

Most common across the site
  • 18pxline 1.2 · 3 rules
  • 16px8 rules
  • 15pxline 1.2 · 4 rules
  • 14pxline 1.2 · 19 rules
  • 13pxline 1.6 · 15 rules
  • 12pxline 1.4 · 12 rules
  • 11pxline 1.2 · 3 rules
  • 10pxline 1.2 · 12 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

Corner radius

  • 5px · 7×
  • 3px · 6×
  • 3px 0 0 3px · 3×
  • 2px · 1×
  • 5px 5px 0 0 · 1×
  • 50% · 1×

Shadows

  • 0 1px 3px .5px rgba(7,7,83,.35)

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

No breakpoints or content widths could be read.

Back to top ↑

Notes

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

Notes

  • ● FineThe title is 27 characters, short enough to show in full in search results.

Back to top ↑

Questions

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

Questions

What font does kakaku.com use?
kakaku.com’s website uses one typeface: メイリオ (headings and body text), a system font.
What are kakaku.com’s brand colours?
The main colours on kakaku.com are Deep Royal Blue (#0867BF), Deep Dodger Blue (#1E85E5), Dark Blue (#001789), Midnight Blue (#002C6E), Light Dodger Blue (#5793CB) and Red (#DB3E26).
What colour is kakaku.com’s text and background?
Body text is #333333 on a #FFFFFF background.
Where is kakaku.com’s logo from?
The logo shown in this guide was found on kakaku.com’s homepage. For official logo files and usage rules, check kakaku.com’s own brand or press page.
Is this kakaku.com’s official style guide?
No. SiteStyleGuide made it from kakaku.com’s public web pages on 30 October 2026, and isn’t affiliated with kakaku.com. 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

kakaku-com-tokens.css

Download

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

/* kakaku.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/kakaku.com) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-deep-off-white: #DDDDDD;
  --colour-light-grey: #BBBBBB;
  --colour-light-off-white: #EEEEEE;
  --colour-deep-royal-blue: #0867BF;
  --colour-deep-dodger-blue: #1E85E5;
  --colour-dark-blue: #001789;
  --colour-midnight-blue: #002C6E;
  --colour-light-dodger-blue: #5793CB;
  --colour-red: #DB3E26;
  --colour-light-royal-blue: #3266CC;
  --colour-steel-blue: #3398CC;
  --colour-golden-rod: #D3B134;
  --colour-light-steel-blue: #CCDEF2;
  --colour-light-slate-grey: #8396B3;
  --colour-crimson: #BC4742;
  --gradient-1: linear-gradient(#fff, #e7e9ec 98%, #d5d7da);
  --gradient-2: linear-gradient(left, #fdfce9, #fff);
  --gradient-3: linear-gradient(to right right, #fdfce9, #fff);

  /* Typefaces */
  --font-body: 'メイリオ', 'Meiryo', 'HiraginoSans-W3', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック';

  /* Type scale */
  --text-body: 1.3em;
  --text-p: 100%;
  --text-small: 100%;
  --text-a: 100%;

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

Back to top ↑

Share

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

Share

Run kakaku.com?

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.

View our style guide on SiteStyleGuide
<a href="https://sitestyleguide.com/kakaku.com" title="kakaku.com 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 ↑

Other websites using メイリオ as their main typeface
Websites whose lead colour is closest to kakaku.com’s

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