디자인 · 개발 도구
HTML 색상표 · 컬러코드
원하는 색상을 선택하면 웹과 디자인 작업에 필요한 HEX, RGB, HSL, CMYK 값을 즉시 변환하고 복사할 수 있습니다.
Color picker
색상 선택
Palette & contrast
팔레트와 가독성
명도 팔레트
색상을 클릭하면 선택 색상으로 적용됩니다.
텍스트 대비율
최근 사용한 색상
Web colors
자주 사용하는 웹 색상
색상 견본을 누르면 해당 색상을 선택하고 모든 컬러코드를 다시 계산합니다.
사용 안내
HTML 색상표와 컬러코드 사용 방법
색상표에서 색을 고르거나 HEX 코드를 직접 입력하세요. 변환된 코드는 CSS, HTML, SVG, 디자인 프로그램 등 색상 값을 지원하는 곳에 바로 사용할 수 있습니다.
HEX 색상 코드
HEX는 #RRGGBB 형식으로 빨강, 초록, 파랑 값을 00부터 FF까지의 16진수로 표현합니다. 예를 들어 #FF0000은 빨강, #FFFFFF는 흰색입니다.
RGB와 RGBA
RGB는 세 채널을 0~255 범위로 표현합니다. RGBA의 A는 투명도로 0은 완전 투명, 1은 완전 불투명입니다. 화면 기반 디자인과 JavaScript 색상 처리에 자주 사용합니다.
HSL과 HSLA
HSL은 색상각 0~360도, 채도와 명도를 백분율로 표현합니다. 같은 색조에서 밝거나 어두운 변형을 만들기 쉬워 디자인 시스템과 테마 제작에 편리합니다.
CMYK 값 안내
CMYK는 인쇄에서 사용하는 시안, 마젠타, 노랑, 검정 비율입니다. 화면의 RGB를 수학적으로 변환한 참고값이며 정확한 인쇄 색상은 인쇄 프로필과 교정쇄로 확인해야 합니다.
텍스트 대비율
WCAG 대비율은 전경과 배경의 밝기 차이를 나타냅니다. 일반 텍스트는 4.5:1 이상, 큰 텍스트는 3:1 이상을 권장하며 7:1 이상이면 AAA 기준에 해당합니다.
HEX 단축 표기
#RRGGBB에서 각 채널의 두 문자가 같으면 #RGB로 줄일 수 있습니다. 예를 들어 #FFCC00은 #FC0으로 작성해도 같은 색상입니다.
색상 변환, 팔레트 생성과 대비율 계산은 모두 현재 브라우저에서 처리됩니다. 최근 색상은 해당 브라우저의 로컬 저장소에만 보관되며 서버로 전송하지 않습니다.