露草色とは？名前の由来と配色に使える色見本

露草色（つゆくさいろ）は、野に咲くツユクサの花を思わせる、澄んだ青色です。名前にはどんな由来があり、Webの配色では何色と合わせると使いやすいのでしょうか。色の背景を知ったうえで、具体的な色見本とバナーの組み合わせを考えます。

露草色の名前はツユクサの青い花に由来する

露草色は、ツユクサの青い花びらや、その汁で染めた青に由来する日本の伝統色です。ツユクサは古く「月草（つきくさ）」とも呼ばれ、花の色を衣に移したことが古い歌にも登場します。花から得られる青い色素は水に溶けやすく、染めた色が落ちやすいという特徴がありました。現在もツユクサの仲間のオオボウシバナから作られる「青花紙」は、友禅染めの下絵などに利用されています。

画面上の露草色の一例は■#38A1DBです。資料によっては、少し落ち着いた青の■#4CA3D8を露草色の見本とする場合もあります。伝統色の名前だけで、世界共通のカラーコードが一つに決まるわけではありません。この記事では■#38A1DBを基準に使います。HEX（ヘックス）カラーコードは「#」に続く英数字で画面の色を表す書き方で、ここでは6桁の形式を使っています。

露草色を活かす2つの配色見本

淡い背景に露草色を添える自然観察会のバナー

背景を青みを含む白■#F7FBFEにし、見出しと本文には深い青■#172E45を使います。露草色■#38A1DBは、見出しの下に引く短い飾り線や、写真の横に置く細い色帯として使うと、文章を邪魔せず花の青を取り込めます。参加案内のボタンは深い青■#172E45で塗り、文字を白■#FFFFFFにします。露草色を広く敷かなくても、線の位置を揃えることでバナーにまとまりを作れます。

露草色を広い背景に使う夏の催しのバナー

露草色■#38A1DBを背景全体に使うなら、イベント名と短い説明文は深い青■#172E45にします。日時をまとめる小さな面には、少し温かみのある生成り■#FFF9EFを置き、その中の文字は深い青■#172E45にします。申し込みボタンも深い青■#172E45を背景に、白■#FFFFFFの文字を組み合わせます。青と生成りの面積を競わせず、生成りを日時の部分だけに絞ると、情報を探しやすい構成になります。

どちらも配色の提案例です。写真が鮮やかな場合は、露草色の飾りを減らすなど、周囲の色と使う面積に合わせて調整してください。

文字やボタンでは明るさの差を必ず確かめる

色を組み合わせるときは、文字と背景の明るさの差を示す「コントラスト比」を確認します。Webコンテンツのアクセシビリティ指針「WCAG 2.2」のAA基準では、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が求められます。

露草色■#38A1DBの背景に白■#FFFFFFの文字を載せると約2.88:1で、大きな文字のAA基準にも届きません。一方、深い青■#172E45の文字なら露草色■#38A1DBとの比は約4.82:1となり、通常サイズの文字の基準を満たします。また、淡い背景■#F7FBFEと深い青■#172E45の文字は約13.34:1、深い青■#172E45のボタンと白■#FFFFFFの文字は約13.88:1です。

露草色■#38A1DBを淡い背景■#F7FBFEの上で使ったときの比は約2.77:1なので、小さい文字や、操作に必要な枠・アイコンにはそのまま使わないでください。飾りと、意味を伝える要素を分けて考えることが大切です。HueRollで確認できるコントラストは選んだ色と白・黒の比較に限られるため、ここで挙げた青同士など任意の2色の比は別途計算して確認します。