HSL → RGB 변환기 – 실시간 편집과 미리보기
HSL → RGB 변환기는 HSL 색상을 RGB로 바꾸고, 편집하면서 양쪽을 동기화 상태로 유지합니다. #abc, rgb(1 2 3 / 50%), 색상 이름 같은 유연한 색상 입력을 지원한 뒤, 스워치와 복사 가능한 CSS 한 줄을 표시합니다. 색상이 sRGB 범위를 벗어나면 도구가 색역 초과 경고를 표시하므로, 결과를 사용하기 전에 알아차릴 수 있습니다.
HSL → RGB 변환기는 HSL로 표현된 색상을 RGB로 바꾸고, 편집하면서 양쪽을 업데이트합니다. HSL은 색상(hue), 채도(saturation), 밝기(lightness)로 색상을 기술하고, RGB는 빨강, 초록, 파랑 값으로 표현합니다. 스워치는 시각적 참고 자료를 제공하고, 이 도구는 바로 붙여넣을 수 있는 CSS 한 줄을 제공합니다.
파서는 유연하며 #abc, rgb(1 2 3 / 50%), 색상 이름 같은 예시를 지원합니다. 색상을 입력하면 다른 형식의 대응 값이 나타나고, 어느 한쪽을 편집해 실시간 양방향 업데이트를 할 수도 있습니다. sRGB 범위를 벗어난 색상에는 색역 초과 경고 플래그가 표시됩니다. 사용 가능한 옵션은 조정할 수 있지만, 이 설명에 구체적인 옵션 이름은 제공되지 않았습니다.
HSL과 RGB는 색상을 표현하는 두 가지 방식이므로, 코드, 문서, 다른 시스템이 두 표현 중 하나를 기대할 때 둘 사이를 변환하면 유용합니다. 스워치는 색상을 시각적으로 확인하는 데 도움이 되고, CSS 한 줄은 결과를 재사용하기 쉽습니다. 파서가 지원하는 예시는 가진 값이 일반 HSL 값이 아닐 때도 도움이 됩니다.
변환은 브라우저에서 완전히 동작합니다. 데이터가 서버로 전송되지 않으며 가입이 필요 없습니다. 페이지가 로드된 후에는 오프라인에서도 동작하므로, 연결 없이도 계속 변환할 수 있습니다. 이 도구는 코드, 문서, 티켓, 인계 자료에서 색상 값을 살펴보고, 검증하고, 재사용해야 하는 개발자와 DevOps 엔지니어에게 유용합니다.
1단계: HSL 색상을 입력하거나 붙여넣어 RGB 값을 확인하세요. 파서는 #abc, rgb(1 2 3 / 50%), 색상 이름 같은 예시도 지원합니다.
2단계: 사용 가능한 옵션을 확인하고 변환과 관련된 항목을 조정하세요.
3단계: HSL이나 RGB 값 중 어느 한쪽을 편집해 다른 쪽을 실시간으로 업데이트한 뒤, 스워치와 색역 초과 경고를 확인하세요.
4단계: RGB 결과나 바로 붙여넣을 수 있는 CSS 한 줄을 복사해 코드나 문서에 사용하세요.
사용 사례: HSL 데이터를 RGB만 받는 시스템으로 옮긴 뒤, 변환된 값을 관련 필드에 복사하세요.
사용 사례: 받은 RGB 값이 HSL 색상에 대응하는지 어느 한쪽을 편집하며 실시간 결과를 비교해 확인하세요.
사용 사례: 문서, 티켓, 커밋 메시지용으로 HSL과 RGB 색상 스니펫을 스워치와 함께 준비해 색상을 식별하세요.
사용 사례: 결과를 코드에 붙여넣기 전에 색상 변환 결과를 간단히 검증하고, 색역 초과 경고를 참고하세요.
사용 사례: 짧은 16진수 값이나 색상 이름 같은 서로 다른 지원 형식으로 공유된 색상 값을 표기법을 손으로 변환하지 않고 검토하세요.
사용 사례: 프로젝트나 인계 자료가 변환된 색상을 CSS 형태로 필요로 할 때 복사 가능한 CSS 한 줄을 만드세요.