컬러 코드 변환기

컬러 코드 가이드: HEX, RGB, HSL 실전 활용

화면의 모든 색은 빨강·초록·파랑 빛의 조합입니다. HEX, RGB, HSL 세 가지 표기법은 같은 색을 가리키는 다른 좌표계일 뿐이며, 상황에 맞는 표기법을 알면 디자인과 CSS 작업이 훨씬 빨라집니다.

1. HEX: 짧고 어디서나 통하는 표준

#3b82f6은 16진수로 R=3b(59), G=82(130), B=f6(246)을 의미합니다. 가장 짧은 형태로 디자인 툴에서 기본으로 쓰이며 CSS 어디서든 안전합니다.

2. RGB: 채널이 명시적인 표기

rgb(59, 130, 246)은 각 채널을 0~255로 보여줍니다. 채널 값을 직접 다뤄야 하거나 rgba()로 투명도를 더할 때 사용하세요.

3. HSL: 사람을 위한 표기

hsl(217, 91%, 60%)은 "파란 색상, 높은 채도, 중간 명도"로 읽힙니다. 팔레트를 만들 때는 색상(H)을 고정하고 명도(L)만 단계별로 바꾸면 되고, 호버 색이 필요하면 명도를 10% 낮추면 됩니다. 디자인 시스템이 점점 HSL로 토큰을 정의하는 이유입니다.