색상 변환·피커로 할 수 있는 일

같은 색 하나가 상황에 따라 세 가지 표기로 돌아다닙니다. 디자인 파일에서는 #DE872F, 오래된 스타일시트에서는 rgb(222, 135, 47), 명도만 살짝 바꾸고 싶을 때는 hsl(31, 74%, 53%). 이 화면은 그 세 표기를 한 카드에 나란히 놓고, 어느 칸을 고치든 나머지 둘과 왼쪽 큰 견본이 함께 따라오도록 묶어 둔 것입니다.

입력 형식은 꽤 너그럽게 읽습니다. HEX 칸은 #DE872F처럼 여섯 자리도, #F80처럼 세 자리 축약형도 받고 앞의 # 기호는 있어도 없어도 됩니다. RGB 칸은 rgb(222, 135, 47)은 물론 222,135,47처럼 숫자만 적어도 인식하고, HSL 칸은 hsl(31, 74%, 53%) 형태에서 숫자 셋을 뽑아냅니다. 형식이 어긋나면 그 칸의 테두리가 붉게 표시되고, 고쳐 쓰는 순간 다시 정상으로 돌아옵니다.

HSL은 색상환 각도(0~360)·채도(%)·명도(%)로 색을 다루기 때문에, 같은 계열에서 조금 더 밝거나 흐린 색을 만들 때 특히 편합니다. 예를 들어 명도만 15% 올려 hover 색을 만들고, 채도를 절반으로 낮춰 비활성 상태 색을 뽑는 식이죠. 세 칸 오른쪽의 복사 아이콘을 누르면 그 칸의 문자열이 통째로 클립보드에 담깁니다.

사용 방법

1. 피커를 눌러 색을 직접 고르거나, 알고 있는 값을 HEX·RGB·HSL 중 한 칸에 붙여 넣습니다.
2. 나머지 두 칸과 왼쪽 견본이 즉시 같은 색으로 맞춰집니다.
3. HSL 칸의 숫자를 조금씩 고쳐 밝기나 채도만 다른 변형 색을 만듭니다.
4. 필요한 표기 옆의 복사 아이콘을 눌러 코드에 붙여 넣습니다.