カラーコードとは

カラーコードとは色を表す記号のことです。色の表し方には様々な方法がありますが、ここではWEBデザインでよく使われるHEX・RGB・RGBAの3つを解説します。

a. HEX値

16進数で6桁の英数字から表される形式をHEX値と呼びます。「0-9」「A-F」の合計16種類の記号を用いて6つの英数字から構成されます。

前述の16個の英数字から6つを使ってHEX値が表現されます。最初の2桁がレッド、中央の2桁がグリーン、最後の2桁がブルーを表します。赤、緑、青は光の3原色のことで、すべての色はこれら3原色の組み合わせで表現されます。

00が光の量が一番小さく、FFが光の量が最大と定義されています。00,01,02…0F,10…FE,FFのような規則性に従って光の量が増えていきます。

1桁目が0〜Fで16通り、2桁目も0〜Fで16通りあるため16×16＝256通りとなり、2桁の数字で256通り作れることが分かります。レッド・グリーン・ブルーそれぞれで256通りあるため、6桁のカラーコードでは256×256×256＝16,777,216色あることになります。

表現方法

• HEX値では#000000のように先頭に#をつけて表現します。
• 6桁の英数字は小文字でも機能します。
• レッド・グリーン・ブルーそれぞれの2桁の値が同一数値の場合（例：FF, CC, 00）、それぞれ1文字で表すことができます。#FFCC00であれば#FC0と3桁で表現することも可能です。

基本色のカラーコードは押さえておこう

カラーコードにさらに詳しくなると色を見極められるようになりますが、この段階でそこまでやる必要はありません。カラーコードと色の対応は無理に覚えていなくてもWEBデザイン業務に特に支障はなく、仕組みだけ理解しておけば十分です。

RGBはrgb(255,255,255)のように表される形式です。HEXでは00〜FFの16進数で表していたものを、00を0、最大のFFを255として1つずつ増えていく256通りの数値でR・G・Bをそれぞれ表します。HEXかRGBでカラーを表すことが多いため、この2つを押さえておけば大抵の場合大丈夫です。

RGBAはCSSで主に使用されるカラーの指定方法です。rgba(255,255,255,0.5)のように4つ目の数値が加わり、4つの数値で表現できるようになります。4つ目の数値は透明度を表しており、0〜1の数値で表現され、0であれば完全に透明、1であれば完全な不透明になります。

カラーコードを変換したい時は、ツールによってHEXのみ・RGB表記のみしか受け付けていない場合があるため、いちいち自分で計算せず必ずツールを利用しましょう。「カラーコード 変換」と検索すれば様々なツールが出てきますが、Color Converterというツールがおすすめです。

Color Converter

カラーコードを入れると、任意のカラーコードに変換してくれます。

配色の基本ルール

WEBデザインには基本となる3つのカラーの配色バランスがあります。ベースカラー70%、メインカラー25%、アクセントカラー5%です。

ベースカラーは一番大きい面積を占める色で、地色や背景色になることが多いです。文字の背景になるので明度の高い色や淡い色にするとよく、一般的には白やライトグレーなどがよく使われます。メインカラーの妨げにならないように気をつけて選ぶ、メインカラーやアクセントカラーの引き立て役です。

メインカラーはその名の通り、デザインの主軸となる肝心な色です。全体の印象を左右する主役となる色なので、最初に決めるとよいでしょう。自分の好きな色を選ぶのではなく、どのような雰囲気にしたいのか、ターゲットイメージに合っているのかなどを検討し、色の印象を考えながら選びます。キャッチフレーズなど文字として使用される場合もあるので、明度が低い色が読みやすくておすすめです。

アクセントカラーは強調色なので、面積は最も小さい扱いですが、配色の中では一番目立つキーカラーです。メリハリを出したい部分や主張したいところに使用し、全体色調を引き締めたり、視点を集中させる効果があります。メインカラーと反対色を選ぶと、鮮やかな印象が引き立ちます。

代表的な8色が持つイメージ

配色選びに役立つサイト

カラーの配色の引き出しを増やすには、様々なカラーツールを駆使して、良い色の組み合わせをたくさん自分の中で持っておくことが大切です。

原色大辞典

色の引き出しが圧倒的に足りないという方は、まずはこのサイトを見て色の引き出しを増やすのがおすすめです。例えば「赤といえば真っ赤な色くらいしか思いつかない」という方も、赤だけで本当に様々な色があることが分かります。

Color Hunt

ユーザーが投稿した4色の配色パターンが一覧で表示されています。センスの良い組み合わせからインスピレーションを受けることができる、シンプルなカラーパレットのサイトです。

Coolors

スペースキーを押すとランダムで配色案を提示してくれます。どういう色味がよいのかゼロからアイデアが欲しい時に便利です。固定したい色があれば、それを固定した上で合う色を提示してくれます。

NIPPON COLORS

日本っぽい色がまとめられているサイトです。和のテイストのデザインを作る時には必須で活用すべきサイトです。

HELLO COLOR

クリックすると2色のコントラストをランダムで表示してくれます。良いコントラストに出会いたい時に見るとよいでしょう。

Color Supply

補色などを見つけやすくなっているツールです。使いたい色は1つ決まっているけれど、補色に何を使うか決まらない時などに使用するとよいでしょう。

Pigment

彩度と明度をコントロールしながら様々な配色が一覧で見られるツールです。トーンが揃っていると色相が違っていても統一感が出ることが実感できます。

COLORABLE

配色のコントラストがアクセシビリティ上適切かどうかを判断してくれるツールです。「AAA」と表示されればOK、「Fail」ならコントラスト不足なので変更しましょう。