カラーコンバーター

HEX、RGB、HSL、CMYKなどの異なる形式間で色を変換します。色選択、パレット生成、カラースキーム分析をサポートします。

カラーピッカー

カラーピッカーを使用して色を選択してください

色の形式

現在の色の様々な表現形式

#
rgb(,,)
hsl(,%,%)
hsv(,%,%)
cmyk(%,%,%,%)
oklch(%%)

色の形式の説明

異なる色の形式の特徴と使用場面について学びましょう

HEX 16進数

6桁の16進数を使用して色を表現します(例:#FF5733)。これはWeb開発で最も一般的に使用される色の形式で、最高の互換性を持ち、CSSやHTMLでの使用に適しています。

形式:#RRGGBB
範囲:00-FF (0-255)
利点:簡潔、互換性が良い
欠点:直感的でない

RGB 赤緑青

赤、緑、青の色チャンネルの数値を使用して色を表現します(例:rgb(255, 87, 51))。この形式は直感的で理解しやすく、デザイナーや開発者が色の構成を理解するのに適しています。

形式:rgb(R, G, B)
範囲:0-255
利点:直感的、理解しやすい
欠点:明度を直感的に表現しない

HSL 色相彩度明度

色相、彩度、明度の3つの属性を使用して色を表現します(例:hsl(12, 100%, 60%))。この形式は人間が色を認識する方法により近く、色の明暗や鮮やかさの調整が容易です。

形式:hsl(H, S%, L%)
範囲:H: 0-360°, S/L: 0-100%
利点:直感的、調整しやすい
欠点:明度を直感的に表現しない

HSV 色相彩度値

色相、彩度、値の3つの属性を使用して色を表現します(例:hsv(12, 100%, 100%))。この形式はグラフィックソフトウェアでよく使用され、値パラメータが色の明度をより直感的に表現します。

形式:hsv(H, S%, V%)
範囲:H: 0-360°, S/V: 0-100%
利点:値が直感的、調整しやすい
欠点:Webブラウザでのサポートが限定的

CMYK シアンマゼンタイエローブラック

シアン、マゼンタ、イエロー、ブラックの4つの色チャンネルを使用して色を表現します(例:cmyk(0%, 66%, 80%, 0%))。これは印刷業界の標準形式で、印刷が必要なデザイン作品に適しています。

形式:cmyk(C%, M%, Y%, K%)
範囲:0-100%
利点:印刷標準、プロフェッショナル
欠点:Webでの表示が不正確

OKLCH 知覚色空間

知覚明度、クロマ、色相の3つの属性を使用して色を表現します(例:oklch(60% 50% 12))。これは現代的な色空間で、人間の目の知覚により適しており、より広い色域をサポートし、現代的な表示デバイスに適しています。

形式:oklch(L% C% H)
範囲:L: 0-100%, C: 0-150, H: 0-360°
利点:知覚的に正確、色域が広い
欠点:互換性が限定的

使用の提案

  • Web開発:最高の互換性のためにHEXとRGB形式を優先してください
  • デザイン調整:色相と彩度の簡単な調整のためにHSL形式を使用してください
  • プロフェッショナル印刷:印刷品質を確保するためにCMYK形式を使用してください
  • モダンアプリケーション:より良い色のパフォーマンスのためにOKLCH形式の使用を検討してください
  • 色選択:直感的な色選択のためにHSVスライダーを使用してください