ペリウィンクルとは？名前の由来とカラーコード

ペリウィンクルは、青に少し紫みを感じる淡い色の名前です。Webサイトやバナーで使うときは、どの色見本を基準にするか決めておくと、制作中の色ずれを避けやすくなります。この記事では名前の由来、代表的なカラーコード、近い色との違い、文字やボタンに使う際の注意点を紹介します。HEX（ヘックス）とは、Webで色を6桁の英数字で表すコードです。

ペリウィンクルは花に由来する色名

英語の「periwinkle」は、青紫色の花を咲かせるツルニチニチソウの仲間を指す言葉です。特にヒメツルニチニチソウ（Vinca minor）は「lesser periwinkle」と呼ばれ、その花の色にちなんで淡い青紫をペリウィンクルと呼ぶようになりました。英語辞典でも色としての意味は「淡い紫がかった青」と説明されています。同じ英単語には巻き貝を指す意味もありますが、色名の由来として挙げられるのは植物です。

花の色は個体や光の当たり方で変わり、色名も厳密なデジタルの指定値ではありません。「ペリウィンクル」とだけ伝えるより、採用する見本とコードを共有することが大切です。

代表的なHEXコードと近い色の比較

Web用のペリウィンクルの代表例は■#CCCCFFです。赤・緑・青の光の量で色を示すRGB形式では、赤204・緑204・青255です。青の成分が最も高く、赤と緑が同じ値なので、柔らかい青系の見本になります。見た目には薄い紫の印象もあります。

近い色として、ラベンダー■#E6E6FA、ライトブルー■#ADD8E6を並べると違いが分かります。今回のラベンダーはより明るく、青紫の色みが控えめな色、ライトブルーは緑の成分も多く水色寄りの色です。両方ともペリウィンクルと同じ色ではありません。

ただし、ペリウィンクルのコードが世界共通で一つに決まっているわけではありません。別の色名調査データでは、少し濃く鮮やかな■#8E82FEをペリウィンクルとする例もあります。また、CSS（Webページの見た目を指定する仕組み）の標準色名に「periwinkle」はないため、色を指定するときはHEXなどの数値を使います。

Webページで使うときは文字との明るさの差を確認

たとえば押し花ワークショップの申込みページなら、冒頭の案内エリアをペリウィンクル■#CCCCFFにし、講座名と説明を濃い紺色■#29314Dで表示します。文字と背景のコントラスト比は約8.32:1です。コントラスト比とは、文字と背景の明るさの差を表す数値です。

詳しい日程や参加費は白■#FFFFFFのカードに置き、同じ紺色■#29314Dを本文に使うと約12.80:1になります。参加ボタンは濃い紫■#51448Aの背景に白■#FFFFFFの文字を載せれば約8.26:1。ボタンと周囲のペリウィンクル■#CCCCFFの差も約5.37:1あり、淡い背景の中で操作する場所を分けられます。

一方、ペリウィンクル■#CCCCFFと白■#FFFFFFは約1.54:1しか違いません。白い文字を淡い背景の上に置いたり、白いカードの境界を背景色の差だけで示したりするのは避けます。カードの輪郭が必要なら、紫がかった灰色■#66609Cの枠を付ける方法があります。この枠はペリウィンクルと約3.67:1、白と約5.65:1の差があります。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上を原則求めています。重要な操作部品の境界などにも、隣接色との3:1以上が必要な場合があります。HueRollではHEXを入力し、選択色と白・黒のコントラスト比を確認できます。ただし任意の2色の比較やAA判定はできないため、完成した画面の実際の組み合わせは別途確認してください。