색상 변환기 🔒 데이터가 브라우저 밖으로 나가지 않습니다.
HEX ↔ RGB ↔ HSL, 실시간 미리보기와 색상 선택기 포함.
대비 검사기
대비를 확인하기 위한 예시 문장입니다.
대비를 확인하기 위한 예시 문장입니다.
음영과 명도
단계를 선택하면 현재 색상으로 불러옵니다.
이 도구에 대해
어떤 CSS 형식이든 색상을 붙여넣으세요 — hex(#1e90ff 또는 #19f), rgb(), hsl(), 또는 dodgerblue 같은 색상 이름 — 모든 형식을 원클릭 복사와 실시간 견본과 함께 받아보세요. HEX는 디자인 도구의 출력, RGB는 canvas와 JS API의 입력, HSL은 사람이 이해하기 쉬운 형식(색조·채도·명도)입니다.
변환은 브라우저 자체 CSS 엔진을 사용하므로 스타일시트에서 유효한 모든 표기가 여기서 작동합니다. 100% 클라이언트 사이드.
자주 묻는 질문
제 색상 데이터가 어딘가로 전송되나요?
아닙니다. 모든 변환, 대비 검사, 팔레트 생성은 브라우저 안에서 로컬로 계산되며 입력한 내용은 절대 기기 밖으로 나가지 않습니다.
HSL과 HSV의 차이는 무엇인가요?
둘 다 색상과 채도를 나타내지만, HSL의 세 번째 값은 명도(검정이나 흰색에 얼마나 가까운지)이고 HSV의 세 번째 값은 값(value, 검정에만 얼마나 가까운지를 보며 위쪽은 항상 최대 밝기)입니다. HSV는 디자인 도구의 색상 선택기와, HSL은 CSS 관례와 잘 맞는 편입니다.
왜 제 hex 코드가 6자리가 아니라 8자리인가요?
추가된 두 자리는 알파(투명도)를 #rrggbbaa 형식으로 나타냅니다. 입력 색상의 알파 채널이 1 미만일 때만 나타나며, 완전히 불투명한 색상은 6자리 그대로 유지됩니다.
대비 검사기 아래의 AA, AAA 배지는 무슨 뜻인가요?
WCAG 2 대비 기준입니다: AA는 대부분의 사이트가 충족해야 할 최소 기준(일반 텍스트 4.5:1, 큰 텍스트나 UI 요소 3:1)이고, AAA는 더 엄격한 목표(7:1 / 4.5:1)입니다. 초록 배지는 전경/배경 조합이 해당 수준을 통과했다는 뜻입니다.
OKLCH는 무엇이고 왜 HSL 대신 써야 하나요?
OKLCH는 지각적으로 균일한 색 공간입니다 — 명도나 채도에서 같은 간격으로 변화시키면 사람 눈에도 똑같이 다르게 보이는데, HSL은 이를 보장하지 않습니다. 예상치 못한 어둡거나 탁한 지점 없이 색상 스케일과 그라데이션을 만들 때 최신 CSS에서 점점 더 많이 쓰입니다.