[CSS] CSS에서 색깔을 지정하는 4가지 방법 (이름, 16진수, RGB(RGBA), HSL(HSLA))

 

이번에는 CSS에서

색상을 지정하는 방법을 정리해 보도록 하겠습니다.

 

색상을 지정하는 방법은 여러가지가 있지만

여기서는 가장 많이 사용되는 4가지 방법을 정리하였습니다.

 

 

1. 이름
2. 16진수
3. RGB 또는 RGBA
4. HSL 또는 HSLA

 

 

1. 이름

색상의 이름을 직접 써서 컬러를 지정할 수 있습니다.

브라우저가 인식할 수 있는 색상 이름은 대략 147개입니다.

이 방법은 쉽게 색상을 지정할 수 있는 장점이 있지만,

표현할 수 있는 색상의 한정적이고,

색상을 사용하려면 이름을 외우고 있어야 한다는 단점이 있습니다.

 

<div style='background-color: red'></div>
<div style='background-color: indigo'></div>
<div style='background-color: powderblue'></div>
<div style='background-color: tomato'></div>

div {
  height : 20px;
  width : 200px;
}

 

색상의 이름을 직접 css의 속성값으로 지정해 주었습니다.

 

 

전체 색상 이름은 아래 링크의 페이지를 참조하세요.

Color keywords - CSS: Cascading Style Sheets | MDN

 

 

 

2. 16진수

이 방법은 다음과 같이 2자리씩 3개의 16진수로 색상을 표현합니다.

#00FF99

• 16진수로 색상을 표시할 때는 '#' 기호로 시작합니다.
• 여기서 2자리씩을 차지하고 있는 3개의 16진수는 각각 Red, Green, Blue를 의미합니다.
• 각 2자리의 16진수는 00~FF까지를 표현할 수 있습니다. (10진수로는 0~255)

 

<div style='background-color: #ff0000'></div>
<div style='background-color: #00ff00'></div>
<div style='background-color: #0000ff'></div>
<div style='background-color: #ffffff'></div>
<div style='background-color: #000000'></div>
<div style='background-color: #add826'></div>

div {
  height : 20px;
  width : 200px;
}

 

#ff0000

Red 자리만 FF이고, 나머지는 0이므로, 빨강색을 의미합니다.

 

#00ff00

Green 자리만 FF이고, 나머지는 0이므로, 초록색을 의미합니다.

 

#0000ff

Blue 자리만 FF이고, 나머지는 0이므로, 파랑색을 의미합니다.

 

#ffffff

모두 FF이면 흰색입니다.

 

#000000

모두 00이면 검정색입니다.

 

#add826

각 컬러의 값을 적절히 조절하여 색상을 표현합니다.

 

 

 

3. RGB 또는 RGBA

  RGB  

RGB는 16진법으로 색상을 표시하는 것과 비슷합니다.

RGB는 16진수 대신 10진수를 사용합니다.

Red, Green, Blue 이 세가지 색상을 0~255 사이의 숫자로 표현합니다.

 

<div style='background-color: rgb(255, 0, 0)'></div>
<div style='background-color: rgb(0, 255, 0)'></div>
<div style='background-color: rgb(0, 0, 255)'></div>
<div style='background-color: rgb(255, 255, 255)'></div>
<div style='background-color: rgb(0, 0, 0)'></div>
<div style='background-color: rgb(173, 216, 38)'></div>

div {
  height : 20px;
  width : 200px;
}

 

  RGBA  

RGBA는 RGB에 추가로 색상의 불투명도를 지정할 수 있습니다.

여기서 A는 alpha의 약자입니다.

A는 0.0~1.0까지의 값을 가집니다.

0은 0% 불투명, 0.5는 50% 불투명, 1은 100% 불투명을 의미합니다.

 

<div style='background-color: rgb(255, 0, 0)'></div>
<div style='background-color: rgb(255, 0, 0, 0)'></div>
<div style='background-color: rgb(255, 0, 0, 0.5)'></div>
<div style='background-color: rgb(255, 0, 0, 1)'></div>

div {
  height : 20px;
  width : 200px;
}

 

동일한 색깔에 A값(알파)를 지정한 예제입니다.

A값은 필수값이 아닙니다.

A값을 지정하지 않으면, 불투명도는 100%입니다.

 

 

 

4. HSL 또는 HSLA

HSL은 색상, 채도, 명도를 나타냅니다.

• 색상(Hue)
  
  • Hue는 360도의 색상환으로 나타냅니다.
  • 0도는 빨강, 120도는 초록, 240은 파랑입니다.
• 채도(Saturation)
  • 채도(Saturation)은 0~100%로 표현됩니다.
  • 0일수록 채도가 낮고, 100이 채도가 가장 높습니다.
• 명도(Lightness)
  • 명도(Lightness)는 0~100%로 표현합니다.
  • 0은 검정, 100은 흰색입니다.

 

RGBA와 마찬가지로 알파값을 옵션으로 추가할 수 있습니다.

• 불투명도(Alpha, Opacity)
  • 0.0~1.0까지의 값을 가집니다.
  • 0은 0% 불투명, 0.5는 50% 불투명, 1은 100% 불투명을 의미합니다.

<div style='background-color: hsl(0, 100%, 50%);'></div>
<div style='background-color: hsl(120, 100%, 50%);'></div>
<div style='background-color: hsl(240, 100%, 50%);'></div>
<div style='background-color: hsl(240, 100%, 50%, 0.5);'></div>

div {
  height : 20px;
  width : 200px;
}

 

 

HSL을 이용한 예제입니다.

값을 바꾸어 가면서, 색깔이 어떻게 변하는지 확인해 보세요.

 

---

 

CSS에서 색상 값을 설정하는 방법을 살펴보았습니다.