간단하고 사용자 친화적인 색상 선택 도구

소개

색상 선택 도구는 사용자가 여러 색상 형식 간에 색상을 선택하고 시각화하며 변환하는 데 도움을 주기 위해 설계된 직관적이고 사용하기 쉬운 애플리케이션입니다. 웹 디자이너가 색상 조합을 만들거나, 디지털 아티스트가 완벽한 색조를 찾거나, 개발자가 사용자 인터페이스를 구현하는 경우, 이 색상 선택기는 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진수 색상은 파운드 기호(#)로 시작하고 여섯 개의 문자로 구성됩니다.
첫 번째 쌍은 빨강을, 두 번째는 초록을, 세 번째는 파랑을 나타냅니다.
각 쌍은 00에서 FF(십진수 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는 색상을 다음과 같은 방식으로 표현합니다:

색상(Hue): 색상 유형(빨강, 노랑, 초록 등), 각도(0-360°)로 측정됨
채도(Saturation): 색상의 강도 또는 순도(0-100%)
명도(Value): 색상의 밝기(0-100%)

HSV는 색상 선택에 특히 유용하며, 색상 선택(색상)을 강도(채도) 및 밝기(명도)와 분리하여 색상을 조정하는 데 더 직관적입니다.

색상 변환 공식

색상 선택기는 다음과 같은 수학 공식을 사용하여 서로 다른 색상 모델 간에 자동으로 변환합니다:

RGB에서 Hex로 변환

RGB를 16진수로 변환하려면:

각 RGB 구성 요소(0-255)를 두 자리 16진수 숫자로 변환합니다.
세 개의 16진수 값을 # 접두사와 함께 연결합니다.

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

여기서 toHex()는 십진수를 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)