CSS: Color Theory

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

---

COLOR THEORY

The Color Wheel

color wheel: 예술가들과 디자이너들이 색깔 사이의 관계를 시각화하기 위해 사용하는 도구로 세 가지 색 그룹으로 구성되어 있다: primary, secondary, teriary

 

Primary color(원색)은 빨강, 파랑, 노랑으로 구성

이것들은 삼각형을 이루면서 color wheel에서 서로 같은 거리에 있으며, wheel의 모든 다른 색깔들의 기초가 된다.

 

Secondary color은 녹색, 주황색, 보라색을 형성하는 두 가지 원색을 혼합하여 만들어진다.

 

Tertiary color는 2차 색상과 1차 색상의 혼합 시 형성.

일반적으로 다음과 같은 두 단어 이름이 생성된다.

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

Color Wheel / 출처: https://content.codecademy.com/programs/ui-design/color-wheel/primary-color-wheel.svg

 

The Color Wheel and HSLA

 CSS에서 색을 설정하는 방법

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를 선호하는 이유

• CSS color keyword는 몇 가지 옵션만 제공한다.
• Hex cod와 RGB 값은 직관적으로 조정할 수 없다.
  (ex, 한 색상이 약간 더 밝아야 하며, 이는 16진수 코드(hex code) 또는 RGB 값 내의 직관적인 변경으로 해석되지 않는다는 피드백을 받는다)
• HSLA는 CSS로 색을 설정하는 가장 의미 있는 시스템이다.

이유의 의미

• 순수 색상은(Pure color) Hue(색상)로 설정된다. 이것은 color wheel 주위의 각도로 표현된다.
• Saturation(채도)는 그 색조의 강도나 순도를 가리킨다.
• full saturation 색상(100%)은 색상 자체이며, 채도가 없는 색상(0%)은 완전한 흑백(grayscale)이다.
• lightness(광도)는 색의 밝기를 나타낸다. 0%는 검은색, 100%는 흰색
• A 또는 alpha는 불투명도를 나타낸다. 0%는 완전히 투명하고 100%는 완전히 불투명

Warm Colors

모든 색상은 warmth value가 할당되어 있으며, warm 또는 cool로 분류된다.

 

warm color(따뜻한 색)는 빨간색과 노란색 사이에 있는데, 오렌지색 외에 다양한 색깔의 버전을 포함한다.

이것은 또한 갈색과 황갈색과 같은 색으로 구성되어 있다.

이것들은 따뜻한 느낌을 불러일으킨다는 점에서 "warm" color로 여겨진다.

 

List of HSL color codes: https://www.december.com/html/spec/colorhsl.html

Cool Colors

warm color와 대조적으로 color wheel의 반대편에는 "cool" color로 간주되는 색상

이 색깔들은 파란색, 보라색, 녹색으로 다양하다. 대부분의 회색 색상도 쿨 카테고리에 속한다.

 

cool color는 차분하고 진정시키는 성질 때문에 붙여진 이름이다.

Tints and Shades

색의 광도를 증가시키거나 감소시켜 색상의 tint(밝음)와 shade(어두움)을 각각 발생시킬 수 있다.

 

tint는 흰색으로 색을 입힐 때 발생하며, 색상의 광도를 추가하거나 증가시킨다.

shade는 검은색에 색을 첨가할 때 생성되며, 이것은 색상의 광도를 감소시킨다.

 

HSLA에서 tint와 shade는 세 번째 숫자인 L(Lightness, 광도)에 의해 결정된다.

이 범위는 0%(검은색)에서 시작하여 100%(흰색)까지이다.

Color Contrast

색상 대비(color contrast), color wheel에서 서로 반대되는 색상은 대조가 높으며, 옆에 있는 색은 서로 대비가 낮다.

 

디자인에 색상을 적용할 때, 대비 수준이 페이지의 구성요소에 대해 사용자에게 명확성을 제공하는 것이 중요하다.

예를 들어 흰색 배경이나 자세한 배경에는 밝은 색을 사용하지 않는 것이 좋다.

사용 편의성과 가독성을 높이기 위해 설계의 대비 효과를 높이는 것이 중요하다.

 

흰색 바탕에 어두운 회색 또는 검은색 텍스트를 자주 보는 이유이다.

두 색상 사이의 높은 대비는 사용자가 어렵지 않게 정보를 읽을 수 있는 최상의 능력을 제공한다.

Color Schemes

색상을 선택하고 디자인에 적용할 수 있는 방법

 

디자이너로서 색상을 적절히 조화시켜 우아하고 사용 가능한 디자인을 만드는 방법을 이해하는 것이 중요하다.

color wheel은 서로 어울릴 수 있는 색상을 결정할 때 유용하며, 이를 사용하면 다양한 색상표를 작성할 수 있다.

 

색상표(또는 색상 팔레트)는 두 개 이상의 색상을 함께 페어링한 결과이다.

선택한 색상은 디자인을 변경하거나 파기할 수 있지만 옵션을 알면 앞으로 나아가기 가장 좋은 색상을 결정하는 데 더 좋은 위치에 놓이게 된다.

 

디자인에 사용할 색상을 결정할 때 고려해야 할 네 가지 색상표

• Monochromatic
• Complementary
• Analogous
• Triadic

Color scheme 4 가지 / 출처:https://content.codecademy.com/programs/ui-design/color-wheel/color-schemes.svg 

Monochromatic Designs

가능한 가장 기본적인 색상표는 다양한 색조와 색조를 가진 단일 색상을 사용하여 Monochromatic palette(단색 팔레트)를 작성한다.

 

색상표의 각 색상은 기본 색상에서 파생되며,. 디자인 내의 모든 요소가 비슷하다고 느낄 수 있지만, 높은 대비로 단조로운 느낌을 없앨 수 있다.

 monochromatic color(단색 색상)을 선택할 때는 메인 색상의 훨씬 밝고 어두운 음영을 선택하는 것이 중요하다.

 

monochromatic color scheme(단색 색 구성표)은 디자인에 적용할 때 조직적인 느낌, 즉각적인 조화를 제공한다는 점에서 유용하다.

Complementary Designs

complementary color scheme(보색 표)는 color wheel에서 서로 반대되는 색상을 사용.

예를 들어 파란색을 주색으로 선택할 경우 주황색으로 최대 대비 및 강도를 만들 수 있다.

 

complementary palette(보색 팔레트)는 로고와 유니폼에서 많이 사용된다.

예를 들어, 로스앤젤레스 레이커스와 미네소타 바이킹은 보라색과 노란색을 특징으로 하고; 시카고 베어스와 뉴욕 메츠는 블루스와 오렌지를 통합한다.

이러한 보색표는 웹 사이트에도 적용할 수 있는 극적인 색상 표시를 제공한다.

 

complementary color scheme는 색 페어링에서 높은 대비를 가지고 있기 때문에 웹에서 자주 사용된다.

Analogous Color Schemes

Analogous color schemes(유사 색상표)는 color wheel에 서로 인접한 세 개 이상의 색상을 적용.

일반적으로, 서포트하기 위한 두 번째와 색상 팔레트를 강조하기 위한 세 번째와 결합된 하나의 지배적인 색(또는 색상)이 있다.

 

Analogous color schemes를 사용하면 시각적으로 즐겁고 차분한 디스플레이를 만들 수 있습니다.

예를 들어, 파란색은 청록색과 녹색 둘 다와 잘 어울릴 수 있다.

그러나 analogous color schemes는 모든 색상이 서로 일치하기 때문에 저대조 경험을 제공한다.

 

사용자의 직접적인 주의가 필요한 콘텐츠에 사용하면 안 되지만 사이트의 주요 콘텐츠와 경쟁하지 않는 배경을 만드는 데 사용할 수 있다.

Triadic Color Schemes

triadic color schemes(삼각 색상표)는 사용할 수 있는 범위에서 약간의 유연성을 허용하면서 추가 색상 팝을 제공한다.

이 색들은 color wheel에서 서로 등거리인 세 가지 색상으로 구성된다.

 

예를 들어, 파란색을 주 색상인 상태로 유지하면 red-orange 및 yellow-green을 페어링 조합으로 선택할 수 있다.

이렇게 하면 색상 휠 내에 삼각형의 색상이 만들어지고 선택할 수 있는 팔레트가 넓어진다.

triadic color schemes는 디자인에 동일성, 진동 및 보안성을 제공한다는 점에서 유용하다.

 

Color Psychology

색상의 올바른 조합을 선택하는 것과 관련해서는 디자이너가 웹 사이트의 "느낌"을 결정해야 한다.

 

색깔마다 문맥과 의미가 다르고, 색깔 심리학은 사람들이 디자인을 인지하고 사용된 색깔과 연관짓는 방법에 영향을 줄 수 있다.

적절한 색상을 선택하면 제품 또는 서비스의 컨텍스트와 감정을 비언어적으로 전달하는 데 도움이 될 수 있다.

 

각각의 색은 특정한 의미(긍정과 부정 모두)를 가지고 있는데, 이것은 사용자로부터 감정을 불러일으킬 수 있다.

• Red: Passionate, energetic, angry
• Orange: Optimistic, playful, fun
• Yellow: Welcoming, intellectual, impatient
• Green: Prosperous, balanced, growing
• Blue: Peaceful, loyal, cold
• Purple: Imaginative, royal, spiritual
• Gray: Unemotional, compromising
• White: Innocent, pure
• Black: Luxurious, powerful

Best Pactices

네온 컬러는 적게 사용. 네온 컬러의 사용은 힙한 느낌을 줄 수 있지만, 그것들은 종종 사용자의 눈에 거슬린다.

 

진동하는 색상을 피하기. 진동하는 색상은 서로 보완적일 수있는 채도가 높은 두 색상을 함께 결합한 결과이다. 그것은 빛나거나 움직이는 효과를 만들어 내며 눈에 힘들 수도 있다.

 

배경을 사용하여 진동하는 색상을 구분하기. 

 

대비가 불충분한 색상 조합을 피하기

• 밝은 색상의 위에 밝은 색상
• 옅은 색 위에 옅은 색
• 어두운 색상 위에 어두운 색상

 

---

참고

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

HSL Selected (Hue, Saturation, Light) Color Codes

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

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