4. 색상 활용

1. 색상 이름
2. 16진수
3. RGB(RGBA)
4. HSL(HSLA)

 

색상 이름

색상의 이름을 직접 사용해서 지정할 수 있으나, 모든 색상의 이름을 알고 있기 어려워 사용에 제약이 있다.

 

전체 색상 이름은 아래 사이트에서 참조 가능하다.

<named-color> - CSS: Cascading Style Sheets | MDN (mozilla.org)

 

- 활용 코드

    <h4 style="background-color: blue">파란색 배경색 적용</h4>
    <p style="color: orange">오랜지색 글씨 적용</p>

 

- 실행 결과

파란색 배경색 적용

오랜지색 글씨 적용

 

 

16진수

• #로 시작하고, 2자리씩 3개의 16진수로 색상 표현  ex) #00ff99
• #RRGGBB: RR(빨간색), GG(초록색), BB(파란색)
• 각 2자리의 16진수는 00~FF까지 표현 가능
• #000000(검은색), #ffffff(흰색)

- 활용 코드

    <h4 style="color: #ff0000">빨간색</h4>
    <h4 style="color: #00ff00">초록색</h4>
    <h4 style="color: #000000">검은색</h4>
    <h4 style="color: #7c99c5">어떤색</h4>

 

- 실행 결과

빨간색

초록색

검은색

어떤색

 

 

RGB, RGBA

• RGB: red, green, blue
• RGBA: red, green, blue, alpha(불투명도)
• red, green, blue : 0 ~ 255
• alpha : 0(완전 투명) ~ 1(완전 불투명)

- 활용 코드

    <h4 style="color: rgb(255, 0, 0)">빨간색</h4>
    <h4 style="color: rgb(186, 48, 145)">어떤색</h4>

    <h4 style="color: rgba(255, 0, 0, 0.1)">빨간색</h4>

 

- 실행 결과

빨간색

어떤색

빨간색

 

 

HSL, HSLA

• Hue(색상): 360도 색상환. 0도는 빨간색, 120도는 초록색, 240도는 파란색
• Saturation(채도): 0 ~ 100%. 0%는 회색톤, 100%는 원래 색
• Lightness(명도): 0 ~ 100%. 0%는 가장 어둡게, 50%는 원래 색, 100%는 흰색
• Alpha(불투명도): 0.0 ~ 1.0

- 활용 코드

    <h4 style="color: hsl(360, 100%, 50%)">빨간색</h4>
    <h4 style="color: hsl(120, 100%, 50%)">초록색</h4>

    <h4 style="background-color: hsla(9, 100%, 64%, 0.5)">어떤 배경색</h4>

 

- 실행 결과

빨간색

초록색

어떤 배경색