HSL이 RGB보다 좋은 점

[taihoon]

https://sujansundareswaran.com/blog/why-hsl-is-better-than-hex-and-rgb 을 발번역 했어요.

#3ecbbe 이거 무슨 색인지 알 수 있음?
rgba(253, 152, 39) 이건 뭘까?

어렵지? 16진수(HEX)와 RGB는 직관적인 색상 모델이 아니라 그래. 근데 HSL은 색상을 표현하는 실제 방식을 모방하고 있어 보다 친화적이야.

자~ 너는 지금 책상에 앉아 있을텐데, 책상의 색상을 봐봐. 마호가니 책상이라고 가정하면 그 색상은

• hex: #4f2017
• rgb: rgb(79, 32, 23)

일 꺼야.

이제 책상 표면 위 5센치 정도 위에 손을 올려봐. 그림자가 생겨 책상이 조금 어둡지? 그치만 책상의 색은 변한게 아니야. 표면에 도달한 빛의 양이 준거지. 이 변경을 색상 자체를 변경하지 않고 16진수나 rgb로 표현하는 것은 불가능해. 아예 다른 값이 되거든.

• hex: #200d09
• rgb: rgb(32, 13, 9)

원래 색과 이 값은 아무 상관 관계가 없어. 유추하기도 힘들지 ㅠ.

HSL

hsl은 hue, saturation, lightness의 약자야. 직관적인 색상 모델이지. 닝겐이 더 잘 이해할 수 있어. css는 rgb와 비슷한 형식으로 hsl(20, 100%, 60%) 처럼 쓰면 돼.

hue(색조)는 색상이고 빨간색으로 시작해. 녹색은 120°, 파랑은 270°야.

각 색상이 컬러휠(색상환)의 어디에 있는지 잘 봐둬. hsl 시스템을 활용할 때 꼭 필요하거든.

saturation(채도)는 색상의 강도나 순도를 지정하는 백분율이야. 0%는 색상이 채도가 낮고 흐릿한 회색인데 색상이 믹스에 존재하지 않다는 거지. 100%는 가장 순수한 색상이야.

lightness(밝기)도 백분율이야. 0%는 완전한 어둠, 즉 완전한 검은색이지. 100%는 순수한 흰색인 눈부신 빛이야.

이런 방식으로 색상을 가장 잘 표현하려면 색상 값을 선택하고 채도를 100%, 밝기를 50%로 해야겠지.

hsl(20, 100%, 60%)를 다시 볼까?

• 먼저 색조가 20이야. 0°이 빨강 60°이 노랑이니 20°은 그 사이에 있지만 빨강에 더 가깝겠지. 아마 어렌쥐 정도?
• 채도는 100%야. 가장 순수한 어렌쥐 색이지.
• 밝기는 60%야. 밝은 쪽이지.

이렇게 hsl 값을 읽는 것 만으로 색상을 시각화 할 수 있어. 그렇담 hsl을 사용해 책상 예제를 표현해 볼까?

• 책상 색상 hsl: hsl(10, 55%, 20%)
• 책상위에 손을 올렸을 때 hsl: hsl(10, 55%, 8%)

봐봐. 색조와 채도는 달라지지 않고 밝기만 달라졌어. 아래 예제도 봐봐.

button        { background-color : hsl(20, 100%, 60%); }
button:hover  { background-color : hsl(20, 100%, 70%); }
button:active { background-color : hsl(20, 100%, 40%); }

button	button:hover	button:active

HSL로 팔레트 구성하기

머리속으로 색상을 시각화 하는 방법을 알았으니 이제 색상 팔레트를 만드는 방법을 알아보자.

빨강 hsl(0, 100%, 50%)을 기본으로 할께.

보색(Complementary)

보색은 서로 반대편에 있는 색상이야. 보색의 조화는 극적이고 강렬한 느낌을 줘.

• hsl(0, 100%, 50%)
• hsl(180, 100%, 50%)

근접보색(Split–Complementary)

근접 보색은 보색 양옆의 두 색이야. 격조 높은 효과를 기대할 수 있어.

• hsl(0, 100%, 50%)
• hsl(20, 100%, 50%)
• hsl(340, 100%, 50%)

등간격 3색(Triadic)

이건 서로 동일한 거리에 있는 3가지 색상이야. 화려한 느낌을 준대.

• 기본: hsl(0, 100%, 50%)
• triadic: hsl(120, 100%, 50%)
• triadic: hsl(240, 100%, 50%)

등간격 4색(Tetradic)

서로 동일한 거리에 있는 4가지 색상. 다양하고 깊이 있다고 해.

• hsl(0, 100%, 50%)
• hsl( 90, 100%, 50%)
• hsl(180, 100%, 50%)
• hsl(270, 100%, 50%)

유사(Analogous)

기본 색상 양쪽에서 두개의 생상을 선책하는 거야. 원색의 개성을 보여주며 부드러움과 통일감을 줄 수 있어.

• hsl(0, 100%, 50%)
• hsl( 30, 100%, 50%)
• hsl(330, 100%, 50%)

단색(Monochromatic)

동일한 색조를 사용하지만 밝기가 달라. 단정한 느낌을 준대.

• hsl(0, 100%, 50%)
• hsl(0, 100%, 30%)

자. 이렇게 hsl을 사용하면 팔레트를 만드는건 간단한 산수가 돼. 레츠두잇~

[hg-pyun]

오.. 잘보고갑니다!