• Omnilude Toolsオンラインツールコレクション
  • ホーム
オンラインツール
  • 開発者ツール
    • UUID生成器
    • タイムスタンプ変換
    • エンコーダー/デコーダー
    • カラーピッカー
    • 正規表現テスター
    • データ変換
    • ハッシュ生成
    • Cron式
    • 命名規則変換
    • JWTデバッガー
    • ブラウザ情報
    • 進法変換
    • メタタグ生成ツール
    • パスワード
  • テキストツール
  • 便利ツール
  • 時間ツール
  • 計算ツール

カラーピッカー

カラーコード変換

更新

最近反映された改善

新規
テーマ切替
ライトモード
ダークモード
システム設定

色を選択

R
G
B

カラー値

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)

カラーパレット

クリックで選択・コピー
base

white

#FFFFFF

black

#000000

slate

slate-50

#F8FAFC

slate-100

#F1F5F9

slate-200

#E2E8F0

slate-300

#CBD5E1

slate-400

#94A3B8

slate-500

#64748B

slate-600

#475569

slate-700

#334155

slate-800

#1E293B

slate-900

#0F172A

slate-950

#020617

gray

gray-50

#F9FAFB

gray-100

#F3F4F6

gray-200

#E5E7EB

gray-300

#D1D5DB

gray-400

#9CA3AF

gray-500

#6B7280

gray-600

#4B5563

gray-700

#374151

gray-800

#1F2937

gray-900

#111827

gray-950

#030712

zinc

zinc-50

#FAFAFA

zinc-100

#F4F4F5

zinc-200

#E4E4E7

zinc-300

#D4D4D8

zinc-400

#A1A1AA

zinc-500

#71717A

zinc-600

#52525B

zinc-700

#3F3F46

zinc-800

#27272A

zinc-900

#18181B

zinc-950

#09090B

neutral

neutral-50

#FAFAFA

neutral-100

#F5F5F5

neutral-200

#E5E5E5

neutral-300

#D4D4D4

neutral-400

#A3A3A3

neutral-500

#737373

neutral-600

#525252

neutral-700

#404040

neutral-800

#262626

neutral-900

#171717

neutral-950

#0A0A0A

stone

stone-50

#FAFAF9

stone-100

#F5F5F4

stone-200

#E7E5E4

stone-300

#D6D3D1

stone-400

#A8A29E

stone-500

#78716C

stone-600

#57534E

stone-700

#44403C

stone-800

#292524

stone-900

#1C1917

stone-950

#0C0A09

red

red-50

#FEF2F2

red-100

#FEE2E2

red-200

#FECACA

red-300

#FCA5A5

red-400

#F87171

red-500

#EF4444

red-600

#DC2626

red-700

#B91C1C

red-800

#991B1B

red-900

#7F1D1D

red-950

#450A0A

orange

orange-50

#FFF7ED

orange-100

#FFEDD5

orange-200

#FED7AA

orange-300

#FDBA74

orange-400

#FB923C

orange-500

#F97316

orange-600

#EA580C

orange-700

#C2410C

orange-800

#9A3412

orange-900

#7C2D12

orange-950

#431407

amber

amber-50

#FFFBEB

amber-100

#FEF3C7

amber-200

#FDE68A

amber-300

#FCD34D

amber-400

#FBBF24

amber-500

#F59E0B

amber-600

#D97706

amber-700

#B45309

amber-800

#92400E

amber-900

#78350F

amber-950

#451A03

yellow

yellow-50

#FEFCE8

yellow-100

#FEF9C3

yellow-200

#FEF08A

yellow-300

#FDE047

yellow-400

#FACC15

yellow-500

#EAB308

yellow-600

#CA8A04

yellow-700

#A16207

yellow-800

#854D0E

yellow-900

#713F12

yellow-950

#422006

lime

lime-50

#F7FEE7

lime-100

#ECFCCB

lime-200

#D9F99D

lime-300

#BEF264

lime-400

#A3E635

lime-500

#84CC16

lime-600

#65A30D

lime-700

#4D7C0F

lime-800

#3F6212

lime-900

#365314

lime-950

#1A2E05

green

green-50

#F0FDF4

green-100

#DCFCE7

green-200

#BBF7D0

green-300

#86EFAC

green-400

#4ADE80

green-500

#22C55E

green-600

#16A34A

green-700

#15803D

green-800

#166534

green-900

#14532D

green-950

#052E16

emerald

emerald-50

#ECFDF5

emerald-100

#D1FAE5

emerald-200

#A7F3D0

emerald-300

#6EE7B7

emerald-400

#34D399

emerald-500

#10B981

emerald-600

#059669

emerald-700

#047857

emerald-800

#065F46

emerald-900

#064E3B

emerald-950

#022C22

teal

teal-50

#F0FDFA

teal-100

#CCFBF1

teal-200

#99F6E4

teal-300

#5EEAD4

teal-400

#2DD4BF

teal-500

#14B8A6

teal-600

#0D9488

teal-700

#0F766E

teal-800

#115E59

teal-900

#134E4A

teal-950

#042F2E

cyan

cyan-50

#ECFEFF

cyan-100

#CFFAFE

cyan-200

#A5F3FC

cyan-300

#67E8F9

cyan-400

#22D3EE

cyan-500

#06B6D4

cyan-600

#0891B2

cyan-700

#0E7490

cyan-800

#155E75

cyan-900

#164E63

cyan-950

#083344

sky

sky-50

#F0F9FF

sky-100

#E0F2FE

sky-200

#BAE6FD

sky-300

#7DD3FC

sky-400

#38BDF8

sky-500

#0EA5E9

sky-600

#0284C7

sky-700

#0369A1

sky-800

#075985

sky-900

#0C4A6E

sky-950

#082F49

blue

blue-50

#EFF6FF

blue-100

#DBEAFE

blue-200

#BFDBFE

blue-300

#93C5FD

blue-400

#60A5FA

blue-500

#3B82F6

blue-600

#2563EB

blue-700

#1D4ED8

blue-800

#1E40AF

blue-900

#1E3A8A

blue-950

#172554

indigo

indigo-50

#EEF2FF

indigo-100

#E0E7FF

indigo-200

#C7D2FE

indigo-300

#A5B4FC

indigo-400

#818CF8

indigo-500

#6366F1

indigo-600

#4F46E5

indigo-700

#4338CA

indigo-800

#3730A3

indigo-900

#312E81

indigo-950

#1E1B4B

violet

violet-50

#F5F3FF

violet-100

#EDE9FE

violet-200

#DDD6FE

violet-300

#C4B5FD

violet-400

#A78BFA

violet-500

#8B5CF6

violet-600

#7C3AED

violet-700

#6D28D9

violet-800

#5B21B6

violet-900

#4C1D95

violet-950

#2E1065

purple

purple-50

#FAF5FF

purple-100

#F3E8FF

purple-200

#E9D5FF

purple-300

#D8B4FE

purple-400

#C084FC

purple-500

#A855F7

purple-600

#9333EA

purple-700

#7E22CE

purple-800

#6B21A8

purple-900

#581C87

purple-950

#3B0764

fuchsia

fuchsia-50

#FDF4FF

fuchsia-100

#FAE8FF

fuchsia-200

#F5D0FE

fuchsia-300

#F0ABFC

fuchsia-400

#E879F9

fuchsia-500

#D946EF

fuchsia-600

#C026D3

fuchsia-700

#A21CAF

fuchsia-800

#86198F

fuchsia-900

#701A75

fuchsia-950

#4A044E

pink

pink-50

#FDF2F8

pink-100

#FCE7F3

pink-200

#FBCFE8

pink-300

#F9A8D4

pink-400

#F472B6

pink-500

#EC4899

pink-600

#DB2777

pink-700

#BE185D

pink-800

#9D174D

pink-900

#831843

pink-950

#500724

rose

rose-50

#FFF1F2

rose-100

#FFE4E6

rose-200

#FECDD3

rose-300

#FDA4AF

rose-400

#FB7185

rose-500

#F43F5E

rose-600

#E11D48

rose-700

#BE123C

rose-800

#9F1239

rose-900

#881337

rose-950

#4C0519

カラーフォーマット

HEX

#RRGGBB形式。CSSで最も一般的

RGB

赤、緑、青（0-255）

HSL

色相、彩度、明度。直感的な色調整

HSV/HSB

色相、彩度、明度。グラフィックツールで使用

OKLCH

知覚的に均一な最新のCSSカラースペース

RGBA/HSLA

アルファ（透明度）チャンネルを含む

カラーピッカーとは？

カラーピッカー(Color Picker)は、様々なカラーモデル間のコード変換と、視覚的な色選択ができるオンラインツールです。Web開発、UI/UXデザイン、グラフィックデザインなどでは正確なカラーコードが不可欠です。本ツールはHEX、RGB、HSL、HSV、OKLCHなど主要な色形式をすべてサポートし、直感的なカラースライダーとパレットで色を探索してコードを即座にコピーできます。アルファ(透明度)チャンネルにも対応しており、半透明色の作業も可能です。

  • HEX、RGB、HSL、HSV、OKLCH 5つのカラーフォーマット相互変換
  • 直感的なカラースライダーおよびカラーエリア選択
  • アルファ（透明度）チャンネル調整をサポート
  • ワンクリックでカラーコードをコピー
  • ランダムカラー生成機能
  • 基本/高度カラーパレットを提供

使い方

  1. 1

    カラーを選択

    カラースライダーをドラッグするか、カラーエリアをクリックして希望のカラーを選択します。または、直接HEXコードなどを入力することもできます。

  2. 2

    フォーマットを確認

    選択したカラーがHEX、RGB、HSL、HSV、OKLCHなどすべてのフォーマットに自動変換されて表示されます。

  3. 3

    透明度を調整

    アルファタブで透明度を0〜100%の範囲で調整して半透明カラーを作成できます。

  4. 4

    コードをコピー

    必要なカラーフォーマットの値をクリックするとクリップボードに自動コピーされます。CSS、デザインツールなどにすぐに貼り付けてください。

よくある質問

HEXは#RRGGBB形式の16進数表記で、CSSで最も一般的に使用されます。RGBは赤(0-255)、緑(0-255)、青(0-255)の組み合わせでカラーを表現します。HSLは色相(Hue, 0-360)、彩度(Saturation, 0-100%)、明度(Lightness, 0-100%)で表現し、人間の直感に最も近いです。

OKLCHは知覚的に均一な(perceptually uniform)最新のCSSカラースペースです。従来のHSLでは同じ彩度/明度でもカラーによって明るさが違って見える問題がありましたが、OKLCHはこれを解決して一貫性のあるパレットを生成するのに有利です。CSS Color Level 4標準に含まれています。

アルファ値は0（完全に透明）から1（完全に不透明）の間の値でカラーの透明度を表します。CSSではrgba(59, 130, 246, 0.5)のように使用し、HEXでは#3B82F680のように後ろに2桁を追加します。オーバーレイ、シャドウ、背景などに活用されます。

WCAG 2.1ガイドラインによると、テキストと背景の間の明度コントラスト比が通常のテキスト4.5:1、大きいテキスト3:1以上である必要があります。カラーを選択する際、背景色とのコントラストを確認して視覚障害者も読めるよう配慮することが重要です。

Figma、SketchなどのデザインツールからコピーしたHEXコードを本ツールに入力すると、RGB、HSLなどCSSで使用可能なフォーマットに自動変換されます。CSS変数で管理するとテーマ変更時に効率的で、HSLフォーマットは明度/彩度の調整が容易です。

活用のヒント

  • HSLフォーマットは明度(L)だけを調整すれば同じカラーの明るい/暗いバリエーションを簡単に作成できるため、テーマカラー作業に有利です
  • ランダムカラー機能でインスピレーションを得た後、カラースライダーで微調整すると創造的なパレットを作成できます
  • CSS custom property（変数）と一緒に使用すると、ダークモード/ライトモードのカラー切り替えが簡単です
  • カラーパレットでよく使用するカラーをクリックすると素早くコードをコピーできます
  • OKLCHフォーマットを活用すると、彩度と明度が知覚的に一貫したカラーシステムを設計できます

Omnilude Tools

開発者、デザイナー、クリエイター向けの無料オンラインツール集。すべてのデータはブラウザでローカル処理されます。

開発者ツール

  • UUID生成器
  • タイムスタンプ変換
  • エンコーダー/デコーダー
  • カラーピッカー

テキストツール

  • JSONエディタ
  • テキスト比較
  • 文字カウンター
  • Markdown

法的情報

  • プライバシーポリシー
  • 利用規約
  • サービス紹介

© 2026 Omnilude. All rights reserved.

フィードバックを送る