Colors

   CSS에서 색을 표현하는 방법에는 다음과 같이 여러 방법이 있습니다. 

  

   1. 색상이름으로 표현하기

     CSS는 140개의 standard color names을 지원한다.

      https://www.w3schools.com/colors/colors_names.asp

     

 

       Color Picker

       https://www.w3schools.com/colors/colors_picker.asp?colorhex=FAEBD7

       

 

       2. RGB  HEX값으로 표현하기

          RGB 값을 각각 2자리 핵사( 8bits 16진수)로  표기한다.  00부터 FF(십진수 255)

         

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background-color: #00bfff;
            color: #ffffff;
            padding: 20px;
        }
</style>
</head>
<body>
<div> <h1>London is the capital city of England.</h1>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
</body>
</html>


       3. RGB, RGBA  10진수 값으로 표현하기

         (예)  rgba(255, 0, 0, 0.8) 또는 rgb(0, 191, 255);

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
        background-color: rgb(0, 191, 255);
        color: rgb(255, 255, 255);
        padding: 20px;
    }
  </style>
</head>
<body>
<div>
    <h1>London is the capital city of England.</h1>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
</div>
</body>
</html>

 

      컴퓨터 모니터는 RGB컬러를 이용한다. RGB 컬러는 자연의 색(인간의 색 감지영역)을 모두 표시하지 못한다.

      

 

      4. HSL , HSLA 컬러

         HSL은 Hue, Saturation, and Lightness방식으로 컬러를 표현한다. 디자인 작업 시 RGB보다는 HSL 모델을 더 많이 사용한다.

         인간의 눈은 색조, 채도 및 밝기 (HSB)의 세 가지 특성 측면에서 색상을 인식하기 때문이다.

         HSL(hue, saturation, lightness)

          Hue : 0에서 360 각도의 색상 값. red은 0, green은 120, blue은 240에 위치한다.
 
          Satuation : 0~100의 채도 값.   100%은 full color,  0%은 회색,  50%은 회색과 원색이 50% 섞인 색이다.

          Ligntness : 0~100의 밝기 값. 0%은 검정색, 100%은 흰색, 50%일 때 원색이다.

<!DOCTYPE html>
<html>
  <head>
      <style>
          div {
              background-color: hsl(170, 50%, 50%);
              color: hsl(0, 50%, 50%);
              padding: 20px;
          }
      </style>
</head>
<body>
<div>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
</body>
</html>

      https://www.w3schools.com/colors/colors_hsl.asp

    

 

 

      

 

       HSV(또는 HSB) Hue, saturation, Value(Brightness)  CSS에서 hsv는 지원하지 않는다.

         Value(Brightness)가 100%일 때 원색이다.

0°, 100%, 100% = Red
30°, 100%, 100% = Orange
60°, 100%, 100% = Yellow
90°, 100%, 100% = Spring green
120°, 100%, 100% = Green
150°, 100%, 100% = Ocean green
180°, 100%, 100% = Cyan
210°, 100%, 100% = Sky blue
240°, 100%, 100% = Blue
270°, 100%, 100% = Purple
300°, 100%, 100% = Magenta
330°, 100%, 100% = Crimson

 

    

 

     5. HWB  from CSS4

       CSS4 부터 지원하는 컬러좌표이다.

        HWB (Hue, Whiteness, Blackness)

        https://www.w3schools.com/colors/colors_hwb.asp

        

        W : 흰색의 % 이다

        B:   검은색의 %이다.

        특징: 채도(Saturation) 대신 흰색과 검정색의 혼합 비율로 색상을 조절한다.

            → 디자이너 입장에서 "좀 더 희게, 좀 더 어둡게"가 훨씬 직관적입니다

 

   6. currentcolor 를 사용하여 색상을 지정

      currentColor는 현재 엘레먼트에 설정된 text color를 의미한다.

<!DOCTYPE html>
<html>
<head>
    <style>
        #myDIV {
            color: blue;
            border: 10px solid currentcolor;
        }
    </style>
</head>
<body>
<h2>The currentcolor Keyword</h2>
<p>The currentcolor keyword refers to the value of the color property of an element.</p>
<p>The border color of the following div element will be blue, because the text color of the div element is blue:</p>
<div id="myDIV">
This div element has a blue text color and a blue border.
</div>
</body>
</html>