계산 로직과 결과 카드가 연결된 상태입니다.
개발계산 가능
색상 코드 변환기
HEX, RGB, HSL 색상 값을 CSS에서 쓰기 좋은 표기로 상호 변환합니다.
결과 대기 중
이 계산기를 이렇게 설계했습니다.
CSS Color 문법은 HEX, rgb(), hsl() 등 여러 색상 표기를 허용합니다. 이 도구는 입력 색상을 HEX 기준으로 정규화한 뒤 RGB, HSL, 대비 비율을 함께 보여줍니다.
계산식 기준
- HEX -> RGB: 16진수 채널을 0~255 정수로 변환
- RGB -> HSL: max/min 채널 차이로 hue, saturation, lightness 계산
- 대비율 = (밝은 상대 휘도 + 0.05) / (어두운 상대 휘도 + 0.05)
CSS 색상 표기 비교
| 표기 | 예시 | 용도 |
|---|---|---|
| HEX | #2563EB | 디자인 토큰, 빠른 복사 |
| RGB | rgb(37 99 235) | 채널 기반 조정, 투명도 조합 |
| HSL | hsl(221 83% 53%) | 색상환 기반 팔레트 조정 |
계산식에 사용된 방법
- 색상 값 값을 입력 형식에 맞게 확인한 뒤 계산합니다.
- 형식과 입력 규칙을 검증한 뒤 개발 도구 목적에 맞는 생성 또는 변환을 적용합니다.
- 결과는 검산과 복사에 바로 쓰기 쉬운 형태로 보여주는 방식을 사용합니다.
주의사항
- 텍스트, 시간, 코드 입력은 예시 형식과 다르면 계산이 제한되거나 결과가 달라질 수 있습니다.
- 언어, 런타임, 인코딩, 환경 차이에 따라 실제 결과가 다르게 보일 수 있습니다.
어떤 색상 표기를 변환하나요?
HEX·RGB·HSL 등 색상 표기를 상호 변환합니다.
- #2563EB, #36F, rgb(37 99 235), hsl(221 83% 53%) 형식을 지원합니다.
- 대비 비율은 WCAG 상대 휘도 공식 기준으로 계산합니다.
- alpha 채널은 색상 변환 결과에서 제외하고 불투명 색상으로 계산합니다.