색상 및 이미지 계산기: 변환, 대비, 팔레트

다섯 패널이 하나의 색상 엔진을 공유합니다. 변환(HEX, RGB, HSL, HSV, CMYK, LAB, LCH), 대비(AA/AAA 배지가 있는 WCAG 비율), 팔레트(6가지 조화 체계, 틴트와 셰이드, 색각 미리보기), 이미지(평균 색상, 대표 팔레트, 파일의 RGB 히스토그램), 사진(피사계 심도, 노출, 천체, 출력). 각 패널에는 자체 주소 — /life/color/convert, /life/color/contrast, /life/color/image, /life/color/photo — 가 있고 브라우저에서 실행됩니다.

更新 2026-10-015 个来源约 4 分钟读完

사용 방법

색 변환.피커를 설정하거나 HEX 값을 입력하거나 R/G/B와 H/S/L 슬라이더를 끕니다. 카드 8장이 함께 갱신되고 각각 복사할 수 있으며, 가장 가까운 CSS 명명 색상이 ΔE₇₆ 거리를 알려줍니다.
대비 확인.전경과 배경을 선택합니다. 비율 하나, 배지 넷(AA/AAA, 일반 텍스트와 큰 텍스트), 실시간 샘플. AA 일반이 실패하면 제안된 스와치를 클릭해 밝기만 고치는 수정으로 4.5 : 1에 도달합니다.
팔레트 만들기.여섯 행 — 보색, 분할 보색, 삼색, 사색, 유사, 단색 — 이 기준 색을 따르고, 이어서 13단계 틴트·셰이드 띠가 나옵니다. 모든 스와치는 HEX로 복사됩니다. 색각 미리보기는 선택한 체계를 1형·2형·3형 색각으로 보여줍니다.
이미지 읽기.선택한 파일은 로컬에서 디코딩되고 최대 480 px 너비로 축소됩니다. 픽셀을 클릭하면 HEX, RGB, HSL이 나오고, 패널은 평균 색상, 메디안 컷의 최대 여섯 대표 색상, 64빈 RGB 히스토그램을 추가합니다.
촬영 계획.사진 탭은 피사계 심도, 노출(EV, 셔터 사다리, ND 필터와 카운트다운 타이머, 서니 16, 플래시), 천체(500 규칙과 NPF, 별 궤적, 달 위상), 출력(인쇄 크기, 파일 추정, 타임랩스)을 다룹니다.

계산 예

이 페이지의 기본값에서 나온 표시입니다.

입력	페이지 표시
`#4a90e2`	hsl(212, 72%, 59%), hsv(212, 67%, 89%), cmyk(67%, 36%, 0%, 11%), lab(58.87 3.995 -48.11), lch(58.87 48.27 274.7), 휘도 0.2689, 최근접 cornflowerblue · #6495ed · ΔE₇₆ = 6.26
흰 배경의 `#999999`	2.85 : 1 — 배지 넷 모두 실패, 제안된 전경 #757575는 4.61 : 1
흰 배경의 `#767676`, 그다음 `#777777`	4.54 : 1은 AA 일반과 큰 텍스트 배지 둘을 통과, 4.48 : 1은 0.02 차이로 AA 일반 실패
팔레트 기준 `#4a90e2`	삼색 #4a90e2 / #e24a90 / #90e24a, 틴트와 셰이드 #e5effb → #0b1520, 2형 색각의 보색 쌍 #6b66ce / #cbd06b
사진: 50 mm, f/8, 3 m, 풀프레임; f/8, 1/250 s, ISO 100	근거리 2.36 m, 원거리 4.12 m, 합계 1.76 m, 과초점 10.88 m, EV 13.97, 1/125 s에 ND1000은 8.2″
사진: 24 mm, f/2.8, 24 MP, 적위 0°; 300 dpi에서 6000 × 4000 px	500 규칙 20.8 s, NPF 11.6 s, 궤적 6.1 px, 인쇄 50.8 × 33.9 cm, 우수, RAW 14비트 24.8 MB

배지 뒤의 WCAG 수치

각 sRGB 채널은 선형화되고(0.04045 분기점 아래에서는 ÷12.92, 그 외에는 ((v + 0.055) / 1.055)²·⁴), 상대 휘도는 L = 0.2126 R + 0.7152 G + 0.0722 B, 대비 비율은 (L_light + 0.05) / (L_dark + 0.05)입니다 — 흰 바탕의 검정 21.00 : 1, 같은 색 1.00 : 1. 임계값: AA 일반 4.5, AA 큰 텍스트 3.0, AAA 일반 7.0, AAA 큰 텍스트 4.5. 변환 카드는 sRGB → 선형 RGB → XYZ(D65) → CIELAB → LCH 순서를 따르고, 최근접 이름 카드는 148개 CSS 키워드에 대해 ΔE₇₆을 사용합니다.

전제와 한계

sRGB 전용.: 모니터 프로필이나 색역 검사는 없습니다. CMYK 카드는 단순한 c/m/y/k 감산으로, 대화용 값이지 인쇄 교정이 아닙니다.
표시 반올림.: LAB과 LCH는 유효 숫자 네 자리, 비율은 소수 두 자리를 표시하며, 판정은 반올림하지 않은 값을 비교합니다.
분석이지 편집이 아님.: 이미지 패널은 픽셀을 쓰지 않습니다. 자르기, 크기 조정, 필터, 형식 변환, 내보내기가 없습니다. 촬영 계획은 사진 패널, 하늘 시각은 천문 태양 패널, 색 비트 패킹은 프로그래머 계산기의 몫입니다.

큰 텍스트 임계값의 함정

사람들이 잘못 읽는 배지는 AAA 큰 텍스트입니다. 필요한 값은 4.5 : 1로 AA 일반과 같으며, AA 큰 텍스트가 허용하는 3 : 1이 아닙니다 — AA에서 «큰 텍스트»를 통과해도 AAA에서는 아무것도 보장되지 않습니다. 흰 배경에서 #767676은 4.54 : 1로 AA 일반과 큰 텍스트 배지 둘을 통과하고(AAA 일반은 7.0 필요), #777777은 4.48 : 1로 AA 일반에 100분의 2 차이로 실패합니다. «큰»은 18 pt 일반 또는 14 pt 굵게를 뜻하고, 비율은 대칭입니다: 텍스트와 배경을 바꿔도 달라지지 않습니다.

도움이 되는 곳

인터페이스와 브랜드 작업

본문 텍스트와 버튼을 두 배경에 대해 확인하고, 다크 모드 쌍을 정직하게 유지하고, 로고에서 여섯 색 조화를 뽑고, 빨강/초록 상태 팔레트가 2형 색각에서도 살아남는지 봅니다.

사진과 이미지 작업

오버레이 색조를 고르기 전에 사진의 평균 색과 대표 색을 추출하고, 50 mm f/8이 3 m 거리의 피사체를 1.76 m 안에 담는지, ND1000이 1/125 s를 얼마나 늘리는지, 24 MP 프레임 몇 장이 100 s 타임랩스를 채우는지 확인합니다.

코드와 인쇄의 색

개발자에게 정확한 hsl(212, 72%, 59%) 또는 LAB 문자열을 넘기고, 흰 페이지에 대해 마케팅 hex를 검증하고, 인쇄소에 보내기 전에 CMYK 판독값을 점검합니다.

참고 문헌

W3C, WCAG 2.2 — Contrast (Minimum) and Contrast (Enhanced), w3.org （访问日期：2026-10-01）— 4.5 : 1, 3 : 1, 7 : 1 임계값과 큰 텍스트 정의.
W3C, WCAG 2.2 — relative luminance, w3.org （访问日期：2026-10-01）— 모든 비율 뒤의 계수와 0.05 오프셋.
Wikipedia, CIELAB color space, en.wikipedia.org （访问日期：2026-10-01）— 결과 카드의 XYZ→Lab 변환과 LCH 극형식.
Wikipedia, Median cut, en.wikipedia.org （访问日期：2026-10-01）— 여섯 이미지 스와치 뒤의 대표 색 알고리즘.
Wikipedia, Depth of field, en.wikipedia.org （访问日期：2026-10-01）— 사진 탭이 보고하는 과초점 거리와 근거리/원거리 한계.