Color 색상에 관한 공부 / HSLA / 색 이론 적용

1차 2차 3차 색상이 있는데, 1차는 빨, 노, 파 / 2차는 1차를 섞어서 나오는 색상으로 초, 주, 보 가있고 / 3차는 다시 1차와 2차를 섞어 나오는 색상들로 아래와 같은 종류가 있다. 

색상환 , 출처 : 위키피디아

• Red-orange (Vermillion)
• Yellow-orange (Amber)
• Yellow-green (Chartreuse)
• Blue-green (Teal)
• Blue-purple (Violet)
• Red-purple (Magenta)

 

이전에도 서술되었듯이 , 색상을 표현하는 CSS의 방법에는 여러가지가 있다.

 

 1. color name 

 2. HEX code

 3. RGB

 4. hsla

 

예를 들자면 

h1 {
    color: Yellow; /*Keyword */
}
h2 {
    color: #8FBC8F; /* Hex Code */
}
h3 {
    color: rgb(23, 45, 23); /* RGB*/
}
p {
    color: hsla(34, 100%, 50%, 0.1); /* HSLA*/
}

위와 같이 되는데, 이 중 디자이너에게 가장 선호되고 또 적합한 것은 hsla이다. 

보다 직관적으로 '조금 더 밝게' 등의 피드백에 대응할 수 있기 때문이다. 

 

<hsla요약 리뷰>

h는 색상환에서의 각도로, 어떠한 색을 지정할 것인지를 표현

s는 saturation 으로 100의 saturation은 색상 그자체이며 , 0으로 갈수록 grayscale s100%가 정상색

l은 명도로 100일수록 흰색, 0일수록 검정색(밝기) l 50%가 정상색. 

a 투명도 1일수록 불투명 0일수록 투명 

 

 

따뜻한 색상

Warm colors

 

따뜻한 색상들은 Red에서 Yellow 사이에 위치한다. 불꽃이 내는 색상의 스펙트럼으로 따뜻함을 표현할 수있고, 어떤경우에는 용감함 혹은 공격적임 등을 표현할 수도 있다. 

Hue number로보면(hsla에서 가장 처음에 오는숫자) 대략 0에서 60까지 정도이다. 

 

 

차가운 색상

Cool colors

Blue purple green 사이에 위치한다. 또한 대부분의 회색 계열의 색상들도 cool 계열에 해당한다. 

또한 진정시키고 , 안정시키는 느낌과 더불어 물, 겨울 등의 속성과 연관되기도 한다. 

Hue number로 보면 140에서 280 사이의 색들이다. (140에 가까울수록 녹색, 280일수록 보라색, 중간 240정도가 파란색)

 

 

Tint와 Shade

밝은색과 어두운 색

 

흰색이 색에 섞일 수록 밝아질 것이고, 검정색이 섞일 수록 어두워 질 것인데 각각 tint와 shade라고 부른다. hsla에서 L(밝기)속성이 이를 좌우한다. H를 고정한 채로 l속성을 바꿔가면서 실험해보면 차이를 알 수 있다. L을 이해하면 더 넓은 폭의 색상을 활용할 수 있으므로 유용하다. 

 

 100%에 가까울수록 흰색, 0%에 가까울 수록 검정색(어두움) 이된다. 

 

 

Color schemes

 

색상의 조합에 관한 내용이다. 크게 네 가지 방법이 있는데 아래와 같다.

• Monochromatic
  • 단색이지만, 명도를 가감하여 활용(tints tones shades) / 통일성이 있지만 심심해보일 수 있다. 
• Complementary
  •   보색관계를 잘 이용하면 강조를 주는데 좋은 효과를 볼 수 있다. LA레이커스 등의 농구 유니폼에서 활용된 예가 있다. 강조를 적절히 주면 좋지만, 너무 큰 부분에서 크게크게 이용하게 되면 색상끼리 너무 충돌하는 느낌이 들 수 있으므로 전략적으로 활용해야한다. 
• Analogous
  • 색상환에서 인접한 세 개의 색 혹은 그 이상의 색상들을 활용하는 것으로, 중심이되는 색 한가지와 보조하는색 하나 그리고 강조를 위해 중간중간 추가되는 색 등으로 구성하여 활용하는 것이 일반적이다. 편안한 분위기를 연출하는 반면에 , 이용자의 주의나 관심을 요하는 컨텐츠에는 부적합하다. 메인 컨텐츠를 감싸는 배경으로 활용되면 좋다. 
• Triadic
  • 각 색상별로 동일한 간격으로 떨어진 세 개의 색상을 활용한다. 보색관계처럼 다양한 색상을 이용하게 스펙트럼을 넓히는 장점이 있다. 

이 그림에는 상대되는 보색의 좌우에 있는 색상도 활용하는 Split Complementary 및 사각형이 Tetradic도 포함되어있다. 출처:https://www.webascender.com/blog/understanding-color-schemes-choosing-colors-for-your-website/

 

 

Color Psychology

색상심리학

 

  색상을 정할 때 어떠한 '느낌'을 사용자에게 전달할 것인지가 중요하다. 적절한 색상을 선택하는 것은 이러한 제품이나 서비스가 가지고 있는 비언어적인 맥락을 전달하는 데 도움을 줄 수 있다. 각 색상이 지니고 있는 의미들은 대표적으로 다음과 같다. 이러한 의미들은 이용자들에게 특정한 감정들을 유발하게 한다. 

 

• Red
  • 열정적임, 에너제틱, 분노 
• Orange
  • 긍정적, 재미있는, 활기찬
• Yellow
  • 환영하는, 지적인, 인내심 없는
• Green
  • 성장하는, 균형잡힌, 번영하는
• Blue
  • 평화로운, 충성스러운, 차가운
• Purple
  • 상상력넘치는, 귀족적인, 영적인
• Gray
  • 무심한, 타협하는
• White
  • 순수한
• Black
  • 럭셔리함, 파워풀함

 

 

주의점

 Neon 색상을 사용하는 것은 웹사이트를 hip하게 만들 수도 있지만, 되도록이면 자제하여야 한다. 사용자에게 시각적인 부담을 안길 수 있다. 

 

Vibrating colors 를 피해야한다. 보색관계로 유발되는 눈의 피로를 최소화 하여야한다 , 대표적으로 크리스마스 카드가 있다. (아래 링크 참고) 크리스마스 카드 등 처럼 꼭 사용을 해야한다면 , 중간에 back drop이라고 하는 장치로 흰 색등의 완충색을 삽입하여 직접적인 색의 충돌을 최대한 완화하는 방법으로 표현해야 한다. 

 

 반대로 또한 불충분한 대조를 가진 색조합을 피해야한다. 결국 유저들은 웹사이트를 자세히 읽기보다는 대충 보고자하는 경향이 있기 때문에 적절한 강조색을 활용하여 유저에게 표현해주어야 한다. 

 

 

 

 

참고)

HSLA 볼 수 있는 사이트

 

https://www.december.com/html/spec/colorhsl.html

HSL Selected (Hue, Saturation, Light) Color Codes

 

색상이론에 관한 포스팅

 

https://www.webascender.com/blog/understanding-color-schemes-choosing-colors-for-your-website/

Understanding Color Schemes & Choosing Colors for Your Website - Web Ascender

 

Vibrant colors에 관한 포스팅

https://accessibility.psu.edu/color/brightcolors/

Vibrating Color Combinations

 

https://color.adobe.com/ko/create/color-wheel

https://color.adobe.com/ko/create/color-wheel