946201038, xxmmxx

16進数カラーは、ウェブの視覚的な言語です。ウェブページ（またはウェブアプリ）に特定の色を表示させたい場合は、16進法のコードを指定します。

16進数カラーコードって何？

1215017532,VladSt

16進数カラーコードは、2文字3組で構成される6文字のコードです。1組の要素ごとに、0から255までに相当する値で色を表現します。

• 要素1：赤色の値
• 要素2：緑色の値
• 要素3：青色の値

各要素の値は英数字からなる16進法で2ケタに置き換えられます。例えば、RGBコード（224、105、16）は、16進数カラーコードで“E06910”となります。

なぜ16進数カラーコードを使うのでしょうか？ 複雑ですし、16進法で数える必要があります。興味がある方は、こちらのページで説明を確認することができます。デザイナーにとっての16進数カラーコードの意味を考えるとするなら、重要なことが2点あります。

• 16進数カラーコードを使用すると、人間の目が知覚できると考えられている範囲を超えて、1,600万以上の固有色を表示することができます。
• カラーピッカーや変換ツールを使って、16進数カラーコードを生成することができます。

なぜ数字だけのコードではなく、英数字による16進法のコードを使うのでしょうか？ なぜなら、数字だけを使った場合、赤、緑、青の各色の値を0から255までで表すことになり、1ケタになることもあれば、2ケタや3ケタになることもあるからです。3色を合わせると、コードが3ケタになることもあれば、9ケタになることもあります。これでは、コードを読み取るシステムはもちろんのこと、コーディングを行う人間も混乱してしまいます。どんなときでも6ケタの英数字にすれば、エラーの可能性を減らすことができます。

16進法カラーコードの3要素

525330557,Thoth_Adan

16進数カラーコードは、ディスプレイに表示する色の量を示す値です。2ケタの英数字で、0から255までの色の値を表します。

赤、緑、青のすべてが最小の0の場合、16進数カラーコードは#000000となり、黒を表します。赤、緑、青のすべてが最大の255の場合、16進数カラーコードは#ffffffとなり、白を表します。

16進数で6ケタの英数字を組み合わせると、1,600万通り以上の色を表現することができます。当然ながら、ほとんどの場合は白と黒の中間の色になります。RGBの数値を16進数カラーコードに変換してくれるツールを常に使うようにしましょう。

とはいえ、よく使う16進法カラーコードの色をいくつか覚えておくと便利です。その場でコーダーと一緒にデザインするときにも役立つと思います。

一般的な16進数カラーコード

色	赤色	16進数カラーコード
黒色	(0, 0, 0)	#000000
青色	(0, 0, 255)	#0000FF
灰色	(128, 128, 128)	#808080
緑色	(0, 128, 0)	#008000
紫色	(128, 0, 128)	#800080
赤色	(255, 0, 0)	#FF0000
白色	(255, 255, 255)	#FFFFFF

特定の16進数カラーコード

色	RGB	16進数カラーコード	用途
アリスブルー	(240, 248, 255)	#F0F8FF	ECサイトや企業サイトで使うかすかな背景
コーラル	(255, 127, 80)	#FF7F50	落ち着いたアクセントカラー
ファイアブリック	(178, 34, 34)	#B22222	激しいアクセントカラー
ホットピンク	(255, 105, 180)	#FF69B4	遊び心のあるアクセントカラー
レモンシフォン	(255, 250, 205)	#FFFACD	結婚式サイトや個人サイトで使うロマンチックな背景

16進数カラーコードの仕組み

1226241649,Selman Keles

16進数カラーコードは、写真の黎明期から使われてきたRGBカラーモデルをベースにしています。

このモデルの理論は、赤、緑、青の各色の値の組み合わせを変えることで、目に見えるほぼすべての色を作り出すことができるというものです。RGBカラーモデルは、テレビ、デジタルカメラ、ビデオプロジェクタ、さらにはコンピュータや携帯電話の画面にも採用されています。

ウェブやほとんどのデジタルアプリケーションでは、0から255までの値からなるカラースケールが使用されています。ユーザー（またはプログラマー）は、赤、青、緑の表示量をスクリーンに指示します。この組み合わせによって作られる色を、ユーザーは目にすることになります。

使用する色には、自分の好きな色を自由に選ぶことができます。組み合わせ可能な総数は16,777,216通りで、人間の目が実際に識別できる数を超えています。

RGBカラーコードと16進数カラーコードの違い

1221544644,devastudios

16進数カラーコードがプログラマーに好まれるのは、予測可能だからです。どんな色であっても、6ケタのコードで表すことができます。一方、RGBカラーコードは3ケタから9ケタまであります。

ウェブデザインでは、必ずしも16進法のコードを使わなければならないわけではありません。HTMLでページをコーディングする場合は、RGBの値や色の名前を使用することもできます。

例えば、ウェブページにアクアマリンの背景をコーディングする場合、HTMLでは次のようになります。

• アクアマリンの16進数カラーコード：<div style=”background-color:#7FFFD4″></div>
• アクアマリンのRGBコード：<div style=”background-color:rgb(127, 255, 212)”></div>
• アクアマリンのカラーネーム：<div style=”background-color:aquamarine”></div>

名前やRGBコードを指定できるからといって、そうしなければならないわけではありません。制作作業でのミスを減らすには、円形の16進数カラーピッカーや変換ツールを使用して、必要な16進数カラーコードを生成するようにしましょう。こうすることで、コーダーが自分で色を変換する必要がなくなり、せっかくの豪華なウェブページを見苦しいものにしてしまう可能性を減らすことができます。

16進数カラーコードを使う

1203440092,Designer

Adobe Illustratorや印刷物で色を扱うことに慣れている人が、ウェブで16進数カラーコードを扱うには、少し調整が必要になります。ここでは、制作をうまく進めるために知っておくべき3つの点を紹介します。

カラーバンディングに注意する

16,777,216色の組み合わせが可能な16進数カラーコードは、コントラストの効いた色を数多く選択できます。ただし、どのピクセルも固有の色を表示する必要があるため、16進数カラーコードでは、複数の異なる色の濃淡を混ぜることができません。

ウェブデザイナーが16進数カラーコードを使ってグラデーションを作成しようとしても、期待通りの結果が得られないことがあります。濃淡が混ざらず、帯状に色の違いがはっきりと表示されてしまうからです（これを、カラーバンディングと呼びます）。

カラーバンディングが起こりやすいのは、何百万色もの色を表示できない古い機器を使用している場合です。現行のCSSでは、グラデーションをプログラムすることで、カラーバンディングの問題を解消することができます。最近の画面では、空や虹などの自然なグラデーションを撮影した写真でカラーバンディングがよく見かけられます。これは、肉眼で見える何百万もの色を、ファイル容量を確保するために圧縮したことで発生しています。

16進数カラーコードの色で時間を節約する

独自のデザインをその場で行う際、1,600万種類もの色の中から補色を選ぶのは大変な作業ですが、ありがたいことに、16進法カラーコードで特定の色の組み合わせをまとめたウェブサイトがあります。

Color-Hex Color Palettes：デザイナーたちが16進数カラーコードで作成した何千もの色の組み合わせを閲覧／検索することができます。

閲覧するには、名前のついたパレットを、ひとつずつ見ていきます。すべてのパレットには、6色が含まれており、そのスタイルを示す名前も付いています。各色の16進数カラーコードもできるようになっています。デザイナーの名前をクリックすると、そのデザイナーが手がけた他のパレットを見ることができます。

Color-Hex Color Palettesは、16進数カラーコードを使う際にアイデアを提供してくれるすてきなウェブサイトです。

Coolors: デザイン作業のスピードを上げるために、ひらめきの提供と機能性を組み合わせた、16進数カラーコード参照ウェブサイト。

人気のパレットを閲覧すれば、他のデザイナーによく見られている配色を知ることができます。アカウントを登録すると、人気の各パレットを個人のお気に入りボックスに保存することができます。

また、パレットジェネレーターを使うと、使用したい色に基づいてパレットをあっという間に作成することもできます。Colorsには、色を“固定”してスペースキーを押すだけで補色を追加生成できる時短機能があり、新しい配色が光の速さで手に入ります。あとは、気になる色が出てくるの待てばOK。

Coolorsは、iOSアプリやAdobeの拡張機能としても提供されています。

16進数カラーコードの色を他のデザイン要素と合わせる

既存のサイトに合わせてデザインする場合や、他のデザイン要素と合わせる必要がある場合は、サイト上で使用する16進数カラーコードの色を把握しましょう。そのためには、優れたカラーピッカーが欠かせません。ImageColorPickerを使えば、任意の画像をアップロードして、使われている色を16進数カラーコードで示してくれます。

また、GoogleのブラウザであるChromeの拡張機能「ColorPick Eyedropper」を使えば、ウェブページのあらゆる要素の色を16進数カラーコードで確認することができます。すばらしい色使いのウェブサイトを見つけたら、スポイトを使ってその色を確認してみてください。

ウェブサイト用に画像やその他のデザイン要素を選ぶ立場にいる場合、どの画像やデザイン要素がどの色に合うのかわかると、とても効率的です。iStockでは、16進数カラーコードの色でビジュアル素材の検索結果を絞り込みことができます。コードを入力するか、カラーピッカーから選択して、検索キーワードを入力します。すると、入力した色に近い関連画像が表示されます。

16進数カラーコードについて一通り学んだところで、早速、自分のデザインに合う色のビジュアル素材を探してみましょう。