컬러 피커
원하는 색상을 선택하고 HEX, RGB, HSL 코드를 즉시 복사하세요.
컬러 피커란 무엇인가요?
컬러 피커는 화면에서 시각적으로 색상을 선택하고 이를 프로그래밍 및 디자인에 필요한 수학적 색상 코드(HEX, RGB, HSL)로 즉시 변환해 주는 웹 유틸리티입니다. 디자이너와 프론트엔드 개발자가 일관된 시각 경험을 유지하는 데 사용됩니다.
주요 기능
- 직관적인 비주얼 선택: 캔버스를 드래그하여 채도와 조도를 미세하게 조정할 수 있습니다.
- 원클릭 클립보드 복사: 생성된 CSS 코드를 클릭 한 번으로 복사하여 프로젝트에 바로 적용할 수 있습니다.
- 100% 브라우저 메모리 실행: 모든 계산은 브라우저 내부에서만 처리되며 외부 서버로 데이터가 전송되지 않습니다.
관련 색상 도구
사진이나 이미지에서 픽셀 색상을 직접 스포이트로 추출하려면 이미지 컬러 피커를 이용해 보세요. 웹 접근성 텍스트 가독성을 확인하려면 WCAG 명도 대비 검사기를 추천합니다.
지식 베이스 & FAQ
자주 묻는 질문 (FAQ)
자주 묻는 질문과 기술적 문제, 웹 표준에 대한 명확한 답변과 솔루션입니다.
HEX 코드에서 보색, 유사색, 3색 조화(트라이어드)를 정확히 계산하는 방법은?expand_more
색상 조화는 360도 색상환의 각도 회전 공식으로 계산됩니다:
- 보색(Complementary): 색상(Hue)을 180° 회전(예:
(hue + 180) % 360). 240° 순수 파랑은 60° 밝은 주황과 완벽한 보색을 이룹니다. - 유사색(Analogous): 색상을 ±30° 회전. 120° 초록은 90° 연두색 및 150° 청록색과 자연스럽게 어우러집니다.
- 트라이어드(Triadic): 색상을 +120° 및 +240° 회전하여 높은 시각적 에너지와 정삼각형 균형을 만듭니다.
8자리 HEX 색상 코드(#RRGGBBAA)란 무엇이며 어떻게 읽나요?expand_more
8자리 16진수 코드(예:
#4F46E580)는 알파 채널(투명도)을 포함합니다. 앞의 6자리는 빨강, 초록, 파랑(#RRGGBB)을 나타내며, 7~8번째 자리는 00(0% 투명)부터 FF(100% 불투명)까지의 투명도를 정의합니다. 예를 들어 80은 10진수로 128이며 약 50%의 투명도를 의미합니다.컬러 피커에서 HSV(HSB)와 HSL의 차이점은 무엇인가요?expand_more
두 모델 모두 RGB에서 유도되었지만 명도 정의가 다릅니다:
- HSV / HSB(색상, 채도, 명도/밝기): 가장 밝은 색상 성분을 기준으로 밝기를 정의합니다. 포토샵이나 피그마의 2D 사각형 색상 캔버스에서 사용됩니다.
- HSL(색상, 채도, 조도): 0%를 검정, 50%를 순수 색상, 100%를 흰색으로 배치한 대칭 축으로 웹 표준 CSS의
hsl()과 직결됩니다.
브랜드 색상에서 탁해지지 않는 밝은 톤(Tints)과 어두운 톤(Shades)을 만드는 법은?expand_more
세련된 색상 스케일을 구성하는 팁:
- 밝은 톤(Tints): 색상(Hue)을 유지하면서 조도를 100%로 높이되, 채도를 살짝 낮춰야 형광 느낌의 번짐을 막을 수 있습니다.
- 어두운 톤(Shades): 단순히 검은색을 섞지 말고, 조도를 0%로 낮추면서 색상을 차가운 톤(딥 인디고, 네이비)으로 살짝 틀어주면 탁하지 않고 깊이 있는 명암이 완성됩니다.