[HTML / CSS] 색상 완벽 정리!

 CSS에서 색상 표기법은 여러 가지가 있다.

 

다음과 같이 배경색을 지정했다고 했을 때, 배경은 무슨 색이 나올까?

 

1. background: #ff0000;

2. background: #F00;

3. background: rgb(255, 0, 0);

4. background: red;

5. background: rgba(255, 0, 0, 1);

6. background: rgba(255, 0, 0, 100%);

7. background: rgba(255 0  0 / 1);

8. background: rgba(255 0  0 / 100%);

 

정답은 모두 빨강 이다.

 

rgb의 값은 Red (빨강), Green(초록), Blue(파랑) 이렇게 세 가지로 구성되어 있는데, 

이는 16진수 헥사코드에서도 동일한 구성이다.

첫번째 두자리는 빨강, 가운데 두자리는 초록, 나머지 두 자리는 파랑색을 표현한다.

 

2번 예제와 같이 코드를 하나만 써서 세 가지 색상을 표현할 수도 있다.

물론 0~255까지 표현할수 있는 것을 0~f 까지밖에 표현할 수 없기 때문에 정교한 색상 표현을 하고싶다면

헥사 코드나 rgb로 표현하는 것을 권장한다.

 

또한 4번과 같이 영어로 색상을 표시하는 방법도 있다.

최신 브라우저에서는 140개의 색상을 지원하는데 다음 링크에서 참고할 수 있다

 

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

HTML Color Names

 

예쁜 색을 고르고 싶은데 코드가 뭔지 몰라 표현하기 어려울 때에 강추한다.

 

더 자세한 내용은 다음 동영상에서 확인할 수 있다 :)