RGB에서 HEX로, HSL로: 실용적인 가이드

작동 원리

각 채널을 0-255로 고정하고 반올림한 다음 # 뒤에 채널당 2개의 16진수 숫자를 씁니다. HSL은 RGB 비율(주 채널의 색상, 최대와 최소 사이의 거리에 따른 채도, 평균의 밝기)에서 파생됩니다.

• HEX는 3자리 또는 6자리 숫자를 허용합니다. 값은 0~255로 고정됩니다.

왜 중요한가요?

디자인 도구는 다양한 형식을 내보내며 CSS는 특정 형식을 기대합니다. 손으로 변환하면 반올림 실수가 발생할 수 있으며, 세 가지 방법으로 작성된 동일한 색상은 모든 표현을 나란히 보면 쉽게 확인할 수 있습니다.

실제 사례

rgb(99, 91, 255)는 #635BFF이고 hsl(244, 100%, 68%)입니다. HEX 형식은 CSS 작성자가 가장 자주 붙여넣는 형식입니다. HSL은 새로운 채널을 추측하지 않고도 어둡게 하거나 채도를 낮추기가 더 쉽습니다.

일반적인 실수

• 동일한 HEX가 색상 관리 없이 모든 곳에서 동일하게 보인다고 가정합니다.
• 세 자리 HEX가 각 니블을 두 번 확장한다는 사실을 잊어버리면 됩니다.
• 밝기를 조정하려는 경우 RGB 채널을 편집합니다.

실용적인 팁

체계적인 색조와 음영이 필요한 경우 HSL에서 디자인하세요. 색조와 채도를 유지하고 밝기를 단계적으로 변경하세요. 출력을 위해 HEX를 저장하고 향후 조정을 위해 디자인 파일에 HSL 메모를 보관합니다.

사용방법

1. 도구를 엽니다. 모든 것이 브라우저 탭에서 실행됩니다.
2. 입력 내용을 붙여넣거나 입력한 후 필요한 작업을 선택하세요.
3. 결과를 확인하고 한 번의 클릭으로 복사하세요.

도구 열기

일반적인 질문