16進カラーコードとは？

16進カラーコードは、CSSやほとんどのデザインツールで使われている方法で、色を16進数の数字として表します。#3b82f6では、数字2桁の各ペアが1つのチャンネルを表します。3bは赤、82は緑、f6は青で、それぞれ00（なし）からff（最大）までの範囲です。オプションの4つ目のペアでアルファ値、つまり不透明度を指定できるため、#3b82f6ccは不透明度80%の同じ青色を表します。各ペアで同じ数字が繰り返されるコードは3桁または4桁に短縮できるため、#ff8800は#f80とも表記できます。

ツールの説明

このツールでは、16進カラーコードをペアごとに編集できます。コードを入力または貼り付けるか、色を選択するか、RGB、HSLなどの別の形式の色を貼り付けてから、赤、緑、青、アルファの各ペア、または不透明度を変更し、透明度グリッド上で結果を確認できます。編集した色は、CSS、Android、コードで使用される16進形式で表示され、それぞれすぐにコピーできます。

機能

  • #の有無にかかわらず、3桁、4桁、6桁、8桁の16進コードを編集
  • 各チャンネルを2桁の16進ペアとして変更し、アルファを16進ペアまたはパーセントで指定
  • アルファを維持したまま、色を選択するか、RGB、HSLなどの別の形式の色を貼り付け
  • 市松模様上で透明色をプレビュー
  • 色を6桁のHEX、8桁のHEX、短縮HEX、rgb()またはrgba()、#AARRGGBB、0xAARRGGBBとして取得
  • 16進数の英字を小文字と大文字の間で切り替え
  • ブラウザー上で動作

動作の仕組み

3桁または4桁のコードは、各数字を2回繰り返すことで展開されます。アルファペアがないコードは完全に不透明（ff）として扱われます。チャンネルの入力欄に1桁だけ入力した場合は、その数字の前に0を付けたものとして扱われるため、fは0fになります。不透明度のパーセンテージは、0から255までの最も近いアルファ値に丸められるため、80%はcc（204）になります。各ペアの2つの数字が一致する場合にのみ短縮形式が使用でき、それ以外の場合、そのフィールドは空のままになります。

ヒント

  • CSSではアルファペアを最後に記述します（#RRGGBBAA）が、Androidのカラーリソースと.NETでは先頭に置きます（#AARRGGBB）。そのため、これらの場合はARGBフィールドを選択してください。
  • 通常の6桁コードにするにはアルファをffのままにしてください。8桁およびARGBのフィールドには、完全な形式で表示されます。