홈 색 변환
색 변환
#RGB는 각 자리를 두 번 적어 #RRGGBB로 늘립니다. #ff0000은 rgb(255, 0, 0), hsl(0, 100%, 50%)입니다. 색은 이 브라우저에만 있습니다.
왜 만들었나요
디자인 시안과 CSS는 같은 색을 #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)처럼 다르게 적습니다.
짧은 #abc를 여섯 자리로 늘린 뒤 정수 HSL로 되돌리면 채널이 1씩 움직일 수 있습니다.
-
01사용 방법
HEX, RGB, HSL 중 하나를 고치면 나머지 둘과 색 칸이 같이 바뀝니다.
색 칸은 그 HEX를 배경으로 칠합니다. 결과 복사는 HEX, rgb(), hsl() 세 줄을 클립보드에 넣습니다.
탭을 닫으면 색은 사라집니다. 이 페이지는 투명도 칸을 읽지 않습니다.
-
02이렇게 나옵니다
#ff0000, #00ff00, #0000ff는 hsl(0, 100%, 50%), hsl(120, 100%, 50%), hsl(240, 100%, 50%)이고, 다시 같은 HEX가 됩니다.
#fff는 #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%)입니다. #000000은 hsl(0, 0%, 0%)입니다.
넣은 것#ff0000
#ff0000 rgb(255, 0, 0) · hsl(0, 100%, 50%) #00ff00 rgb(0, 255, 0) · hsl(120, 100%, 50%) #0000ff rgb(0, 0, 255) · hsl(240, 100%, 50%) #abc #aabbcc · 되돌리면 #a9bacb -
03알아두면 좋은 것
색상 360은 0과 같습니다. hsl(360, 100%, 50%)은 #ff0000입니다.
회색 #808080은 채도 0이라 색상이 0으로 나옵니다. 명도 50%를 되돌리면 128, 128, 128입니다.
채널이 범위를 벗어나거나 소수면 그 칸만 오류를 내고 마지막 색은 복사되지 않습니다.
이 변환은 화면의 sRGB입니다. 인쇄용 CMYK는 구하지 않습니다.
자주 묻는 질문
- Q#f00은 #ff0000인가요?
- A그렇습니다. 각 자리를 두 번 적어 #ff0000이 됩니다.
- Q#abc를 HSL로 되돌리면 같은 HEX인가요?
- A아닙니다. hsl(210, 25%, 73%)은 #a9bacb로 돌아옵니다.
- Q여덟 자리 HEX도 되나요?
- A되지 않습니다. #RGB와 #RRGGBB만 읽습니다.
- Q색이 저장되나요?
- A아닙니다. 이 브라우저 안에서만 계산하고 서버로 보내지 않습니다.
이 페이지가 나누는 방법
이 페이지는 HEX, RGB, HSL을 같은 sRGB 색으로 바꿉니다. #RRGGBB는 빨강, 초록, 파랑을 두 자리로 적습니다. #ff0000은 rgb(255, 0, 0)이고 hsl(0, 100%, 50%)입니다. #00ff00은 색상 120, #0000ff는 색상 240입니다. #RGB는 각 자리를 두 번 적습니다. #abc는 #aabbcc, 곧 rgb(170, 187, 204)이고 hsl(210, 25%, 73%)입니다.
HSL은 CSS와 같은 변환이고, 화면은 색상, 채도, 명도를 정수로 반올림합니다. 그 정수로 되돌리면 채널이 1씩 어긋날 수 있습니다. #abc의 hsl(210, 25%, 73%)은 #a9bacb로 돌아옵니다. #808080은 rgb(128, 128, 128), hsl(0, 0%, 50%)이고 다시 #808080입니다. 색상 360은 0과 같아서 hsl(360, 100%, 50%)은 #ff0000입니다.
RGB 채널은 0부터 255까지의 정수입니다. 채도와 명도는 0부터 100까지입니다. 여덟 자리 HEX와 소수는 읽지 않습니다. 범위를 벗어나면 그 칸만 오류를 내고 마지막 색은 복사되지 않습니다. 이 변환은 화면의 sRGB이고 인쇄용 CMYK는 구하지 않습니다. 색은 이 브라우저 안에서만 계산하며 서버로 보내지 않습니다.