색상 모델 설명 (HEX/RGB/HSL)

색상 모델은 색상을 표현하기 위한 수학적 시스템입니다. HEX(16진수)는 HTML과 CSS에서 사용되는 6자리 코드로, 빨강, 초록, 파랑 구성 요소를 나타냅니다. RGB(빨강, 초록, 파랑)는 디지털 이미징에서 자주 사용되며 각 채널에 0에서 255까지의 십진수 값을 사용합니다.

HSL(색조, 채도, 밝기)은 기본 색상(색조), 강도(채도), 밝기(밝기)로 색상을 설명하므로 인간에게 더 직관적입니다. 이러한 모델을 이해하면 다양한 플랫폼과 기기에서 일관성을 보장하면서 디자인과 개발 요구에 맞는 올바른 형식을 선택하는 데 도움이 됩니다.

이 도구 사용 방법

채도/밝기 사각형에서 커서를 드래그하고 색조 슬라이더를 사용하여 시각적 색상 선택기로 색상을 선택하세요.
또는 "수동 입력" 필드에 특정 값을 입력하세요(#hex, rgb, 또는 hsl 형식 지원).
"미리보기" 상자에서 선택한 색상을 실시간으로 확인하세요.
아래의 HEX, RGB, HSL, HSV 카드에서 변환된 값을 확인하세요.
카드의 "복사" 아이콘을 클릭하여 해당 형식을 클립보드에 저장하세요.

일반적인 사용 사례

웹 디자인: 디자인 도구(주로 RGB/HSL)의 색상을 CSS 스타일시트에서 사용할 HEX 코드로 변환합니다.
브랜드 일관성: 브랜드 색상이 다양한 디지털 형식과 미디어에서 정확하게 표현되도록 합니다.
UI 개발: HSL에서 밝기 값을 조정하여 기본 색상의 더 밝거나 어두운 변형을 빠르게 생성합니다.
접근성 테스트: 미리보기를 사용하여 선택한 색상이 읽기 쉬운 텍스트와 UI 요소에 충분한 대비를 제공하는지 확인합니다.

프로 팁

버튼 같은 UI 구성 요소를 디자인할 때 HSL을 사용하세요; 밝기 값만 조정하면 호버 상태를 쉽게 만들 수 있습니다.
CSS에서 투명도를 사용할 때는 알파 채널에 대한 가독성과 제어를 위해 rgba() 또는 hsla()를 선호하세요.
시각 장애가 있는 사용자를 위해 디자인이 접근 가능한지 항상 색상 대비 비율을 확인하세요.

색상 변환기

Related Tools

Gradient Generator

SVG Optimizer & Editor

Image Converter

Unit Converter