シンプルで使いやすいカラーピッカーツール

はじめに

カラーピッカーツールは、ユーザーが色を選択、視覚化、さまざまな色形式に変換するのを助けるために設計された直感的で使いやすいアプリケーションです。ウェブデザイナーがカラースキームを作成する場合や、デジタルアーティストが完璧な色合いを探している場合、または開発者がユーザーインターフェースを実装する場合でも、このカラーピッカーはRGB、16進数、CMYK、HSV形式で色を扱うための簡単な方法を提供します。インタラクティブなカラースペクトラム、明るさスライダー、正確な入力オプションを使用することで、プロジェクトのために色の値を迅速に見つけ、調整し、コピーできます。

カラーモデルの理解

カラーピッカーの使い方に入る前に、サポートされているさまざまなカラーモデルを理解することが役立ちます。

RGB（赤、緑、青）

RGBは、赤、緑、青の光をさまざまな方法で組み合わせて広範囲の色を再現する加法的カラーモデルです。デジタルアプリケーションでは：

各コンポーネント（R、G、B）は0から255の範囲です
RGB(255, 0, 0)は純粋な赤を表します
RGB(0, 255, 0)は純粋な緑を表します
RGB(0, 0, 255)は純粋な青を表します
RGB(255, 255, 255)は白を表します
RGB(0, 0, 0)は黒を表します

RGBモデルは、画面上での色の表示方法に直接関連しており、デジタルデザインの主な選択肢となっています。

16進数（Hex）

16進数カラーコードは、RGBカラーを基数16の数値システムを使用して表す方法です：

16進数カラーは、井戸記号（#）で始まり、6文字が続きます
最初のペアは赤を、2番目は緑を、3番目は青を表します
各ペアは00からFF（10進数で0-255）までの範囲です
#FF0000は純粋な赤を表します
#00FF00は純粋な緑を表します
#0000FFは純粋な青を表します
特定の色に対して省略記法が利用可能です（例：#F00は赤を表します）

16進数コードは、ウェブ開発（CSS、HTML）やデジタルデザインアプリケーションで広く使用されています。

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

CMYKは、主にカラー印刷に使用される減法的カラーモデルです：

各コンポーネントは0％から100％の範囲です
CMYK(0, 100, 100, 0)は純粋な赤を表します
CMYK(100, 0, 100, 0)は純粋な緑を表します
CMYK(100, 100, 0, 0)は純粋な青を表します
CMYK(0, 0, 0, 100)は黒を表します
CMYK(0, 0, 0, 0)は白（紙の色）を表します

主に印刷に使用されますが、CMYK値を理解することは、最終的に印刷されるコンテンツをデザインする際に役立ちます。

HSV（色相、彩度、明度）

HSVは、次のように色を表します：

色相：色の種類（赤、黄色、緑など）、度数（0-360°）で測定されます
彩度：色の強度または純度（0-100％）
明度：色の明るさ（0-100％）

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桁のHexの両方を処理
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桁のHexの両方を処理
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.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
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桁のHexの両方を処理
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

参考文献

Agoston, M. K. (2013). Computer Graphics and Geometric Modeling: Implementation and Algorithms. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB (1998) Color Image Encoding. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Color Appearance Models. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Measuring Colour. John Wiley & Sons.
Poynton, C. (2012). Digital Video and HD: Algorithms and Interfaces. Elsevier.
W3C. (2018). CSS Color Module Level 4. W3C Working Draft. Retrieved from https://www.w3.org/TR/css-color-4/
Web Content Accessibility Guidelines (WCAG) 2.1. (2018). Retrieved from https://www.w3.org/TR/WCAG21/
International Color Consortium. (2004). Specification ICC.1:2004-10 (Profile version 4.2.0.0). Retrieved from http://www.color.org/specification/ICC1v42_2006-05.pdf

今日、私たちのカラーピッカーを試してみてください！

プロジェクトに最適な色を見つける準備はできましたか？私たちの使いやすいカラーピッカーは、色を選択、調整、さまざまな形式間で変換するのを簡単にします。ウェブサイトをデザインする場合、デジタルアートを作成する場合、または印刷物を計画する場合でも、私たちのツールは必要な精度と柔軟性を提供します。

今すぐ色を使って実験を始め、デザインを次のレベルに引き上げましょう！

Whiz Tools

シンプルカラーピッカー：RGB、Hex、CMYKカラー値を選択＆コピー

カラーピッカー

RGB (0-255)

CMYK (0-100)