본문 바로가기
CSS

[CSS] CSS에서 색을 표현하는 방법

by 코린이 박원장👶 2022. 8. 24.

CSS 색표현방법

CSS를 공부하시면서 가장 많이 사용되는 속성이 뭘까요? 바로 color입니다.🎨 그런데 단순히 color값을 지정한다고 하면 뭐 별거 있어요? "빨간색이면 빨간색이고 노란색이면 노란색이죠"
아니요~ 빨간색도 채도, 명도 등에 따라 정말 많은 색이 존재한답니다. 그렇다면 이 수많은 색상을 도대체 저흰 어떻게 표현해줘야할까요? 오늘은 이 색을 표현하는 방법에 대해 알아볼까 합니다.

01_ 색상명으로 표현하기

제가 소개글에 단순하게 "빨간색은 빨간색이죠"라고 말씀드렸듯이 가장 원초적인 방법입니다. 그냥 저희가 알고있는 색상명을 입력하는 것입니다. CSS에서는 140가지의 이름을 지원한다고 합니다. 일일히 나열할 수는 없어서 몇가지 색상만 예시로 보여드릴게요.

▶ 표현은 다음과 같이 합니다.

background-color : 색상명;

▶ 예시

aqua black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal white yellow

02_ RGB로 표현하기

RGB색상표기법은 (red, green, blue, alpha)형식으로 색상을 표현하는 방법입니다. 각 요소는 0-255사이의 숫자를 가집니다.단, alpha는 투명도를 뜻하므로 0-1사이의 숫자만 지원하게 되고 0은 투명도 100%를 의미합니다. 참고로 투명도까지 지정할 수 있는 RGBA는 CSS3에서 추가된 기능입니다.

▶ 표현은 다음과 같이 합니다.

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

▶ 예시

0,255,255 0,0,0 0,0,255 255,0,255
128,128,128 0,128,0 0,255,0 128,0,0
0,0,128 128,128,0 128,0,128 255,0,0
192,192,192 0,128,128 255,255,255 255,255,0

03_ 헥사코드(16진수)로 표현하기

이름그대로 16진수로 색을 표현하는 방법입니다. #과 6자리 숫자의 조합으로 표현하며, #00000(검정) - #ffffff(하양)까지의 색이 표현됩니다.

▶ 표현은 다음과 같이 합니다.

background-color : 헥사코드;

▶ 예시

#00FFFF #000000 #0000FF #FF00FF
#808080 #008000 #00FF00 #800000
#000080 #808000 #800080 #FF0000
#C0C0C0 #008080 #000000 #FFFF00

04_ HSL/HSLA으로 표현하기

HSL은 Hue(색상), Saturation(채도), Lightness(명도)로 색상을 지정하는 방법입니다. HSLA는 당연히 생각하셨듯이 투명도가 추가된 개념입니다.
색상은 0-360까지 색상환에 따라 결정되며 0:red, 120: green, 240:blue로 나타나고 채도, 명도는 백분율로 나타냅니다.

▶ 표현은 다음과 같이 합니다.

background-color : hsl(0-360, 0-100%, 0-100%);
background-color : hsla(0-360, 0-100%, 0-100%, 0-1);

▶ 예시

120, 100%, 60% 120, 100%, 20% 120, 40%, 20% 120, 40%, 60%

🎅도움이 될만한 사이트

CSS에서 지원하는 색상이름표는 여기서 확인하세요
원하는 색상표 찾기 사이트
HSL까지 지원하는 사이트
└ 이 사이트는 'type your color value here!'에 색상코드를 입력하시면 됩니다.
naver 색 추출
└ (제가 여태 몰랐을때는 네이버만 썼는데 좋은게 많네요...^_^)

728x90

댓글


HTML이미지
HTML이미지

JAVASCRIPT

자세히 보기
HTML이미지