색상 코드 변환 — HEX, RGB, HSL
세 가지 표기 중 하나로 색을 붙여넣으면 나머지가 돌아옵니다. 알파도 포함되고, 무엇을 변환하고 있는지 눈으로 확인할 수 있는 견본이 함께 나옵니다.
색상
표기 방식
이 도구에 대하여
hex는 디자인 도구가 건네는 형식이고, rgb()는 캔버스나 이미지 라이브러리가 원하는 형식이며, hsl()은 색을 조금 밝게 하거나 색상환을 돌릴 때 손이 가는 형식입니다. 이들 사이를 손으로 계산하는 일은 아무도 즐겁지 않습니다. 셋 중 하나를 알파 유무와 상관없이 붙여넣으면 나머지가 나타납니다. 견본도 함께 나오는데, 값만으로는 잘못 입력하기 쉽고 눈으로 확인하기 어렵기 때문입니다.
사용 방법
- 1색을 붙여넣습니다: #3fb984, rgb(63 185 132), hsl(157, 49%, 49%) 등.
- 2오른쪽에서 나머지 표기를 읽고 그 위의 견본으로 확인합니다.
- 3필요한 줄을 복사하거나, 바로 쓸 수 있는 CSS 사용자 정의 속성을 가져갑니다.
자주 묻는 질문
›어떤 표기를 붙여넣을 수 있나요?
3, 4, 6, 8자리 hex(#3fb, #3fb9, #3fb984, #3fb984cc), rgb()와 rgba(), hsl()과 hsla()입니다. 쉼표 문법과, 알파 앞에 슬래시를 두는 최신 공백 문법 모두 받아들입니다.
›HSL이 소수점과 함께 돌아오는 이유는?
색상·채도·명도는 연속값인데 hex는 채널당 8비트이기 때문입니다. hex를 HSL로 바꾸면 정수로 딱 떨어지는 일이 드물고, 반올림하면 되돌릴 때 색이 조금 어긋납니다.
›네 번째 hex 쌍은 무엇인가요?
알파입니다. #3fb984cc는 같은 색의 불투명도 80%입니다. 이제 필요한 곳이면 어디서나 지원되고, rgba()로 바꾸는 것보다 짧습니다.
›"tomato" 같은 색 이름도 지원하나요?
아닙니다. CSS 키워드 148개를 해석하려면 전체 표가 필요한데 얻는 것이 매우 적습니다. 대신 hex 값을 붙여넣으세요. 어떤 브라우저 개발자 도구든 알려 줍니다.
›디자이너들이 자꾸 OKLCH 이야기를 하는 이유는?
HSL의 명도가 사람이 느끼는 밝기와 일치하지 않기 때문입니다. 같은 L인 두 색이 아주 달라 보일 수 있습니다. OKLCH는 그것을 바로잡아 팔레트를 만들 때 훨씬 낫습니다. 이 페이지는 매일 붙여넣는 세 가지 표기에 집중합니다.