Color Picker

컬러 픽커 웹은 2026년 최고의 무료 온라인 컬러 픽커입니다. HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB 등 20가지 이상의 색상 형식을 지원합니다. 라이브 컬러 휠, WCAG 대비 검사기, 색맹 시뮬레이터, 팔레트 생성기, 이미지 색상 픽커, 6가지 조화 유형 등이 포함되어 있으며, 모두 회원가입 없이 완전히 무료로 이용할 수 있습니다.

이미지에서 HEX 색상 코드를 찾으려면 Color Picker 웹의 이미지 색상 선택기를 사용하세요. 원하는 영역 위로 마우스를 올린 후 클릭하면 선택한 픽셀에서 정확한 HEX, RGB 및 HSL 코드를 추출할 수 있습니다. 또한 이미지를 한 번의 클릭으로 전체 색상 팔레트를 자동으로 생성할 수 있습니다.

컬러 픽커 도구는 색상을 선택, 변환 및 분석할 수 있게 해줍니다. 이 도구는 여러 형식(HEX, RGB, HSL, CMYK)으로 색상 값을 표시하고, 보색 팔레트를 생성하며, WCAG 접근성 대비 비율을 확인하고, 색맹을 시뮬레이션하며, 업로드된 이미지에서 색상을 추출합니다. 웹 디자이너, 개발자, 브랜드 디자이너에게 필수적입니다.

HEX를 RGB로 변환하려면 위의 변환 도구를 사용하세요. 임의의 HEX 코드(예: #9333ea)를 입력하면 즉시 RGB 출력(147, 51, 234)을 얻을 수 있습니다. 수동으로 변환하려면 HEX를 3쌍(93, 33, ea)으로 나누고, 각각을 16진수에서 10진수로 변환하세요. R=147, G=51, B=234. Color Picker Web은 20개 이상의 포맷에 대해 이를 즉시 처리합니다.

WCAG 2.2에 따르면, 일반 텍스트의 최소 색상 대비 비율은 4.5:1(Level AA)과 7:1(Level AAA)입니다. 대형 텍스트(18pt 이상 또는 14pt 이상 볼드)의 경우 최소 대비 비율은 AA에서 3:1, AAA에서 4.5:1입니다. UI 구성 요소와 아이콘은 인접 색상 대비 최소 3:1이 필요합니다. 위의 WCAG 대비 검사기를 사용하여 색상을 테스트하세요.

웹사이트에서 색상을 선택하려면: (1) 브라우저 개발자 도구 사용 — 아무 요소나 마우스 오른쪽 버튼으로 클릭하고 검사한 다음 CSS 패널에서 색상 샘플을 클릭합니다. (2) ColorZilla와 같은 브라우저 확장 프로그램 사용. (3) 스크린샷을 찍어 Color Picker Web의 이미지 색상 선택기에 업로드하여 원하는 픽셀을 샘플링. Chrome 개발자 도구에도 색상 선택 패널에 내장된 스포이드가 있습니다.

HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미합니다. 색상(Hue, 0°–360°)은 색상환에서의 색 종류를 나타냅니다. 채도(Saturation, 0%–100%)는 색이 얼마나 선명하거나 회색빛인지를 나타냅니다. 명도(Lightness, 0%–100%)는 색이 얼마나 어둡거나 밝게 보이는지를 나타냅니다. 예: hsl(270, 81%, 56%)는 중간 보라색입니다. HSL은 각 속성을 독립적으로 조정할 수 있기 때문에 CSS 애니메이션과 동적 색상 테마에 가장 적합한 형식입니다.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

컬러 피커 도구는 사용자가 원하는 색상을 선택하고 HEX, RGB, HSL, CMYK 등 다양한 형식으로 정확한 코드를 확인할 수 있게 해주는 디지털 유틸리티입니다. UI/UX 디자이너들이 인터페이스 색상을 선택하거나, 웹 개발자들이 CSS 색상 값을 코딩하고, 브랜드 디자이너들이 색상 일관성을 유지하며, 사진작가들이 이미지에서 색상을 추출하고, 디지털 아티스트들이 팔레트를 제작하는 데 매일 사용됩니다. 컬러 피커 웹은 2026년에 이용 가능한 가장 포괄적인 무료 컬러 피커로, 20개 이상의 색상 형식, WCAG 접근성 검사, 색맹 시뮬레이션, 18개 언어를 지원합니다.

HEX 색상 코드는 웹 디자인과 CSS에서 사용되는 6자리 16진수 색상 표현입니다. '#' 기호로 시작하며, 각각 빨간색, 초록색, 파랑색 채널의 강도를 나타내는 3쌍의 문자(00–FF)가 뒤에 옵니다. 예를 들어: #FF0000은 순수 빨강(R=255, G=0, B=0), #FFFFFF는 흰색(모든 채널 최대), #000000은 검정색(모든 채널 0)입니다. #F00와 같은 3자리 약식 HEX 코드는 #FF0000으로 확장됩니다. HEX는 HTML, CSS, SVG, Figma와 같은 디자인 도구에서 가장 널리 지원되는 색상 형식입니다.

웹사이트 색상을 선택하기 위해: (1) 브랜드의 기본 색상으로 시작하여 HSL 조정을 사용하여 전체 9단계 색상 스케일(50–900)을 만듭니다. (2) 60-30-10 규칙을 적용합니다 — 60% 중성 배경, 30% 보조 색상, 10% CTA 강조 색상. (3) 모든 텍스트/배경 조합이 WCAG AA 대비 기준(일반 텍스트 최소 4.5:1)을 충족하는지 확인합니다. (4) Color Harmony 도구를 사용하여 조화로운 강조 색상을 생성합니다 — 웹사이트에는 삼원색(triadic) 또는 분할 보색(split-complementary) 스킴이 가장 적합합니다. (5) 색맹 시뮬레이터를 사용하여 모든 색상 조합을 테스트하여 모든 사용자가 접근할 수 있도록 합니다.

브랜드 색상을 선택하려면: (1) 색채 심리를 연구하세요 — 파란색은 신뢰를 쌓고, 초록색은 성장을 나타내며, 빨간색은 긴급함을 만들고, 보라색은 고급스러움과 창의성을 연상시킵니다. (2) 업계를 분석하세요 — 기술 브랜드는 파란색과 회색을 선호하고, 헬스케어 브랜드는 초록색을 사용하며, 럭셔리 브랜드는 금색, 검은색 또는 짙은 보라색을 사용합니다. (3) 브랜드의 핵심 감정을 반영하는 기본 브랜드 색상을 선택하세요. (4) HSL 방식을 사용하여 기본 색상에서 전체 색상 스케일을 구축하세요. (5) 색상 조화 이론을 활용하여 보조 색상과 강조 색상을 선택하세요. (6) 모든 조합이 WCAG 접근성 기준을 충족하는지 확인하세요. 모든 플랫폼에서 일관성을 위해 디자인 토큰으로 문서화하세요.

HEX, RGB, 그리고 HSL은 같은 색을 나타내는 세 가지 방법입니다: HEX (#9333ea)는 CSS와 HTML에 이상적인 6자리 16진수 형식으로, 가장 널리 지원됩니다. RGB (rgb(147, 51, 234)) 0–255 범위의 빨강(Red), 초록(Green), 파랑(Blue) 채널 값으로 색상을 정의합니다 — JavaScript 캔버스, SVG, 화면 렌더링에 가장 적합합니다. HSL (hsl(270, 81%, 56%))는 색상을 색상 각도(0–360°), 채도(0–100%), 밝기(0–100%)로 정의합니다 — 각 속성을 독립적으로 조정할 수 있어 디자이너에게 가장 직관적이며, CSS 애니메이션과 동적 테마 설정에 이상적입니다. 세 가지 모두 동일한 색상을 설명하지만 서로 다른 워크플로우에 사용됩니다.

RGB와 CMYK는 서로 다른 출력 유형을 위한 근본적으로 다른 색상 모델입니다. RGB (빨강, 초록, 파랑)은 디지털 화면에서 사용되는 가산 색 모델로 — 색을 결합하면 빛이 더해지고, 모든 채널을 최대치로 혼합하면 흰색이 생성됩니다. CMYK (시안, 마젠타, 옐로우, 키/블랙)은 물리적 인쇄에 사용되는 감산 색 모델입니다 — 잉크를 혼합하면 빛을 흡수하고, 모두 결합하면 검정색이 됩니다. 디지털/화면 출력용으로는 항상 RGB로 디자인하세요. 상업용 인쇄소에 파일을 보내기 전에 CMYK로 변환하세요. 변환은 절대 완벽하지 않습니다 — 일부 RGB 색상(특히 밝고 채도가 높은 색상)은 CMYK 인쇄에서 재현할 수 없습니다.

HSB(색상, 채도, 밝기)와 HSV(색상, 채도, 명도)는 이름만 다른 동일한 색상 모델입니다. 색상(0°–360°)은 색상 계열을 식별합니다. 채도(0–100%)는 회색에서 완전히 선명한 색상까지 색의 생기 정도를 조절합니다. 밝기/명도(0–100%)는 색상이 나타내는 빛의 양을 조절하며, 검정(0%)에서 완전히 밝은 색(100%)까지 나타납니다. HSB는 Adobe Photoshop, Illustrator 및 Figma의 색상 선택기에서 기본 모델로, 이러한 도구를 사용하는 디자이너에게 필수적입니다. HSL과 다른 점은 Lightness와 Brightness의 계산 방식에 있습니다. HSL에서는 50% 조도가 순수한 색상이지만, HSB에서는 100% 밝기가 순수한 색상입니다.

LAB (CIELAB)와 XYZ (CIEXYZ)는 인간 시각 과학을 기반으로 한 장치 독립적이며 지각적으로 균일한 색 공간입니다. XYZ 모든 현대 색채 과학의 기초로, 세 가지 원추세포(X, Y, Z가 대략 빨강, 초록, 파랑 민감도에 해당)를 사용하여 인간의 눈이 인지하는 방식으로 색을 매핑합니다. LAB XYZ에서 파생되었으며, 동일한 수치 간격이 동일한 인지된 색상 차이를 나타내도록 설계되어 색상 비교, 이미지 처리, 기계 학습 및 인쇄 품질 관리에 이상적입니다. 두 가지 모두 전문 색상 관리, ICC 색상 프로필 및 고급 이미지 편집 워크플로우에 사용됩니다. CSS는 이제 최신 브라우저에서 color(xyz …) 및 lab(…) 구문을 통해 둘 다 지원합니다.

Color Picker 웹의 이미지 색상 선택기는 사진, 스크린샷, 로고 또는 아트워크에서 정확한 색상을 추출할 수 있게 해줍니다. 모든 이미지 파일을 업로드한 후, 원하는 픽셀을 클릭하면 해당 색상의 HEX, RGB, HSL 값을 즉시 추출할 수 있습니다. 이 도구는 또한 이미지의 주요 색상에서 전체 색상 팔레트를 자동으로 생성합니다. 이는 기존 자료에서 브랜드 색상을 맞추거나, 무드 보드에서 팔레트를 만들거나, 제품 사진에서 색상을 추출하거나, 경쟁사 웹사이트에서 색상 구성을 역설계할 때 유용합니다. 계정이나 소프트웨어 설치가 필요 없으며, 브라우저에서 완전히 작동합니다.

컬러 피커 웹은 색상 휠 이론을 기반으로 한 여섯 가지 주요 색상 조화 유형을 모두 지원합니다: 보완적인 — 두 색상이 정확히 반대(180° 차이), 최대 대비. 분할 보색 — 하나의 기본 색상과 그 보색에 인접한 두 색상 (150° 및 210°). 3색 조화 — 세 가지 색상이 같은 간격(120°)으로 배열되어, 균형 잡히고 활기차다. 유사색 — 서로 인접한 세 가지 색상 (30° 간격), 조화롭고 자연스러움. 단색 — 채도와 밝기 수준이 다른 단일 색조의 변형입니다. 4색 조화 — 네 가지 색상이 동일하게 간격을 두고 배치됨(90° 간격), 복잡하고 풍부함. 모든 조화는 색상을 선택할 때 실시간으로 수학적으로 계산됨.

네, Color Picker 웹은 완전히 무료로 사용할 수 있습니다 — 색상 선택기, 팔레트 생성기, 이미지 색상 선택기, WCAG 대비 검사기, 색맹 시뮬레이터, 색상 조화, 색조 및 음영 생성기, 그리고 20개 이상의 색상 형식 변환 기능을 포함한 모든 기능을 비용 없이 이용할 수 있습니다. 계정, 이메일 주소, 또는 등록이 필요하지 않습니다. 광고도 없고, 사용 제한도 없으며, 프리미엄 요금제도 없습니다 — 모든 기능이 영구적으로 무료입니다. 이 도구는 또한 다음 18개 언어로 제공됩니다: 영어, 힌디어, 스페인어, 러시아어, 프랑스어, 독일어, 이탈리아어, 포르투갈어, 벵골어, 일본어, 한국어, 말레이어, 폴란드어, 인도네시아어, 아랍어, 불가리아어, 터키어, 스웨덴어.

WCAG (웹 콘텐츠 접근성 지침) 색상 대비 요구 사항은 시력이 낮은 사용자, 색맹 사용자 또는 노안 사용자도 텍스트를 읽을 수 있도록 보장합니다. 대비 비율은 텍스트 색상과 배경 사이의 명도 차이를 측정하며 1:1(대비 없음)에서 21:1(최대, 흰색 배경에 검은색)까지 범위가 있습니다. WCAG 2.2 레벨 AA는 일반 텍스트에 최소 4.5:1, 큰 텍스트에는 3:1의 비율을 요구합니다. 레벨 AAA는 일반 텍스트에 7:1을 요구합니다. 준수하지 않을 경우 미국 ADA, 유럽 EAA, 섹션 508에 따라 법적 책임이 발생할 수 있습니다. 2023년 한 해에 미국에서만 4,600건 이상 접근성 관련 소송이 제기되었으며, 대비 실패는 가장 자주 언급된 문제 중 하나였습니다.

컬러 피커 웹은 8가지 유형의 색각 이상을 시뮬레이션합니다: 제1색맹 — 적색맹 (남성의 1.3%). 제1색약 — 감소된 빨간색 민감도 (남성의 1.3%) 제2색맹 — 녹색 색맹 (남성의 1.2%). 제2색약 — 녹색 민감도 감소 (남성의 5%, 가장 흔한 유형). 제3색맹 — 파란색 색맹 (인구의 0.001%). 제3색약 — 감소된 파랑 민감도(드묾). 전색맹 — 완전한 색맹, 회색조만 볼 수 있음(인구의 0.003%). 전색약 — 모든 채널에서 색 인식 감소 (매우 드묾). 각 시뮬레이션은 선택한 색상에 실시간으로 적용되는 임상 색상 변환 행렬을 사용합니다.

UI 디자인에서 색채 심리학은 색상이 사용자 감정, 인식, 행동에 어떻게 영향을 미치는지를 연구합니다. 주요 연관성: 파란색 — 신뢰, 안정성, 차분함 (페이스북, 트위터, 페이팔, 링크드인에서 사용) 녹색 — 성장, 건강, 자연, 성공 (Spotify, WhatsApp, 통곡물 브랜드에서 사용됨). 빨간색 — 긴급함, 열정, 에너지, 식욕 (판매 배너, 식품 브랜드, CTA에 사용됨). 보라색 — 사치, 창의성, 지혜 (캔버리, 홀마크, 뷰티 브랜드에서 사용됨). 노란색 — 낙관, 따뜻함, 주의(경고, 판매 강조에 사용됨). 오렌지 — 열정, 친근함 (Amazon, Fanta, Harley-Davidson에서 사용). 색채 심리는 전환율, 브랜드 인식, 사용자 유지에 영향을 미친다.

디자인 시스템 색상 팔레트를 구축하는 과정은 5단계로 이루어집니다: (1) 기본 브랜드 색상을 정의하고 HSL로 변환합니다. (2) 밝기를 체계적으로 조정하여 9단계 색상 스케일(50–900)을 생성합니다 — 밝은 단계(50–300)는 배경 및 색조용, 어두운 단계(600–900)는 텍스트 및 다크 모드용입니다. (3) 보조, 강조, 성공, 경고, 오류, 중립 색상에 대해 동일하게 반복합니다. (4) 스케일 단계를 참조하는 시맨틱 토큰(--color-primary, --color-primary-hover, --color-surface)을 생성합니다. (5) 모든 텍스트/배경 조합이 WCAG AA 기준을 통과하는지 확인합니다. Color Picker Web을 사용하여 스케일을 생성하고 대비를 확인하며, Figma 또는 CSS용 디자인 토큰으로 HEX/HSL 값을 내보냅니다.

60-30-10 규칙은 균형 잡히고 시각적으로 매력적인 색상 조합을 만드는 고전적인 디자인 원칙입니다. 60% — 주요/중립 색상 (배경, 벽, 큰 표면) — 일반적으로 전체적인 톤을 설정하는 밝은 중립색. 30% — 보조 색상(가구, 헤더, 사이드바) — 주 색상을 보완하고 깊이를 더합니다. 10% — 강조 색상(CTA, 버튼, 하이라이트, 중요한 링크) — 시각적인 흥미를 만들고 주요 행동에 주의를 끌게 합니다. 웹 디자인에서는 이것이 다음과 같이 적용됩니다: 배경 및 기본 표면 60%, 콘텐츠 영역 및 보조 UI 요소 30%, 주요 버튼, 활성 상태 및 중요한 하이라이트 10%. 이 비율은 시각적 과부하를 방지하면서 계층 구조를 유지합니다.

상대 밝기는 색상의 인지된 밝기를 0(검정)에서 1(흰색)까지의 척도로 측정합니다. 계산 방법: (1) 각 RGB 채널(0–255)을 255로 나누어 소수(0–1)로 변환합니다. (2) 감마 보정을 제거합니다: 값 ≤ 0.04045이면 12.92로 나누고, 그렇지 않으면 (값 + 0.055) / 1.055의 2.4제곱을 적용합니다. (3) 가중 공식 적용: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. 가중치는 인간의 눈 민감도를 반영하며, 녹색에 가장 민감하고, 빨강에 덜 민감하며, 파랑에 가장 덜 민감합니다. (4) 대비 비율 = (L_밝은색 + 0.05) / (L_어두운색 + 0.05). 0.05의 오프셋은 일반적인 디스플레이의 주변광을 나타냅니다. Color Picker Web은 이 계산을 즉시 수행합니다.

HSL(색조, 채도, 명도)와 HSB/HSV(색조, 채도, 밝기/값)는 둘 다 색조와 채도를 사용하지만, 세 번째 채널에서 다릅니다. In HSL, 밝기 50%는 순수하고 완전히 채도가 있는 색상이며, 0%는 검정색, 100%는 흰색입니다. 대칭적입니다. 안에 HSB/HSV, 밝기/값 100%는 순수한 색상이며, 0%는 다른 값과 상관없이 항상 검정입니다. HSB는 먼저 100% 밝기에서 선명한 색상을 선택한 다음 어둡게 조절할 수 있기 때문에 색상을 선택할 때 더 직관적이며, Photoshop, Figma, Illustrator에서 기본값으로 사용됩니다. HSL은 동일한 색상의 어두운 버전과 밝은 버전 사이를 부드럽게 보간할 수 있기 때문에 CSS에서 더 직관적입니다.

가법 혼합 색(RGB)과 감법 혼합 색(CMYK)은 두 가지 기본 색 모델입니다. 가법 (RGB) — 빛을 내는 장치(스크린, 프로젝터, LED)에서 사용됩니다. 색상은 빛을 더하여 만들어집니다. 세 가지 채널을 모두 최대치(R=255, G=255, B=255)로 결합하면 흰색이 생성됩니다. 빛이 없으면(R=0, G=0, B=0) 검은색이 생성됩니다. 감산 혼합 (CMYK) — 인쇄에 사용됨. 잉크는 빛의 파장을 흡수(제거)함. 모든 잉크를 최대치로 혼합하면 모든 빛을 흡수하여 검정색을 생성함(이론상 — 실제로는 잉크 혼합이 완벽하지 않기 때문에 키/검정 잉크가 추가됨). 실제적 의미: 디지털 작업은 RGB로 디자인한 후 인쇄용으로 CMYK로 변환함 — 일부 선명한 RGB 색상은 CMYK에서 재현할 수 없음을 유의함.

색 온도는 색상의 따뜻함 또는 차가움을 설명하며, 광원에 대해서는 켈빈(K)으로 측정되고, 디자인 색상에 대해서는 지각적으로 인지됩니다. 따뜻한 색 (빨강, 주황, 노랑 — 색상 0°–60° 및 300°–360°)은 에너지가 넘치고 긴급하며 초대하는 느낌을 줍니다. 시각적으로 앞으로 다가오는 느낌이 있으며 — 따뜻한 색상의 요소는 더 가까이 있는 것처럼 보입니다. 차가운 색 (파랑, 초록, 보라 — 색조 120°–240°)는 차분하고 신뢰할 수 있으며 전문적인 느낌을 줍니다. 시각적으로 뒤로 물러나는 효과가 있어, 차가운 색상의 요소는 더 멀리 있는 것처럼 보입니다. 중립 (흰색, 회색, 베이지, 90°–120° 근처의 청록색)은 균형 잡히고 다용도로 사용될 수 있습니다. UI 디자인에서 따뜻한 색상은 행동 촉진(CTA)을 유도하고, 차가운 색상은 신뢰를 구축(헤더, 배경)하며, 중립색은 구조를 제공합니다. Color Picker Web의 'About Color' 섹션은 선택한 색상의 인지된 온도를 보여줍니다.