색상표
사각형에서 채도와 명도를 고르고, 무지개 띠에서 색조를 바꾸거나 HEX를 입력합니다. 아래 형식 값은 실시간으로 갱신됩니다.
색상표
사각형에서 채도·명도를 드래그하고, 띠에서 색조를 고르거나 HEX를 붙여 넣으세요.
색 형식
박스를 클릭하면 해당 코드를 클립보드에 복사합니다.
도구 상세 안내
웹 디자이너, UI/UX 전문가, 프론트엔드 개발자를 위해 인터랙티브 색상 팔레트와 실시간 좌표 변환기를 통합 제공하는 전문가용 컬러 유틸리티입니다. 2D 채도/명도 캔버스와 360도 색상환(Hue) 스펙트럼 슬라이더를 통해 원하는 색상을 시각적으로 정밀하게 선택할 수 있으며, 웹 표준 HEX(6자리/8자리 투명도 지원), CSS RGB/RGBA, HSL/HSLA, 인쇄 표준 CMYK, 디지털 색도 공간 HSV/HSB 수치를 1밀리초 단위로 실시간 상호 계산합니다. 주요 웹 안전 색상(Web Safe Colors), 테일윈드(Tailwind CSS) 및 머티리얼 디자인(Material Design) 표준 색상표를 함께 제공하며, WCAG 명도 대비율 검증과 즐겨찾기 색상 히스토리 관리까지 브라우저 로컬에서 안전하고 신속하게 지원합니다.
내 기기에서만 안전하게 처리됩니다
모든 작업은 지금 사용 중인 브라우저에서만 이뤄집니다. 파일이 다른 서버로 전송되지 않으니 안심하고 사용하세요.
사용 방법
2D 컬러 피커 캔버스에서 마우스를 드래그하여 명도와 채도를 미세 조정하거나, 색상환 슬라이더로 기본 색조(Hue)를 선택합니다.
정확히 일치시키고자 하는 색상이 있다면 하단의 HEX, RGB, HSL, CMYK 입력창에 직접 수치를 기입하여 원하는 색을 즉시 탐색합니다.
화면 하단의 웹 안전 컬러 차트, 파스텔 톤, 모던 UI 테마 프리셋 팔레트를 클릭하여 사전 검증된 조화로운 색상 조합을 탐색합니다.
목적에 맞는 컬러 포맷(HEX, rgb(), hsl() 등)의 복사 버튼을 눌러 CSS 스타일시트, Figma 디자인, 일러스트레이터 작업에 즉시 적용합니다.
핵심 활용 시나리오
UI 디자인 시스템 및 CSS 변수 토큰 매핑
디자이너가 전달한 브랜드 시그니처 컬러를 HEX 및 RGBA 수치로 정확히 교차 계산하고, Tailwind CSS나 CSS 커스텀 속성 토큰에 즉시 등록합니다.
웹/모바일 화면에서 인쇄 출판용 CMYK 스펙 교정
디스플레이용 RGB 색상을 인쇄소 제출용 표준 CMYK 잉크 비율로 정밀 변환하여 인쇄물 출력 시 발생하는 원치 않는 색상 탁함이나 톤 왜곡을 방지합니다.
WCAG 2.1 웹 접근성 텍스트 명도 대비 검증
본문 텍스트 색상과 배경색 간의 명도 대비 비율(최소 4.5:1 권장)을 계산하여 시각 약자 및 고령자를 위한 접근성 기준을 충족합니다.
브랜드 서브 톤 및 그라디언트 스펙트럼 추출
메인 브랜드 컬러를 기준으로 HSL 색조 각도와 채도/명도 수치를 일정 비율로 증감시켜 조화로운 보조 강조색 및 그라디언트 스펙트럼을 체계화합니다.
다크 모드 및 라이트 모드 전환 팔레트 구축
명도(Lightness) 수치를 대칭적으로 조절하여 동일한 브랜드 아이덴티티를 유지하면서도 눈부심 없는 고품질 다크 테마 색상군을 설계합니다.
자주 묻는 질문 (FAQ)
모니터 디스플레이는 빨강, 초록, 파랑 빛의 가산 혼합(RGB)을 사용하며 표현 가능한 색 영역(Color Gamut)이 매우 넓습니다. 반면 인쇄물은 종이에 흡수되는 잉크의 감산 혼합(CMYK: 시안, 마젠타, 옐로우, 블랙)을 사용하여 표현 색 영역이 물리적으로 좁습니다. 본 도구는 수학적 표준 보간 공식을 적용하여 인쇄 환경에서 시각적으로 가장 근접한 CMYK 값을 계산해 제공합니다.
RGB나 HEX는 빛의 물리적 세기를 표현하므로 색상을 조금 더 밝게 하거나 채도를 낮추려면 세 숫자를 복잡하게 모두 계산해야 합니다. 반면 HSL(색상 Hue, 채도 Saturation, 명도 Lightness)은 '색조'를 고정한 채 명도(L)나 채도(S) 숫자 하나만 직관적으로 조절할 수 있어 버튼의 호버(Hover), 액티브(Active), 비활성화(Disabled) 상태 스타일을 체계적으로 구현하기에 훨씬 유리합니다.
8자리 HEX 색상 코드에서 앞의 6자리는 기본 RGB 색상이며, 마지막 2자리는 알파 투명도(Alpha 채널)를 16진수(00 = 완전 투명, FF = 완전 불투명)로 나타냅니다. 예를 들어 '#FF573380'은 투명도 약 50%를 적용한 주황색을 의미합니다.
일반 본문 텍스트는 배경과의 명도 대비율이 최소 4.5:1 이상(AA 등급)이어야 하며, 18pt(24px) 이상의 큰 텍스트나 14pt 볼드 텍스트는 최소 3:1 이상을 유지해야 시각 장애인과 저시력자도 읽을 수 있습니다. 최고 등급인 AAA 기준은 7:1 이상입니다.
과거 256색(8비트) 모니터 환경에서 운영체제 간 색상 왜곡 없이 동일하게 표시되도록 규정된 216가지 색상 세트입니다. 오늘날의 트루컬러(24/32비트) 및 광색역(DCI-P3) 디스플레이에서는 필수적이지 않으나, 레거시 시스템 호환성이나 단순하고 일관된 복고풍 팔레트를 구성할 때 여전히 좋은 기준점이 됩니다.
네! 최근에 선택하거나 복사한 색상 내역은 사용자의 브라우저 로컬 스토리지(LocalStorage)에 안전하게 캐싱되므로, 페이지를 새로고침하거나 브라우저를 다시 열어도 이전 작업 내역을 그대로 이어서 확인하고 관리하실 수 있습니다.