コンテンツへスキップ

オンライン色相環

ベースカラーを選ぶと、色相環が類似色・補色・トライアドなどのパレットを計算します。HEX・RGB・HSL・OKLCHのコードをコピーしたり、CSS・Tailwind・Figmaに書き出したりできます。

#
ハーモニー

カラー変換

この色のコードを10種類の形式ですぐにコピーできます。

色相環とは

色相環（カラーホイール）は、色を色相に沿って0°から360°に並べたものです。色彩理論の基本で、どの色が近く、どの色が対立し、どの配色がバランスよく、あるいはコントラスト強くなるかがひと目でわかります。Webデザイン、ブランディング、UI、イラストなど、パレットで明確に伝える必要があるあらゆるプロジェクトで使われます。

具体的なコードがすでにある場合に向くカラーピッカーや、写真から色を抽出する画像カラーピッカーと違い、Matizlyの色相環はひとつのベースカラーから始まります。ホイール上、またはHex・RGB・HSL・OKLCHで色相を決めると、選んだ配色に従って残りを計算し、パレットの調整・固定・並べ替え・書き出しができます。

一次色・二次色・三次色

絵画や学校で習う伝統的な色相環は12色で、3つの段階で構成されています。

一次色

赤・黄・青。ほかの色を混ぜて作ることはできず、ほかのすべての色はここから生まれます。

  • 黄
  • 赤
  • 青

二次色

オレンジ・緑・紫。2つの一次色を同量混ぜてできます。赤と黄でオレンジ、黄と青で緑、青と赤で紫になります。

  • オレンジ
  • 紫
  • 緑

三次色

一次色と隣の二次色を混ぜた色：黄みのオレンジ、赤みのオレンジ、赤紫、青紫、青緑、黄緑です。

  • 黄みのオレンジ
  • 赤みのオレンジ
  • 赤紫
  • 青紫
  • 青緑
  • 黄緑

暖色と寒色

色相環を半分に分けると、2つのグループができます。暖色（黄・オレンジ・赤）は太陽や火を思わせ、エネルギーと親しみを伝え、見る人に近づいてくるように感じられます。

寒色（緑・青・紫）は水や空を思わせ、落ち着きと距離感を伝え、遠ざかるように感じられます。デザインでは、目を引くべきものに暖色を使い、背景や休息のエリアに寒色を使うのが一般的です。

暖色
寒色

RYB・RGB・CMY：3つの色相環

色相環はひとつではありません。顔料・光・インクのどれを混ぜるかで変わります。

RYB（絵の具）

赤・黄・青を原色とする、学校や美術で使われる伝統的な色相環です。絵の具を混ぜるときに役立ちます。

RGB（画面）

赤・緑・青の光で、すべて足すと白になります。モニターやスマートフォン、Webデザインで使われ、Matizlyのホイールもこの方式です。

CMY（印刷）

シアン・マゼンタ・イエローのインクに黒を加えたもの（CMYK）。重ねるほど光を吸収します。印刷のしくみです。

Matizlyの色相環の使い方

ホイールをクリックするか、Hex・RGB・HSL・OKLCHのコードを入力してベースカラーを決めます。メニューで配色を選びます：類似色、補色、分裂補色、トライアド、テトラード、スクエア、モノクロマティック、トーン、コンパウンド、カスタム。パレットはすぐに更新され、各列を固定・並べ替え・編集・追加できます。

各色からシェードや細かい調整を開けます。パレットをコレクションに保存したり、コードをコピーしたり、CSS・Tailwind・Figmaに書き出したりできます。すべてブラウザ内で動くので、アカウントもファイルのアップロードも不要です。写真から始める場合は、まず画像カラーピッカーを使い、その色を色相環に持ち込みましょう。

色相環の配色の種類

類似色

類似色は色相環で隣り合う色です。Matizlyではベースカラーから近くの5色（約±20°と±40°）を生成します。やわらかくまとまりのあるパレットになり、背景や落ち着いたセクション、急なコントラストのない一貫性を求めるブランドに最適です。

補色

補色配色は、ある色と色相環で反対側（180°）にある色を組み合わせます。Matizlyはベース色と補色のペアを返します。最もコントラストの強い配色で、CTAやアクセント、必要以上に色を増やさずに要素を目立たせたいときに最適です。

分裂補色

正反対の色ではなく、ベースカラーと補色の両隣の2色（150°と210°）を使います。補色のコントラストを保ちつつ、視覚的な緊張を和らげます。パレット全体を極端にせず、鮮やかなアクセントが必要なUIやブランディングに向いています。

トライアド

色相環上で等間隔に並ぶ3色（0°、120°、240°）。Matizlyはベースカラーからトライアドを計算します。鮮やかさと調和のバランスがよく、個性あるパレットやアイコン、各色に明確な役割がある配色システムに役立ちます。

テトラード

長方形配色とも呼ばれ、2組の補色ペアで構成されます（Matizlyでは60°、180°、240°のずらし）。変化に富んだ4色が生まれます。1色を主役にし、残りをアクセントとして使うとUIがうるさくなりません。

スクエア

等間隔の4色（ベースから90°、180°、270°）。テトラードに似ていますが、より対称的です。ダッシュボードやイラスト、同格のアクセントが複数あるアイデンティティに、豊かでバランスのよいパレットを作れます。

モノクロマティック

ひとつの色相で明度と彩度を変えた、明るい色から暗い色までの配色です。Matizlyの色相環では同じ色のスケールとして働きます。タイポグラフィ、面、状態表示、一貫性の高いミニマルなテーマに最適です。

トーン

主に彩度を変えた同じ色相のバリエーション（ベースカラーにグレーを加える）です。純粋なシェードよりやわらかく洗練されたスケールになります。控えめな階層、チップ、ボーダー、コンテンツと競合しない背景に使えます。

コンパウンド

ベースカラーの類似色と、分裂補色のゾーン（反対色を含む）を組み合わせます。Matizlyは豊かでありながら制御された5色の配色を生成し、類似色をメインに、補色をアクセントに使います。

カスタム

色相環を5等分した配色（72°ごと）。自由な出発点で、プロジェクトに必要な配色になるまでパレット内の色を動かしたり、固定したり、削除したりできます。

よくある質問

伝統的な色相環（RYB）では赤・黄・青です。画面（RGB）では赤・緑・青、印刷（CMY）ではシアン・マゼンタ・イエローが原色です。

暖色は黄・オレンジ・赤、寒色は緑・青・紫です。暖色は注意を引き、寒色は落ち着きを伝えます。

色相（0°〜360°）を円で表したもので、調和のとれた組み合わせやコントラストの強い組み合わせを選ぶのに役立ちます。Matizlyでは、ひとつのベースカラーからデザインや開発にそのまま使えるパレットを生成します。

類似色、補色、分裂補色、トライアド、テトラード、スクエア、モノクロマティック、トーン、コンパウンド、カスタムです。それぞれ色彩理論の異なるルールで色を配置します。

色相環で反対側（180°）にある色が補色です。ベースカラーを選んで「補色」を選択すると、Matizlyがペアを自動で計算し、コピーできるコードを表示します。

類似色は色相環で隣り合い、やわらかい組み合わせになります。トライアドは互いに120°離れ、3色のバランスを保ちながらより鮮やかなパレットになります。

どちらも4色を使います。スクエアは90°ごとに配置します。テトラード（長方形）は別の配置の2組の補色ペアを使い（Matizlyでは60°/180°/240°）、より非対称でアクセントのバリエーションが増えます。

モノクロマティックは同じ色相の明度（と彩度）を明るい色から暗い色まで変えます。トーンはグレーを加えて彩度を下げ、落ち着いた洗練された印象になります。どちらも色相はひとつです。

色相環はベースカラーから配色を探ります。カラーピッカーは、正確なコードがわかっていて、Hex・RGB・HSL・OKLCHなどに変換したいときに使います。

はい。各色をコピーしたり、パレットをコレクションに保存したり、CSS・Tailwind・Figma向けの形式で書き出したりできます。登録は不要です。

その他のツール