색상 표현 단위

 

색상 표현 단위

색상을 지정하기 위해 키워드(red, blue…)를 사용할 수 있습니다. 그냥 색의 이름을 쓰면 되기때문에 사용이 간편하다는 장점이 있으나 표현할 수 있는 색상의 수는 제한된다.

---

단위	예시
HEX 코드 단위 (Hexadecimal Colors)	viewport 너비의 1/100
RGB (Red, Green, Blue)	viewport 높이의 1/100
RGBA (Red, Green, Blue, Alpha/투명도)	rgba(255, 255, 0, 1)
HSL (Hue/색상, Saturation/채도, Lightness/명도)	hsl(0, 100%, 25%)
HSLA (Hue, Saturation, Lightness, Alpha))	hsla(60, 100%, 50%, 1)

#hex {background-color:#e1ff00;}
    #hex {background-color:#00ff00;}

    #rgb {background-color:rgb(255,0,0);}
    #rgb{background-color:rgb(0,255,0);}

    #rgba {background-color:rgba(255,0,0,0.3);}
    #rgba {background-color:rgba(0,255,0,0.3);}

    #hsl {background-color:hsl(120,100%,50%);}
    #hsl {background-color:hsl(120,100%,75%);}

    #hsla {background-color:hsla(120,100%,50%,0.3);}
    #hsla {background-color:hsla(120,100%,75%,0.3);}

#hex {background-color:#e1ff00;}
    <h1>HEX colors:</h1>
    <p id="hex">Red</p>
    <p id="hex">Green</p>

    <h1>RGB colors:</h1>
    <p id="rgb">Red</p>
    <p id="rgb">Green</p>

    <h1>RGB colors with opacity:</h1>
    <p id="rgba">Red</p>
    <p id="rgba">Green</p>

    <h1>HSL colors:</h1>
    <p id="hsl">Green</p>
    <p id="hsl">Light green</p>

    <h1>HSL colors with opacity:</h1>
    <p id="hsla">Green</p>
    <p id="hsla">Light green</p>

예시