HEX와 RGB를 변환하고 미리봅니다. 디자인·CSS에 씁니다.
RGB-
HSL-
🎨 웹 디자인·퍼블리싱 필수 색상 코드(HEX, RGB, HSL) 완벽 가이드
💻 1. HEX · RGB · HSL 표기법의 차이
- HEX (#RRGGBB): 빨강(R), 초록(G), 파랑(B)의 강도를 00~FF까지의 16진수 6자리로 표현하는 웹/CSS 표준 코드입니다 (예:
#FFFFFF는 흰색). - RGB (Red, Green, Blue): 빛의 삼원색을 0~255 사이 숫자로 표시하며 투명도(Alpha) 조절 시
rgba()로 자주 쓰입니다. - HSL (Hue, Saturation, Lightness): 색상(0~360°), 채도(%), 명도(%)로 표현해 버튼의 호버(Hover) 색상이나 다크모드 팔레트를 만들 때 가장 직관적입니다.
✨ 2. UI/UX 가독성을 높이는 명도 대비(Contrast) 팁
- 배경색과 본문 글자색의 명도 대비는 웹 접근성 표준(WCAG AA 등급) 기준 4.5:1 이상을 확보해야 모바일과 어두운 환경에서도 눈이 피로하지 않습니다.