브라우저에서 쓰는 무료 색상 도구
두 HEX 색상을 입력하면 CIEDE2000 Delta E 값, 나란히 놓인 견본, 색상·채도·밝기 차이를 한 번에 볼 수 있습니다. 계정 없이 브라우저에서 즉시 계산됩니다.
2026년 7월 17일 업데이트
Delta E 색상 차이 계산기
이 계산기는 두 HEX 값을 지각 색 공간으로 변환하고 CIEDE2000 공식을 적용합니다. 값이 낮을수록 모델에서 두 견본이 가깝고, 높을수록 모델링된 지각 차이가 큽니다. 하나의 임계값을 보편적인 합격 기준으로 사용하지 말고 실제 견본, 표시 환경, 용도별 허용 조건과 함께 읽어야 합니다.
CIEDE2000
3자리 또는 6자리 HEX를 입력하거나 색상 선택기를 사용하고 견본을 바꿔 보세요. 결과는 즉시 갱신됩니다.
실시간 비교
보일 수 있는 완만한 차이
HSB 절대 차이
이 문구는 결과를 읽는 실용적 도움말이며 품질, 접근성, 인쇄, 제조의 보편적 허용 기준이 아닙니다.
재료, 조명, 관찰자, 디스플레이 보정, 업무 위험에 따라 허용 범위가 달라집니다. 아래 구간은 인증 기준이 아니라 설명용 출발점입니다.
| CIEDE2000 결과 | 쉬운 해석 | 다음 확인 |
|---|---|---|
| 1 미만 | 계산상 두 견본이 매우 가깝습니다. | 실제 출력 매체에서도 보고 모든 사람과 기기가 똑같이 느낀다고 단정하지 마세요. |
| 1 이상 2 미만 | 모델링된 차이가 매우 작습니다. | 정밀도가 중요하면 프로젝트 허용치와 통제된 관찰 조건을 확인하세요. |
| 2 이상 5 미만 | 나란히 보면 완만한 차이가 드러날 수 있습니다. | 어떤 HSB 채널이 변했는지 보고 디자인 의도에 영향을 주는지 판단하세요. |
| 5 이상 10 미만 | 모델링된 차이가 분명합니다. | 업무가 넓은 편차를 허용하지 않는다면 다른 색으로 취급하세요. |
| 10 이상 | 모델링된 색상 차이가 큽니다. | HEX 입력, 색상 관리 과정, 같은 목표를 비교하는지 다시 확인하세요. |
HEX 코드는 화면의 빨강, 초록, 파랑 양을 나타내지만 RGB 숫자가 같은 폭으로 변했다고 해서 언제나 같은 크기의 시각 변화가 생기지는 않습니다. CIEDE2000은 사람의 색 지각과 더 가깝게 연결되도록 만든 CIELAB 값을 바탕으로 밝기, 채도에 가까운 크로마, 색상 움직임을 보정합니다. 두 RGB 삼중값 사이의 단순한 직선거리보다 사람이 두 견본을 얼마나 다르게 볼지 생각하는 데 더 알맞은 이유입니다.
계산기는 유효한 HEX를 해석하고 Toon Tone에서 사용하는 색상 라이브러리로 변환한 뒤 CIEDE2000 차이 함수로 비교합니다. A와 B를 바꿔도 Delta E는 같습니다. HSB 패널은 별도의 진단 정보입니다. 익숙한 편집 축을 보여 주지만 Delta E에 더하거나 대신하지 않습니다. 따라서 지각 모델의 전체 차이와 실제로 어느 방향을 수정할지 나누어 이해할 수 있습니다.
0은 해석된 두 견본이 계산에서 같은 색이라는 뜻입니다. 숫자가 커질수록 모델링된 지각적 간격도 커집니다. 이 방향은 명확하지만 사람이 차이를 알아채거나 받아들이는 정확한 지점은 상황에 따라 달라집니다. 보정된 모니터에서 인터페이스 토큰을 비교하는 디자이너, 질감 있는 종이의 잉크를 검사하는 인쇄 담당자, 보정되지 않은 휴대전화로 캐릭터 색을 기억하는 플레이어는 서로 다른 문제를 풀고 있습니다.
그래서 Delta E는 결정을 돕는 측정값으로 사용하고, 그 값 자체를 결정으로 만들지 않아야 합니다. 최종 크기와 배경, 출력 매체에서 견본을 확인하세요. Delta E 76, Delta E 94, CIEDE2000은 같은 쌍에도 다른 숫자를 줄 수 있으므로 공식 이름도 기록합니다. 계약, 브랜드 지침, 실험실 절차, 생산 규격에 허용치가 있다면 이 페이지의 일반 구간보다 해당 규칙을 우선해야 합니다.
색상은 색상환의 위치, 채도는 강도, 밝기는 화면에서 얼마나 밝고 어두운지를 나타냅니다. 비슷한 Delta E를 가진 두 쌍도 수정 이유는 다를 수 있습니다. 한 쌍은 밝기가 주로 다르고 다른 쌍은 채도가 비슷한 채 색상 경계를 넘었을 수 있습니다. 절대 HSB 차이가 그 방향을 빠르게 보여 줍니다. 색상은 원형 최단 거리를 사용하므로 359도에서 1도로 이동한 차이는 358도가 아니라 2도입니다.
디자인 토큰을 조정하거나 색 기억을 연습할 때 특히 유용합니다. 색상은 가깝고 밝기 차이가 크다면 색 계열을 유지한 채 밝기부터 고칩니다. 밝기와 채도는 비슷하고 색상만 어긋났다면 다른 슬라이더를 유지하며 환을 이동합니다. HSB는 지각적으로 균일하지 않아 같은 HSB 변화도 서로 다른 Delta E를 만들 수 있습니다. HSB는 편집 단서, CIEDE2000은 모델링된 비교로 읽으세요.
브라우저 도구는 견본을 보여 주는 디스플레이를 통제할 수 없습니다. 모니터 보정, 색 프로필, 화면 밝기, 시야각, 주변 조명, 색이 들어간 보호 필름까지 외관을 바꿀 수 있습니다. 주변색도 지각에 영향을 주어 같은 회색이 파랑 옆에서는 따뜻하고 주황 옆에서는 차갑게 보일 수 있습니다. 중립적인 분할 미리보기는 비교를 편하게 하지만 모든 재료, 인쇄 공정, 기기, 애니메이션 장면을 재현하지는 않습니다.
화면 디자인은 실제 컴포넌트를 대표 기기와 라이트·다크 테마에서 테스트하세요. 인쇄물이나 물리 제품은 해당 업무가 요구하는 조명과 측정 절차 아래에서 통제된 견본을 비교합니다. 동료가 계산을 재현할 수 있도록 원본 HEX와 공식 종류를 저장하세요. 비용, 안전, 브랜드, 제조에 영향을 주는 판단이라면 보정되지 않은 화면 캡처가 아니라 보정 장비와 공식 허용 규격을 사용해야 합니다.
Delta E는 지각 차이 모델에서 두 색이 얼마나 다른지 묻습니다. 대비율은 전경과 배경의 상대 휘도를 비교하며 보통 접근성 기준에서 글자나 인터페이스 콘텐츠가 충분히 분리되는지 확인합니다. 색상이 눈에 띄게 다른 두 색도 텍스트 대비는 부족할 수 있습니다. 반대로 색상 차이가 거의 없는 두 중성색이 휘도 차이 덕분에 읽기 좋은 대비를 제공할 수도 있습니다. 두 측정값은 다른 질문에 답합니다.
텍스트, 아이콘, 포커스 표시, 컨트롤을 선택한다면 요구되는 접근성 대비 테스트를 별도로 실행하세요. 이 페이지의 Delta E만으로 WCAG 준수를 주장할 수 없습니다. 하지만 브랜드 토큰 비교, 의도하지 않은 팔레트 변경 탐지, 기억한 색이 얼마나 이동했는지 정량화하는 데는 도움이 됩니다. 먼저 어떤 결정을 내릴지 이름 붙이고 그 결정을 측정하는 지표를 선택해야 하나의 숫자를 모든 색 문제에 잘못 적용하지 않습니다.
디자이너는 승인된 토큰과 대체안을 비교하고 결과를 기록하며 색상, 채도, 밝기 중 무엇이 변했는지 확인할 수 있습니다. 개발자는 CSS 변수, 테마 마이그레이션, 스크린샷, 팔레트 리팩터링을 검토할 때 사용할 수 있습니다. 콘텐츠 팀은 캠페인 견본 두 개를 브랜드 담당자에게 묻기 전에 정리할 수 있습니다. 원래 토큰이 있다면 압축 이미지에서 추출하지 말고 정확한 값을 붙여 넣어야 이미지 처리로 생긴 다른 변화를 피할 수 있습니다.
Toon Tone 플레이어는 기억으로 만든 캐릭터 색과 공개된 목표를 비교할 수 있습니다. Delta E는 전체 가까움을 설명하고 HSB 차이는 빗나간 슬라이더를 알려 줍니다. 항상 너무 밝게 고르는 것처럼 반복되는 편향 하나를 기록하고 다음 라운드에서 그 교정만 시험하면 생산적인 연습이 됩니다. 계산기는 보편적인 기억 점수나 게임 점수를 대신하지 않고 두 견본을 투명하게 측정해 공개 결과를 더 잘 공부하도록 돕습니다.
비교 결과를 다른 사람에게 전달할 때는 Delta E 숫자만 보내지 말고 두 HEX 값, CIEDE2000 공식 이름, 계산 날짜, 실제로 판단하려는 용도를 함께 적으세요. 화면 디자인이라면 어떤 테마와 배경에서 본 값인지, 인쇄 준비라면 브라우저 결과가 최종 승인 수단이 아니라는 점도 남깁니다. 계산기의 복사 버튼은 핵심 숫자와 HSB 차이를 빠르게 옮겨 주지만, 프로젝트 문서에는 관찰 조건과 허용 기준을 별도로 더해야 재현 가능한 기록이 됩니다.
여러 후보를 비교할 때는 기준색을 고정하고 대체색만 바꾸는 표를 만드는 방식이 유용합니다. 공식과 입력 경로를 중간에 바꾸지 않고 각 쌍을 같은 절차로 계산한 뒤, 시각 검토와 업무 규칙을 함께 기록하세요. 가장 낮은 Delta E가 언제나 가장 좋은 디자인이라는 뜻은 아닙니다. 상태 구분, 브랜드 의도, 접근성 대비, 밝고 어두운 테마 같은 요구가 다른 선택을 정당화할 수 있으므로 수치는 결정의 한 열로 사용해야 합니다.
ΔE00이라고도 쓰는 CIEDE2000을 사용합니다. 지각 색 공간에서 비교하고 밝기, 크로마, 색상 움직임을 보정합니다.
아닙니다. 이 모델에서는 매우 가깝지만 관찰자, 화면, 재료, 조명, 업무 전체에 적용되는 보편적 경계는 없습니다.
네. #0af 같은 입력은 6자리 값으로 확장됩니다. 6자리는 앞의 #이 있거나 없어도 됩니다.
아닙니다. Delta E는 모델링된 색상 차이, 접근성 대비는 상대 휘도를 측정합니다. 글자와 인터페이스에는 적절한 WCAG 방식을 사용하세요.
HSB는 편집하기 쉽지만 지각적으로 균일하지 않습니다. 시작 색에 따라 같은 변화의 시각 효과가 달라 두 수치는 다른 질문에 답합니다.