CoderTools

カラーピッカー/変換ツール

色を選択し、異なるフォーマット間で変換

良好一致 ΔE: 0.00

代替マッチ:

テキストの外観をプレビュー

The quick brown fox jumps over the lazy dog

コントラスト比
5.48:1
WCAG AA
通常テキスト 大きいテキスト
WCAG AAA
通常テキスト 大きいテキスト
color: #6366f1;
background-color: #6366f1;
border-color: #6366f1;

カラーフォーマットについて

色は多くの異なるフォーマットで表現でき、それぞれに特定の用途と利点があります。このツールは最も一般的に使用されるカラーフォーマット間の変換をサポートしています。

異なるカラーモデルを理解することは、Web開発、UIデザイン、デジタルアート制作に不可欠です。

サポートされているカラーフォーマット

HEX

#RRGGBB

RGB

0-255, 0-255, 0-255

HSL

0°-360°, 0-100%, 0-100%

HSV

0°-360°, 0-100%, 0-100%

CMYK

0-100%, ×4

YCbCr

16-235, 16-240, 16-240

Lab

L*: 0-100, a*/b*: -128 to +127

カラーフォーマットの詳細

HEX(16進数)

HEXカラーは#で始まる6桁の16進表記を使用します。各ペアは赤、緑、青の値(00-FF)を表します。短縮表記(#RGB)は#RRGGBBに展開されます。アルファ透明度用の8桁形式(#RRGGBBAA)もサポートしています。

範囲: #000000(黒)から #FFFFFF(白) 例: #FF5733 = R:255, G:87, B:51

用途: CSS、HTML、Webデザイン、ほとんどのプログラミング言語

RGB(赤、緑、青)

RGBモデルは赤、緑、青の光を組み合わせて色を作る加法混色モデルです。このモデルは画面が光を発する方法に直接対応しており、デジタルディスプレイのネイティブ色空間となっています。

範囲: 各チャンネル 0-255(8ビット)または 0.0-1.0(正規化) 例: rgb(255, 87, 51) またはアルファ付きの rgba(255, 87, 51, 0.5)

用途: 画面表示、LED照明、CSS、デジタル画像処理

HSL(色相、彩度、明度)

HSLは人間の知覚に基づいて色を表現します。色相は色相環上の角度、彩度は色の強度、明度は色の明るさです。これにより色の操作がより直感的になります。

範囲: H: 0°-360°, S: 0%-100%, L: 0%-100% 例: hsl(14, 100%, 60%) = 暖かいオレンジ色

用途: CSS、配色スキーム生成、直感的なカラーピッキング

HSV/HSB(色相、彩度、明度)

HSV(HSBとも呼ばれる)はHSLに似ていますが、明度の代わりに値を使用します。値は明るさを表し、100%が最も明るいです。このモデルはアーティストの色に対する考え方に合っているため、多くのグラフィックスアプリケーションで好まれています。

範囲: H: 0°-360°, S: 0%-100%, V: 0%-100% 例: hsv(14, 80%, 100%) = 鮮やかなオレンジ

用途: Photoshop、GIMP、グラフィックスソフトウェアのカラーピッカー

CMYK(シアン、マゼンタ、イエロー、キー/ブラック)

CMYKは印刷に使用される減法混色モデルです。光を加えるRGBとは異なり、CMYKは白い紙から光を減じます。「K」はキー(黒)の略で、印刷品質を向上させインク使用量を削減します。

範囲: 各チャンネル 0%-100% 例: cmyk(0%, 66%, 80%, 0%) = オレンジトーン

用途: 印刷デザイン、商業印刷、パッケージング

YCbCr(輝度、色差)

YCbCrは輝度(Y)と色差(Cb、Cr)成分を分離します。人間の目は色よりも明るさに敏感なため、この分離により効率的な動画圧縮が可能になります。JPEG、MPEG、放送規格で一般的に使用されています。

範囲: Y: 16-235(デジタル)、Cb/Cr: 16-240(128を中心) 例: Y:166, Cb:90, Cr:198 ≈ オレンジ

用途: JPEG圧縮、動画エンコード(H.264、HEVC)、テレビ放送

Lab(CIE L*a*b*)

Labは人間の視覚を近似するように設計された知覚的に均一な色空間です。L*は明度、a*は緑-赤軸、b*は青-黄軸を表します。1単位の知覚距離は色に関係なくほぼ同じに見えます。

範囲: L*: 0-100, a*: -128 から +127, b*: -128 から +127 例: L*:70, a*:45, b*:65 ≈ オレンジ

用途: 色彩科学、色差計算(Delta E)、プロフェッショナルなカラーマネジメント

Pantone(パントン)

Pantone Matching System(PMS)は、印刷、ファッション、製品デザインで広く使用される独自のカラー標準化システムです。各色には固有のコードがあり、異なる素材やメーカー間での一貫した色再現を保証します。

フォーマット: PANTONE [番号] C/U/M(コーティング/アンコーティング/マット) 例: PANTONE 186 C(コカ・コーラレッド)、PANTONE 286 C(IBMブルー)

用途: ブランドアイデンティティ、商業印刷、パッケージデザイン、テキスタイル業界

注意:これらはデジタル近似値です。実際のPantone色は印刷時に異なる場合があります。

色彩理論の基礎

色は異なる目的に最適化された異なる「空間」に存在します。加法モデル(RGB)は光を加えることで機能し、減法モデル(CMYK)は光を吸収することで機能します。知覚モデル(Lab)は人間の視覚に合わせています。

加法混色モデル

RGBは赤、緑、青の光を組み合わせます。3つすべてを最大強度で加えると白になります。これは画面、プロジェクター、デジタルディスプレイの仕組みです。

=

減法混色モデル

CMYKは白から光の波長を吸収(減算)します。すべての色を組み合わせると(理論上)黒になります。これはインクや塗料の仕組みです。

=

知覚色モデル

Labや類似の空間は人間の知覚を中心に設計されており、色の比較や補正に理想的です。

L* a* b*

変換に関する注意

  • RGB ↔ HEX: ロスレス変換、フォーマット変更のみ
  • RGB ↔ HSL/HSV: 色域内ではロスレス、精度が失われる場合あり
  • RGB ↔ CMYK: 印刷色域外の色が失われる場合あり
  • RGB ↔ Lab: D65光源を使用、sRGB色空間を想定
  • RGB ↔ YCbCr: デフォルトでBT.601規格を使用

WCAGコントラスト基準

Webコンテンツアクセシビリティガイドライン(WCAG)は、視覚障害のある人を含むすべてのユーザーがコンテンツを読めるように、テキストと背景の間の最小コントラスト要件を定義しています。

AA レベルAA: 通常テキストは最低4.5:1、大きなテキストは最低3:1
AAA レベルAAA: 通常テキストは最低7:1、大きなテキストは最低4.5:1

一般的な使用ケース

Web開発でのCSSカラー設定
UI/UXデザインでの配色
ブランドデザインとビジュアルアイデンティティ
アクセシビリティ設計のコンプライアンスチェック
印刷デザインの色変換
データ可視化チャートの配色