[CSS] 색상 코드

Published: by Creative Commons Licence

참고 문서

개요

CSS 색상 코드를 정리한 글.

색상 이름

red, blue 등의 미리 정해진 색상 이름을 사용한다. 사용 가능한 이름은 여기에서 확인.

div {color: red}

HEX

빨간색, 녹색, 파란색의 수치를 0-FF 사이의 16진수로 표현한 코드다. 코드 앞에 #을 붙여 구분한다:

/* red의 HEX 코드 */
div {color: #FF0000}

CSS Colors Level 3에서 알파 채널이 추가되었고 여덟 자리 표기법을 쓸 수 있다:

/* 빨강(FF0000)에 투명도(=알파) 50%(88) */
div {color: #FF000088}

RGB

빨간색, 녹색, 파란색의 수치를 0-255 사이의 10진수로 표현한 코드. 표기 방법은 다음과 같다:

/* red의 RGB 코드 */
div {color: rgb(255, 0, 0)}

HSL

색상(hue), 채도(saturation), 명도(lightness)를 표현한 코드. 색상의 표현 범위는 0-359이며 360은 0과 같다. 채도의 범위는 0-100%인데 100%에 가까울 수록 색이 진하다. 명도의 범위는 채도와 같으며, 0%에 가까울 수록 어둡고 100%에 가까울 수록 밝다.

/* red의 HSL 코드 */
div {color: hsl(0, 100%, 50%)}

RGBA, HSLA

A는 ALPHA의 줄임말이며 불투명도(opacity)를 의미한다. RGB와 HSL 코드 끝에 불투명도를 지정하는 식이다. 불투명도의 표현 범위는 0.0부터 1.0까지다.

/* red with opacity */
div {color: rgba(255, 0, 0, 0.3)}
/* green with opacity */
div {color: hsla(120, 100%, 50%, 0.3)}