색상 값
색상 코드 변환기 (HEX·RGB·HSL·CMYK)
HEX, RGB, HSL 색상 값을 서로 변환하고 인쇄용 CMYK 근사값과 흰색·검정 배경 대비까지 함께 보여 줍니다.
결과 대기 중
계산 방법과 기준
CSS Color 문법은 HEX, rgb(), hsl() 등 여러 색상 표기를 허용합니다. 이 도구는 입력 색상을 HEX 기준으로 정규화한 뒤 RGB, HSL, 대비 비율을 함께 보여줍니다.
계산식과 처리 기준
- HEX -> RGB: 16진수 채널을 0~255 정수로 변환
- RGB -> HSL: max/min 채널 차이로 hue, saturation, lightness 계산
- 대비율 = (밝은 상대 휘도 + 0.05) / (어두운 상대 휘도 + 0.05)
계산 예시
#2563EB를 RGB·HSL·CMYK로 바꾸면?
- 색상 값
- “#2563EB”
결과#2563EB
입력한 CSS 색상을 HEX, RGB, HSL 표기로 변환했습니다.
rgb(16, 185, 129)는 HEX로?
- 색상 값
- “rgb(16, 185, 129)”
결과#10B981
입력한 CSS 색상을 HEX, RGB, HSL 표기로 변환했습니다.
CSS 색상 표기 비교
| 표기 | 예시 | 용도 |
|---|---|---|
| HEX | #2563EB | 디자인 토큰, 빠른 복사 |
| RGB | rgb(37 99 235) | 채널 기반 조정, 투명도 조합 |
| HSL | hsl(221 83% 53%) | 색상환 기반 팔레트 조정 |
주의사항
- 인쇄용 CMYK는 용지·잉크 프로파일(예: Japan Color, FOGRA)에 따라 달라집니다. 인쇄소에 교정쇄를 요청하세요.
어떤 색상 표기를 변환하나요?
HEX·RGB·HSL 등 색상 표기를 상호 변환합니다.
- #2563EB, #36F, rgb(37 99 235), hsl(221 83% 53%) 형식을 지원합니다.
- 대비 비율은 WCAG 상대 휘도 공식 기준으로 계산합니다.
- alpha 채널은 색상 변환 결과에서 제외하고 불투명 색상으로 계산합니다.
계산 결과는 입력값과 공개된 기준을 바탕으로 한 참고용 추정치이며, 세무·법률·의료 판단을 대신하지 않습니다. 기준은 2026.09.27 검토 시점입니다. 면책 고지
계산 뒤에 있는 원리
함께 읽으면 좋은 글
01IPS vs VA 패널 차이, 액정 분자가 눕느냐 서느냐로 갈리는 시야각과 명암비(TV·모니터 고르는 법)
TV와 모니터를 고를 때 늘 나오는 IPS와 VA, 무엇이 다를까요? 액정 분자가 수평으로 도는 IPS가 시야각에 강한 이유, 수직으로 서 있는 VA가 검은색을 더 깊게 표현하는 원리, 명암비 1000:1과 3000:1의 실제 의미, 빛샘·검은 잔상 같은 단점과 로컬 디밍, 용도별 선택법까지 정리했어요.
글 읽기 →02OLED 번인은 왜 생길까? 파란색(청색) 서브픽셀 수명과 잔상 줄이는 사용법 총정리OLED TV와 스마트폰에서 방송사 로고나 상태 표시줄 자국이 남는 번인은 왜 생길까요? 스스로 빛나는 유기물 소자가 쓴 만큼 닳는 원리, 빨강·초록보다 파랑이 먼저 약해지는 이유, 일시적 잔상과 번인의 차이, 제조사의 보정 기술과 번인을 늦추는 설정까지 정리했어요.
글 읽기 →03하늘은 왜 파랗고 노을은 붉을까? 레일리 산란과 빛의 경로파란 하늘과 붉은 노을은 서로 다른 현상이 아니라 파장에 따른 산란과 빛의 이동 경로로 연결됩니다. 1/λ⁴ 법칙의 계산, 보라색 하늘이 아닌 이유, 구름과 먼지의 영향까지 알아봅니다.
글 읽기 →