※ 색깔 (설정/얻기/제어) 3종류.
Color 설정 함수
rgb(red, green, blue)
Red-Green-Blue (RGB) 모델 사용해 색깔 설정.
각 매개변수는 0~255 정수 또는, 0~100% 숫자로 색상 강도 표현.
자세히 보기
(예제)
rgb(0, 0, 255); // blue
rgba(red, green, blue, alpha)
Red-Green-Blue-Alpha (RGBA) 모델 사용해 색깔 설정.
RGB 모델에 alpha (불투명도) 매개변수를 추가.
alpha 매개변수 범위 : 0.0 (완전 투명) ~ 1.0 (완전 불투명)
자세히 보기
(예제)
rgba(0, 0, 255, 0.3);
hsl(hue, saturation, lightness)
색조,채도,밝기 모델 (= HSL) 사용해 색상 정의.
Hue : 색상. (0 ~ 360 정수)
Saturation : 채도 (0 ~ 100%)
Lightness : 명도 (0 ~ 100%)
자세히 보기
(예제)
hsl(120, 100%, 50%); // green
hsl(120, 100%, 75%); // light green
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // pastel green
hsla(hue, saturation, lightness, alpha)
HSLA (Hue-Saturation-Lightness-Alpha) 모델 사용해 색상 정의.
HSL 모델에 Alpha (불투명도) 매개변수 추가.
Alpha :불투명도. (0.0 완전 투명 ~ 1.0 완전 불투명)
자세히 보기
(예제)
hsl(120, 100%, 50%, 0.3); // green with opacity
hsl(120, 100%, 75%, 0.3); // light green with opacity
grayscale(color)
색상과 동일한 밝기로 회색 설정.
(예제)
grayscale(#7fffd4);
Result: #c6c6c6
complement(color)
색깔의 보완색 설정.
(예제)
complement(#7fffd4);
Result: #ff7faa
invert(color, weight)
색의 반대색 또는 음수색을 설정.
weight 매개변수는 선택사항이며 0~100% 숫자 취함. (기본값: 100%).
(예제)
invert(white);
Result: black
Color 얻기 함수
red(color)
색깔의 RGB red (빨간색) 값을 0 ~ 255 숫자로 반환.
(예제)
red(#7fffd4);
Result: 127
red(red);
Result: 255
green(color)
색깔의 RGB green (녹색) 값을 0 ~ 255 숫자로 반환.
(예제)
green(#7fffd4);
Result: 255
green(blue);
Result: 0
blue(color)
색깔의 RGB blue (파란색) 값을 0 ~ 255 숫자로 반환.
(예제)
blue(#7fffd4);
Result: 212
blue(blue);
Result: 255
hue(color)
색깔의 HSL hue (색조)값을 0 ~ 255deg 숫자로 반환.
(예제)
hue(#7fffd4);
Result: 160deg
saturation(color)
색깔의 HSL saturation (채도)값을 0~100% 숫자로 반환.
(예제)
saturation(#7fffd4);
Result: 100%
lightness(color)
색깔의 HSL lightness (명도)값을 0~100% 숫자로 반환.
(예제)
lightness(#7fffd4);
Result: 74.9%
alpha(color)
색깔의 alpha (불투명도)를 0 ~ 1 숫자로 반환.
(예제)
alpha(#7fffd4);
Result: 1
opacity(color)
색깔의 alpha (불투명도)를 0 ~ 1 숫자로 반환.
(예제)
opacity(rgba(127, 255, 212, 0.5);
Result: 0.5
Color 제어 함수
mix(color1, color2, weight)
color1과 color2가 혼합된 색깔 생성.
weight (가중치) : 0% ~ 100% 숫자. (기본값: 50%)
weight 커질수록 color1 비중 증대.
weight 작을수록 color2 비중 증대.
adjust-hue(color, degrees)
-360deg ~ 360deg까지 색상의 색조를 조정.
(예제)
adjust-hue(#7fffd4, 80deg);
Result: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)
지정된 양으로 하나 이상의 매개 변수를 조정. 기존 색상 값에서 지정된 양을 더하거나 뺌.
(예제)
adjust-color(#7fffd4, blue: 25);
Result:
change-color(color, red, green, blue, hue, saturation, lightness, alpha)
하나 이상의 색상 매개 변수를 새 값으로 설정.
(예제)
change-color(#7fffd4, red: 255);
Result: #ffffd4
scale-color(color, red, green, blue, saturation, lightness, alpha)
하나 이상의 색상 매개변수를 조정.
rgba(color, alpha)
지정된 alpha (불투명도) 갖는 새로운 색깔 생성.
(예제)
rgba(#7fffd4, 30%);
Result: rgba(127, 255, 212, 0.3)
lighten(color, amount)
0 ~ 100 % 사이의 amount (양)으로 더 밝은 색의 색상을 생성. amount 매개변수는 HSL 명도를 그 백분율만큼 증가시킴.
darken(color, amount)
0 ~ 100 % 사이의 amount (양)으로 더 어두운 색의 색상을 생성. amount 매개변수는 HSL 명도를 그 백분율만큼 감소시킴.
saturate(color, amount)
0 ~ 100 % 사이의 amount (양)으로 더 채도가 높은 색을 생성. amount 매개변수는 HSL 채도를 그 백분율만큼 증가시킴.
desaturate(color, amount)
0 ~ 100 % 사이의 amount (양)으로 더 채도가 낮은 색을 생성. amount 매개변수는 HSL 채도를 그 백분율만큼 감소시킴.
opacify(color, amount)
0 ~ 1 사이의 amount (양)으로 더 불투명한 색을 생성.
해당 amount 만큼 opaque (불투명도) 증가시킴.
fade-in(color, amount)
0 ~ 1 사이의 amount (양)으로 더 불투명한 색을 생성.
해당 amount 만큼 opaque (불투명도) 증가시킴.
transparentize(color, amount)
0 ~ 1 사이의 amount (양)으로 더 투명한 색을 생성.
해당 amount 만큼 opaque (불투명도) 감소시킴.
fade-out(color, amount)
0 ~ 1 사이의 amount (양)으로 더 투명한 색을 생성.
해당 amount 만큼 opaque (불투명도) 감소시킴.
PS.
SASS color 함수
http://staging.sass-lang.com/documentation/functions/color
최신댓글