カラーピッカー・カラーコード変換

どんな色でもHEX・RGB・HSL・HSV・CMYK・OKLCHで同時に表示するカラーピッカー兼カラーコード変換ツールです。カラーホイールで選ぶ、スポイトで画面上の色を取る、CSSの色を貼り付けるのいずれかで指定し、必要な形式をワンタップでコピーできます。明るい色・暗い色や配色パレットで、統一感のある色の組み合わせも作れます。

使い方

1. 大きなカラー見本をタップしてカラーピッカーを開くか、スポイトで画面上の色を取得するか、各欄に直接入力します。
2. どの欄にも、ページのどこにでも、CSSの色（#hex、rgb()、hsl()、hwb()、oklch()、lab()、色名など）を貼り付けられます。
3. 各形式の横のコピーボタンでコピーします。不透明度のスライダーで透明度を加えられます。
4. パレットの色をタップすると現在の色になり、長押し（または右クリック）でHEXをコピーします。コントラストタブでは文字色と背景色を設定し、基準を満たさないときは提案をタップして修正できます。

• WCAG 2.1では通常の文字に4.5:1（AA）、AAAには7:1が必要です。大きな文字（24px、または太字18.66px）はAAで3:1、AAAで4.5:1。UI部品や図形は3:1が必要です。
• 提案は色相と彩度を保ったまま、明度（OKLCH）だけを変えて基準を満たす最も近い色を探します。
• 半透明の色は背景と合成してからコントラスト比を計算します。
• CMYKは簡易的な変換です。印刷には印刷所のカラープロファイルを使ってください。
• 最近使った色はこのブラウザ内にのみ保存されます。

カラーコードの形式

HEXはCSSやデザインツールで使う6桁のコードで、#1E88E5なら赤1E（30）、緑88（136）、青E5（229）を表します。RGBは同じ値を0〜255の10進数で書いたものです。HSLは色相（0〜360°）・彩度・明度で表すため、色を暗くしたり淡くしたりするのが簡単です。HSVは多くのカラーピッカーの四角形に使われている形式です。

OKLCHは知覚に基づくOklab色空間をもとにした新しいCSSの形式で、明度を同じ幅で変えると見た目の差も同じに感じられます。色の段階やアクセシブルな配色づくりに向いています。CMYKは印刷のインク量を表しますが、ここでの値はプロファイルなしの簡易変換なので、正確な印刷色は印刷会社のプロファイルを使ってください。

手で変換する方法

HEXをRGBにするには、コードを2桁ずつ3つに分けて16進数から変換します。#FF6347なら255, 99, 71です。RGBからCMYKは、K = 1 − max(R, G, B) / 255、C = (1 − R/255 − K) / (1 − K)、MとYも同様に求めます。純粋なオレンジrgb(255, 165, 0)はcmyk(0%, 35%, 100%, 0%)です。このツールなら一瞬で変換でき、色名、rgb()、hsl()、hwb()、lab()、oklch()も入力できます。

配色パレットを作る

白を混ぜた明るい色と黒を混ぜた暗い色で、背景や枠線、ホバー時の色に使える段階が作れます。配色パレットは色相を回して作ります。補色（180°）、類似色（±30°）、トライアド（120°）、テトラード（90°ずつ）があります。最近使った色は、このブラウザにだけ保存されます。

よくある質問