Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion 브라우저에서 로컬로 실행됩니다.
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
색상 변환기는 HEX, RGB, HSL 및 HSV 간의 단일 색상을 변환하고 흑백에 대한 WCAG 대비 비율을 표시하므로 해당 색상의 텍스트를 읽을 수 있는지 즉시 확인할 수 있습니다. HEX와 RGB는 도구 간에 복사하는 형식이지만 HSL은 디자인 작업에 실제로 유용한 형식입니다. 색상을 밝기와 분리하므로 순진한 RGB 수학처럼 회색으로 표류하는 대신 동일한 색상을 유지하는 색조나 음영을 생성할 수 있습니다. 8자리 16진수 및 rgba 값은 알파 채널을 전달하며 변환기는 이러한 값도 처리합니다.
Where people use the
- 브랜드 16진수 값을 디자인 도구가 기대하는 rgb 구문으로 변환합니다.
- HSL을 사용하여 하나의 브랜드 색상에서 일관된 색조 세트를 생성합니다.
- 어두운 배경에서 링크 색상을 읽을 수 있는지 확인합니다.
- 스크린샷에서 선택한 색상을 가장 가까운 16진수 값과 일치시킵니다.
How to use the
- 1
어떤 형식으로든 색상을 입력하세요.
2f6fed와 같은 16진수 값이나 rgb 또는 hsl 함수를 붙여넣거나 선택기를 사용하세요. 다른 형식은 입력할 때 업데이트됩니다.
- 2
모든 표현을 한 번에 읽어보세요
Hex, RGB, HSL 및 HSV는 알파 채널이 분리되어 함께 표시됩니다.
- 3
명암비 확인
흑백 대비 비율은 해당 색상을 텍스트 색상으로 사용할 수 있는지 배경 색상으로 사용할 수 있는지 알려줍니다. 본문 텍스트는 4.5:1, 큰 텍스트 및 인터페이스 테두리는 3:1이 필요합니다.
- 4
코드에 필요한 양식을 복사하세요.
각 필드에는 자체 복사 버튼이 있으므로 직접 형식을 다시 지정하는 대신 스타일시트에 필요한 구문을 정확하게 얻을 수 있습니다.
팁 및 모범 사례
- RGB에 흰색이나 검정색을 추가하는 대신 HSL의 밝기를 조정하세요. 색조가 그대로 유지됩니다.
- 제목 크기가 아닌 텍스트가 실제로 사용되는 가장 작은 크기에서 대비를 테스트합니다.
- 구성 요소별로 새로운 값을 만드는 대신 문서화된 5~6개 값 팔레트를 유지하세요.
자주 묻는 질문
16진수 색상을 RGB로 어떻게 변환합니까?
각 16진수 쌍은 하나의 채널이며 기본 16으로 읽습니다. 2f6fed에서 2f는 빨간색 47, 6f는 녹색 111, ed는 파란색 237입니다. f0a와 같은 세 자리 약칭은 각 자릿수를 두 배로 늘려서 ff00aa가 됩니다.
HSL 밝기가 인지된 밝기와 동일하지 않은 이유는 무엇입니까?
눈은 파란색보다 녹색에 훨씬 더 민감하기 때문입니다. 순수한 파란색과 순수한 노란색은 명도 값을 공유할 수 있는 반면 노란색은 훨씬 더 밝게 나타납니다. 이것이 대비를 HSL 수치로 판단하기보다는 휘도 공식으로 측정해야 하는 이유입니다.
16진수 색상의 네 번째 숫자 쌍은 무엇을 의미합니까?
알파, 00 완전 투명부터 ff 완전 불투명까지. 8자리 16진수는 현재 모든 브라우저에서 지원되며 rgba와 동등한 16진수입니다.
인쇄 시 CMYK 변환이 정확합니까?
아니요, 브라우저 도구는 그럴 수 없습니다. CMYK는 잉크, 용지 및 프린터 프로필에 따라 다릅니다. 이 값을 출발점으로 사용하고 중요한 모든 것에 대해 인쇄 공급업체의 ICC 프로필을 통해 변환하십시오.
컬러 배경에 대해 읽을 수 있는 텍스트를 어떻게 선택합니까?
텍스트 색상과 배경의 명암비를 비교해보세요. 검정색과 흰색의 비율이 4.5:1에 도달하지 않으면 배경의 채도가 본문 텍스트에 비해 너무 높으므로 복사본 뒤에 사용하기 전에 어둡거나 밝게 해야 합니다.
동일한 16진수가 두 화면에서 다르게 보이는 이유는 무엇입니까?
디스플레이는 색 영역, 보정 및 밝기가 다르기 때문입니다. 넓은 영역의 화면은 표준 sRGB 패널이 재현할 수 없는 채도가 높은 색상을 보여줍니다. 특별한 이유가 없는 한 sRGB로 작업하세요.