CSS에서 HSL 색상을 사용하여 일관된 사용자 경험 만들기

모두는 웹사이트 레이아웃, 이미지, 비디오, 또는 그래픽 요소의 어느 것에서나 색상이 가지는 중요性을 알고 있습니다. 颜色的이해가 subjective experience로 나타나며, 빛, 눈, 뇌 간의 Interaction을 통해 생성되며, 웹사이트에 색상을 추가하면 전체 레이아웃과 그래픽 요소에 새로운 생명을 breathes 합니다. 흰색, 검은색, 그리고 灰色의 웹 страницы를 방문하는 것을 좋아하는 사람은 없습니다. 색상은 인간의 눈에 있어 더욱 现实的하고 뜨거운 것처럼 보입니다.

이론적으로는 그렇지만, 심리학도 웹사이트에서 색상을 사용할 때 발생합니다. 과학적으로 확인되었습니다. 특정 SET 의 색상은 인간의 뇌에서 특정한 감정을 자극하는 것이 scientifically proven, 가을 색상인 오렌지와 YELLOW 는 행복이나 幸せ를 represent, 빨간색은 feast 시즌에 사용되고, синий는 quiet 하고 신뢰할 만하다고 생각합니다. 또한, 많은 음식 회사가 자주 红旗와 YELLOW 을 사용하는 것을 발견하셨을 것입니다. 약사 회사는 자주 그린색을 사용하고, 健身 회사는 때때로 오렌지를 사용합니다.

사용자 인터페이스를 생성하는 것은 CSS 웹 레이아웃, 요소, CSS 위치 정의, 이동, 텍스트 등을 포함하는 다양한 것을 포함합니다. 또한 사용자 인터페이스로 기능하는 요소가 HSL 색상입니다. CSS 색상도 사용자 인터페이스에서 중요하며, 대부분의 사람들이 迴避하는 요인입니다.

웹 開発자만 아닌, 전문 사진 摄影师과 비디오 편집자도 이러한 색상 게임을 많이 사용합니다. 완전한 이미지를 만들기 위해서는 색상 대비를 많이 사용합니다. 따라서, 요소의 理想한 색상 세트를 선택하는 것은 매우 중요합니다.

CSS는 background-color, color, linear-gradient 등의 다양한 속성을 가지고 있어 사용자가 원하는 색상을 요소에 추가하거나 채우는 것에 대한 가능성을 제공합니다. 이러한 모든 속성은 사용자가 글씨를 colorful하게 만들거나 텍스트와 요소에 beautiful한 색상 패턴을 추가하는 데 도울 수 있습니다.

모든 CSS 색상 속성은 색상을 정의하고 그 색상을 지정한 요소에 채우기 위해 색상 방법을 필요로 합니다. CSS는 HSL, RGB, HSLA, Hexadecimal 등의 내장 색상 방법을 가지고 있습니다. 그러나 이러한 색상 방법은 색상을 가져오기 위해 다양한 unite로 整数값의 모음이 필요합니다.

많은 블로그와 자습서가 RGB와 Hexadecimal 방법에 초점을 맞춤으로, HSL 방법의 중요한 부분을 涵蓋하는 必要가 있습니다. 이 블로그에서는 CSS에서 HSL 색상의 역할을 깊이 있게 다룰 예정이며, HSL 방법의 모든 부분을 涵蓋하고 다른 방법과의 違い를 보여드릴 예정입니다.

HSL 방법으로 직접 飛び込む 전에, 다른 두 가지 CSS 색상 방법 – RGB와 Hexadecimal에 대해 話하고, CSS에서 HSL 색상의 사용 이유를 보여드릴 것입니다.

RGB와 Hex의 차이

RGB 방법은 모든 색상이 빨강, 녹색, 蓝色字体의 조합으로 이루어져 있다고 가정하고 동작합니다. 이 방법은 rgb() 함수 내에 0 – 255 사이의 세 つ의 十進法 값을 지정하여 彩色의 세 가지 彩色의 响度 수준을 지정하는 것을 요구합니다. 이러한 값은 각 彩色의 响度를 나타내며, 0 값은 가장 낮은 响度로, 255는 가장 높은 响度로 나타낼 수 있습니다.

다음은 RGB 색조합을 다양한 강도로 나타내는 예시입니다:

RGB 방법의 동작을 이해하기 위해 예시를 들어보겠습니다.

.container {

  background-color: rgb(0, 200, 120);

  width: 100%;

  height: 100px;

}

출력:

이제 Hexadecimal 방법에 대해 이야기해보겠습니다. 이 방법도 각 색이 Red, Green, Blue 色의 혼합으로 이루어진 것을 기반으로 작동합니다. Hexadecimal 방법은 세 つ 의 두 자리 Hex 숫자가 필요하며 ‘#’ 기호로 시작합니다. 이 세 つ의 Hex 값은 각각 Red, Green, Blue 色의 강도 수준을 지정합니다.

Hexadecimal 값이 涉及되고 있으며, Hexadecimal 基数가 0에서 15 값 사이에 있으며, 10에서 15 값은 A에서 F까지의 알파벳으로 표현되ます. 따라서 00는 가장 낮은 강도의 색을 주고, FF는 가장 높은 강도의 색을 나타냅니다.

다음은 일반적인 Hex 색과 코드입니다:

Hex 방법의 동작을 이해하기 위한 예시를 들어보겠습니다.

.container1{

  background-color:#91D8E4;

}

출력:

RGB와 Hexadecimal 방법과 함께 작업하는 것은 편리하며 우리가 원하는 것을 얻을 수 있습니다. 하지만 그렇다고 생각하는 것은 안 됩니다. 이러한 두 방법을 사용하는 것은 보고하는 것처럼 간단하다고 생각할 수 있습니다. 어떻게 되는지 보죠.

RGB과 Hex 색 코드에 相关工作해야 하는 문제

이 두 가지 방법의 중요한 문제 중 하나는 직관적이지 않다는 점입니다. 즉, 인간의 두뇌가 색을 인식하는 방식에 맞지 않는다는 것입니다. 사람이 색을 볼 때 인간의 뇌는 그 색을 빨강, 초록, 파랑으로 구분하지 않습니다. 따라서 색을 RGB 번호와 16진수 또는 10진수로 인식하기 어렵습니다.

이러한 어려움 중 개발자나 테스터의 일상에서 발생할 수 있는 사례는 인간의 이해와 소통을 위해 RGB를 헥스로 변환하거나 그 반대의 경우입니다.

UI 디자이너와 웹 개발자는 사용자 인터페이스를 만들 때 인터페이스 전체에서 일정한 테마를 유지하기 위해 특정 색의 여러 가지 음영이 필요합니다. 예를 들어 요구 사항에 따라 파란색 30개, 녹색 20개, 주황색 10개 등의 음영이 필요합니다. 이렇게 다양한 색상을 보유하기 위해 CSS 변수를 사용하면 복잡해질 수 있습니다. 이러한 모든 변형의 RGB 값이 서로 관련이 없다는 것을 알게 되면 상황이 더 나빠집니다.

그러나 RGB 및 16진법 방식의 이러한 단점은 CSS의 HSL 색상을 사용하면 제거할 수 있습니다. 이제 HSL 방법의 의미, 작동 방식 및 RGB 및 16진법 방법의 단점을 극복하는 방법부터 논의를 시작하여 CSS에서 HSL 색상의 역할을 이해해 보겠습니다.

HSL이란 무엇입니까?

HSL는 色调(Hue), 纯度(Saturation), 亮度(Lightness)의 缩写이며, 이 세 값의 조합으로 구성되는 的色彩 이다. 이전에 언급한 두 다른 방법과 마찬가지로, HSL 방법도 각 色彩은 빨강, 녹색, 蓝色字体의 섞임으로 이루어지는 것을 기반으로 작동한다.

HSL 형식의 주요 色彩은 빨강, 녹색, 蓝色字体이며, CSS에서 HSL 色彩의 behind the central 개념이 RGB 색계 Wheel(Red Green Blue)이다.

RGB (Red Green Blue) 색계 Wheel은 一个大 circle 안에 들어가는 色彩을 대표하는데 대 preponderance 를 가지고 있다. 이 톱니 위에서는 주요, 두 번째, 세 번째 色彩之间의 관계를 보여준다. 그러나 세 种의 색 톱니가 存在한다 – RGB (Red Green Blue), CMY (Cyan Magenta Yellow), RYB (Red Yellow Blue).

이전에 붙여넣은 그림은 RGB 색계 톱니 circle를 나타낸다. 빨강이 0 도, 녹색이 120 도, blue가 240 도로 있는 것을 관찰할 수 있다. CSS에서 HSL 色彩을 사용할 때 背后에 어떻게 일어나는지 更深하게 이해해보자.

色调(Hue)

HSL 色彩 이용 시 이 방법의 첫 값은 Hue이다. 色彩의 각도가 color wheel에 표시되는 量이며, 정의된 각도 값은 시계 방향으로 negative x-axis에서 계산되며 그 각도에 해당하는 色彩을 반환한다. 각도 값이므로 기본적으로 degree 単位로 存在하지만, 이 방법은 rad, grad, turn 과 같은 다른 単位로 각도 값을 정의할 수 있다.

각도 unite의 값이 0∼360 도로 界定されています. 0 도에서 빨강, 120 도에서 초록, 240 도에서 синий입니다. rad로 하면, 값의 범위는 0∼6.28 rad입니다. CSS에서 HSL 색상에서 가장 자주 사용되는 unite 값은 도값입니다.

도에 대한 작동을 이해하기 위해 예를 들어보겠습니다.

div {

  border: 2px solid;

  height: 100px;

  background-color: hsl(123deg, 39%, 49%);

}

출력:

각도 값이 0∼360 사이에 제한되지만, 0 도 이하나 360 도 이상의 값을 받을 수 있습니다. 360 도 이상인 경우, 360로 나누어 표시되는 범위로 변환되며, 0 도 이하나 Negative 값인 경우 360로 더해지고, 그 결과 값을 이용하여 색상을 가져옵니다.

background-color: hsl(400deg, 39%, 49%);

출력:

background-color: hsl(-120deg, 39%, 49%);

출력:

<div class="container1">Container 1</div>

<div class="container2">Container 2</div>

div {

  border: 2px solid;

  height: 100px;

  text-align: center;

  font-size: 80px;

  margin-bottom: 10px;

}

 

 

.container1 {

  background-color: hsl(60, 39%, 49%);

}

 

 

.container2 {

  background-color: hsl(420, 39%, 49%);

}

출력:

각도 값으로 보면, 60 도와 420 도(420−360=60)가 같습니다. 따라서, 이전 예에서 보여진 것처럼 두 컨테이너의 배경 색이 같습니다.

.container1 {

  background-color: hsl(90, 39%, 49%);

}

 

 

.container2 {

  background-color: hsl(-270, 39%, 49%);

}

출력:

이곳에서도 90 도와 −270 도가 이전 예와 같은 결과를 얻는 것을 확인할 수 있습니다. 90 도와 −270 도는 각도 값으로 보면 같습니다.

이제 HSL 방법의 2번째 특성인 채도를 다음으로 살펴봅시다.

채도

채도는 색의 정纯도를 정의하며, 색이 saturate 되는 정도나 비 saturate 되는 정도를 나타냅니다. 换句话说, 채도 특성을 조작하면 색의 강도 수준이 변하ます. 채도 지수는 percentage 단위의 정수 값을 받으며, 색의 채도를 정의합니다.

채도의 작동을 이해하기 위해 예를 들어보겠습니다.

.container{

  background-color:hsl(60, 45%,49%);

}

출력:

채도 특성의 값이 높으면, 그 색의 강도도 높고, 그 색에 들어가는 灰色 명도가 少なく 變합니다. 따라서, 채도의 100% 값은 정 purity 색을 보여줍니다., 50% 값은 그 색과 그 명도의 gray 명도를 보여줍니다., 0% 값은 완전한 灰色 명도를 보여줍니다.

.container1{

  background-color:hsl(60, 0%,49%);

}

 

 

.container2{

  background-color:hsl(420, 25%,49%);

}

 

 

.container3{

  background-color:hsl(420, 50%,49%);

}

 

 

.container4{

  background-color:hsl(420, 75%,49%);

}

 

 

.container5{

  background-color:hsl(420, 100%,49%);

}

출력:

위의 예에서, 0%から100%로 채도 특성의 값을 증가시키면 컨테이너의 배경색이 어떻게 变化するか 보여줍니다. 0% 값에서는 컨테이너 1에서 전체 灰色 명도를 보여줍니다., 값이 증가하면 색의 강도도 증가합니다. 결국, 강도는 5에서 가장 높습니다.

채도 특성이 percentage 값을 받기 때문에, 얻은 값은 0%에서 100% 범위에 해당합니다. 어떻게 유저는 100%보다 큰 값과 0%보다 작은 값을 채도 특성에 전달할 수 있습니다.

하지만, Hue 특성과 마찬가지로, 한도를 벗어나는 값을 전달하지 않는 것이 유용합니다. 사용자가 100%보다 큰 값을 전달할 때, 색의 강도는 100%로 유지합니다. 0%보다 작은 값(음수 값)을 전달할 때, 강도는 0%로 유지합니다.

.container1 {

  background-color: hsl(60, 0%, 49%);

}

 

 

.container2 {

  background-color: hsl(420, -25%, 49%);

}

출력:

여기서는 saturation 특성에 0%와 -25%의 값을 할당했으며, 두 컨테이너에서 동일한 배경색을 얻고 있음을 확인할 수 있습니다.

.container1 {

  background-color: hsl(60, 100%, 49%);

}

 

 

.container2 {

  background-color: hsl(420, 200%, 49%);

}

출력:

이 예에서는 100%와 200%의 saturation 특성 값을 초기화했으며, 이 두 개의 다른 값에 대해서는 두 컨테이너에서 동일한 배경색을 얻고 있습니다.

이제, CSS에서 HSL 색상 모듈에 사용되는 HSL 方法的 마지막 특성, 即 Lightness에 到的 시간입니다.

光明

이 이름에 의해, Lightness 특성은 색의 光明의 量을 제어하는 것입니다. 换句话说, Lightness는 어느 程度의 光明이 들어가는지, 어느 程度의 어둡게 보일지 제어하는 속성입니다. 饱和 특성과 마찬가지로, Lightness 특성도 percentage 単位의 integer 값을 받습니다.

Lightness를 이해하기 위한 예를 생각해봅시다.

.container {

  background-color: hsl(60, 39%, 49%);

}

출력:

.container1 {

  background-color: hsl(60, 39%, 0%);

  color: white;

}

 

 

.container2 {

  background-color: hsl(420, 39%, 25%);

}

.container3 {

  background-color: hsl(420, 39%, 50%);

}

.container4 {

  background-color: hsl(420, 39%, 75%);

}

.container5 {

  background-color: hsl(420, 39%, 100%);

}

출력:

여기에서는 0%의 Lightness에서 Container 1의 배경색이 absolute black이고, Lightness의 값이 증가하면 색의 光明이 증가하고, 100%의 Lightness이면 full이므로 Container 5의 배경색이 full white가 되는 것을 확인할 수 있습니다.

饱和 특성과 마찬가지로, Lightness 특성도 100% 이상과 0% 이하의 값을 받습니다. 그러나 100% 이상의 값은 100%와 동일하게 작동하고, 0% 이하의 값(음수 값)도 0%와 동일하게 작동합니다. 이를 보는 것을 마음에 들면 어떻게 일어나는지 보여드릴까요.

.container1 {

  background-color: hsl(60, 39%, 0%);

}

 

 

.container2 {

  background-color: hsl(420, 39%, -25%);

}

출력:

.container1 {

  background-color: hsl(60, 39%, 100%);

}

 

 

.container2 {

  background-color: hsl(420, 39%, 250%);

}

출력:

이 예에서, Container 1에 100%의 밝기 값을 할당하고, Container 2에 200%의 값을 할당하더라도, 그 결과가 배경 색으로 다를 것이라고 생각할 수 있습니다.

CSS에서 HSL 색의 세 특성을 discuss 하다가 왔지만, 그것만이 아닙니다. CSS의 HSL 색 아래에 있는 다른 특징은 “A”로 缩写되며, 第四章. Alpha 특성은 색의 불투명도를 지정합니다. 换句话说, Alpha 특성은 색의 투명도 수준을 simply 조절합니다. HSL에서 alpha 특성을 사용하기 위해서는 HSLA 方法을 사용합니다.

CSS의 HSL 색의 다른 특성과 不同하게, 单位的 값으로 구성되는 값이 아닌, Alpha 특성은 单位less 값을 요구합니다. Alpha 특성은 0에서 1까지의 unitless 값을 요구합니다. 0에서, 색이 안 보이거나 숨기지; 1에서, Alpha 특성이 가장 높은 수치를 가지고 있으며, 색이 완전히 보입니다.

.container{

  background-color:hsla(60, 39%,49%, 0);

}

Output:

.container{

  background-color:hsla(60, 39%,49%, 1);

}

Output:

여기에, Alpha 특성을 1로 할당했으므로, Container의 배경 색이 나타나고, 배경 색을 시작할 수 있습니다.

단위 less 값을 요구하는 것만이 아닌, Alpha 특성의 다른 특징은 다양합니다. Alpha 특성은 0에서 1사이의 값을 받을 수 있으며, 숫자 값(0.1, 0.2, 0.01)도 받을 수 있습니다., 이는 CSS의 HSL 색의 다른 특성에서 작동하지 않습니다.

.container {

  background-color: hsla(60, 39%, 49%, 0.5);

}

Output:

이 예제에서, 관찰하시면 alpha 특성에 0.5(절반) 값을 대입했습니다. 따라서 결과적으로 컨테이너에 alfa 0.5의 배경색상을 얻고 있습니다. 하나의 자리에서 딴 décimal 는 아니며, alpha 특성은 2 자리의 decimal 도 받을 수 있습니다. 이것은 색상의 투명도 수준을 완전한 제어 권限을 제공합니다.

다음은 이것을 보여주는 예시입니다.

.container {

  background-color: hsla(60, 39%, 49%, 0.25);

}

출력:

여기에서는 alpha 특성에 0.25 값을 대입했습니다. 이것은 두 자리의 decimal 값입니다.

CSS에서 HSL 색상 사용의 장점

HSL(色调, 彩度, 亮度) 색상은 CSS 색상 모듈에 상당히 새로운 추가로, 웹 開発에서 색상을 specifics하고 유용하게 지정하는 기능을 제공합니다. RGB 또는 Hexadecimal 색상 코드와 비교하여, CSS에서 HSL 색상은 디자이너와 開発자에게 많은 장점을 제공합니다.

이 섹션에서는 HSL 색상을 CSS에서 사용하는 이유와 웹 页面과 응용 프로그램에서 시각적으로 魅力的하고 접근성 있는 디자인을 만들기에 어떻게 사용할 수 있는지 자세히 探讨할 것입니다.

실용적인 적용에 대해서는, CSS의 HSL 색상을 다양한 professionalism에서 많이 사용하고 있습니다.

다음과 같은 several advantages가 있습니다.

• 전체 workflow를 개선하는 것을 一等奖상을 받습니다.
• 표준적인 기반 색상을 유지하면서 다양한 색상을 얻는 것은 매우 유용합니다.
• 强力하고 간단한 方法이며 많은 색상을 제공합니다.
• 사람들이 색을 관찰하는 실제 방법에 기반해서 작업하며 빨라게 배우고 읽기 쉽습니다.
• HSL 방법으로 생성되는 색은 명확하게 표현되며, 결과를 쉽게 상상할 수 있습니다.

CSS에서 HSL 색을 사용하는 또 다른 중요한 장점은 RGB와 함께 사용되며 RGB로 쉽게 변환할 수 있다는 것입니다. RGB와 HSL 방법은 모두 작동하기 위해 숫자 값의 모음을 요구하므로, HSL 색의 숫자 값을 RGB 방법의 분수 값으로 쉽게 변환할 수 있는 方法을 이용할 수 있습니다.

더 이상 간편하게 할 수 있습니다, 여러 在线 색 변환기는 색 방법을 하나로 또는 다른 것으로 변환할 수 있습니다. 이러한 장점들이 CSS에서 HSL 색을 사용하는 것을 프로젝트에서 색을 정의하는 데 적절한 方法으로 만들어 줍니다. 모든 이러한 이유로 HSL 색을 사용하는 개발자들의 수는 매일 증가하며, HEX나 RGB 方法을 더 많이 사용하는 CSS 전문가들이 있을 수 있습니다.

HSL 색을 사용하는 응용

CSS에서 HSL 색을 사용하면 색을 지정하는 다양한 方法和 直观적인 방법을 제공합니다. 웹 開発에서 많은 응용이 있습니다. 다음은 HSL 색을 사용하여 실제 응용의 일부입니다.

chroma 색

전문가 수준에서, 인터페이스의 다양한 부분에 특정 색의 다양한 어둡기를 사용하여 일관성있는 테마를 만들고자 합니다. HSL 方法은 이러한 상황에서 매우 유용합니다.

이 예시에서, 우리는 두 가지 기본적인 웹사이트 레이아웃을 고려했습니다. 그리고 이 둘 다 header 영역은 배경 색상으로 채워져 있고, content 영역은 同様한 배경 색상으로 하나 훨씬 ligher shade(얇은 Shadow)로 구성되어 있습니다. 이러한 효과를 얻기 위해 header 영역에서는 lightness 특성 값을 낮춤으로써, content 영역에서는 높게 두었습니다.

lightness 특성값을 여러 가지 값들로 실험하면 同一个색상의 어둡고 밝은 Shadow를 웹사이트 主题에서 사용할 수 있습니다.

어둡고 밝은 Shadow Colors on Hover

web사이트 interface에서 某些 element가 사용자가 마우스 오버로 가면 색상이 변경되는 것을 보셨을 것입니다. 그들의 색상이 ligher shade에서 어둡게 변경되는 것입니다. 이 곳에서 HSL Colors in CSS가 동일한 색의 어둡고 밝은 Shadow를 주는 역할을 합니다.

button {

  padding: 10px;

  border-radius: 20px;

  background-color: hsl(240, 39%, 70%);

  color: white;

  font-size: 20px;

}

 

 

button:hover {

  background-color: hsl(240, 39%, 50%);

  cursor: pointer;

}

upper button의 색상이 light shade로 되어 있는 것을 발견할 수 있습니다. 그러나 이 경우 lightness 특성값을 70%로 두었습니다. hover로 하면 button 색상이 darker shadow로 변경되며, 아래 button에서 유의하십시오. 이러한 효과를 얻기 위해 lightness 특성값을 위의 button보다 낮은 50%로 지정했습니다.

White Color Shades

대부분의 경우, 웹사이트 interface와 문자를 상당히 다르게 보이게 하기 위해 font color로 white를 사용합니다. 그러나 모든 text에 同じ white shade를 사용하면 사용자 경험이 钝化됩니다. 이러한 것을 避け기 위해서는, text를 띄울 수 있고 기쁨을 지속시키는 different shades of white를 사용할 수 있습니다.

HSL 색상 model을 사용하면 흰색의 다양한 ombre效果를 얻을 수 있습니다. HSL 방식의 명도 특성에 다양한 값을 추가하여 흰색의 다양한 ombre效果를 얻을 수 있습니다.

.container1 {

  color: hsl(30, 49%, 100%);

}

 

 

.container2 {

  color: hsl(30, 49%, 90%);

}

 

 

.container3 {

  color: hsl(30, 49%, 95%);

}

 

 

.container4 {

  color: hsl(30, 49%, 85%);

}

예시:

이 예시에서는 네 개의 컨테이너 모두 기본적인 흰색이 아닙니다. 기본적인 흰색을 放弃하고 기Utilsuring different shades of white to give it an exciting look and keep it white. For that, we manipulated the lightness characteristics value for the font color.

Button Types

HSL 색상 모델은 tabuttons에 대해 같은 색의 두 가지 다른 ombre效果를 사용할 때 非常有用です. 일반적인 색의 다양한 ombre效果를 적용하여 사용자가 기본 버튼과 補助 버튼을 quickly identify할 수 있습니다.

실제 사용에서는 어두운 ombre效果의 색을 기본 버튼에 사용하고, 시一般적인 ombre效果의 색을 補助 버튼에 사용합니다. HSL 방식의 명도 특성에 높은 및 낮은 값을 전달하여 일반적인 색의 밝은 및 어두운 ombre效果를 얻을 수 있습니다.

이를 실제로 보기 위해 다음과 같은 예시를 고안하겠습니다.

.primary {

  color: white;

  background-color: hsl(10, 49%, 55%);

}

 

 

.secondary {

  background-color: hsl(10, 49%, 80%);

}

예시:

上의 예시에서는 상위 버튼이 기본적인 것이고, 하위 버튼이 補助적인 것입니다. 기본적인 버튼에는 어두운 ombre效果의 색을 사용하며, 명도 특성의 낮은 값을 사용하고, 補助 버튼에는 밝은 ombre效果의 색을 사용하며, 명도 특성의 높은 값을 사용합니다.

Dark Theme Colors

사용자 인터페이스에서 정확한 색 대비가 매우 중요합니다. 특히 사용자가 웹사이트에서 어둡한 테마를 사용하고 있을 때이다. 2022년에 실시한 연구에 따르면, 사용자 중 81.9%는 스마트폰에서 어둡한 테마를 사용합니다. 이를 통해 어둡한 테마의 사용자 인터페이스에서 색 대비의 중요性을 이해할 수 있습니다.

WCAG의 无障碍성 기준에 따르면, 어둡한 Oberfläche에 대한 本文 텍스트의 대비를 至少 4:5:1로 유지해야 합니다. 이 룰을 따르기 위해서는, 어둡한 테마에서 채도 있는 색상을 사용하지 않습니다. 채도 있는 색상을 어둡한 배경으로 사용하면 안경 부하를 많이 안으로 줄 수 있습니다.

上面的 그림에서는, 낮은 채도 값을 가진 텍스트를 높은 채도 값을 가진 텍스트보다 훨씬 쉽게 읽을 수 있음을 明显하게 보입니다. 따라서 어둡한 색의 배경에 비斯aturated colors를 사용하는것이 ALWAYS 추천되며, 흑색 배경에 채도 없는 색상을 사용하는것입니다.

最佳的 色 지정자를 선택하는 方法

지금까지 적은 세 가지 方法은 각각 장점과 단점을 가지고 있습니다. 어떤 사용 사례에 따라서 해당 色 지정자가 가장 좋은 성능을 보여줄지에 따라야 합니다. 모든 세 가지 色 지정자들을 비교하기 위한 공통한 요인이 없지만, 각각의 色 지정자를 조사해봅시다.

Hexadecimal

디자인 분야나 개인적으로 프로젝트를 생성하지 않는 사용자라면 Hexadecimal 方法을 色 지정자로 사용해야 합니다. 많은 개발자들은 色 지정이 간단하다는 이유로 Hexadecimal 方法을 선호하며, CSS의 RGB와 HSL 色에 비해 too much complexity가 없습니다.

hex 코드를 복사하고 프로그램에 삽입하세요. 하지만 색의 불투명도를 조절해야 하는 경우, hex decimal 方法은 사용자에게 색의 불투명도 제어를 제공하지 않습니다.

RGB

RGB 方法을 언제 사용할 것인가에 대해 생각하세요: 이 方法은 사진 편집과 디자인 분야에서 전문 개발자와 디자이너에게 유용합니다. 또 다른 이유는 RGB 方法은 CorelDraw, PhotoShop, Illustrator과 같은 인기 있는 디자인 소프트웨어에서 가장 자주 사용되는 색 SPECIFIER 입니다. 하지만 RGB 方法은 다른 색의 깊이를 제공하는데 너무 복잡해지지 않고 같은 색의 다른 ombre를 제공할 수 없습니다.

HSL

이제 HSL 方法을 고려하세요. 전문 웹 개발자와 사용자 인터페이스 디자이너는 인터페이스에서 일관된 주제를 유지하고자 합니다. 이러한 상황에서, CSS에서 HSL 색상을 사용하여 불투명도를 조절할 수 있는 saturation과 lightness 특성의 값을 변경하는 것이 도움이 되ます. 결국, 모든 것은 개인의 선택에 의해 결정되ます. 你们은 이러한 세 가지 SPECIFIER 中的 하나를 선택하여 작업을 실행할 수 있습니다.

브라우저 호환성

지정한 색상이 브라우저에서 correct output을 주지 않는다면, 의미가 없습니다. 이러한 상황을 避け기 위해서, 사용자 인터페이스 디자인에서 사용되는 색 SPECIFIER는 모든 브라우저에 호환되어야 합니다.

万幸的是, HSL 색상 이동은 브라우저의 독립적입니다. HSL 方法은 完全 browser compatible입니다. 따라서 사용자가 어떤 브라우저를 사용하더라도, 정확하게 정의된 색상으로 웹 사이트를 구경할 수 있습니다.

그러나 크로스 브라우저 테스트를 수행하여 CSS의 HSL 색상이 모든 브라우저에서 원하는 결과를 제공하는지 확인할 수 있습니다. 지속적인 품질 테스트 플랫폼(예: 람다 테스트)을 사용하면 다양한 실제 브라우저, 디바이스 및 OS 조합에서 브라우저 간 호환성 테스트를 실행할 수 있습니다. 지정된 CSS 색상이 브라우저와 디바이스에서 올바르게 작동하는지 확인합니다.

마무리!

이 블로그에서는 CSS에서 HSL 색상의 역할과 다른 색상 방법과의 차이점에 대해 설명했습니다. 또한 CSS에서 HSL 색상을 적용하는 방법과 그 이점에 대해서도 논의했습니다. 또한 웹 디자인에서 색상을 지정할 때 CSS의 HSL 색상이 어떻게 더 큰 유연성과 정밀도를 제공하는지 알아보았습니다.

디자이너는 CSS의 HSL 색상을 사용하여 색상의 채도와 명도를 더 잘 제어할 수 있으므로 웹사이트와 애플리케이션에서 브랜드의 정체성이나 미적 비전에 맞게 더 넓은 범위의 색조와 음영을 사용할 수 있게 됩니다.

CSS의 HSL 색상은 색상의 명도와 채도를 조정하여 텍스트 및 기타 디자인 요소의 대비와 가독성을 높여 사용자가 콘텐츠를 쉽게 탐색하고 이해할 수 있도록 함으로써 특별한 능력을 가진 사람들의 접근성을 높일 수 있습니다. 전반적으로 CSS의 HSL 색상은 웹 디자이너와 개발자가 웹 디자인에서 생동감 있고 접근하기 쉬운 색 구성표를 만들 수 있는 강력한 도구를 제공합니다.