색상(color)

색상(Color)

CSS에서는 색상을 설정하기 위한 다양한 방법을 제공한다.

색상 키워드
RGB
RGBA
Hex String
HSL

Mozilla Web Developer 문서 보기

색상 키워드

지정된 색상에 대해서 키워드를 이용하여 설정할 수 있다.

CSS Level 1
- black
- silver
- gray
- white
- maroon
- red
- purple
- fuchsia
- green
- lime
- olive
- yellow
- navy
- blue
- teal
- aqua
CSS Level 2
- orange
CSS Color Module Level 3
- aliceblue
- antiquewhite
- aquamarine
- azure
- beige
- bisque
- blanchedalmond
- blueviolet
- brown
- burlywood
- cadetblue
- chartreuse
- chocolate
- coral
- cornflowerblue
- cornsilk
- crimson
- cyan(aqua)
- darkblue
- darkcyan
- darkgoldenrod
- darkgray / darkgrey
- darkgreen
- darkhaki
- darkmagenta
- darkolivegreen
- darkorange
- darkorchid
- darkred
- darksalmon
- darkseagreen
- darkslateblue
- darkslategray / darkslategrey
- darkturquoise
- darkviolet
- deeppink
- deepskyblue
- dimgray / dimgrey
- dodgerblue
- firebrick
- floralwhite
- forestgreen
- gainsboro
- ghostwhite
- gold
- goldenrod
- greenyellow
- grey(gray)
- honeydew
- hotpink
- indianred
- indigo
- ivory
- khaki
- lavender
- lavenderblush
- lawngreen
- lemonchiffon
- lightblue
- lightcoral
- lightcyan
- lightgoldenrodyellow
- lightgray / lightgrey
- lightpink
- lightsalmon
- lightseagreen
- lightskyblue
- lightslategray / lightslategrey
- lightsteelblue
- lightyellow
- limegreen
- linen
- magenta(fuchsia)
- mediumaquamarine
- mediumblue
- mediumorchid
- mediumpurple
- mediumsegreen
- mediumslateblue
- mediumspringgreen
- mediumturquoise
- mediumvioletred
- midnightblue
- mintcream
- mistyrose
- moccasin
- navajowhite
- oldlace
- olivedrab
- orangered
- orchid
- palegoldenrod
- palegreen
- paleturquoise
- palevioletred
- papayawhip
- peachpuff
- peru
- pink
- plum
- powderblue
- rosybrown
- royalblue
- saddlebrown
- salmon
- sandybrown
- seagreen
- seashell
- sienna
- skyblue
- slateblue
- slategray / slategrey
- snow
- springgreen
- steelblue
- tan
- thistle
- tomato
- turquoise
- violet
- wheat
- whitesmoke
- yellowgreen
CSS Color Module Level 4
- rebeccapurple
ETC
- transparent
- currentColor

transperent

transparent 색상은 투명하게 설정할 경우 사용한다. CSS Color Module Level 3부터 정의되어 사용할 수 있게 되었다.

currentColor

currentColor 색상은 외부에 설정된 색상을 상속하여(그대로 가져와서) 설정할 수 있도록 지원한다.

RGB

RGB 색 모형은 빛의 삼원색(Red / Green / Blue)을 이용하여 색을 표현하는 방식이다.

빛이기 때문에 섞일 수록 밝아지는 특징을 가지고 있다. 빨강, 초록, 파랑 후레시를 어두운 벽에 비추는 개념으로 이해하면 좀 더 이해하기 쉽다. 각각의 색상 강도는 0부터 255까지 설정할 수 있다.

white = rgb(255, 255, 255)
black = rgb(0, 0, 0)

따라서 흰색은 모든 빛을 가장 밝게 비춘 색상이 되고, 검정색은 모든 빛을 가장 어둡게 비춘 색상이 된다. 각각의 색상을 조합하여 다양한 색을 만들어낼 수 있다.

RGBA

RGBA 는 RGB 색 모형에 Alpha(투명)이 추가된 형태의 색상 표현 방식을 의미한다. Alpha는 각 화소가 얼마나 투명한지를 나타내며 0부터 1 사이의 실수로 설정할 수 있다.

RGB 색상은 RGBA 에서 Alpha를 1로 설정한 것과 같으며, Alpha가 낮을 수록 투명해진다.

Hex String

Hex String은 RGB 또는 RGBA를 16진수로 표기하는 방식이다.

맨 앞은 #로 시작한다.
모든 값은 두 자리로 표기한다.
0은 00으로 표기한다.
255는 FF로 표기한다.
rgb(255, 255, 255)는 #FFFFFF와 같다.
rgba(255, 255, 255, 0)은 #FFFFFF00과 같다.

HSL

HSL은 Hue(색조), Saturation(채도), Lightness(명도)를 이용하여 색상을 표기하는 방식이다. 과거에는 Alpha를 지정할 수 있도록 HSL과 HSLA가 따로 존재했으나 통합되었다.

Hue(색조)는 색상환에서의 정도를 나타내며 0부터 360까지 각도로 설정할 수 있다.(0은 360과 같다)
Saturation(채도)는 색상의 선명도를 나타내며 0%부터 100%까지 설정할 수 있다.
- 100%는 가장 선명한 원본 색상을 의미한다.
- 0%는 기존의 색상이 사라진 회색조 색상을 의미한다.
Lightness(명도)는 색상에 설정된 빛의 강도를 나타내며 0%부터 100%까지 설정할 수 있다.
- 100%는 최대치로 밝게 만든 색상이므로 흰색을 의미한다.
- 0%는 빛이 개입되지 않았음을 나타내므로 검정색을 의미한다.

Color Palette

자주 사용하는 색상이나 어울리는 색상을 찾는 것은 쉬운 일이 아니다. 이러한 작업들을 손쉽게 해줄 수 있는 사이트들이 많이 존재한다. 아래 사이트들을 참고하면 좀 더 나은 색상 배합을 구현할 수 있다.

Previous픽셀(px)NextCSS 선택자

Last updated 3 years ago