Color Samples

用途から選ぶ配色サンプル

色名だけでなく、背景・文字・強調色として使ったときのまとまりを確認できます。「ツールで開く」から同じ色をパレット表示できます。

#165e83#ba2636#f8b500#fef4f4#1c1c1c

配色例

実際の画面では、本文の可読性とボタンの識別しやすさも確認してください。

山吹

和の案内・文化紹介

藍を主色、朱や山吹を小さな強調に使う構成。背景は桜色より白に近い面積を広くすると落ち着きます。

PrimarySuccessWarningSurfaceInk

業務ツール・管理画面

青と緑で操作と完了を分け、警告だけ黄系に限定。大部分を白・薄い灰色にして情報を読みやすくします。

CoralBlueYellowGreenPaper

子ども向けコンテンツ

明るい色を複数使いつつ、文字は濃色に固定します。背景まで鮮やかにせず、操作対象に色を集めます。

DeepAccentPaleWhiteText

読みやすさを優先

本文は濃い文字と白背景を基本にし、色は見出し・ボタン・補助面へ限定。長い説明ページに向きます。

配色はモニターによって見え方が変わります。ツール内のコントラスト確認に加え、スマホとPCの両方で文字の読みやすさを確認してください。