CSS에서 색상 지정

색상 지정

HEX(6자리)

#으로 시작하는 6자리 색상 코드로 지정합니다.
16진수로 256단계로 지정합니다.

css

 /* #赤(2桁)緑(2桁)青(2桁) */
 #ff0000;

장소(색)
값


1,2자리째(빨강)
00~FF(높을수록 강하다)

3,4자리째(녹색)
00~FF(높을수록 강하다)

5,6자리째(파랑)
00~FF(높을수록 강하다)

HEX3자리

css

/* #赤(1桁)緑(1桁)青(1桁) */
#f00; 

HEX



1자리째(빨강)
0~F(높을수록 강하다)

두 번째 자리 (녹색)
0~F(높을수록 강하다)

세 번째 자리(파란색)
0~F(높을수록 강하다)

컬러 이름

색의 이름(140종류)으로부터 지정합니다.

css

red;
green;
white;

RGB(RGBA)

색상의 3원색(빨강, 초록, 파랑)으로 지정합니다.
선택적 알파는 색상의 불투명도를 나타냅니다.

css

/* rgb(赤,緑,青) */
rgb(255,255,255);
rgb(100%,100%,100%);

/* rgba(赤,緑,青,アルファ) */
rgba(255,255,255,0.5);
rgba(100%,100%,100%,50%);

RGBA
값


R(빨강)
0~255,0~100%(높을수록 강하다)

G(녹색)
0~100%(높을수록 강하다)

B(파랑)
0~100%(높을수록 강하다)

A(알파)
0~1, 0~100%(높을수록 불투명)

HSL(HSLA)

색조(H), 채도(S), 명도(L)로 지정합니다.
선택적 알파는 색상의 불투명도를 나타냅니다.

색조, 채도, 명도를 각각 개별적으로 조정할 수 있으므로 RGB보다 직관적입니다.
예: "같은 색조로 명암이나 채도가 다른 색"등을 보다 간단하게 작성할 수 있습니다.

css

/* hsl(色相,彩度,明度) */
hsl(180,50%,50%);

/* hsla(色相,彩度,明度,アルファ) */
hsla(180,50%,50%,50%);

HSLA
값


H(색조)


S(채도)
0~100%(높을수록 선명함)

L(명도)
0~100%(높을수록 밝다)

A(알파)
0~1, 0~100%(높을수록 불투명)

키워드

transparent

투명하게 합니다.

currentColor

속성이 상속한 값이 적용됩니다.

배경과 문자의 대비비 확보

색상 대비 비율은 텍스트와 배경색의 밝기 값을 비교하여 조정합니다.


문자열
대비비


일반 텍스트
4.5:1 이상

큰 문자열 (표제 등)
3:1 이상