# 색상 표기법 개요
웹 디자인과 개발에서 색상은 다양한 방식으로 표현됩니다.가장 일반적인 세 가지는 다음과 같습니다.
- 16진수 (16진수): 예:
# FF5733 - RGB (빨간색, 녹색 및 파란색): 예:
rgb (255, 87, 51) - HSL (Hue-Saturation-Brightness): 예:
hsl (9, 100%, 60%)
각 표기법에는 고유한 시나리오가 있습니다.둘 사이의 전환을 이해하면 디자인할 때 더 편안해질 수 있습니다.
# 세 가지 색상 모델에 대한 자세한 설명
# # 16진수
가장 널리 사용되는 웹 색상 형식입니다.# 으로 시작하여 6자리 16진수 (또는 줄여서 3자리) 로 시작합니다.각 두 자리는 빨간색, 녹색 및 파란색 채널 (00-FF) 의 값을 나타냅니다.
# FF5733 → 빨간색 = FF (255), 녹색 = 57 (87), 파란색 = 33 (51)
# # RGB 레드 그린 블루
가장 직관적인 색상 모델로, 빨간색, 녹색 및 파란색 채널 (0-255) 의 값을 직접 지정합니다.알파 투명도 채널은 CSS에 rgba (255, 87, 51, 0.5) 로 추가할 수도 있습니다.
# # HSL 색조-채도-밝기
가장 디자이너 친화적인 색상 모델:
- 색상 : 컬러 휠의 위치를 나타내는 0-360°
- 채도 : 0-100%, 색상 순도
- 밝기 : 0-100%, 색상이 얼마나 밝고 어두운지
HSL의 장점은 "같은 색상이지만 더 밝게" 를 원할 때 밝기 값을 조정하기만 하면 된다는 것입니다.
# 수식 변환
# # 16진수 → RGB
R = parseInt (16진수 [1.. 2], 16)
G = parseInt (16진수 [3.. 4], 16)
B = parseInt (16진수 [5.. 6], 16)
# # RGB → HSL
R '= R/255, G' = G/255, B '= B/255
Cmax = max (R ', G', B ')
CMIN = min (R ', G', B ')
Δ = Cmax-Cmin
H = 60° × (다양한 상황에 대한 공식)
S = Δ/(1- | 2L - 1 |)
L = (Cmax + Cmin)/2
# 실용적인 팁
- CSS 변수 : HSL을 사용하여 테마 색상을 정의하여 밝기 값을 조정하여 변형을 쉽게 생성합니다.
- 디자인 시스템 : HSL을 사용하여 색조를 균일하게 관리하고 색조를 수정하여 피부를 전역적으로 변경합니다.
- 접근성 : 밝기 값으로 전경색과 배경색의 대비를 결정합니다.
- 그라데이션 색상 : HSL은 보다 자연스러운 그라데이션 전환을 만들 수 있습니다.
컬러 트랜스코딩은 기본인 것 같지만, 실제 개발에서는 매일 사용할 수 있는 기술입니다.