柑子色とはどんな色？読み方とカラーコードを紹介

柑子色は何と読むのか、どんなオレンジ色なのか気になりませんか。果実に由来する日本の色名ですが、同じ名前でも色見本サイトによってカラーコードが少し違います。読み方・由来と二つの実際の見本を確認し、Webページで使うときの色合わせや文字の注意点まで紹介します。

柑子色の読み方と名前の由来

柑子色は「こうじいろ」と読みます。柑子（こうじ）と呼ばれるミカンの仲間の実に由来する伝統色名で、明るい黄赤、つまり黄色みと赤みのあるオレンジ系の色です。色名の辞典には、古い用例に関連して「かんじいろ」という読みも載っています。現在の色見本を探すときは、まず「こうじいろ」で調べると見つけやすいでしょう。

柑子色と蜜柑色はどちらも柑橘の実にちなみますが、色名としての由来や色見本の設定は同じではありません。色の名前だけで画面上の一つの数値が決まるわけではないので、Web制作では採用するカラーコードも一緒に記録します。

二つの色見本でHEXとRGBを比較する

I-IROが柑子色として掲載するのは■#F9A963で、RGBは赤249・緑169・青99です。カラーサイト.comの柑子色は■#FAA755で、RGBは赤250・緑167・青85です。どちらも出典のある色見本ですが、同じコードではありません。HEX（ヘックス）は「#」と6桁の英数字で画面の色を指定する方法、RGBは赤・緑・青の光の成分を数値で示す方法です。

二つの見本はともに明るいオレンジ系で、色の明るさを比較したコントラスト比は約1.01対1と小さな差です。I-IROの見本はカラーサイト.comの見本より青の成分が14大きく、少し淡い橙色に見えます。横に並べて用途に合う方を選びましょう。色見本を選んだら、資料名とHEXをセットで保存し、別の資料の数値と混ぜないようにしましょう。

Webで使う配色例と文字の注意点

例えば、日本の伝統色を紹介する小さな図鑑ページを考えます。ページ全体の背景には温かみのある白■#FFF8ED、見出しと本文には濃いチャコール■#302A25を使います。柑子色の由来を紹介する短いカードの背景を、I-IROの柑子色■#F9A963にし、カード内の文字をチャコール■#302A25にします。詳細を見るボタンには深緑■#265044を使い、文字は温かみのある白■#FFF8EDにすると、説明カードと操作部分を分けられます。

文字と背景の明るさの差を示すコントラスト比は、チャコール■#302A25と白系の背景■#FFF8EDで約13.41対1、柑子色■#F9A963のカードとチャコール■#302A25で約7.34対1、深緑■#265044のボタンと白系の文字■#FFF8EDで約8.60対1です。Webアクセシビリティ指針WCAG 2.2のAA基準が通常の文字に求める4.5対1以上を、いずれも上回ります。

一方、柑子色■#F9A963に白■#FFFFFFの文字を載せると約1.93対1で不足します。また、柑子色■#F9A963と白系のページ背景■#FFF8EDは約1.83対1しかありません。カードの境界が重要なら、濃い枠線や余白も使ってください。色の印象は表示環境によっても変わるため、採用したHEXと実際の文字・背景の組み合わせを確かめましょう。