색상 선택기 HEX, RGB, HSL, CMYK 출력을 지원하는 상호작용 색상 선택기입니다.

What Is 색상 선택기?

사용자가任意의 색상을 선택하여 HEX, RGB, HSL, CMYK 네 가지 주요 색상 형식에서 즉시 값을 확인할 수 있는 인터랙티브 컬러 픽커입니다. 이 도구는 채도-명도 캔버스, 색조 슬라이더 및 기본 색상 입력을 특징으로 하며, 사용자가 필요한 정확한 색상을 찾기 위해 여러 가지 방법을 제공합니다. 디자이너가 완벽한 оттен기를 찾고 있거나 CSS에 대한 색상 값을 필요로 하는 개발자나 색상과 함께 작업하는 모든 사람이 이 도구는 한 곳에서 필요한 모든 값을 제공합니다. 캔버스는 현재 선택된 색조에 대해 전체 채도-명도 격자를 렌더링하여 사용자가 시각적으로 색상 변화를 탐색할 수 있도록 합니다. 네 가지 형식의 출력은 모두 실시간으로 업데이트되며 복사 버튼을 포함하므로 웹 개발, 인쇄 디자인 또는 애플리케이션 개발과 같은 모든 상황에서 필요한 값을 빠르게 가져올 수 있습니다.

Why Use 색상 선택기?

• 여러 입력 방법: 캔버스, 기본 색상 선택기, HSL 슬라이더
• 네 가지 동시 출력 형식: HEX, RGB, HSL, CMYK
• 큰 색상 미리 보기 스와치로 정확한 시각적 평가가 가능합니다.
• 캔버스 기반의 채도-명도 선택기를 사용하여 정밀한 색상 탐색이 가능합니다.
• 모든 형식에 대한 한 번의 클릭으로 복사하기

Common Use Cases

웹 개발

CSS와 호환되는任意 형식(HEX, RGB, HSL)으로 완벽한 색상을 찾고 복사할 수 있습니다.

디자인 작업

캔버스를 사용하여 시각적으로 색상을 탐색하고 디자인 도구에 필요한 정확한 값을 얻을 수 있습니다.

크로스-형식 참조

단일 색상이 HEX, RGB, HSL, CMYK 형식으로 어떻게 변환되는지 동시에 볼 수 있습니다.

인쇄 준비

시각적으로 색상을 선택하고 인쇄 사양에 필요한 CMYK 값을 얻을 수 있습니다.

Technical Guide

컬러 픽커는 X축이 채도(0-100%)를 나타내고 Y축이 명도(100-0%)를 나타내는 256×256 캔버스를 렌더링합니다. 각 픽셀에 대해 HSL에서 RGB로의 변환을 계산하여 그립니다. 색조 슬라이더는 캔버스에 표시되는 색조를 제어하며, 모든 색상에 대한 포괄적인 탐색 공간을 생성합니다. 캔버스는 실시간 렌더링을 위해 HTML5 Canvas API를 사용합니다. 사용자가 캔버스를 클릭하면 마우스 위치가 채도와 명도 값으로 매핑되며, 이 값은 네 가지 출력 형식으로 변환됩니다. 기본 HTML 색상 입력은 대체 선택 방법을 제공하며 HSL 슬라이더와 양방향으로 동기화됩니다. CMYK 출력은 수학적 RGB-CMYK 변환식을 사용합니다. 모든 변환은 서버 상호 작용 없이 실시간으로 발생하므로 도구가 반응성과 개인 정보를 보장합니다.

Tips & Best Practices

• 1
  현재 색상 계열에서 빠르게 색상을 찾으려면 캔버스 아무 곳이나 클릭하세요.
• 2
  색상 스펙트럼을 훑어보다가 캔버스를 사용하여 세부적으로 조정할 수 있습니다.
• 3
  기본 색상 선택기를 사용하면 운영 체제의 색상 대화 상자를 최대 정밀도로 액세스할 수 있습니다.
• 4
  웹용 HEX, Canvas/JavaScript용 RGB, CSS 테마용 HSL, 인쇄용 CMYK를 복사하세요.
• 5
  HSL 값은 디자인 시스템 色彩 규모를 생성하는 데 가장 유용합니다.

Related Tools

HEX를 RGB로 변환기

라이브 미리보기 스와치와 함께 즉시 HEX 색상 코드를 RGB 값으로 변환합니다.

🎨 Color Tools

RGB를 HSL로 변환하기

상호작용 슬라이더와 함께 RGB 값을 HSL 색상 형식으로 변환합니다.

🎨 Color Tools

랜덤 색상 생성기

옵션으로 파스텔, 생동감 있거나 따뜻한 스타일 제약을 가진 랜덤 색상을 생성합니다.

🎨 Color Tools

컬러 하모니 휠

다섯 가지의 조화 유형과 시각적 선택이 가능한 인터랙티브 컬러 휠입니다.

🎨 Color Tools

색상 공간 시각화기

HEX, RGB, HSL, HSV, CMYK를 포함한 색상을 막대 그래프와 함께 시각화합니다.

🎨 Color Tools

Frequently Asked Questions

Q 색상 선택기를 왜 필요로 하나요?

색상 선택기는 시각적으로 정확한 색상을 찾고 선택할 수 있게 해주며, 구현에 필요한 형식의 精密한 값을 제공합니다. 이는 추측과 수동 변환을 제거해 줍니다.

Q 캔버스와 기본 선택기有什么 차이인가요?

캔버스는 색상 탐색을 위한 2D 채도-명도 격자를 표시하며, 기본 선택기는 운영 체제의 색상 대화 상자를 사용하여 추가 기능(예: eyedropper)을 제공할 수 있습니다.

Q 화면에서 색상을 선택할 수 있나요?

일부 브라우저(Chrome, Edge)의 기본 색상 입력에는 eyedropper 도구가 포함되어 있어 화면에 표시된任意 색상을 선택할 수 있습니다.

Q 네 가지 형식 출력이 항상 동기화되나요?

예, 모든 형식은 항상 동일한 색상을 나타냅니다. 任意 입력 방법을 통해 색상을 변경하면 네 가지 출력 모두가 동시에 업데이트됩니다.

About This Tool

색상 선택기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.