색상 코드 변환
#RRGGBB 형식. CSS에서 가장 흔히 사용
빨강, 초록, 파랑 (0-255)
색상, 채도, 명도. 직관적인 색상 조절
색상, 채도, 밝기. 그래픽 도구에서 사용
지각적으로 균일한 최신 CSS 색상 공간
알파(투명도) 채널 포함
색상 선택기(Color Picker)는 다양한 색상 모델 간 코드를 변환하고, 원하는 색상을 시각적으로 선택할 수 있는 온라인 도구입니다. 웹 개발, UI/UX 디자인, 그래픽 디자인 등에서 정확한 색상 코드는 필수적입니다. 본 도구는 HEX, RGB, HSL, HSV, OKLCH 등 주요 색상 형식을 모두 지원하며, 직관적인 색상 슬라이더와 팔레트를 통해 색상을 탐색하고 코드를 즉시 복사할 수 있습니다. 알파(투명도) 채널도 지원하여 반투명 색상 작업도 가능합니다.
색상 선택
색상 슬라이더를 드래그하거나 색상 영역에서 클릭하여 원하는 색상을 선택합니다. 또는 직접 HEX 코드 등을 입력할 수도 있습니다.
형식 확인
선택한 색상이 HEX, RGB, HSL, HSV, OKLCH 등 모든 형식으로 자동 변환되어 표시됩니다.
투명도 조절
알파 탭에서 투명도를 0~100% 범위로 조절하여 반투명 색상을 만들 수 있습니다.
코드 복사
필요한 색상 형식의 값을 클릭하면 클립보드에 자동 복사됩니다. CSS, 디자인 도구 등에 바로 붙여넣기 하세요.
HEX는 #RRGGBB 형태의 16진수 표기로 CSS에서 가장 흔히 사용됩니다. RGB는 빨강(0-255), 초록(0-255), 파랑(0-255)의 조합으로 색상을 표현합니다. HSL은 색상(Hue, 0-360), 채도(Saturation, 0-100%), 명도(Lightness, 0-100%)로 표현하여 인간의 직관에 가장 가깝습니다.
OKLCH는 지각적으로 균일한(perceptually uniform) 최신 CSS 색상 공간입니다. 기존 HSL에서는 같은 채도/명도라도 색상에 따라 밝기가 달라 보이는 문제가 있었는데, OKLCH는 이를 해결하여 일관성 있는 팔레트를 생성하는 데 유리합니다. CSS Color Level 4 표준에 포함되어 있습니다.
알파 값은 0(완전 투명)에서 1(완전 불투명) 사이의 값으로 색상의 투명도를 나타냅니다. CSS에서는 rgba(59, 130, 246, 0.5)처럼 사용하며, HEX에서는 #3B82F680처럼 뒤에 2자리를 추가합니다. 오버레이, 그림자, 배경 등에 활용됩니다.
WCAG 2.1 가이드라인에 따르면, 텍스트와 배경 사이의 명도 대비율이 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상이어야 합니다. 색상을 선택할 때 배경색과의 대비를 확인하여 시각 장애인도 읽을 수 있도록 배려하는 것이 중요합니다.
Figma, Sketch 등의 디자인 도구에서 복사한 HEX 코드를 본 도구에 입력하면 RGB, HSL 등 CSS에서 사용 가능한 형식으로 자동 변환됩니다. CSS 변수로 관리하면 테마 변경 시 효율적이며, HSL 형식은 밝기/채도 조절이 용이합니다.