삶을 더 쉽게 만들어주는 CSS 컬러 트릭

CSS의 색상은 다루기가 매우 쉽고 그리 어렵지 않습니다. 그러나 CSS 색상으로 작업하는 동안 삶을 훨씬 쉽게 만들어 줄 수 있는 많은 개발자가 알지 못하는 특정 요령이 있습니다.

그들에 대해 배우려면 계속 읽으십시오.

쉼표로 구분된 값이 필요하지 않습니다.

가까운 장래에 새로운 구문(함수)이 많이 나올 것이기 때문에 매우 최근에 CSS 구문이 rgb 및 hsl에 대해 업데이트되었습니다. 우리는 더 큰 색 영역으로 작업할 수 있습니다.

이제 rgba 값을 지정할 때 쉼표를 추가할 필요가 없습니다.
예시 :

.color-old-syntax {
background-color : rgb(100,255,120);

}

.color-new-syntax {
background-color : rgb(100 255 120);
}

불투명도를 지정하기 위해 in이 필요하지 않습니다.

요소에 불투명도 값을 추가할 수 있도록 rgba 또는 hsla를 지정해야 했지만 새 구문에서는 필요하지 않습니다.
예시 :

.color-old-syntax {
background-color : hsla(100,50,50,0.5)
}
.color-new-syntax {
background-color : hsl(100 50 50 / 0.5)
}

여전히 동일한 함수에서 불투명도를 지정할 수 있습니다. 구문이 쉼표로 구분된 값에서 슬래시로 변경되었습니다(단순히 불투명도 값을 지정하기 위함).

rgb에서 백분율로 값 지정

이제 색상 값을 0에서 255 범위로 지정하는 대신 백분율로 지정할 수 있습니다.

.color-old-syntax {
background-color : rgb(127,100,100,0.5)
}
.color-new-syntax {
background-color : rgb(50%,40%,40%,0.5)
}

이것은 특정 비율로 혼합될 때 색상이 어떻게 작동하는지 시각화하거나 두 개의 rgb 색상을 비교하는 더 좋은 방법입니다.
말할 필요도 없이 원하지 않으면 이것을 사용할 필요가 없습니다. 모든 것이 이전 버전과 호환됩니다.

또한 rgb() 함수 내에서 백분율과 절대값을 혼합하고 일치시킬 수도 있습니다. 그러나 나는 그것을 추천하지 않을 것입니다.
예시 :

.rgb-background-new {
background-color : rgb(100% 255 50%)
}

//is same as

.rgb-background-old {
background-color : rgb(255 255 127)

}

This mix and match feature is just in chrome right now.

hsl()은 rgb()보다 직관적입니다.

hsl은 색조 채도 밝기를 나타냅니다.
Hue는 원하는 실제 색상입니다. 0~360도 범위에 있으며 0과 360은 순수한 빨간색입니다. (자세한 내용은 hsl 색상환 참조).
채도는 특정 색조에서 원하는 색상의 양입니다. 이것은 백분율로 지정됩니다.

색상의 밝기는 색상에 부여하려는 **빛의 양**으로 설명할 수 있습니다. 또한 0%가 검은색이고 100%가 흰색인 백분율입니다. 가장 순수한 색상을 얻으려면 50%가 가장 적합합니다.

.hsl-map-one {
background-color: hsl(0 50% 50%);
}
// is same as
.hsl-map-two {
background-color : hsl(360 50% 50%); 
}

빨간색 -- 0
녹색 -- 120
파란색 -- 240
이러한 방식의 hsl은 세 가지 기본 색상 사이에 색상을 지정해야 하는 경우(예: 빨강과 녹색이 혼합된 색상은 0에서 120 사이임) 더 직관적입니다. 함수의 첫 번째 값만 변경하면 됩니다. rgb()와는 다릅니다.

hsl()의 색조 값은 0도와 360도를 넘어설 수 있습니다.

hsl() 색조가 색상환 개념에서 작동한다는 것을 알고 있으므로 색조 값이 360을 넘어설 수 있다는 것은 이치에 맞습니다.
예시 :

.hue-value-one {
background-color : hsl(120 50% 50%)
}

// is same as  

.hue-value-one {
background-color : hsl(480 50% 50%)
}

색조 값은 음수가 될 수도 있습니다. (값이 0에서 음수로 바뀌고 화살표가 시계 반대 방향으로 회전하는 것을 시각화할 수 있습니다.) 따라서 hsl(120 50% 50%)은 hsl(-240 50 50)과 같습니다.

이러한 속성은 javascript를 사용하여 색상 값을 동적으로 변경할 때 특히 유용합니다. 이 작업을 수행하기 위해 JavaScript에서 많은 계산을 사용할 필요는 없습니다. 꽤 편리하지 않나요?

불투명도는 이제 백분율로 작동할 수 있습니다.

큰 차이는 없지만 이제 불투명도 값을 십진수와 백분율로 지정할 수 있다는 점을 아는 것이 좋습니다.

.opacity-box-one {
background-color : rgb (100  200 100 / 0.5);
}

// is same as

.opacity-box-two {
background-color : rgb (100 200 100 / 50%);
}

그게 다야. 다른 트릭이나 최신 CSS 기능을 알고 있다면 아래에 자유롭게 의견을 말하십시오. 모든 독자와 저에게도 큰 도움이 될 것입니다.