カラーピッカー
色を選択してHEX、RGB、HSLコードを取得
ブラウザで動作
HEX
#3B82F6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)クイックカラー
カラーピッカーとは？
カラーピッカーは、色を選び、HEX、RGB、HSLなど各種形式のカラーコードを取得できるオンラインツールです。デザイナー、開発者、プロジェクトで色を扱う方に便利です。
使用例
- ウェブサイトやアプリのデザイン用に色を選択
- CSS用のHEX、RGB、HSLコードを取得
- ブランドやプロジェクトに合う色を探す
- 異なる色形式の間で変換
いつ使う？
色の選択、カラーコードの取得、色形式の変換が必要なときにご利用ください。Webデザイナー、UI/UXデザイナー、フロントエンド開発者におすすめです。
例
ブランドのブルー
入力
#1A6CF5
出力
- HEX
- #1A6CF5
- RGB
- rgb(26, 108, 245)
- HSL
- hsl(218, 92%, 53%)
暖かみのあるアクセントカラー
入力
#F4A261
出力
- HEX
- #F4A261
- RGB
- rgb(244, 162, 97)
- HSL
- hsl(27, 87%, 67%)
よくある質問
HEX、RGB、HSL の違いは何ですか？
同じ色を異なる方法で表したものです。HEX は CSS で使われる簡潔な形式、RGB は赤・緑・青の値を 0〜255 で表したもの、HSL は色相・彩度・明度を使う形式で、明るい色合いや暗い色合いを簡単に作れます。
カラーコードはどうやってコピーしますか？
色を選び、必要な HEX、RGB、HSL の値の横にあるコピーボタンを使います。
HSL から戻すと色がわずかに変わることがあるのはなぜですか？
HSL の値は整数に丸められるため、HEX に戻すと1段階ずれることがあります。