[CSS] 7) 색 표현법, 색 넣기 (#HSLA # RGB)

 

Codecademy front-end engineer course

DAY7

• Learn CSS: Color

---

 

- Introduction of Color [색 표현법 종류]

Named Color	English words that describe colors, also called keyword colors
RGB	numeric values that describe a mix of red, green, and blue
HSL	numeric values that describe a mix of hue, saturation, and lightness

 

- Two types of Color[배경색, 글씨 색]

color	this property styles an element’s foreground color.
background-color	this property styles an element’s background color.

 

- Hexademical (16진수)

: A hex color begins with a hash character (#) which is followed by three or six characters.

*the hexadecimal number system has 16 digits (0-15) instead of 10 (0-9)

*the values with doubled digits for each color value can be shortened to there characters. (like below code)Hex 

Black:        #000000 or #000
White:        #FFFFFF or #FFF
Aqua:         #00FFFF or #0FF

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

- CSS: Cascading Style Sheets | MDN

 

- RGB Colors

:each of the three values represents a color component, and each can have a decimal number value from 0 to 255.

(red, green, blue)

:using decimal number

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

* RGB이든 Hexademical한 방법이든 하나로 통일하는 것이 좋음.

 - CSS color는 147개만 제공하는 반면, 위의 표현방식을 이용하면 256*256*256=16,777,216개 표현 가능.

 

 

- Hue, Saturation, and Lightness (HSL)

* 특성을 비슷하게 색을 여러개로 만들고 싶을 때 한 숫자만 바꿔도 돼 유용.

Hue	an angle on a color wheel.
Saturation	refers to the intensity or purity of the color. - increases towards 100% -> gets closer to the edge (the color becomes more rich) -  decreases towards 0% -> gets closer to the center (the color becomes more gray)
Lightness	how light or dark the color is. Halfway, or 50%, is normal lightness. - 100% makes the color lighter, closer to white.  - 0% makes the color darker, closer to black

 

 

- Opacity & Alpha [투명도]

:opacity, or the amount of transparency

 

1) HSLA

:alpha is zero, the color will be completely transparent. If alpha is one, the color will be opaque.

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

2) RGBA

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

 - the alpha value as, “the amount of the background to mix with the foreground”. (it mix for each pixel.)

 

3)

 - CSS color나 16진법으로 대체 불가능.

 - transparent 는 서로 대체 가능.

color: transparent;
color: rgba(0, 0, 0, 0);