====== CSS Colors ======
<WRAP left notice 80%>
  * description : CSS Colors
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-04
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_colors.asp|CSS Colors]]
  * [[https://www.w3schools.com/css/css_colors_rgb.asp|CSS RGB Colors]]
  * [[https://www.w3schools.com/css/css_colors_hex.asp|CSS HEX Colors]]
  * [[https://www.w3schools.com/css/css_colors_hsl.asp|CSS HSL Colors]]
\\
컬러는 미린 정의된 컬러 이름, 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하며 명시합니다.\\
\\
=====CSS 컬러 이름=====
CSS에서, 미리 정의된 컬러 이름을 사용하여 컬러를 명시할 수 있습니다.\\
모든 최신 브라우저가 지원하는 140개의 표준 컬러 이름을 CSS와  HTML이 지원합니다.\\
  * [[https://www.w3schools.com/colors/colors_names.asp|HTML Color Names]]
\\
=====CSS Background Color (배경 컬러)=====
HTML 요소들에 대한 background 컬러를 설정할 수 있습니다.\\
\\
===예제===
<code css>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
</code>
\\
=====CSS Text Color (폰트 컬러)=====
HTML 요소들에 대한 폰트 컬러를 설정할 수 있습니다.\\
\\
===예제===
<code css>
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
</code>
\\
=====CSS Border Color (보더 컬러)=====
HTML 요소들에 대한 보더 컬러를 설정할 수 있습니다.\\
\\
===예제===
<code css>
<h1 style="border:2px solid Tomato;">Hello World</h1>
<p style="border:2px solid DodgerBlue;">Hello World</p>
<p style="border:2px solid violet;">Hello</p>
</code>
\\
=====CSS Color Value (컬러 값)=====
CSS에서 RGB 값, HEX 값, HSL 값, RGBA 값, HSLA 값을 사용하여 컬러를 명시할 수 있습니다.\\
\\
===예제===
<code css>
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
</code>
\\
======CSS RGB Colors=====
RGB 컬러 값은 RED, GREEN, BLUE 광원을 나타냅니다.\\
\\
=====RGB 값=====
CSS에서, 컬러는 아래의 공식을 사용하여 RGB 값으로 명시될 수 있습니다.\\
====rgb(red, green, blue)====
\\
각각의 매개변수 (red, green, blue)는 0~255사이의 **색상 강도(color intensity)**를 정의합니다.\\
예를 들어, rgb(255, 0, 0)은 red가 가장 높은 값(255)으로 설정되고, 나머지 값들은 0으로 설정되었기 때문에 red로 표시됩니다.\\
black을 나타내기 위해, 모든 컬러의 매개변수를 0으로 설정합니다: rgb(0, 0, 0)\\
white를 나타내기 위해, 모든 컬러의 매개변수를 255로 설정합니다: rgb(255, 255, 255)\\
\\
회색 음영 (shades of gray)은 모든 3개의 광원에 동일한 값을 사용하여 정의되곤 합니다.\\
\\
=====RGBA 값=====
RGBA 컬러 값은 알파 채널 (Alpha channel)로 RGB 컬러 값을 확장한 것이며, 컬러에 대한 불투명도 (opacity)를 지정합니다.\\
RGBA 컬러 값은 아래의 형식으로 지정됩니다.\\
====rgba(red, green, blue, alpha)====
\\
알파 매개변수는 0.0(완전 투명) ~ 1.0 (완전 불투명) 사이의 숫자로 표시합니다.\\
\\
======CSS HEX Colors======
hexadecimal(16진수) 컬러는 #RRGGBB로 지정하고, RR (red), GG (green), BB (blue) 16진수는 색상의 구성 요소를 지정합니다.\\
\\
=====HEX 값=====
CSS에서 아래 형식의 16진수 값을 사용하여 컬러를 지정할 수 있습니다.\\
\\
====#rrggbb====
\\
rr (red), gg (green), bb (blue)는 00 ~ ff (십진수 0~255와 동일) 사이의 16진수 값입니다.\\
예를 들어, #ff0000는 red가 가장 높은 값(ff)로 설정되고, 나머지는 가장 낮은 값(00)으로 설정되었기 때문에 red로 표시됩니다.\\
\\
회색 음영 (shades of gray)은 모든 3개의 광원에 동일한 값을 사용하여 정의되곤 합니다.\\
  * #000000, #3c3c3c, #787878, #b4b4b4, #f0f0f0, # ffffff
\\
=====3 자리 HEX 값 (3 Digit HEX Value)=====
CSS 파일에서 3 자리 HEX 코드를 볼 수 있습니다.\\
3 자리 HEX 코드는 6 자리 HEX 코드 중 일부에 대한 속기 표현입니다.\\
3 자리 HEX 코드는 다음의 형식을 가집니다.\\
\\
====#rgb==== 
r, g, b는 0 ~ f 사이의 값을 가진 red, green, blue 구성요소를 나타냅니다.\\
3자리 HEX 코드는 각 구성 요소에 대한 RR, GG, BB의 두 개의 값이 동일할 때에만 사용될 수 있습니다.\\
그래서 #ff00cc를 #f0c로 쓸 수 있습니다.\\
\\
===예제===
<code css>
body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}
</code>
\\
======CSS HSL Colors======
HSL은 hue (색상), saturation (채도), lightness (명도)를 나타냅니다.\\
=====HSL 값=====
CSS에서 아래 형식의 색상, 채도, 명도를 사용하여 지정할 수 있습니다.\\
\\
====hsl (색상, 채도, 명도)====
\\
색상 (hue)은 0 ~ 360까지의 색상환의 각도입니다. 0은 red, 120은 green, 240은 blue입니다.\\
채도 (saturation)는 백분율 값이며, 0%는 회색 음영이고, 100%는 전체 색상입니다.\\
명도 (lightness)도 백분율 값이며, 0%는 black, 50%는 밝거나 어둡지도 않으며, 100%는 white입니다.\\ 
\\
====채도 (Saturation)====
\\
채도는 색의 강도로 설명할 수 있습니다.\\
100%는 순수한 색상이며, 회색 음영이 없습니다.\\
50%는 50% 회색이지만 색상을 볼 수 있습니다.\\
0%는 완전히 회색이며, 더 이상 색상을 볼 수 없습니다.\\
\\
====명도 (lightness)====
색상의 명도는 색상에 제공할 빛의 양으로 나타낼 수 있습니다.\\ 
0%는 빛이 없음(black)을 의미합니다.\\
50%는 50%의 빛 (어둡거나 밝지도 않음)을 의미합니다.\\
100%는 완전 밝음 (white)을 의미합니다.\\
\\
회색 음영은 색상 (hue)과 채도 (Saturation)를 0으로 설정하고, 명도 (lightness)를 0%~100%사이에서 조절하여 더 어둡거나 더 밝은 음영을 가지게 됩니다.\\
\\
=====HSLA 값=====
HSLA 컬러 값은 컬러에 대한 불투명도 (opacity)를 지정하는 알파 채널 (alpha channel)로 HSL 컬러 값을 확장하는 것입니다.\\
HSLA 컬러 값은 아래와 같이 지정합니다.\\
\\
====hsla (색상, 채도, 명도, 알파)====
알파 매개변수는 0.0(완전 투명) ~ 1.0 (완전 불투명) 사이의 숫자로 표시합니다.\\
\\

===== Ref =====
  * [[https://sqlplus.tistory.com/entry/%EB%B3%B4%EC%83%89-%EA%B5%AC%ED%95%98%EA%B8%B0-complementary-color-Opposite-Color|보색 구하기 complementary color , Opposite Color]]

{{tag>오션 CSS Colors, RGB, HEX, HSL 주레피 보색}}