RGBとCMYKの違いは何ですか？

RGBは画面用、CMYKは印刷用です。画面は赤、緑、青の光を発光することで色を作り出します（加法混色）。一方、プリンターは紙にシアン、マゼンタ、イエロー、ブラックのインクを重ねて色を作り出します（減法混色）。RGBは光の色域が広いため、CMYKよりも明るく鮮やかな色を生み出すことができます。そのため、画面上の色は印刷すると通常、色が鈍くなります。

印刷すると色が異なって見える理由は？

画面は光を発し、紙は光を反射するため、根本的に異なるプロセスです。さらに、RGBは何百万もの色を扱えますが、CMYKインクはそれらを再現できません。画面のキャリブレーション、紙の品質、インクの変動によってさらに変化が生じます。印刷前は常にCMYK値を確認し、重要な色合わせの作業では実物の校正を依頼してください。

オンラインで見た色からhexコードを取得するには？

ブラウザの開発者ツールを使用します。ChromeやFirefoxで、任意の要素を右クリックし、「検証」を選択し、スタイルパネルの小さな色の四角をクリックします。これにより、hexコードを表示するカラーピッカーが開きます。ColorZillaなどのブラウザ拡張機能を使えば、さらに簡単に—ページ上のどこでもクリックして色の値を取得できます。

hexコードの#記号は何を意味しますか？

これは単に「これは16進数のカラーコードです」とブラウザに伝えるプレフィックスです。この標準は初期のHTMLとCSSの仕様に由来します。#の後の6文字はRGB値を16進数で表します：赤に2桁、緑に2桁、青に2桁。#がないと、ブラウザは色として認識しません。

3桁のhexコードが機能する理由は？

これは各色チャンネルが繰り返される場合の省略形です。#F00は#FF0000（赤）に、#C9Cは#CC99CC（薄紫）に展開されます。この省略形は、帯域幅が高価だった1990年代にファイルサイズを削減するために作成されました。今日でも単純な色には便利です。

色変換は正確ですか？

RGB-hex変換は数学的に正確で、異なる数値基数の同じ値です。RGB-CMYK変換は、根本的に異なる色空間（光とインク）を変換するため、近似値となります。このツールは、プロのデザインソフトウェアと同じアプローチで、ICCカラープロファイル標準を使用してこれらの変換を行います。

アクセシブルな色の組み合わせを作るには？

色を選択した後、WebAIMのツールのようなコントラストチェッカーを使用します。通常のテキストには4.5:1、大きなテキストには3:1の比率が必要です。赤と緑の組み合わせは避けてください（色覚障害のユーザーにとって最も識別が難しい）。迷った場合は、暗いテキストを明るい背景に、またはその逆にします—重要なのは十分な輝度の差です。

画像から色を選択できますか？

このツールでは直接できません。ColorZillaなどのブラウザ拡張機能を使用するか、画像のスクリーンショットを撮り、オペレーティングシステムのカラーピッカー（macOSのデジタルカラーメーター、WindowsのPowerToysカラーピッカー）を使用してください。色の値を取得したら、ここで形式間の変換を行えます。

一部のRGB色がCMYKに上手く変換できない理由は？

CMYKは（再現可能な色の）「ガモット」がRGBより狭いです。明るい青、鮮やかな緑、エレクトリックオレンジは、CMYKインクで物理的に作成できない色であることがよくあります。これが起こると、プリンターは可能な限り最も近い色に置き換えます。通常、これは彩度が低く見えます。この問題を避けるため、プロの印刷デザイナーは最初からCMYK対応の色を使用することが多いです。

カラーピッカーツール - RGB、Hex、CMYK、HSVカラーコードの変換

このカラーピッカーでできること

プロジェクトに最適な色合いが必要ですか？このカラーピッカーを使えば、RGB、Hex、CMYK、HSVフォーマット間で色を即座に選択、プレビュー、変換できます。ウェブサイトのコーディング、ロゴデザイン、印刷用ファイルの準備など、正確な色の値をすぐに見つけられます—推測や複数のツール間の切り替えは不要です。

カラースペクトラム上の任意の場所をクリックして色を選び、スライダーで明るさを調整するか、直接正確な値を入力できます。すべてのフォーマットがリアルタイムで更新され、1回のクリックで任意の色コードをコピーできます。

カラーモデルの理解

異なるプロジェクトには異なるカラーフォーマットが必要です。それぞれの特徴と使用場面は以下の通りです：

RGB（レッド、グリーン、ブルー）

RGBは、赤、緑、青の光を混ぜて色を作ります。現在、画面で表示されている色と同じ方法です。各成分は0から255の範囲で表されます：

RGB(255, 0, 0) = 純粋な赤
RGB(0, 255, 0) = 純粋な緑
RGB(0, 0, 255) = 純粋な青
RGB(255, 255, 255) = 白
RGB(0, 0, 0) = 黒

RGBを使用する場面： ウェブサイト、モバイルアプリ、ビデオ編集、画面ベースのグラフィックなどのデジタル作業。ディスプレイのネイティブ言語であるため、CSSなどのツールがrgb()やrgba()関数を直接サポートしています。W3C CSSカラーモジュール仕様によると、RGBはウェブ標準の基本的なカラーモデルです。

16進数（Hex）

Hexコードは、RGBの値を10進数ではなく16進数で表したものです。Hexカラーは#FF5733のような形式で、以下のように構成されます：

#記号はHexコードであることを示します
最初の2文字 = 赤（00-FF）
中央の2文字 = 緑（00-FF）
最後の2文字 = 青（00-FF）
#FF0000 = 赤、#00FF00 = 緑、#0000FF = 青

#FF0000の代わりに#F00のような3文字の省略形も使用できます。これは、各カラーチャネルが同じ数字を繰り返す場合に機能します。

Hexを使用する場面： ウェブ開発が主な用途です。CSSは常にHex表記をサポートしており、多くの開発者はrgb()よりも入力が速いと感じています。よくある落とし穴は、#記号を忘れると、ブラウザが色として認識しないため、スタイルが静かに壊れることです。

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

CMYKは、プリンターで使用されるカラーモデルです。RGBが光を追加するのとは異なり、CMYKは光を減算します。白い紙にインクを混ぜて色を作ります：

各成分は0%から100%の範囲
CMYK(0, 100, 100, 0) = 赤
CMYK(100, 0, 100, 0) = 緑
CMYK(0, 0, 0, 100) = 純粋な黒インク
CMYK(0, 0, 0, 0) = インクなし（白い紙が透けて見える）

CMYKを使用する場面： 名刺、パンフレット、雑誌、パッケージングなどの印刷物のデザイン。現実的な注意点として、多くの鮮やかなRGB色は、CMYKインクでは再現できません。画面上の明るい電気のような青は、印刷すると色が薄くなります。プロのデザイナーは、印刷に渡す前に必ずCMYKへの変換をプレビューして、予期せぬ結果を避けます。

HSV（色相、彩度、明度）

HSVは、色を3つの直感的な成分に分解します：

色相： どの色の系統か（0-360°）—0°は赤、120°は緑、240°は青
彩度： どれだけ鮮やかか、またはグレーか（0-100%）—0%はグレースケール、100%は完全に彩度が高い
明度： どれだけ明るいか、または暗いか（0-100%）—0%は黒、100%は最大の明るさ

HSVが重要な理由： 人間が自然に色について考える方法に一致しています。より暗い青が欲しい場合は、明度を下げます。青の強さを抑えたい場合は、彩度を下げます。これにより、HSVはこのようなカラーピッカーに最適です。スペクトル上で色相を選択し、スライダーで明るさを調整できます。

カラー変換の公式

カラーピッカーは、これらの数学的な公式を使用して、異なるカラーモデル間を自動的に変換します：

RGBからHexへの変換

RGBを16進数に変換するには：

各RGB成分（0-255）を2桁の16進数に変換
3つの16進数の値を#プレフィックスと連結

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

toHex()は10進数を16進数表現に変換します。

RGBからCMYKへの変換

RGBからCMYKへの変換は、以下の手順で行います：

RGB値を0-1の範囲に正規化
ブラックキー（K）成分を計算
Kに基づいてC、M、Yを計算

$R' = R/255, G' = G/255, B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{(1-R'-K)}{(1-K)} \times 100\%$ $M = \frac{(1-G'-K)}{(1-K)} \times 100\%$ $Y = \frac{(1-B'-K)}{(1-K)} \times 100\%$

RGBからHSVへの変換

RGBからHSVへの変換：

$R' = R/255, G' = G/255, B' = B/255$ $C_{max} = \max(R', G', B')$ $C_{min} = \min(R', G', B')$ $\Delta = C_{max} - C_{min}$

色相（H）の場合：

1// RGBからHexへの変換
2function rgbToHex(r, g, b) {
3  const toHex = (c) => {
4    const hex = Math.round(c).toString(16);
5    return hex.length === 1 ? '0' + hex : hex;
6  };
7  
8  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// HexからRGBへの変換
12function hexToRgb(hex) {
13  // #が存在する場合は削除
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // 3桁と6桁の16進数に対応
17  const expandedHex = cleanHex.length === 3 
18    ? cleanHex.split('').map(char => char + char).join('')
19    : cleanHex;
20    
21  const r = parseInt(expandedHex.substring(0, 2), 16);
22  const g = parseInt(expandedHex.substring(2, 4), 16);
23  const b = parseInt(expandedHex.substring(4, 6), 16);
24  
25  return { r, g, b };
26}
27
28// RGBからCMYKへの変換
29function rgbToCmyk(r, g, b) {
30  // RGBの値を正規化
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // K（黒）を計算
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // 純粋な黒を処理
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // C, M, Yを計算
44  const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45  const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46  const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47  
48  return {
49    c: Math.round(c),
50    m: Math.round(m),
51    y: Math.round(y),
52    k: Math.round(k * 100)
53  };
54}
55
56// 使用例
57const rgb = { r: 255, g: 0, b: 0 }; // 純粋な赤
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGBからHexへの変換
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# HexからRGBへの変換
6def hex_to_rgb(hex_color):
7    # #が存在する場合は削除
8    hex_color = hex_color.lstrip('#')
9    
10    # 3桁と6桁の16進数に対応
11    if len(hex_color) == 3:
12        hex_color = ''.join([c*2 for c in hex_color])
13    
14    return {
15        'r': int(hex_color[0:2], 16),
16        'g': int(hex_color[2:4], 16),
17        'b': int(hex_color[4:6], 16)
18    }
19
20# RGBからCMYKへの変換
21def rgb_to_cmyk(r, g, b):
22    # RGBの値を正規化
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # K（黒）を計算
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # 純粋な黒を処理
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # C, M, Yを計算
35    c = ((1 - r_norm - k) / (1 - k)) * 100
36    m = ((1 - g_norm - k) / (1 - k)) * 100
37    y = ((1 - b_norm - k) / (1 - k)) * 100
38    
39    return {
40        'c': round(c),
41        'm': round(m),
42        'y': round(y),
43        'k': round(k * 100)
44    }
45
46# 使用例
47rgb = {'r': 0, 'g': 128, 'b': 255}  # 空色
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class ColorConverter {
2    // RGBからHexへの変換
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // HexからRGBへの変換
8    public static int[] hexToRgb(String hexColor) {
9        // #が存在する場合は削除
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // 3桁と6桁の16進数に対応
15        if (hexColor.length() == 3) {
16            String expandedHex = "";
17            for (char c : hexColor.toCharArray()) {
18                expandedHex += c + String.valueOf(c);
19            }
20            hexColor = expandedHex;
21        }
22        
23        int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24        int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25        int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26        
27        return new int[]{r, g, b};
28    }
29    
30    // RGBからCMYKへの変換
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // RGBの値を正規化
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // K（黒）を計算
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // 純粋な黒を処理
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // C, M, Yを計算
46        double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47        double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48        double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49        
50        return new double[]{
51            Math.round(c),
52            Math.round(m),
53            Math.round(y),
54            Math.round(k * 100)
55        };
56    }
57    
58    public static void main(String[] args) {
59        // 使用例
60        int r = 75, g = 0, b = 130;  // 紫
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Hex: " + hexColor);
65        System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n", 
66                          cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67    }
68}
69

参考文献と追加情報

W3C CSSカラーモジュールレベル4 - 公式ウェブカラー仕様
WCAG 2.1 コントラストガイドライン - カラーコントラストのアクセシビリティ基準
WebAIM コントラストチェッカー - カラーコントラスト比率のテスト
ICCカラープロファイル標準 - カラー変換の技術仕様
MDN Web Docs: CSSカラー値 - ウェブカラー形式の包括的ガイド

カラーピッカーツール - RGB、Hex、CMYK、HSVカラーコードの変換