コンテンツへスキップ

オンラインカラーツール

カラーピッカー、パレット、カラーコードをひとつの場所で

好きな色を選んでHEX・RGB・HSL・OKLCHのコードをコピーし、配色ルールでパレットを作り、写真から色を抽出して、WCAGのコントラストを確認できます。

無料・登録不要。すべてブラウザ内で動作するので、画像が端末の外に出ることはありません。

カラーピッカーを開くすべてのツールを見る

色を扱うために必要なものがすべて

すぐ使えるパレットが900以上

色やスタイル（パステル、ヴィンテージ、ネオン…）で絞り込み、お気に入りを保存し、どのパレットも色相環で開いて調整できます。

パレットを探す

最初の1色から最終的なコードまで

HEX
#E4572E
RGB
rgb(228, 87, 46)
HSL
hsl(14, 77%, 54%)
OKLCH
oklch(0.6372 0.1838 36.48)
CMYK
C0 M62 Y80 K11

1. あらゆる形式のカラーコード

同じ色でも、使う場所によって書き方が変わります。ここで色を試して、必要な形式をコピーしましょう。

Web用のHEX

CSSやデザインツールで最も一般的な形式。シャープ記号の後に6桁の数字が続きます。

調整にはRGBとHSL

RGBは赤・緑・青を0〜255で表します。HSLは色相・彩度・明度で扱うので、バリエーションを作るのがとても簡単です。

モダンなスケールにはOKLCH

CSSの最新形式。明度の変化が均一に知覚されるため、カラースケールに最適です。

HEXをRGBに変換RGBをHEXに変換

2. うまくいく組み合わせ

良いパレットは運任せではありません。色相環上の色同士の関係に基づいています。

配色ルール

落ち着いた印象なら類似色、コントラストを出すなら補色、生き生きとしたデザインならトライアド。

混色とグラデーション

2色を混ぜて中間色を見つけたり、線形・放射・円錐のCSSグラデーションを作ったりできます。

TailwindとMaterialのカラー

公式のスケールを確認し、実際のUIコンポーネントで試せます。

色相環を開くグラデーションを作る

3. すべての人のためにデザインする

男性の約8%に何らかの色覚特性があり、多くの画面は映り込みのある環境で見られています。色を確認することもデザインの一部です。

WCAGコントラスト

テキストと背景の比率を計算し、通常テキストと大きいテキストのAA・AAAレベルを確認します。

色覚シミュレーター

1型・2型・3型色覚や全色盲の人に、パレットがどう見えるかを確認できます。

コントラストを確認色覚をシミュレート

Matizlyのすべてのツール

ブラウザで動作し、貼り付けるだけのコードが手に入る12個の無料ツール。

  • カラーピッカー任意の色を選び、Hex / RGB / HSL / OKLCH をシェードやハーモニー付きでコピー。
  • カラーホイールインタラクティブな色相環でハーモニーを探り、バランスの良いパレットを作れます。
  • 画像の色画像から色を抽出し、写真ベースのパレットを作成。
  • カラーミキサー2色を混ぜて、コピーしやすい中間色を取得。
  • CSSグラデーション線形・放射・円錐の CSS グラデーションをライブプレビューで作成。
  • カラーパレットすぐに使えるパレットを探し、この端末にお気に入りを保存。
  • カラーネームHTML/CSS の名前付きカラーを一覧し、Hex・RGB・HSL をすぐコピー。
  • TailwindカラーTailwind CSS と Material Design のカラー表を探索。
  • UIカラー実 UI コンポーネントで Tailwind の色ファミリーをプレビュー。
  • WCAGコントラストテキストと背景の WCAG コントラストを確認して、よりアクセシブルな UI に。
  • 色覚シミュレーションさまざまな色覚特性で色の見え方をシミュレーション。
  • Hex ↔ RGBHex を RGB に即座に変換。CSS やデザインの受け渡しに。

色のファミリー別カラーコード

各色を代表する色調のコードと、それをもとに作られた数百のパレット。

名前付きHTMLカラー148色をすべて見る

よくある質問

カラーピッカーを開くか、このページの「色を試す」欄に色を入力すると（例：#E4572E、rgb(228, 87, 46)、tomato）、HEX・RGB・HSL・OKLCH・CMYKのコードが表示されます。色が写真の中にある場合は、画像カラーピッカーを使ってください。

どちらも同じ色を表します。HEXは6桁の16進数（#E4572E）、RGBは0〜255の3つの数値（rgb(228, 87, 46)）です。どちらからどちらへも、情報を失わずに変換できます。

ベースカラーを決め、色相環で配色ルール（類似色、補色、トライアド…）を適用します。既成のパレットを探したり、写真から抽出したりすることもできます。

いいえ。Matizlyのツールはすべてブラウザで直接動作し、登録は不要です。

いいえ。画像の解析を含むすべての処理はブラウザ内で行われます。何も送信・保存しません。

はい。色相環とカラーピッカーから、TailwindのCSS変数やFigmaのオブジェクトをエクスポートしたり、コードをコピーしたりできます。

はい。コントラストチェッカーが2色間のWCAG比率を計算し、AAとAAAを満たすかを教えてくれます。

色を使った作業を始めよう

すべてのツールは無料で、ブラウザで動作します。

パレットを探すカラーピッカーを開く