Function

 Description & Example

 rgb(red, green, blue)

빨강 - 녹색 - 파랑 (RGB) 모델을 사용하여 색상을 설정합니다. RGB 색상 값은 rgb (빨강, 초록, 파랑)으로 지정됩니다. 각 매개 변수는 해당 색상의 강도를 정의하며 0에서 255 사이의 정수 또는 백분율 값 (0 %에서 100 %까지)이 될 수 있습니다.

예:

rgb (0, 0, 255); // 파란색 매개 변수가 가장 높은 값 (255)으로 설정되고 다른 매개 변수가 0으로 설정되므로 파란색으로 렌더링됩니다. 

 rgba(red, green, blue, alpha)

빨강 - 녹색 - 파랑 - 알파 (RGBA) 모델을 사용하여 색상을 설정합니다. RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이있는 RGB 색상 값의 확장입니다. 알파 매개 변수는 0.0 (완전 투명)과 1.0 (완전 불투명) 사이의 숫자입니다.

예:

rgba (0, 0, 255, 0.3); // 불투명도가있는 파란색으로 렌더링 됨 

 hsl(hue, saturation, lightness)

HSL (Hue-Saturation-Lightness) 모델을 사용하여 색상을 설정하고 원통형 좌표 표현을 나타냅니다. 색조는 컬러 휠의 차수입니다 (0에서 360까지). 0 또는 360은 빨간색, 120은 녹색, 240은 파란색입니다. 채도는 백분율 값입니다. 0 %는 회색 음영이고 100 %는 풀 컬러입니다. 밝기도 백분율입니다. 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) 모델을 사용하여 색상을 설정합니다. HSLA 색상 값은 색상의 불투명도를 지정하는 알파 채널이있는 HSL 색상 값의 확장입니다. 알파 매개 변수는 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);

결과 : #c6c6c6

 complement(color)

색상의 보색 인 색상을 설정합니다.

예:

complement(#7fffd4); 

결과 : #ff7faa

 invert(color, weight)

색상의 역 색상 또는 음수 색상을 설정합니다. weight 매개 변수는 선택적이며 0 % - 100 % 사이의 숫자 여야합니다. 기본값은 100 %입니다.

예:

invert(white);

결과 : black

 Function

 Description & Example

 red(color)

color의 빨강 값을 0에서 255 사이의 숫자로 반환합니다.

예:

red(#7fffd4); 

결과 : 127 

red(red); 

결과 : 255 

 green(color)

color의 녹색 값을 0 ~ 255의 수치로서 돌려줍니다.

예:

green(#7fffd4); 

결과 : 255 

green(blue); 

결과 : 0 

 blue(color)

color의 청색 값을 0에서 255 사이의 숫자로 리턴합니다.

예:

blue(#7fffd4); 

결과 : 212 

blue(blue); 

결과 : 255 

 hue(color)

0deg와 255deg 사이의 숫자로 색상의 색조를 반환합니다.

예:

hue(#7fffd4);

결과 : 160deg

 saturation(color)

color의 HSL 채도를 0 %에서 100 % 사이의 숫자로 반환합니다.

예:

saturation(#7fffd4);

결과 : 100%

 lightness(color)

색상의 HSL 밝기를 0 %에서 100 % 사이의 숫자로 반환합니다.

예:

lightness(#7fffd4); 

결과 : 74.9%

 alpha(color)

color의 알파 채널을 0에서 1 사이의 숫자로 리턴합니다.

예:

alpha(#7fffd4);

결과 : 1

 opacity(color)

color의 알파 채널을 0에서 1 사이의 숫자로 리턴합니다.

예:

opacity(rgba(127, 255, 212, 0.5);

결과 : 0.5

 Function

 Description & Example

 mix(color1, color2, weight)

color1과 color2의 혼합 인 색상을 만듭니다. 가중치 매개 변수는 0 %에서 100 % 사이 여야합니다. 무게가 클수록 더 많은 color1이 사용되어야 함을 의미합니다. 무게가 작을수록 color2를 더 많이 사용해야합니다. 기본값은 50 %입니다. 

 adjust-hue(color, degrees)

-360deg ~ 360deg의 색조를 조정합니다.

예:

adjust-hue(#7fffd4, 80deg);

결과 : #8080ff

 adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

하나 이상의 매개 변수를 지정된 양만큼 조정합니다. 이 함수는 지정된 양을 기존 색상 값에 더하거나 뺍니다.

예:

adjust-color(#7fffd4, blue: 25);

결과 : 

 change-color(color, red, green, blue, hue, saturation, lightness, alpha)

색상의 하나 이상의 매개 변수를 새 값으로 설정합니다.

예:

change-color(#7fffd4, red: 255);

결과 : #ffffd4

 scale-color(color, red, green, blue,  saturation, lightness, alpha)

하나 이상의 색상 매개 변수를 조정합니다. 

 rgba(color, alpha)

지정된 알파 채널로 새로운 색의 색을 작성합니다.

예:

rgba(#7fffd4, 30%); 

결과 : rgba(127, 255, 212, 0.3)

 lighten(color, amount)

0 %에서 100 % 사이의 양으로 밝은 색상의 색상을 만듭니다. amount 매개 변수는 HSL 밝기를 그 비율만큼 증가시킵니다. 

 darken(color, amount)

0 %에서 100 % 사이의 양으로 어두운 색상의 색상을 만듭니다. amount 매개 변수는 HSL 밝기를 그 퍼센트만큼 감소시킵니다. 

 saturate(color, amount)

0 %에서 100 % 사이의 양으로 채도가 높은 색상의 색상을 만듭니다. amount 매개 변수는 해당 비율로 HSL 채도를 증가시킵니다. 

 desaturate(color, amount)

0 % ~ 100 % 사이의 양으로 채도가 낮은 색상을 만듭니다. amount 매개 변수는 HSL 채도를 그 퍼센트만큼 감소시킵니다. 

 opacify(color, amount)

더 불투명 한 색상의 색상을 0에서 1 사이의 값으로 만듭니다. amount 매개 변수는 알파 채널을 해당 양만큼 증가시킵니다. 

 fade-in(color, amount)

더 불투명 한 색상의 색상을 0에서 1 사이의 값으로 만듭니다. amount 매개 변수는 알파 채널을 해당 양만큼 증가시킵니다. 

 transparentize(color, amount)

더 투명한 색을 0에서 1 사이의 색으로 만듭니다. amount 매개 변수는 알파 채널을 해당 양만큼 줄입니다. 

 fade-out(color, amount)

더 투명한 색을 0에서 1 사이의 색으로 만듭니다. amount 매개 변수는 알파 채널을 해당 양만큼 줄입니다.