색상 변환
HEX (3, 4, 6, 8자리), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), 새로운 CSS Color 4 구문 (공백 구분), 147개 CSS 명명된 색상 모두와 알파 채널이 포함된 모든 것을 인식하는 무료 온라인 색상 변환기. 모든 형식을 한 번에 출력하고 개별 복사 가능. 내장 팔레트는 음영 (더 어두운 단계), 색조 (더 밝은 단계), 보색, 유사색, 삼색, 사색 조화를 생성합니다. WCAG 대비 검사기는 색상이 일반 텍스트와 큰 텍스트에 대해 흰색 및 검은색 배경에서 AA / AAA를 충족하는지 보여줍니다. OS 스포이드를 띄워 (Chrome / Edge) 화면의 어떤 색상이든 선택하세요.
사용 방법
아무 형식: HEX, RGB, HSL, OKLCH, tomato 같은 CSS 이름까지.
열한 개가 한 번에 나타나고, 한 번의 클릭으로 복사.
색상에서 파생된 음영, 색조, 조화.
AA/AAA 판정과 함께 흰색 및 검은색 배경 WCAG 대비.
11개 색상 형식 간 변환, 팔레트 빌드, WCAG 명도 대비 검사 — 한곳에서
모든 형식
대비 (WCAG)
팔레트
최근
특징
일반적인 용도
- CSS Color 4 디자인 시스템용 브랜드 HEX 색상의 OKLCH 찾기.
- 차트 축용 HSL로 스크린샷의 RGB 픽셀 값 변환.
- 버튼 호버 상태용 보색 찾기.
- 선택된 배경에 대해 본문 텍스트가 WCAG AA 충족하는지 확인.
- 시스템 스포이드를 통해 다른 탭이나 창에서 색상 선택.
왜 이것을
많은 변환기가 HEX↔RGB↔HSL만 합니다. 우리는 OKLab과 OKLCH를 포함합니다 — 인간의 인식과 HSL보다 훨씬 잘 일치하는 새 CSS Color 4 색상 공간 (색조 변경 시 밝기에 놀라움 없음). 팔레트 생성은 OKLab에서 실행되어 단계가 수학적으로 균등하지 않고 인지적으로 균등하게 보입니다. 대비는 4.5:1 및 3:1 임계값이 명시된 WCAG 2 휘도 공간에서 계산됩니다.
자주 묻는 질문
OKLCH가 뭔가요?
CSS Color 4의 일부로 도입된 지각적으로 균일한 색상 공간. HSL과 달리 — 다른 색조에서 50% 밝기가 매우 다르게 보일 수 있음 — OKLCH 밝기는 스펙트럼 전체에서 일관되어 디자인 토큰을 예측 가능하게 만듭니다. 현대적인 디자인 시스템을 구축한다면 OKLCH는 배울 가치가 있습니다.
내 색상에 알파가 포함되나요?
네 — 8자리 HEX, rgba(), hsla(), 알파 접미사 공백 구문 (rgb(255 0 0 / 50%)) 모두 파싱되고 알파를 지원하는 모든 출력 형식에 반영됩니다.
왜 음영 팔레트가 부드럽지 않고 "단계적"으로 보이나요?
음영과 색조는 OKLab에서 보간되어 대상 공간으로 투영되므로 각 단계가 지각적으로 동일합니다 — 종종 단순한 HSL 밝기 변경보다 시각적으로 부드러운 결과를 생성하지만, 매우 어둡거나 매우 밝은 시작 색상은 끝점 근처에서 잘립니다.
CMYK — 인쇄 정확성?
아니요 — CMYK 출력은 빠른 화면 공간 변환이며 ICC 프로필 인식이 아닙니다. 인쇄용으로는 여기 보이는 CMYK를 시작점으로 삼고 실제 인쇄 프로필에 대해 Adobe / Affinity 도구에서 확인하세요.
스포이드가 작동하지 않는데 왜인가요?
현재 EyeDropper API는 Chromium 기반 브라우저 (Chrome, Edge, Brave)에서만 사용 가능합니다. Firefox와 Safari는 지원되지 않으면 툴팁과 함께 버튼을 숨깁니다.
HEX 이름은 대소문자를 구분하나요?
아니요, HEX는 hex (0-9, a-f 또는 A-F)입니다. CSS Color 4 권장사항에 맞춰 기본적으로 소문자를 출력하지만, 출력은 어떻게 다시 붙여넣어도 유효합니다.
모바일?
네. 스포이드는 모바일 브라우저에서 사용할 수 없습니다 — 대신 네이티브 색상 선택기를 사용하세요.
무료로 가능합니다! 아이디어를 간단히 보내주세요. 자세히 논의하고 싶으시면 이메일을 남겨주시면 연락드리겠습니다. 익명으로도 가능합니다.
