無料オンラインカラーピッカー & 形式変換ツール

色を選択し、HEX、RGB、HSL形式をすぐに相互変換できます。Webデザイン、グラフィックデザイン、開発プロジェクト向けにCSS変数、SCSS変数、カラーパレットを書き出せます。50色以上のプリセットとリアルタイム変換に対応した無料カラーピッカーです。

主な機能

カラーピッカー

視覚的なカラー選択
HEX入力対応
リアルタイムプレビュー
ランダムカラー生成
50色以上のプリセット

形式変換

HEXカラーコード
RGB値（0-255）
HSL値（色相・彩度・輝度）
CSS形式文字列
即時変換

CSS変数

CSSカスタムプロパティ
SCSS/Sass変数
すぐ使えるコード
ワンクリックコピー
全形式のバリエーション

エクスポートオプション

.txtでダウンロード
.cssファイルで出力
.scssファイルで保存
JSON形式で出力
複数形式に対応

プリセットパレット

50色以上の厳選カラー
色相別に整理
Material Designカラー
Tailwind CSSカラー
素早く選択

開発者向けツール

全形式をコピー
CSSですぐ使える構文
変数名生成
ランダム生成
ダークモード対応

このカラーピッカーを使う理由

100%無料・制限なし: 登録、広告、制限なしで、色の選択と形式変換を何度でも利用できます。

リアルタイム変換: 色を選ぶとHEX、RGB、HSL値が即座に更新されます。手計算は不要です。

開発ですぐ使える: CSS変数、SCSS変数、JSONエクスポートをプロジェクトにそのまま使えます。

50色以上のプリセット: Material DesignやTailwind CSSの人気カラーにすぐアクセスできます。

プライバシー保護: 色の選択と変換はすべてブラウザ内で行われます。データはアップロードも保存もされません。

ワンクリックコピー: HEX、RGB、HSLなど任意の形式をクリップボードへすぐコピーできます。

カラーピッカーの使い方

色を選択: カラーピッカーをクリックするか、下のプリセットカラーから選びます。
HEXを入力: HEXカラーコードを入力欄へ直接入力または貼り付けることもできます。
変換を確認: HEX、RGB、HSL値がリアルタイムで自動更新されます。
形式をコピー: 任意の形式の「コピー」をクリックしてクリップボードへコピーします。
ダウンロード: プロジェクト用にTXT、CSS、SCSS、JSONファイルとして書き出します。
ランダムカラー: ランダムボタンでインスピレーション用の色を生成できます。

カラー形式を理解する

HEX（16進数）: Webデザインで最も一般的な形式です。#に続く6文字（0-9、A-F）で表し、最初の2文字が赤、次が緑、最後が青を表します。

RGB（赤・緑・青）: 0〜255の3つの値を使う加法混色モデルです。CSSで広く対応し、各チャンネルをプログラムで扱いやすい形式です。

HSL（色相・彩度・輝度）: 人にとって直感的な形式です。色相は色相環の位置、彩度は色の強さ、輝度は明るさを表し、色違いを作りやすくなります。

カラー形式の使い分け

HEX - 最適な用途: HTML/CSS、FigmaやPhotoshopなどのデザインツール、短く共有しやすい色コード

RGB - 最適な用途: JavaScriptやプログラミング、画像処理、透明度付きのCSS rgba()、画面表示向け

HSL - 最適な用途: 明るい/暗いバリエーション作成、テーマ生成、色関係の理解、アクセシブルなデザイン調整

よくある用途

Web開発: Webサイトの色選び、ブランドカラーのCSS変換、一貫したテーマ用のCSS変数作成、デザインモックとの色合わせに使えます。

グラフィックデザイン: FigmaからPhotoshopなどツール間の色変換、ブランドガイドラインの正確な色コード確認、カラーパレット作成に役立ちます。

ブランドデザイン: プライマリ、セカンダリ、アクセントカラーを複数形式で定義し、ブランドスタイルガイドを作成できます。

UI/UXデザイン: アクセシブルな配色、ダークモード配色、ホバーや無効状態などの色バリエーション作成に使えます。

アプリ開発: WebカラーをAndroid XMLやiOS Swiftなどモバイルアプリ向け形式へ変換し、テーマファイルを作成できます。

SNS: ブランドの一貫性を保つ色コード取得、色付き投稿、チームとのパレット共有に便利です。

こんな人に最適

Web開発者・デザイナー
グラフィックデザイナー
UI/UXデザイナー
ブランドデザイナー
フロントエンド開発者
モバイルアプリ開発者

デジタルアーティスト
マーケティング担当者
SNS運用担当者
デザインを学ぶ学生
コンテンツ制作者
色を扱うすべての人

カラー変換例

Blue: #3b82f6 = rgb(59, 130, 246) = hsl(217, 91%, 60%)

Red: #ef4444 = rgb(239, 68, 68) = hsl(0, 84%, 60%)

Green: #22c55e = rgb(34, 197, 94) = hsl(142, 71%, 45%)

Purple: #a855f7 = rgb(168, 85, 247) = hsl(271, 91%, 65%)

Orange: #f97316 = rgb(249, 115, 22) = hsl(25, 95%, 53%)

CSS変数のベストプラクティス

意味のある命名: --blueや--color1ではなく、--primary-color、--accent-color、--text-colorのような意味のある名前を使います。
色のバリエーション: --primary-light、--primary、--primary-darkのように明暗バリエーションを定義します。
コンポーネント別: --button-bg、--link-color、--card-borderなど、保守しやすいコンポーネント変数を作ります。
ダークモード: CSS変数を使うと、すべてのスタイルを書き換えずにroot変数だけで切り替えられます。
フォールバック値: 互換性のため color: var(--primary-color, #3b82f6) のようにフォールバックを指定します。
Rootスコープ: :root {} にグローバルカラーを定義すると、スタイルシート全体から利用できます。
SCSS連携: SCSS変数とCSSカスタムプロパティを組み合わせると柔軟性が高まります。

カラーパレットの扱い方

プライマリカラー: メインブランドカラーを定義し、UIで一貫して使える明暗のバリエーションを作成します。

セカンダリカラー: 補色やアクセントカラーを選び、CTAや視覚的な強調に使います。

ニュートラルカラー: テキスト、罫線、背景用のグレーを選びます。HSLなら輝度調整でグレースケールを作りやすくなります。

セマンティックカラー: 成功、警告、エラー、情報などUIフィードバック用の色を定義します。

色選びのプロ向けヒント

アクセシビリティを確認: テキストと背景のコントラストが十分か確認します（WCAG AAは4.5:1、AAAは7:1）。
プリセットを活用: Material DesignやTailwindのプリセットから始めると調和した配色を作りやすくなります。
ランダムで着想: 迷ったときはランダムカラーで新しいアイデアを得られます。
複数形式で保存: JSONはドキュメント、CSSはWeb、SCSSはプリプロセッサ向けに便利です。
ブランドの一貫性: すべてのブランドカラーを1つのファイルに書き出し、チームで共有しましょう。
HSLでバリエーション: HとSを保ち、Lだけを調整すると明暗バリエーションを作りやすいです。
CSS変数をコピー: テーマ管理と保守のためにCSS変数形式を活用しましょう。
実際の文脈で確認: ピッカー上だけでなく、実際のデザインやWebサイトで色を確認してください。

デザインにおける色彩心理

Blue (#3b82f6): 信頼、専門性、安定。テック、金融、医療サイトでよく使われます。

Red (#ef4444): エネルギー、情熱、緊急性。CTA、セール、食品、エンタメに使われます。

Green (#22c55e): 成長、健康、自然。環境、ウェルネス、成功表示に向いています。

Purple (#a855f7): 高級感、創造性、知恵。美容、クリエイティブ、プレミアムブランドに合います。

Orange (#f97316): 親しみ、安心感、明るさ。SNS、食品、CTAに向いています。

Yellow (#fbbf24): 楽観、明快さ、温かさ。教育、子ども向け、警告に使われます。

形式間の変換

HEXからRGB: ツールが自動変換します。手動ではHEXを2文字ずつ分け、16進数から10進数へ変換します。

RGBからHEX: 0〜255の各値を00〜FFの16進数へ変換し、#を付けて結合します。

RGBからHSL: 最大/最小RGB値、主色相、彩度、輝度を計算します。ツールなら即時変換できます。

HSLからRGB: 色相範囲ごとに異なる逆変換です。このピッカーが自動で処理します。

エクスポート形式ガイド

TXT: すべてのカラー形式を含むプレーンテキスト。参照や共有に便利です。

CSS: :root内のCSSカスタムプロパティとして出力します。スタイルシートへそのまま貼り付けられます。

SCSS: $付きのSass/SCSS変数です。プリプロセッサのワークフローに最適です。

JSON: すべてのカラー情報を含む構造化データです。設定ファイルやテーマ生成に適しています。

デザインシステム連携

Tailwind CSS: プリセットにはTailwindカラーが含まれます。カスタムテーマ向けにCSS変数として書き出せます。
Material Design: Material Designのカラーパレットを含み、AndroidやMaterial UIに便利です。
Bootstrap: BootstrapのSCSS変数へ変換してテーマをカスタマイズできます。
Figma/Sketch: HEXコードはデザインツールで直接使えます。デザインから開発への受け渡しに便利です。
React/Vue: コンポーネントライブラリのテーマオブジェクト向けにJSONで書き出せます。
CSS-in-JS: styled-componentsやEmotionで透明度対応のRGB値を活用できます。

キーボードショートカットとクイック操作

クイックコピー: 任意の「コピー」ボタンで、そのカラー形式をすぐクリップボードへコピーします。

プリセット選択: プリセット色をクリックすると即座に選択・変換されます。

ランダムカラー: ランダムボタンでインスピレーション用の色を素早く生成できます。

直接入力: HEXコードを入力欄へ直接貼り付けると即座に変換されます。

プライバシーとセキュリティ

色の選択と形式変換はすべてJavaScriptを使ってブラウザ内で実行されます。色、パレット、データがサーバーへアップロード、保存、第三者へ送信されることはありません。デザイン作業と色の選択はデバイス上で完全にプライベートに保たれます。

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

色を選択

プリセットカラー

カラー値

カラーピッカーについて

色の選択と変換の完全ガイド