常磐色とはどんな色？読み方と由来、色見本を紹介

常磐色は「ときわいろ」と読み、松や杉など、一年を通して緑の葉を保つ常緑樹にちなんだ日本の伝統色です。深い緑色という共通点はありますが、資料によって色見本の濃さが異なります。この記事では読み方と由来を確かめ、2つのHEXカラーコードを比較しながら、自然観察会のWebページに使う場合の見出し・背景・ボタンの配色を紹介します。

常磐色（ときわいろ）は常緑樹の葉に由来する深い緑

「常磐」は、いつまでも変わらないことを意味する言葉です。冬にも緑の葉を保つ松や杉などの姿と結び付き、濃い緑を表す色名になりました。「常盤色」と書く場合もあり、読み方はいずれも「ときわいろ」です。色名の説明では、長く変わらない緑に長寿や繁栄への願いを重ねた背景も紹介されています。

国語辞典には、鎌倉時代の歌集『新撰六帖』に「常磐色」の用例があると記載されています。色名が近年のデザイン用語として作られたのではなく、古くから親しまれてきたことが分かります。また、色名の辞典ではJIS慣用色名の常磐色を「こい緑」と説明しています。ただし、この呼び名だけでWeb上のHEXコードが必ず一つに決まるわけではありません。

2つの色見本を比べ、自然観察会の案内ページに使う

色見本サイトには常磐色■#007B43という例があります。RGB形式では赤0・緑123・青67です。RGBは、画面の色を赤・緑・青の光の成分で表す方法です。別の伝統色資料には、より暗い常磐色■#006428が掲載されています。こちらは赤0・緑100・青40で、先の見本より緑と青の値が小さい色です。HEX（ヘックス）は、色を6桁の英数字で指定するWeb用の形式です。どちらも掲載例であり、色名の唯一の正解ではありません。

2つの緑■#007B43と■#006428のコントラスト比は約1.37:1です。コントラスト比は、隣り合う色の明るさの差を示す数値です。色見本を見比べるには役立ちますが、選択中・未選択などの状態をこの濃淡だけで区別するのは避けましょう。

例1：常磐色を見出しの背景にする。「里山の樹木観察会」というページ冒頭の背景を常磐色■#007B43にし、見出しと短い案内文を白■#FFFFFFで表示します。この組み合わせは約5.36:1です。樹木の写真を並べる本文エリアは淡い紙色■#F6F4EBに切り替え、説明文を濃い墨緑■#20352Cにすると約11.86:1になります。

例2：暗い常磐色を申込みボタンに使う。淡い紙色■#F6F4EBの案内欄に「開催日時」「集合場所」などを墨緑■#20352Cで記載します。「参加を申し込む」ボタンには暗い常磐色■#006428の背景と白■#FFFFFFの文字を使うと、文字とボタンは約7.36:1、ボタンと周囲の紙色は約6.68:1です。比較用の濃い緑を操作する場所に使い、本文の背景とは明るさで分けます。

白に近いカードの境界と色の使い分けに注意する

淡い紙色■#F6F4EBの上に白■#FFFFFFのカードを載せる場合、2色の比は約1.10:1と小さくなります。カードを識別するための枠が必要なら、灰みの緑■#61746Bを使う方法があります。枠と外側の紙色は約4.52:1、内側の白とは約4.98:1です。ただし細い線は見えにくい場合もあるため、線幅や余白も確認しましょう。

常磐色■#007B43の上に濃い墨緑■#20352Cで小さな文字を置くと、コントラスト比は約2.44:1しかありません。濃い色同士を合わせるのではなく、白■#FFFFFFの文字にするなど、隣り合う色の明るさを確かめてください。WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。必要な操作部品の枠など、文字以外の重要な表示にも3:1以上が求められる場合があります。

HueRollではHEXを入力して色を調整でき、選んだ色と白・黒のコントラスト比を確認できます。ただし任意の2色間の比較やAA・AAAの自動判定はできません。使用する背景と文字、カードやボタンの組み合わせは別途確認してください。