# カラーピッカー

> 無料のカラーピッカー。色を視覚的に選ぶか16進コードで指定すると、HEX・RGB・HSL値が表示され、ワンクリックでコピーできます。シェードとティントも取得できます。

ビジュアルピッカーで任意の色を選ぶか、16進コードを入力してください。HEX・RGB・HSL値がワンクリックでコピーできるほか、5段階の暗いシェードと5段階の明るいティントも表示されます。

*Interactive tool: enter your values at https://toollantern.win/ja/karaa-pikkaa/ and results update instantly in your browser.*

## このツールでできること

カラーピッカーは1つの色を3つの形式で同時に表示します。Web用のHEX、画面用のRGB、デザイン作業用のHSLです。任意の値をクリックするとコピーできます。値の下には関連する10色、つまり5つのシェード（同じ色相を段階的に暗くしたもの）と5つのティント（同じ色相を段階的に明るくしたもの）が表示されます。

## シェードとティントの作り方

ツールは選んだ色をHSLに変換し、シェードごとに**明度**を10ポイントずつ下げ、ティントごとに10ポイントずつ上げます。色相と彩度は（ほぼ）固定です。ティントでは彩度も少し下げるため、明るい段階が白っぽくなりすぎません。

## 計算例

**#3B82F6**（ミディアムブルー）を選ぶと、値は**rgb(59, 130, 246)**、**hsl(217, 91%, 60%)**です。1段階暗いシェードは**#1D66E5**、1段階明るいティントは**#6CA3F8**です。

## 形式の使い分け

CSSやHTMLではHEX、APIやツールがチャンネル値を求める場合はRGB、感覚的に色を調整したい場合はHSLを使います（色相を動かすと色の系統が変わり、明度を動かすとダークモード用のバリエーションが作れます）。

## 注意点

ピッカーはsRGB色空間で動作し、標準的なWebや画面の用途をカバーします。Display P3のような広色域形式には対応していません。

## よくある質問
### カラーコードをコピーするには？

HEX・RGB・HSLの値や、シェード・ティントのスウォッチをクリックしてください。クリップボードに即座にコピーされ、そのまま貼り付けられます。

### HEX・RGB・HSLの違いは何ですか？

同じ色を3つの方法で表したものです。HEXはWeb用のコンパクトな表記（#RRGGBB）です。RGBは赤・緑・青のチャンネルを0〜255で表します。HSLは色相（色相環上の位置）、彩度（鮮やかさ）、明度を表します。

### シェードとティントとは何ですか？

シェードは色を黒方向に混ぜたもの（暗く）、ティントは白方向に混ぜたもの（明るく）です。ホバー状態、グラデーション、階層のあるインターフェースなどに使われます。

### 16進コードで色を指定できますか？

はい。16進コード入力欄に3桁または6桁のコード（#の有無は不問）を入力すると、ピッカー・値・シェードが連動して更新されます。

---
Interactive version: https://toollantern.win/ja/karaa-pikkaa/