[HTML/CSS] 색상 표기법 (16진수, RGB-A)

색상 표기법에 대한 정리.

red, blue, green… 같은 단어 표기로 세상의 모든 색을 표현할 수는 없다. 16진수 표기법과 RGB-A 표기법으로 보다 다양한 색상을 표현할 수 있다.

16진수 표기법

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>색상표기법</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <ul>
        <li class="color1"></li>
        <li class="color2"></li>
        <li class="color3"></li>
        <li class="color4"></li>
        <li class="color5"></li>
        <li class="color6"></li>
        <li class="color7"></li>
        <li class="color8"></li>
        <li class="color9"></li>
        <li class="color10"></li>
        <li class="color11"></li>
        <li class="color12"></li>
        <li class="color13"></li>
        <li class="color14"></li>
        <li class="color15"></li>
        <li class="color16"></li>
    </ul>
</body>
</html>

@charset 'utf-8';

/* reset */
* {margin: 0; padding: 0;}
ol,ul,li {list-style: none;}
a {outline: 0; text-decoration: none;}
img {border: 0;}

ul li {width: 100%; height: 50px;}
.color1 {background-color: #000;}
.color2 {background-color: #111;}
.color3 {background-color: #222;}
.color4 {background-color: #333;}
.color5 {background-color: #444;}
.color6 {background-color: #555;}
.color7 {background-color: #666;}
.color8 {background-color: #777;}
.color9 {background-color: #888;}
.color10 {background-color: #999;}
.color11 {background-color: #aaa;}
.color12 {background-color: #bbb;}
.color13 {background-color: #ccc;}
.color14 {background-color: #ddd;}
.color15 {background-color: #eee;}
.color16 {background-color: #fff;}

16진수 (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)로 구성된 색상 코드
앞에 두자리는 R, 가운데 두자리는 G, 마지막 두자리는 B값을 의미한다.
0으로 갈수록 해당 값이 낮아지며, F로 갈수록 해당 값이 높아진다.
# + 숫자나 문자로 조합된 6자로 구성된다.
ex_ #000000
같은 글자가 6개 반복될 시 3개로 줄일 수 있다.
ex_ #000000 → #000

RGB-A 표기법

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>색상표기법</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="custom1"></div>
    <div class="custom2"></div>
</body>
</html>

@charset 'utf-8';

/* reset */
* {margin: 0; padding: 0;}
ol,ul,li {list-style: none;}
a {outline: 0; text-decoration: none;}
img {border: 0;}

.custom1 {width: 100%; height: 50px; background-color: #6ed3d8;}
.custom2 {width: 100%; height: 50px; background-color: rgb(136, 110, 216, 0.5);}

custom2에 본래 지정된 컬러는 진한 보라색이지만, Alpha값이 적용되어 배경인 흰색의 영향을 받아 연하게 나오는 것을 확인할 수 있다.

웹은 기본적으로 RGB방식이다. 가상혼합방식이라고도 하며, Red, Green, Blue의 조합으로 모든 색이 표현된다.
16진수보다 번거롭지만, Alpha(투명도)값을 사용하기 위해선 RGB-A식으로 사용해야한다.
Alpha값은 1은 100%, 0.5는 50%, 0은 0%로 값이 낮아질수록 투명해진다.