50・100・500・900とは？UIカラーの番号の考え方

WEB制作の配色表で「50・100・500・900」という数字を見ると、何の数値なのか迷うかもしれません。これは多くの場合、UI（ユーザーインターフェース：利用者が操作する画面）で使う同系色に付けた濃淡の管理番号です。数字の読み方と、実際の画面で色を割り当てる方法を、社内の申請管理画面を例に説明します。

50・100・500・900は色の濃さを区別するラベル

一般的な番号付けでは、50や100は明るく淡い色、500は中間付近、900は暗く濃い色を表します。例えば「brand-50」「brand-500」のように「色の系列名＋番号」で管理すれば、同じ系列のどの色を使っているかをチームで伝えやすくなります。「brand」はここでは画面の紫系を表す仮の管理名です。

ただし、数字はHEXコード（色を16進数で指定する文字列）や明るさの測定値ではありません。500が必ず決まった明度を持つわけでも、700が500の1.4倍暗いわけでもありません。Tailwind CSSの標準パレットには50から950までの11段階がありますが、このような番号付けはすべてのWEBサイトで必須の共通規格ではありません。自分のサイトでは必要な段階だけを採用できます。

番号を付ける目的は「毎回似た色を探さず、同じ色を再利用できるようにすること」です。背景用の淡色と文字・操作用の濃色を区別し、同じ番号が別の画面でも同じ色を指すようにします。

申請管理画面で番号を使い分ける具体例

以下は社内申請の一覧、絞り込み、進捗表示、申請ボタンを含む画面を想定した、紫系の独自パレットです。番号とHEXコードの対応はこの例で決めたものであり、Tailwind CSSの標準値を示しているわけではありません。

50番の ■#F7F3FC を白 ■#FFFFFF のページにある補助カードへ使う場合、両者のコントラスト比は約1.09:1です。背景の違いだけではカードの区切りとして弱いため、余白や見出しも使って情報を整理します。

100番の ■#EDE2F7 は「選択中」の絞り込み条件の背景に使えます。ただし白 ■#FFFFFF との差は約1.25:1しかありません。状態を色だけで示さず、「選択中」の文字やチェックマークを添え、必要な輪郭には700番の ■#663E95 を使います。700番と100番の境界は約6.26:1、文字を900番の ■#39234F にした場合は約11.01:1です。

500番の ■#9162BF は、白 ■#FFFFFF の上に置く進捗バーの色として使い、進捗率を数字でも併記します。白とのコントラスト比は約4.46:1で、非テキストの重要な表示に求められる3:1を上回ります。一方、「申請する」ボタンは700番の ■#663E95 を背景、白 ■#FFFFFF を文字にすると約7.81:1です。50番の背景に置く見出しは900番の ■#39234F と組み合わせれば約12.56:1になります。

番号だけで色を決めず、隣り合う色を確認する

「500は標準色だから文字に使える」と決めつけないことが重要です。今回の500番 ■#9162BF と白 ■#FFFFFF の比は約4.46:1で、WCAG（WEBコンテンツのアクセシビリティ指針）2.2のレベルAAが通常の文字に求める4.5:1以上に届きません。規定の大きな文字には3:1以上、識別に必要な操作部品の状態や図形などには隣接色と3:1以上の基準があります。丸めた数値ではなく実際の計算値で判断します。

濃色の900番も、暗い背景にそのまま使えば見えにくくなることがあります。色名と番号を決めたら、実際の背景・文字・ボタンの組み合わせで検証し、ライトモードとダークモードでは役割を再確認しましょう。また、色だけで承認・未承認などの状態を伝えず、文字やアイコンの形でも区別します。

HueRollではHEXコードからティント（明るい方向）やシェード（暗い方向）の候補を確認できます。50・100などの番号は制作側で管理する名前として決め、白・黒以外の色同士のコントラストは別の検証方法で確かめてください。