CSS: Colors

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

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

---

COLORS

Introduction to Color

CSS는 다양한 색상을 지원한다.

여기에는 blue, black, limegreen 과 같은 명명된 색상과 숫자 값으로 설명되는 색상이 포함된다.

숫자 시스템을 사용하면 브라우저가 지원하는 전체 색 스펙트럼을 활용할 수 있다.

 

CSS의 색상은 다음과 같은 세 가지 방법으로 설명할 수 있다.

• 명명된 색상(Named colors) - 색상을 설명하는 단어(키워드 색상(keyword colors)이라고도 함)
• RGB - 빨간색, 녹색 및 파란색의 혼합을 설명하는 숫자 값
• HSL - 색조, 채도 및 밝기의 혼합을 설명하는 숫자 값

참고: https://www.codecademy.com/learn/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-learn-css-colors/cheatsheet

---

Foreground vs Background

색상은 다음과 같은 design 측면에 영향을 미칠 수 있다.

• Foreground color
• Background color

Foreground color는 요소가 나타나는 색입니다.

예를 들어, heading이 녹색으로 보이도록 스타일링된 경우, heading의 foreground color가 스타일링된다.

반대로, heading의 배경이 노란색으로 보이도록 스타일링할 때, heading의 background color가 스타일링된다.

CSS에서 이 두 가지 desing 측면은 다음 두 가지 property로 스타일링한다.

• color: 요소의 foreground color 스타일을 지정
• background-color: 요소의 background color을 스타일링

h1 {
  color: red;
  background-color: blue;
}

예에서는 heading 텍스트가 빨간색으로 표시되고 haeding 배경이 파란색으로 표시된다.

---

Hexadecimal (16진수)

Hexadecimal: 색을 지정할 때 사용할 수 있는 syntax

이 시스템을 사용하여 지정된 색상을 hex color(16진수 색상)이라고 한다.

hex color은 해시 문자(#)와 3~6자 뒤에 나타난다.

문자는 빨간색, 파란색 및 녹색의 값을 나타낸다.

darkseagreen: #8FBC8F
sienna:       #A0522D
saddlebrown:  #8B4513
brown:        #A52A2A
black:        #000000 or #000
white:        #FFFFFF or #FFF
aqua:         #00FFFF or #0FF

예제 값에 문자와 숫자가 모두 있다.

16진수 숫자 시스템(Hexadecimal number system)이 표준 10진수 시스템(standard decimal system)과 같이 10(0-9) 대신 16자리(0-15)를 가지기 때문이다.

10-15를 나타내기 위해, A-F를 사용한다. 

16진수는 "A"에서 "F", 0에서 9까지 이어지는 16자리 숫자 시스템이다.

(16진수 값 색상 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)

 

black, white, aqua 모두 세 글자와 여섯 글자로 표현된다.

숫자 쌍이 동일한 문자인 16진수 색상일 경우에 가능하다.

아쿠아는 처음 두 문자 모두 0이고 두 번째와 세 번째 문자 쌍은 모두 F이기 때문에 #0FF로 나타낸다.

세 가지 문자 hex color는 모두 6자(각 문자를 두 번 반복)로 나타낼 수 있지만, 그 반대의 경우도 마찬가지이다.

 

지정 색(background-color: #9932cc;)을 포함할 때와 마찬가지로 16진수 색상을 포함할 수 있으며, 문자는 대문자 또는 소문자로 표현한다.

---

RGB Colors

RGB 값을 나타내는 또 다른 syntax로, 일반적으로 "RGB value" 또는 "RGB"로 불리며, 16진수가 아닌 십진수를 사용한다.

h1 {
  color: rgb(23, 45, 23);
}

세 값은 각각 색상 요소를 나타내며, 0부터 255까지의 십진수 값을 가진다.

첫 번째 숫자는 빨간색의 양을 나타내고, 두 번째 숫자는 녹색, 세 번째 숫자는 파란색을 나타낸다.

이 색들은 정확히 16진수 색상과 동일하지만, 다른 구문과 다른 숫자 체계를 가지고 있다.

 

일반적으로 16진수 및 RGB 색상 표현은 동일하기 때문에 개발자의 선택에 따라 사용한다.

16진수에서 16진수, RGB에서 RGB를 비교하는 것이 더 쉽기 때문에, 하나를 선택하여 CSS 전체에 걸쳐 일관성을 유지하는 것이 좋다.

---

Hex and RGB

16진수 및 RGB 색상 시스템은 CSS에 명명된 색상 세트보다 더 많은 색상을 나타낼 수 있다.

새로운 색상 집합을 사용하여 웹 페이지의 스타일을 구체화한다.

 

16진수 및 RGB 모두 3개의 값이 있으며, 각 색에 대해 하나씩 있다.

각 값은 256개 값 중 하나이며, 총 256 * 256 = 16,777,216개 이다.

약 140개의 CSS 색상과 비교해 보았을 떄 훨씬 더 많은 것을 알 수 있다.

---

Hue, Saturation, and Lightness

RGB 색 체계는 컴퓨터가 내부적으로 색을 표현하는 방식에 매우 가깝기 때문에 편리하다.

CSS에는 색채-채도-광도 색채도 (hue-saturation-lightness color scheme)라고 불리는 또 다른 시스템이 있는데, HSL이라고 약칭한다.

 

HSL의 구문은 RGB의 십진수 형태와 유사하지만, 중요한 면에서 다르다.

첫 번째 숫자는 색채((hue)의 정도를 나타내며 0에서 360 사이이다.

두 번째와 세 번째 숫자는 각각 채도와 광도를 나타내는 백분율이다. 

예시:

color: hsl(120, 60%, 70%);

색채(hue)는 첫 번째 숫자이다.

컬러 휠의 각도를 나타낸다.

빨간색은 0도, 녹색은 120도, 파란색은 240도, 그리고 다시 빨간색은 360도이다.

(컬러휠/ 출처: https://content.codecademy.com/courses/learn-css-color/color_wheel_4_background.svg)

 

채도(Saturation)는 색의 강도 또는 순도를 나타낸다.

색이 짙어질수록 포화도는 100%까지 증가한다.

색상이 회색으로 변하면 포화도가 0%로 감소한다.

 

광도(Lighteness)는 색이 얼마나 밝은지 또는 어두운지 나타낸다.

중간, 즉 50%는 보통 밝기이다.

100%에 가까울 수 록 색상이 흰색에 가깝게 밝아지고, 0%에 가까워질 수록 색이 진해지고 검은색에 가까워진다.

 

HSL은 색상 조정에 편리하다.

RGB에서 색을 약간 어둡게 하면 세 가지 색 구성 요소 모두에 영향을 미칠 수 있다.

HSL에서는 밝기 값을 변경하는 것은 정말 쉽다.

HSL은 채도와 광도는 같지만 색채는 다른 다양한 색상을 선택해 함께 잘 어울리는 색상 세트를 만드는 데도 유용하다.

---

Opacity and Alpha

일부 색상의 불투명도(opacity) 또는 투명도(transparency)의 양을 조절해서 bottom element의 일부 또는 전체를 덮는 요소를 통해 볼 수 있다.

 

HSL 색 체계에서 불투명도(opacity)를 사용하려면 hsl 대신 hsla를 사용하고 세 개 대신 네 개의 값을 사용한다.

예시:

color: hsla(34, 100%, 50%, 0.1);

처음 세 값은 hsl과 동일하게 작동하고, 네 번째 값은 알파(alpha)라 하며 이 값을 불투명도(opacity)라고도 한다.

alpha는 0부터 1까지의 소수이다.

alpha가 0이면 색상이 완전히 투명해해지고 알파가 1이면 색상이 불투명해지며, 반투명 값은 0.5 이다.

 

알파 값은 "전경(foreground)과 혼합할 배경(background)의 양"으로 생각할 수 있다.

색의 알파가 1보다 아래에 있으면 뒤에 있는 모든 색이 혼합된다.

각 픽셀마다 혼합이 이루어지며 흐릿한 현상은 발생하지 않는다.

 

RGB 색상표는 불투명도(opacity), rgba에 대한 비슷한 구문을 가진다.

처음 세 값은 rgb와 동일하게 작동하고 마지막 값이 알파이다. 

예시:

color: rgba(234, 45, 98, 0.33);

hex color 또한 알파 값을 가진다.

6자리 표현(#52BC8280) 끝에는 두 자리 16진수 값을, 3자리 표현(#F003) 끝에는 한 자리 16진수 값을 추가하면 16진수 색상의 불투명도를 변경할 수 있다.

16진수 불투명도 범위는 00(투명) ~ FF(불투명)이다.

 

알파는 HSL, RGB, 16진수 색에만 사용할 수 있으며, 알파 값은 녹색과 같은 색상에 추가할 수 없다.

.

그러나 불투명도 0, 투명도라는 이름의 색상 키워드가 있다.

rgba(0, 0, 0, 0)와 같으며 다른 색상 키워드처럼 사용된다.

color: transparent;

---

참고

• https://www.codecademy.com/learn/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-learn-css-colors/cheatsheet
• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Web Development Fundamentals: Learn CSS: Colors Cheatsheet | Codecademy

- CSS: Cascading Style Sheets | MDN

• http://www.colors.commutercreative.com/grid/

147 Colors Grid - CSS Color Names