CSS 색표현방법
아니요~ 빨간색도 채도, 명도 등에 따라 정말 많은 색이 존재한답니다. 그렇다면 이 수많은 색상을 도대체 저흰 어떻게 표현해줘야할까요? 오늘은 이 색을 표현하는 방법에 대해 알아볼까 합니다.
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 색 추출≪
└ (제가 여태 몰랐을때는 네이버만 썼는데 좋은게 많네요...^_^)
'CSS' 카테고리의 다른 글
[코드펜] 애니메이션 효과 만들어 보기 (8) | 2022.08.29 |
---|---|
[CSS] 요소 숨기는 방법 : display, opacity, scale, visibility... (9) | 2022.08.26 |
[CSS]CSS 기본 단위 : %, vh, vw, em, rem 등등 (5) | 2022.08.24 |
이미지 스프라이트 기법과 백그라운드 표현방법, IR효과 (9) | 2022.08.21 |
SCSS (9) | 2022.08.18 |
댓글