ss [CSS]색상 표현 방법
본문 바로가기
CSS

[CSS]색상 표현 방법

by 꿈나무개발 2022. 8. 23.
728x90

CSS 색상 표현 방법

CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리색(border) 등 다양한 CSS 속성들에 적용됩니다. 색상을 표현하는 방법에 대해 어떤 것들이 있는지 알아보겠습니다.

01. 색상명

해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. 사용할 수 있는 속성값으로는 red, green, blue, aqua, corel, 등 여러 가지가 있으나 해당 색상값을 의미하는 단어를 미리 알고 있어야 합니다. http://www.w3schools.com에 접속하여 Learn CSS > Color Colors를 클릭하면 등록된 색상명을 확인할 수 있습니다.

속성 값 속성 설명
color: orange; 글자를 오렌지색으로 표현
background: beige; 배경색을 베이지색으로 표현
border-color: tomato; 테두리를 토마토색으로 표현

02. HEX값

red, green, blue의 세 가지 색을 16진수 00~ff 사이의 수치를 표현하는 것으로서 #rrggbb 형태로 기술합니다. #aabbcc와 같이 세 가지 색 모두 두 자리 값이 같으면 #abc라고 한자리로 줄여쓸 수 있습니다. red, green, blue는 빛의 3원색이므로 값이 커지면 더 밝은 색이 됩니다. 따라서 최대값 #ffffff는 흰색을 의미하고, 최소값 #000000은 검정색을 의미하며, 가운데 자리만 최대값인 #00ff00은 green색을 의미합니다. 이와 같이 red, green, blue의 16진수 두 자리 값을 적절히 배합하면 어떤 색이 나올지 예상할 수 있습니다.

HEX 값 속성 설명
color: #000000; red:0, green:0, blue:0 색상으로 표현
color: #ff0000; red:255, green:0, blue:0 색상으로 표현
color: #00ff00; red:0, green:255, blue:0 색상으로 표현
color: #0000ff; red:0, green:0, blue:255 색상으로 표현
color: #ffff00; red:255, green:255, blue:0 색상으로 표현
color: #00ffff; red:0, green:255, blue:255 색상으로 표현
color: #ff00ff; red:255, green:0, blue:255 색상으로 표현
color: #ffffff; red:255, green:255, blue:255 색상으로 표현

03. RGB값 / RGBA값

RGB값은 rgb(red, green, blue) 형태로 기술하며 red, green, blue는 10진수 0~255사이의 수치로 표현합니다. RGBA값은 rgba(red, green, blue, alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.

속성 값 속성 설명
color: rgb(255, 128, 0); 글자를 red:255, green:128, blue:0 색상으로 표현
color: rgba(255, 0, 0, 0.5); 배경색을 빨간색 반투명으로 표현

04. HSL값 / HSLA값

HSL값은 hsl(hue, saturation, lightness) 형태로 기술하며 hue(색상)는 0~360 색상환 값, saturation(채도)과 lightness(명도)는 % 값으로 표현합니다. HSLA값은 hsla(hue, saturation, lightness, alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.

속성 값 속성 설명
color: hsl(300, 100%, 50%); 글자를 색상:300도, 채도:100%, 명도:50%로 표현
background: hsla(0, 100%, 100%, 0.5); 배경을 빨간색 반투명으로 표현

05. 색상 표현법 예시

728x90
반응형

'CSS' 카테고리의 다른 글

[CSS]애니메이션01  (4) 2022.08.29
[CSS]요소 숨기기  (8) 2022.08.25
[CSS]단위  (4) 2022.08.23
[CSS]이미지 스프라이트 / IR 효과 / 백그라운드 표현  (7) 2022.08.20
[CSS]강아지 애니메이션  (3) 2022.08.18

댓글


HTML
CSS
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.