paletteカラーピッカー
HEX#00FFFF
RGBrgb(0, 255, 255)
HSLhsl(180, 100%, 50%)
ℹ️ ヘルプ

カラーピッカーは、Webデザインやグラフィック作業に必要なカラーコードを簡単に生成する無料のオンラインツールです。 HEX、RGB、HSL形式でカラーコードをコピーしたり、スポイト機能を使って画面上のどこからでも色を直接抽出したりできます。

色相、彩度、輝度のスライダーを調整して希望の色を正確に選択したり、よく使う色を保存して後で呼び出したりできます。 Webサイトのデザイン、ロゴ作成、プレゼンテーション、CSSスタイリングなど、様々な作業でカラーコードが必要な場合に役立ちます。

使用説明書

カラーピッカー & 変換ツール

カラーピッカーは、デザイナー、開発者、デジタルアーティストのための多目的な色彩ユーティリティです。直感的で反応の良い単一のインターフェース内で、デジタル形式間での色の選択、分析、変換を容易にします。HEX、RGB、HSLのシームレスな同期により、設計と実装(CSS/コード)のギャップを埋めることができます。

カラーモデルの解説

  • HEX (16進数): Webデザインで最も一般的な形式です(例:#FF5733)。赤、緑、青の強さを表す3バイトの16進数コードです。
  • RGB (Red, Green, Blue): デジタル画面で使用される加法混色モデルです。各チャンネルの範囲は0-255です。透明度を含む場合はRGBAと呼ばれます。
  • HSL (Hue, Saturation, Lightness): 人間にとってより直感的な表現です。色相(Hue)は色相環上の角度(0-360)、彩度(Saturation)は色の強さ(0-100%)、輝度(Lightness)は明るさ(0-100%)を表します。プログラムで色のバリエーション(ホバー効果など)を作成するのに理想的です。

機能重視のワークフロー

  • スポイト (Eye Dropper): (Chromium系ブラウザでサポート) 画面上の任意のピクセルから色をサンプリングできます。ブラウザの外や他のアプリケーションからの色も取得可能です。
  • リアルタイム変換: スライダーを動かすと、すべてのテキスト入力(HEX、RGB、HSL)が即座に更新されます。逆に、HEXコードを貼り付けるとスライダーがその位置に移動します。
  • 色履歴: 最近使用した色を自動的に保存し、以前の選択に簡単に戻ることができます。
grid_view
13:46
2025-12-28