색상(color)
색상(Color)
CSS에서는 색상을 설정하기 위한 다양한 방법을 제공한다.
색상 키워드
RGB
RGBA
Hex String
HSL
Mozilla Web Developer 문서 보기https://developer.mozilla.org/ko/docs/Web/CSS/color_value#%EC%83%89%EC%83%81_%ED%82%A4%EC%9B%8C%EB%93%9C
색상 키워드
지정된 색상에 대해서 키워드를 이용하여 설정할 수 있다.
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
자주 사용하는 색상이나 어울리는 색상을 찾는 것은 쉬운 일이 아니다. 이러한 작업들을 손쉽게 해줄 수 있는 사이트들이 많이 존재한다. 아래 사이트들을 참고하면 좀 더 나은 색상 배합을 구현할 수 있다.
Last updated
