カラーピッカー - HEX・RGB・HSLコードを取得 | Morph

色を選んで、コードを取得

Morphのカラーピッカーなら、好きな色を目で見て選び、実際によく使う形式ですぐにコードを確認できます。HEX（`#3A7BD5`）、RGB（`rgb(58, 123, 213)`）、HSL（`hsl(214, 64%, 53%)`）。カラーフィールド上をドラッグし、色相スライダーで微調整、値をそのままCSSやデザインファイル、必要な場所にコピーできます。

3つの形式、1つの正解

これら3つのコードはすべて同じ色を表していて、書き方が違うだけです。それぞれに役割があります。

HEXは最もコンパクトな形式で、ほとんどのCSSやデザインツールに貼り付ける際に使います。
RGBは赤・緑・青の各チャンネル（0〜255）を表し、1つのチャンネルだけを調整したいときや、個別の値を必要とするコードを扱うときに便利です。
HSLは色相・彩度・明度を表し、色を少し明るくしたり、彩度を落として落ち着かせたり、試行錯誤せずに近い色相へずらしたりしたいときに、最も直感的な形式です。

色をどのように変更しても、3つのコードは常に同期しているので、プロジェクトに必要な形式をそのまま使えます。

実際のワークフローのために

デザイナーはパレットを決め、正確な値をデザインファイルやスタイルガイドにそのままコピーするために使います。フロントエンド開発者は、ボタン用のHEXを取得したり、デザイナーが渡したRGBをHSLに変換してホバーステートを作ったりするのに使います。テーマや、グラフの色、メールテンプレートを調整する人も、狙い通りの色合いにたどり着いて、ワンクリックでコピーできます。HSLがHEXのすぐ隣にあるため、ベースカラーから明るいバリエーションや暗いバリエーションを作るのが、HEXの数字を目分量で調整するよりずっと簡単です。

ブラウザ内で、プライベートに動作

このカラーピッカーは純粋にブラウザ内で動作するコードで、色の計算もインターフェースも、すべてお使いのデバイス上で処理されます。アップロードもアカウントも不要で、サーバーに送信されるデータは一切ありません。読み込みは速く、ページを一度開けばオフラインでも動作し続けます。色を選んでコードを計算する処理に、ネットワーク接続はそもそも必要ないからです。

実用的な補足

HEXの値をコピーすれば、そのままCSSに貼り付けて使えます。透明度のある色が必要な場合は、RGBに変換してコード内でアルファチャンネル（`rgba(...)`）を追加してください。統一感のあるパレットを作るには、ベースとなる色を1つ選び、HSLの明度（Lightness）の値を使って、色相と彩度は固定したまま明度だけを上下させることで、ティントとシェードを生成します。こうすることで、色の集まりが寄せ集めではなく、ひとつのファミリーのようにまとまって見えます。

使い方

色を選ぶ — カラーフィールド内をドラッグして彩度と明度を設定し、色相スライダーでベースカラーを設定します。
コードを確認する — HEX、RGB、HSLの値は動かすたびに連動して更新されるので、現在の色の3つの値を常に確認できます。
必要な形式をコピーする — ほとんどのCSSやデザイン作業にはHEXを、チャンネルを調整するにはRGBを、明るい・暗いバリエーションを作るにはHSLをコピーします。
プロジェクトに貼り付ける — 値をそのままスタイルシートやデザインツール、テーマ設定に貼り付けます。

よくある質問

どんなカラー形式が得られますか？

選んだ色ごとにHEX、RGB、HSLを表示し、それぞれ常に同期しているので、プロジェクトに必要な形式をそのままコピーできます。

HEXではなくHSLを使うのはなぜですか？

HSLを使うと、明度を上げてティントにしたり、下げてシェードにしたり、色相をずらしたりと、HEXの数字を推測することなく直感的に色を調整できます。

透明度のある色を取得できますか？

色を選んでRGBの値をコピーし、コード内で`rgba(...)`としてアルファチャンネルを追加すれば、好きな透明度を設定できます。

データはどこかに送信されますか？

いいえ。このカラーピッカーはすべてブラウザ内で動作します。アップロードは行われず、サーバーに送信されるデータもありません。一度読み込めばオフラインでも動作します。

統一感のあるパレットを作るには？

ベースとなる色を1つ選び、そのHSLの値を使います。色相と彩度は固定したまま明度だけを上下させることで、ひとまとまりに感じられるティントとシェードを作れます。