색상 피커

색상 피커란?

색상 피커(Color Picker)는 웹 디자인, 그래픽 작업, UI/UX 개발에 필요한 색상을 시각적으로 선택하고 다양한 형식(HEX, RGB, HSL)으로 변환할 수 있는 온라인 도구입니다. 색상환과 채도/명도 선택기를 통해 원하는 색상을 직관적으로 찾을 수 있으며, 투명도(Alpha) 조절도 지원하여 RGBA, HSLA 형식의 색상 코드도 생성할 수 있습니다.

이 도구는 브라우저에서 직접 실행되므로 별도의 프로그램 설치가 필요 없습니다. EyeDropper API를 지원하는 브라우저(Chrome, Edge)에서는 화면의 모든 영역에서 색상을 직접 추출하는 스포이드 기능도 사용할 수 있어, 디자인 레퍼런스나 이미지에서 색상을 빠르게 가져올 수 있습니다.

이런 상황에서 사용하세요

• 웹 개발 – CSS 스타일시트에 적용할 정확한 색상 코드(HEX, RGB, HSL)를 빠르게 찾고 복사할 때
• UI/UX 디자인 – 앱이나 웹사이트의 버튼, 배경, 텍스트에 사용할 조화로운 색상 팔레트를 구성할 때
• 그래픽 디자인 – 포스터, 배너, 소셜 미디어 이미지에 사용할 색상을 선택하고 조합할 때
• 브랜드 아이덴티티 – 회사나 프로젝트의 브랜드 컬러를 정의하고 다양한 형식으로 문서화할 때
• 접근성 테스트 – 텍스트와 배경색 간의 대비를 확인하기 위한 색상값을 확인할 때
• 레퍼런스 색상 추출 – 마음에 드는 웹사이트나 이미지에서 EyeDropper로 색상을 직접 추출할 때
• 프레젠테이션 제작 – 발표 자료에 일관된 색상 테마를 적용하기 위한 색상 코드를 찾을 때

주요 기능

• 색상환(Color Wheel) 선택 – 360도 색상환에서 원하는 색조(Hue)를 직관적으로 선택합니다. 마우스 드래그나 터치로 부드럽게 색상을 탐색할 수 있습니다.
• 채도/명도 2D 선택기 – 선택한 색조를 기반으로 채도(Saturation)와 명도(Lightness)를 동시에 조절합니다. 밝은 파스텔 톤부터 진한 어두운 색상까지 자유롭게 선택 가능합니다.
• 투명도(Alpha) 슬라이더 – 0%부터 100%까지 투명도를 조절하여 RGBA, HSLA 형식의 반투명 색상을 만들 수 있습니다. 오버레이나 그라디언트 효과에 유용합니다.
• 다중 색상 형식 지원 – HEX, RGB, HSL 세 가지 형식을 실시간으로 변환하여 표시합니다. 투명도가 적용되면 자동으로 RGBA, HSLA 형식으로 전환됩니다.
• EyeDropper 화면 색상 추출 – Chrome, Edge 브라우저에서 화면의 어떤 영역이든 클릭하여 색상을 직접 추출합니다. 다른 탭의 이미지나 바탕화면에서도 색상을 가져올 수 있습니다.
• 조화 색상 자동 생성 – 선택한 색상을 기반으로 보색, 유사색, 삼원색, 단색 조화 팔레트를 자동으로 생성합니다. 색상 이론에 기반한 조화로운 색상 조합을 쉽게 찾을 수 있습니다.
• CSS 코드 원클릭 복사 – 선택한 색상을 color: #D4AF37; 형식의 CSS 코드로 바로 복사합니다. HEX, RGB, HSL 중 원하는 형식을 선택할 수 있습니다.
• 색상 히스토리 저장 – 최근 선택한 20개의 색상이 자동으로 저장됩니다. 브라우저를 닫아도 히스토리가 유지되어 이전에 사용한 색상을 다시 사용할 수 있습니다.

사용 방법

1. 색조 선택 – 색상환에서 원하는 기본 색상(빨강, 주황, 노랑, 초록, 파랑, 보라 등)의 영역을 클릭하거나 드래그합니다.
2. 채도/명도 조절 – 아래 사각형 영역에서 좌우로 움직여 채도를, 상하로 움직여 명도를 조절합니다. 오른쪽 위가 가장 선명하고 밝은 색상입니다.
3. 투명도 설정 – 반투명 효과가 필요하면 Alpha 슬라이더를 조절합니다. 100%는 불투명, 0%는 완전 투명입니다.
4. 색상값 확인 및 복사 – 오른쪽 패널에서 HEX, RGB, HSL 값을 확인하고, 각 형식 옆의 복사 버튼을 클릭하여 클립보드에 복사합니다.
5. CSS 코드 사용 – 하단의 CSS 코드 섹션에서 원하는 형식(HEX/RGB/HSL)을 선택하고 “CSS 복사” 버튼으로 스타일시트에 바로 붙여넣을 수 있는 코드를 복사합니다.

색상 이론과 조화 색상의 이해

색상환(Color Wheel)의 원리

색상환은 1666년 아이작 뉴턴이 프리즘으로 빛을 분해한 실험에서 시작되었습니다. 현대의 색상환은 빨강-노랑-파랑을 기본으로 하는 전통적 색상환(RYB)과 빨강-초록-파랑을 사용하는 디지털 색상환(RGB)으로 나뉩니다. 이 도구는 HSL(Hue-Saturation-Lightness) 색상 모델을 기반으로 하며, 색조(Hue)는 0°부터 360°까지의 각도로 표현됩니다.

HSL vs RGB vs HEX

• HEX (16진수) – 웹에서 가장 널리 사용되는 형식입니다. #RRGGBB 형태로 빨강, 초록, 파랑 각각을 00~FF(0~255)로 표현합니다. 예: #D4AF37은 골드 색상입니다.
• RGB (Red, Green, Blue) – 빛의 삼원색을 기반으로 하며, 각 채널을 0~255 값으로 표현합니다. CSS에서 rgb(212, 175, 55) 형식으로 사용합니다.
• HSL (Hue, Saturation, Lightness) – 인간의 색상 인지 방식에 가까운 모델입니다. 색조(0°~360°), 채도(0%~100%), 명도(0%~100%)로 구성됩니다. 같은 색조에서 밝기나 선명도만 조절하기 쉽습니다.

조화 색상의 종류

• 보색 (Complementary) – 색상환에서 정반대에 위치한 두 색상입니다. 강한 대비를 만들어 시선을 끌기 좋습니다. 예: 파랑(240°)의 보색은 노랑(60°)입니다.
• 유사색 (Analogous) – 색상환에서 서로 인접한 색상들입니다. 자연에서 자주 볼 수 있으며, 조화롭고 편안한 느낌을 줍니다. 예: 주황-노랑-연두.
• 삼원색 조화 (Triadic) – 색상환을 3등분한 위치의 색상들입니다. 균형 잡힌 대비를 제공하면서도 보색보다 부드럽습니다. 예: 빨강-노랑-파랑.
• 단색 조화 (Monochromatic) – 하나의 색조에서 채도와 명도만 변화시킨 색상들입니다. 깔끔하고 세련된 느낌을 주며, 브랜드 디자인에 자주 사용됩니다.

투명도(Alpha)의 활용

Alpha 채널은 색상의 불투명도를 조절합니다. 0%는 완전 투명, 100%는 완전 불투명입니다. 웹 디자인에서 오버레이 효과, 그라디언트, 호버 상태 등에 반투명 색상을 자주 사용합니다. RGBA와 HSLA 형식은 CSS3부터 지원되며, 투명도가 포함된 HEX 코드(#RRGGBBAA)는 모던 브라우저에서 지원합니다.

EyeDropper API 안내

EyeDropper API는 브라우저에서 화면의 색상을 직접 추출할 수 있게 해주는 웹 API입니다. 이 기능은 현재 Chrome 95+, Edge 95+ 버전에서 지원됩니다. Firefox와 Safari에서는 아직 지원되지 않습니다.

EyeDropper를 사용하면 현재 탭뿐만 아니라 다른 탭, 다른 애플리케이션, 심지어 바탕화면에서도 색상을 추출할 수 있습니다. 디자인 레퍼런스 이미지, 경쟁사 웹사이트, 영감을 주는 사진 등에서 정확한 색상값을 빠르게 가져오는 데 매우 유용합니다.

활용 팁

• 브랜드 색상 문서화 – 회사나 프로젝트의 주요 색상을 선택한 후 HEX, RGB, HSL 값을 모두 기록해두면 다양한 환경(웹, 인쇄, 영상)에서 일관된 색상을 사용할 수 있습니다.
• 접근성 고려 – 텍스트와 배경색을 선택할 때 명도 차이가 충분한지 확인하세요. WCAG 기준으로 일반 텍스트는 4.5:1 이상, 큰 텍스트는 3:1 이상의 대비율이 권장됩니다.
• 색상 팔레트 구성 – 하나의 주요 색상을 선택한 후 조화 색상 기능을 활용하면 전문적인 색상 팔레트를 쉽게 만들 수 있습니다. 보통 주요 색상 1개, 보조 색상 1-2개, 강조 색상 1개로 구성합니다.
• 반투명 효과 활용 – 배경 이미지 위에 텍스트를 올릴 때 반투명 오버레이(예: rgba(0, 0, 0, 0.5))를 사용하면 가독성을 높일 수 있습니다.

자주 묻는 질문