인쇄 팔레트를 웹으로 가져올 땐 HSL이 더 쉬워: 잉크 혼합을 hue, saturation, lightness로 표현하면 순식간에 호버 상태, 틴트, 쉐이드를 만들 수 있어.
CMYK에서 HSL로 어떻게 변환되는지
- CMYK 퍼센티지를 0~255 범위의 RGB 채널로 변환해.
- 채널들을 255로 나누고 최대값과 최소값을 구해.
- 최댓값과 최솟값의 평균이 광도 L이고, 그 차이가 채도 S를 결정해.
- 최댓값을 가진 채널이 색상환에서의 H(도)를 결정해.
작동 예시
CMYK cmyk(36%, 77%, 0%, 25%)=HSL hsl(272, 63%, 46%)
CMYK에서 RGB로의 단계가 이미 근사이고 HSL 값은 정수로 반올림돼. 결과는 색상 관리된 변환은 아니지만 매우 근접한 매치야.
CMYK과(와) HSL 설명
CMYK이(가) 무엇인가요?
CMYK는 인쇄에서 쓰이는 4색 잉크 모델로 시안, 마젠타, 옐로우, 블랙(key)을 각 0–100% 비율로 나타냅니다. 잉크는 빛을 흡수(감산)하므로 화면보다 재현 가능한 색 영역이 좁아 밝은 화면 색상이 인쇄되면 다소 탁해 보일 수 있습니다.
- 구문:
- cmyk(C%, M%, Y%, K%)
- 범위:
- 잉크별 0–100%
- 적합한 용도:
- 인쇄, 패키지, 인쇄용 작품 준비
HSL이(가) 무엇인가요?
HSL은 색을 색상(색환상의 0–360°), 채도(얼마나 채색된지, 0–100%), 명도(밝기, 0–100%)로 나눕니다. 사람이 색을 설명하는 방식과 유사하기 때문에 HSL은 색조, 쉐이드, 일관된 팔레트를 수작업이나 코드로 만들 때 가장 다루기 쉽습니다.
- 구문:
- hsl(H, S%, L%)
- 범위:
- 0–360°, 0–100%, 0–100%
- 적합한 용도:
- 팔레트, 틴트와 쉐이드, 테마 작업
CMYK to HSL 참조표
가장 흔한 CSS 색상들을 CMYK에서 HSL로 변환한 표입니다.
| 색상 | CMYK | HSL |
|---|---|---|
| black | cmyk(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |