HEX, RGB 및 HSL 간에 색상을 변환하는 방법
빠른 답변
색상을 변환하려면 색상 변환기를 열고 임의의 형식(HEX, RGB, HSL)으로 색상을 입력하면 도구에서 다른 모든 형식의 해당 색상을 즉시 표시합니다. 모든 변환은 브라우저에서 로컬로 이루어지며 데이터는 업로드되지 않습니다.
소개
색상은 HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) 등 다양한 형식으로 표현될 수 있습니다. 다양한 도구와 컨텍스트는 다양한 형식을 사용합니다. CSS은 종종 HEX 또는 RGB를 사용하고 디자인 도구는 HSL을 사용할 수 있으며 APIs은 어떤 것을 사용할 수 있습니다. 형식 간 변환을 통해 다른 시스템이 필요한 상황에서 한 시스템에 정의된 색상을 사용할 수 있습니다. 이 가이드에서는 브라우저에서 색상을 변환하는 방법을 보여줍니다.
단계별
-
색상 변환기 도구 열기
색상 변환기 도구 페이지로 이동합니다. 이 도구는 HEX, RGB, HSL, HSV 및 CMYK 형식을 지원합니다.
-
색상을 입력하세요
지원되는 형식으로 색상 값을 입력하거나 붙여넣습니다. 예: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. 도구는 입력 형식을 자동으로 감지합니다.
-
모든 형식에 해당하는 내용을 검토하세요.
이 도구는 HEX, RGB, HSL, HSV 및 CMYK 등 모든 형식의 색상을 동시에 표시합니다. 또한 변환이 올바른지 확인할 수 있도록 색상 미리보기 견본도 표시됩니다.
-
필요한 형식을 복사하세요.
해당 값을 클립보드에 복사하려면 형식 옆에 있는 복사 버튼을 클릭하세요. CSS, 디자인 도구 또는 애플리케이션에서 사용하세요.
-
색상 조정(선택 사항)
일부 도구를 사용하면 슬라이더(HSL의 경우: 색조, 채도, 밝기)를 사용하여 색상을 조정하고 모든 형식이 실시간으로 업데이트되는 것을 확인할 수 있습니다. 이는 관련 색상이나 음영을 찾는 데 유용합니다.
예
HEX ~ RGB 및 HSL
입력: #ff6600
산출: RGB: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)
RGB ~ HEX
입력: RGB(0, 128, 255)
산출: HEX: #0080ff
HSL: hsl(210, 100%, 50%)
HSL ~ HEX
입력: hsl(120, 100%, 50%)
산출: HEX: #00ff00
RGB: RGB(0, 255, 0)
일반적인 문제
- HEX #이 있는 것과 없는 것 - 일부 도구에는 # 접두사가 필요하지만 다른 도구에는 필요하지 않습니다. 우리 변환기는 두 가지를 모두 허용합니다.
- 3자리 대 6자리 HEX —#f60은 #ff6600의 약어입니다. 둘 다 유효합니다. 변환기는 6자리로 정규화됩니다.
- HSL 색조 범위 —색조는 0~360도(원)입니다. 0과 360은 모두 빨간색입니다. 360보다 큰 값은 랩어라운드됩니다.
- 색 공간 차이 —HEX, RGB 및 HSL는 모두 sRGB입니다. CMYK는 다른 색공간(인쇄)이며 변환은 대략적인 것입니다.
팁
- 색상 변형을 만들려면 HSL을 사용하세요. 색조, 채도 또는 밝기를 조정하는 것이 RGB보다 더 직관적입니다.
- CSS에는 HEX을 사용하세요. 이는 스타일시트에서 가장 간단하고 널리 지원되는 형식입니다.
- 50% 불투명도에 대해 알파 투명도 —rgb(255, 102, 0, 0.5)를 설정해야 하는 경우 RGB를 사용합니다(또는 8자리 HEX: #ff660080 사용).
- 모든 색상 형식 간의 즉각적인 비공개 변환을 위해 색상 변환기를 사용하세요.