Table of contents
16進数カラーコード完全ガイド
Table of contents
16進数カラーは、ウェブの視覚的な言語です。ウェブページ（またはウェブアプリ）に特定の色を表示させたい場合は、16進法のコードを指定します。
16進数カラーコードって何？
16進数カラーコードは、最大2記号3組で構成される6文字のコードです。1組の要素ごとに、0から255までに相当する値で色を表し、 16進数カラーコードは、最大3組の2記号要素で構成される6記号コードです。1組の要素ごとに、0から255までに相当する値で色を表現します。
- 要素1：赤色の値
- 要素2：緑色の値
- 要素3：青色の値
各要素の値は英数字からなる16進法で2ケタに置き換えられます。例えば、RGBコード（224、105、16）は、16進数カラーコードで“E06910”となります。
なぜ16進数カラーコードを使うのでしょうか？ 複雑でありますが、16進法で数える必要があります。興味がある方は、こちらのページで説明を確認することができます。デザイナーにとっての16進数カラーコードの意味を考えるとするなら、重要なことが2点あります。
なぜ数字だけのコードではなく、英数字による16進法のコードを使うのでしょうか？ なぜなら、数字だけを使った場合、赤、緑、青の各色の値を0から255までで表すことになり、1ケタになることもあれば、2ケタや3ケタになることもあるからです。3色を合わせると、コードが3ケタになることもあれば、9ケタになることもあります。これでは、コードを読み取るシステムはもちろんのこと、コーディングを行う人間も混乱してしまいます。どんなときでも6ケタの英数字にすれば、エラーの可能性を減らすことができます。
16進法カラーコードの3要素
16進数カラーコードは、ディスプレイに表示する色の量を示す値です。2ケタの英数字で、0から255までの色の値を表します。
赤、緑、青のすべてが最小の0の場合、16進数カラーコードは#000000となり、黒を表します。赤、緑、青のすべてが最大の255の場合、16進数カラーコードは#ffffffとなり、白を表します。
16進数で6ケタの英数字を組み合わせると、1,600万通り以上の色を表現することができます。当然ながら、ほとんどの場合は白と黒の中間の色になります。RGBの数値を16進数カラーコードに変換してくれるツールを常に使うようにしましょう。
とはいえ、よく使う16進法カラーコードの色をいくつか覚えておくと便利です。その場でコーダーと一緒にデザインするときにも役立つと思います。
一般的な16進数カラーコード
特定の16進数カラーコード
16進数カラーコードの仕組み
16進数カラーコードは、写真の黎明期から使われてきたRGBカラーモデルをベースにしています。
このモデルの理論は、赤、緑、青の各色の値の組み合わせを変えることで、目に見えるほぼすべての色を作り出すことができるというものです。RGBカラーモデルは、テレビ、デジタルカメラ、ビデオプロジェクタ、さらにはコンピュータや携帯電話の画面にも採用されています。
ウェブやほとんどのデジタルアプリケーションでは、0から255までの値からなるカラースケールが使用されています。ユーザー（またはプログラマー）は、赤、青、緑の表示量をスクリーンに指示します。この組み合わせによって作られる色を、ユーザーは目にすることになります。
使用する色には、自分の好きな色を自由に選ぶことができます。組み合わせ可能な総数は16,777,216通りで、人間の目が実際に識別できる数を超えています。
RGBカラーコードと16進数カラーコードの違い
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進数カラーコードを使う
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: Coolorsは、デザイン作業のスピードを上げるために、ひらめきの提供と機能性を組み合わせた、16進数カラーコード参照ウェブサイト。
人気のパレットを閲覧すれば、他のデザイナーによく見られている配色を知ることができます。アカウントを登録すると、人気の各パレットを個人のお気に入りボックスに保存することができます。
また、パレットジェネレーターを使うと、使用したい色に基づいてパレットをあっという間に作成することもできます。Colorsには、色を“固定”してスペースキーを押すだけで補色を追加生成できる時短機能があり、新しい配色が光の速さで手に入ります。あとは、気になる色が出てくるの待てばOK。
Coolorsは、iOSアプリやAdobeの拡張機能としても提供されています。
16進数カラーコードの色を他のデザイン要素と合わせる
既存のサイトに合わせてデザインする場合や、他のデザイン要素と合わせる必要がある場合は、サイト上で使用する16進数カラーコードの色を把握しましょう。特に目を引くマーケティング資料を作成する場合、優れたカラーピッカーは非常に役に立ちます。ImageColorPickerを使えば、任意の画像をアップロードして、使われている色を16進数カラーコードで示してくれます。
また、GoogleのブラウザであるChromeの拡張機能「ColorPick Eyedropper」を使えば、ウェブページのあらゆる要素の色を16進数カラーコードで確認することができます。すばらしい色使いのウェブサイトを見つけたら、スポイトを使ってその色を確認してみてください。
ウェブサイト用に画像やその他のデザイン要素を選ぶ立場にいる場合、どの画像やデザイン要素がどの色に合うのかわかると、とても効率的です。iStockでは、16進数カラーコードの色でビジュアル素材の検索結果を絞り込みことができます。コードを入力するか、カラーピッカーから選択して、検索キーワードを入力します。すると、入力した色に近い関連画像が表示されます。
16進数カラーコードについて一通り学んだところで、早速、自分のデザインに合う色のビジュアル素材を探してみましょう。
Recommended for you
著作権とライセンス
“著作権フリー”のビジュアルに関するよくある誤解
プロジェクト用に画像を探している際、“著作権フリー”や“ロイヤリティフリー”という言葉を耳にし、それが何を意味するのか疑問に思ったことがあるかもしれません。商業使用として“ロイヤリティフリー”の画像を使えるのでしょうか？ “ロイヤリティフリー”とは、いったいどういう意味なのでしょうか？ そもそも、著作権とは何なのでしょうか？
著作権とライセンス
パブリックドメインの映像：その詳細と使い方
パブリックドメインの映像についての詳細と、次のクリエイティブなプロジェクトでの活用方法を学びましょう。加えて、パブリックドメインの映像よりも有料の映像素材を使用することのメリットをご説明します。
マーケティング
自然な印象でつながりを生み出すビジュアル素材の選び方
不自然な印象を与えるビジュアルを使うと、プロジェクト全体の魅力が阻害されてしまいます。リアルな印象のビジュアル素材を見つけるポイントを押さえて、消費者とのつながりを深めましょう。
Design
デザイン
ウェブサイトの流行の背景のアイデア
グラデーション、テクスチャ、リキッド、映像オプションなど、ウェブサイトの背景デザインの最新ヒントをご紹介します。今日から取り組める具体例をご覧ください。
