세 가지 표기, 같은 색
HEX, RGB, HSL은 같은 색을 다르게 적은 것뿐입니다. 어느 쪽을 고르든 화면에 나오는 결과는 같으니, 그 자리에서 다루기 편한 것을 쓰면 됩니다.
HEX는 #RRGGBB 형태로, 디자인 도구가 내보내고 개발자가 받는 기본 형식입니다. 짧고 복사하기 좋습니다.
RGB는 빨강·초록·파랑을 0에서 255까지 적습니다. 색을 코드로 계산하거나 캔버스에 직접 그릴 때 이 형태가 필요합니다.
HSL은 색상(0에서 360도), 채도, 밝기로 적습니다. 사람이 색을 조정하는 방식과 가장 가깝습니다.
HSL이 편한 순간
버튼의 hover 색을 만든다고 해 봅시다. HEX로는 #3E6FF4에서 얼마나 어둡게 할지 감이 오지 않아 숫자를 몇 번씩 고치게 됩니다. HSL이면 밝기만 10 내리면 됩니다. 색상과 채도는 그대로라 같은 계열임이 유지됩니다.
같은 원리로 색 팔레트를 만들 때도 편합니다. 색상을 고정하고 밝기만 단계별로 나누면 한 계열의 명도 단계가 나오고, 색상만 120도씩 돌리면 서로 균형 잡힌 대비색이 나옵니다.
CSS 변수로 관리한다면 HSL의 각 값을 따로 두는 방법도 있습니다. 색상 값 하나만 바꿔 테마 전체의 색조를 옮길 수 있습니다.
알파 표기
#RRGGBBAA처럼 여덟 자리 HEX는 마지막 두 자리가 투명도입니다. 80은 약 50%, FF는 완전 불투명입니다. 요즘 브라우저는 모두 이 표기를 이해합니다.
투명도가 필요한 자리에서는 rgba()나 여덟 자리 HEX를 쓰되, 반투명 색을 겹쳐 쌓는 것과 처음부터 밝은 색을 쓰는 것은 다른 결과라는 점을 기억하세요. 배경이 바뀌면 반투명 색은 함께 변합니다.
이 도구가 읽는 것과 읽지 않는 것
세 자리·네 자리·여섯 자리·여덟 자리 HEX, rgb()와 rgba(), hsl()과 hsla()를 받습니다. 쉼표를 넣은 옛 표기와 공백으로 구분하는 현행 표기 모두 됩니다.
red나 rebeccapurple 같은 이름 색, 그리고 oklch()처럼 새로 들어온 색 공간은 아직 읽지 않습니다. 이름 색은 브라우저 개발자 도구에서 HEX 값을 확인한 뒤 넣으세요.