#1カラーピッカー
#2カラーコード変換
カラーコードとは
カラーコードは、色をコンピューターが扱える文字や数字で表したものです。同じ色でも、用途によっていくつかの書き方があります。
たとえば真っ赤な色は、HEXという書き方では #FF0000、RGBという書き方では rgb(255, 0, 0) と表します。見た目はまったく同じ色ですが、使う場所によって求められる形式が違うため、変換が必要になります。
書き方の違いと使い分け
HEXとRGBは同じ情報を別の書き方にしただけなので、いつでも相互に変換できます。HSLとHSBは「色味を保ったまま明るさだけ変えたい」といった調整がしやすいのが特徴で、配色を考えるときに便利です。
| 形式 | 書き方の例 | 主な用途 |
|---|---|---|
| HEX | #2F6BFF | ウェブサイト制作で最もよく使われる |
| RGB | rgb(47, 107, 255) | 光の三原色。透明度を加えることもできる |
| HSL | hsl(222, 100%, 59%) | 色味・鮮やかさ・明るさで指定。調整しやすい |
| HSB | hsb(222, 82%, 100%) | デザインソフトでよく見かける形式 |
配色を決めるときのコツ
- 使う色は3つ程度に絞る。多すぎるとまとまりがなくなります
- 基準の色を1つ決め、その色味を保ったまま明るさだけ変えて濃淡を作る
- 文字と背景の明るさの差を十分にとる。似た明るさだと読みにくくなります
- 彩度を少し下げると、落ち着いた印象になります
- 画面の設定によって色の見え方は変わるため、複数の環境で確認する
よくある質問
#3カラーコード変換とは？
カラーコード変換とは、色を表す形式（HEX、RGB、HSL、HSBなど）を相互に変換することです。Webデザインやアプリ開発では場面に応じて異なるカラーコード形式を使い分ける必要があります。
HEX（16進数カラーコード）について
HEXコードは #RRGGBB の形式で色を表します。CSSで最も広く使われる形式で、Rが赤、Gが緑、Bが青の成分を16進数（00〜FF）で表現します。3桁の省略形（例: #fff = #ffffff）にも対応しています。
RGB / HSL / HSBの違い
RGB は赤・緑・青の光の三原色を0〜255の数値で指定する加法混色モデルです。HSL は色相（Hue）・彩度（Saturation）・明度（Lightness）で色を定義し、直感的に色の明暗を調整しやすいのが特徴です。HSB（HSVとも呼ばれる）は色相・彩度・明るさ（Brightness/Value）のモデルで、PhotoshopやFigmaなどのデザインツールで広く使われています。
EyeDropper API（スポイト機能）について
EyeDropper APIはブラウザのネイティブ機能で、画面上の任意のピクセルから色を取得できます。Chrome・Edgeなどで対応しており、Webページだけでなくデスクトップ上のあらゆる色をスポイトで取得できます。非対応ブラウザ（Firefox・Safariなど）ではスポイトボタンは表示されません。