웹의 색상 코드: HEX, RGB, HSL
웹 개발에서 색상은 주로 세 가지 형식으로 정의됩니다: HEX, RGB, HSL. 이 도구는 어떤 색상이든 즉시 세 가지 형식으로 변환하고 CSS 이름과 보색도 표시합니다.
HEX 색상 코드
HEX는 웹에서 가장 일반적인 색상 형식입니다. #RRGGBB로 작성하며 각 쌍이 채널(빨강, 녹색, 파랑)의 강도를 00~FF(0~255)로 나타냅니다. 채널당 256개 값으로 16,777,216색상을 지원합니다. 3자리 축약형 #RGB도 유효합니다: #F06→#FF0066. CSS(color: #FF5733;), Figma, 모든 디자인 도구에서 사용됩니다.
RGB 색상 모델
RGB는 디스플레이의 물리적 구조를 반영합니다. 각 채널은 0~255의 값을 취합니다. CSS에서: rgb(255, 87, 51) 또는 투명도 포함 rgba(255, 87, 51, 0.8).
HSL 색상 모델
HSL(색조-채도-명도)은 디자이너에게 더 직관적입니다. 색조(Hue): 0~360°, 색상환 위의 위치. 채도(Saturation): 0%=회색, 100%=선명한 색. 명도(Lightness): 0%=검정, 50%=보통, 100%=흰색. 밝거나 어두운 변형 색상 만들기가 쉽습니다: 색조와 채도를 유지하고 명도만 조정.
보색
보색은 색상환에서 180° 반대에 위치하여 최대 대비를 만듭니다: 빨강↔시안, 녹색↔마젠타, 파랑↔노랑. CTA 버튼, 데이터 시각화, 고대비 UI 디자인에 활용됩니다.
웹 접근성(WCAG)
남성의 약 8%, 여성의 약 0.5%가 색각 이상을 가지고 있습니다. WCAG 2.1 AA는 일반 텍스트에 최소 4.5:1의 대비율을 요구합니다. 색상만으로 정보를 전달하지 마세요.
CSS 명명 색상
CSS는 148개의 명명 색상(red, navy, coral, teal 등)을 정의합니다. 이 도구는 자동으로 인식하여 CSS 이름을 표시합니다.
개인정보 보호
모든 계산은 브라우저 내에서 완결됩니다. 데이터는 서버에 전송되지 않습니다.
댓글