CSS color 텍스트 폰트에 색상을 넣는 속성

CSS COLOR란?

color는 텍스트에 색을 입히는 속성입니다. CSS에서 가장 많이 쓰는 단어일 것 같아요.

쉽게 사용할 수 있는 문법인데, 저는 계속 color를 자꾸 font-color로 사용하는 실수를 하게 되네요. 색을 변경하려면 color 속성을 씁니다. 

 

사용법

h1 {
  color : blue;
}

• color: 뒤에 텍스트 색상을 입력합니다

 

색상을 넣는 4가지 방법

위의 예시에서는 blue를 바로 입력헀는데요. 색을 넣는 방법은 크게 4가지가 있습니다.

 

1. 지정된 색 사용

color: yellow;

우리가 흔히 생각하는 컬러는 이미 명칭이 정해져 있더라구요. 제가 원래 알던 건 16개 정도였는데, 훨씬 더 많은 색들이 named color로 정해져 있었습니다. 

 

https://matplotlib.org/stable/gallery/color/named_colors.html

 

2. 16진수 사용

background-color: #FF0000;

가장 많이 쓰이는 방식일 것 같습니다. # 뒤의 6자리는 RGB를 의미하는데요. FF는 Red의 강도, 뒤의 00은 각각 Green과 Blue의 강도를 말합니다. 

 

위의 #FF0000은 빨간색이 FF만큼 있는거고, 따라서 red와 동일한 색상입니다. 파란색은 #0000FF 입니다.

 

3. RGB, RGBA 사용

background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0.5);

16진수와 비슷하긴 합니다. Red, Green, Blue의 강도를 각각 0에서 255로 나타내는 방식입니다. 16진수의 FF가 10진수의 255와 같으니까요.

 

rgba를 사용하면 투명도를 조절할 수 있습니다. 투명도는 0에서 1까지 정할 수 있습니다. 보통 0.1 단위로 조정하는 것 같지만, 0.01단위로 변경해도 미세하게 바뀌더라구요. 숫자가 높아질수록 불투명해집니다.

 

4. HSL, HSLA 사용

background-color: hsl(89, 43%, 51%); 
background-color: hsla(89, 43%, 51%, 0.3);

hsl, hsla은 잘 안 쓰는 방식 같습니다. 전문 디자이너는 사용할지도 모르겠지만요.

RGB는 Red, Green, Blue를 혼합하는 방식이라면, HSL은 빛의 색상, 채도, 명도를 조절하는 방식입니다.

• 색상(Hue) : 첫번째 숫자이며 0에서 360의 값을 가집니다
  • 0 또는 360은 Red
  • 120은 Green
  • 240은 Blue
• 채도(Saturation) : 두번째 숫자이며 0%~100% 사이의 값을 가집니다
  • 100%에 가까워질수록 짙어집니다
  • 그런데 0%으로 정하면 회색이 되어버립니다
• 명도(Lightness) : 세번째 숫자이며 0%~100% 사이의 값을 가집니다
  • 50%도 오리지널 색상을 의미합니다
  • 100%에 가까워질수록 흰색이 됩니다
  • 0%에 가까워질수록 검은색이 됩니다

 

color에 대해 얘기하면서 CSS 색상 표현법을 같이 언급했습니다.

color값은 color 외에도 background-color, border-color 등에서도 사용됩니다.