색상 선택기 - 컬러 피커 & 변환기
무료 온라인 색상 선택기. HEX, RGB, HSL, CMYK 실시간 변환. 색상 팔레트 생성, 대비 체크.
이 도구는?
색상 선택기는 시각적으로 색상을 선택하거나 HEX, RGB, HSL 값을 입력하여 세 가지 형식 간 즉시 변환할 수 있는 도구입니다. CSS 작성, 그래픽 디자인, 브랜딩 작업 등에서 정확한 색상 값이 필요한 웹 디자이너, UI/UX 전문가에게 필수적인 도구입니다.
color: #3B82F6; background-color: rgb(59, 130, 246); background-color: hsl(217, 91%, 60%); /* CMYK: cmyk(76%, 47%, 0%, 4%) */
미리보기 텍스트 - 일반 텍스트
미리보기 텍스트 - 큰 텍스트
작동 방식
색상은 여러 수학적 모델로 표현할 수 있습니다. HEX는 16진수 표기법(#RRGGBB)으로 각 쌍이 빨강, 초록, 파랑의 강도를 00~FF(10진수 0~255)로 나타냅니다. RGB(Red, Green, Blue)는 각 채널에 0~255의 10진수 값을 사용하여 빛의 강도 조합으로 색상을 정의합니다.
HSL(Hue, Saturation, Lightness)은 보다 직관적인 방식으로 색상을 표현합니다: 색조(Hue)는 360° 색상환에서의 각도(0°=빨강, 120°=초록, 240°=파랑), 채도(Saturation)는 0%(회색)~100%(선명) 범위의 색상 강도, 밝기(Lightness)는 0%(검정)~100%(흰색)이며 50%가 순색입니다.
형식 간 변환은 수학적 변환을 통해 이루어집니다. HEX→RGB는 16진법에서 10진법으로의 직접 변환이며, RGB→HSL은 채널 최대/최소 값의 차이인 채도를 계산한 후 지배적 채널에서 색조를, 채도와 밝기의 관계에서 채도를, 최대/최소 값의 평균에서 밝기를 도출합니다.
사용 방법
- 색상 선택기에서 색상을 선택하거나 HEX, RGB, HSL, CMYK 형식으로 직접 입력하세요.
- 다른 모든 형식이 실시간으로 자동 변환됩니다.
- 각 형식 옆의 복사 버튼을 클릭하면 클립보드에 복사됩니다.
- 팔레트 생성기로 보색, 유사색, 삼원색 색상 조합을 만드세요.
- 텍스트/배경 대비율을 확인하여 WCAG 접근성 기준을 충족하는지 확인하세요.
자주 묻는 질문
HEX, RGB, HSL, CMYK의 차이점은?▼
WCAG 대비율이란?▼
좋은 색상 팔레트를 만드는 방법은?▼
인쇄 디자인에도 사용할 수 있나요?▼
다른 화면에서 색상이 다르게 보이는 이유는?▼
관련 도구
관련 글
HEX to RGB 색상 변환: 디자이너 완벽 가이드
HEX, RGB, HSL 색상 코드 변환법과 실무에서 바로 쓰는 팔레트 조합 팁을 예시와 함께 정리했어요.
2026-03-26색상 선택기 가이드 - HEX RGB HSL 색상 코드 변환 총정리 2026
HEX, RGB, HSL, CMYK 색상 코드의 차이점부터 색상 팔레트 만들기, WCAG 접근성 대비 체크까지. 디자이너·개발자를 위한 완벽 가이드.
2026-03-30CSS 그라데이션 가이드 - linear-gradient 사용법과 예제 2026
CSS 그라데이션 완벽 가이드. linear-gradient, radial-gradient 문법, 다중 색상 스톱, 실전 예제, 2026 디자인 트렌드까지.