>웹 프론트엔드 >CSS 튜토리얼 >CSS에서 색상을 사용하기 위한 최고의 초보자 가이드

CSS에서 색상을 사용하기 위한 최고의 초보자 가이드

Linda Hamilton
Linda Hamilton원래의
2025-01-04 03:52:40307검색

웹 디자인 세계에서 색상은 시각적으로 매력적이고 사용자 친화적인 웹사이트를 만드는 데 중요한 역할을 합니다. CSS(Cascading Style Sheets)에서 색상을 효과적으로 사용하는 방법을 이해하면 사이트의 미적 품질을 향상하고 사용자 경험을 향상시킬 수 있습니다. 이 블로그에서는 16진수, RGB, RGBA, HSL 및 HSLA 값을 포함하여 CSS에서 색상을 지정하는 다양한 방법을 살펴봅니다. 또한 색상 대비와 접근성의 중요성은 물론 그라데이션을 만드는 기술에 대해서도 논의합니다. 이 가이드를 마치면 웹 프로젝트에서 색상을 사용하는 데 있어 탄탄한 기초를 갖추게 될 것입니다.

CSS에서 색상 사용
다음 방법으로 CSS에서 색상을 지정할 수 있습니다.

  • 16진수 색상
  • RGB 색상
  • 사전 정의된/크로스 브라우저 색상 이름
  • RGBA 색상
  • HSL 색상
  • HSLA 색상

16진수 색상

16진수 색상은 #RRGGBB로 지정되며, 여기서 RR(빨간색), GG(녹색), BB(파란색) 16진수 정수는 색상의 구성 요소를 지정합니다.
16진수 범위는 0~F이며 이는 00~FF를 의미합니다.
예를 들어 #0000ff 값은 빨간색과 파란색이 00으로 설정되어 파란색 구성 요소가 가장 높은 값(ff)으로 설정되어 파란색으로 렌더링됩니다.

RGB 색상

RGB 색상 값은 rgb() 함수로 지정되며 rgb(red, green, blue) 구문을 사용합니다.
각 매개변수(빨간색, 녹색 및 파란색)는 색상의 강도를 정의하며 0~255 사이의 정수이거나 0%~100% 사이의 백분율 값을 사용할 수 있습니다.
예를 들어 rgb(0,0,255) 값은 빨간색과 녹색이 가장 낮은 매개변수(0)로 설정되고 파란색 매개변수가 가장 높은 값(255)으로 설정되어 있기 때문에 파란색으로 렌더링됩니다.

RGBA 색상

RGBA에는 투명성을 위한 추가 알파 채널이 포함되어 있습니다.
알파 구성요소는 색상의 투명도 수준을 지정합니다. 알파 값은 0(완전 투명)과 1(완전 불투명) 사이입니다.

0: 완전히 투명하여 색상이 보이지 않게 됩니다.

0.5: 반투명하여 부분적으로 비치는 효과를 제공합니다.

1: 완전 불투명, 투명도가 없음을 나타냅니다.

사전 정의된/크로스 브라우저 색상 이름

화이트, 블랙, 핑크 등 평범한 이름들입니다.
HTML 및 CSS 색상 사양에는 140개의 색상 이름이 사전 정의되어 있습니다.

HSL 색상

HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)를 나타냅니다. HSL은 HSL() 함수로 지정되며 HSL(120, 100%, 50%) 구문을 사용합니다.
색조(0 - 360): 색상 유형을 나타냅니다. 색상환의 도수는 빨간색이 0, 녹색이 120, 파란색이 240입니다.
채도(0% - 100%): 색상의 강도를 나타냅니다. 0%는 회색조이고 100%는 완전 포화입니다.
밝기(0% - 100%): 색상의 밝기를 지정합니다. 0%는 검정색, 100%는 흰색, 50%는 노멀입니다.

HSLA 색상

HSLA에는 투명성을 위한 추가 알파 채널이 포함되어 있습니다.
알파 구성요소는 색상의 투명도 수준을 지정합니다. 알파 값은 0(완전 투명)과 1(완전 불투명) 사이입니다.

<h1>HEX Color</h1>
<h2>RGB Color</h2>
<h3>RGBA Color</h3>
<p>





</p><pre class="brush:php;toolbar:false">h1 {
  color: #ff5733; /* hex code for an orange color */
}
h2 {
  color: rgb(255, 87, 51); /*RGB code for the same orange color */
}
h3 {
    color: rgba(255, 87, 51, 0.7); /* RGBA code with 70% opacity */
}
.pre {
  color: red; /* color name */
}
.hsl {
  color: hsl(120, 100%, 50%); /* HSL code */
}
.hsla {
  color: hsla(240,100%,50%,0.3); /* /* HSL code with 30% lightness */
}

The Ultimate Beginner

불투명

CSS에서는 불투명도 속성을 사용하여 요소의 투명도를 설정합니다. 0과 1 사이의 값을 사용합니다.
0: 요소가 완전히 투명합니다(완전히 보이지 않음).
1: 요소가 완전히 불투명합니다(완전히 표시됨).

<img src="CSS%EC%97%90%EC%84%9C%20%EC%83%89%EC%83%81%EC%9D%84%20%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0%20%EC%9C%84%ED%95%9C%20%EC%B5%9C%EA%B3%A0%EC%9D%98%20%EC%B4%88%EB%B3%B4%EC%9E%90%20%EA%B0%80%EC%9D%B4%EB%93%9C.jpeg" alt="CSS에서 색상을 사용하기 위한 최고의 초보자 가이드">
img {
  opacity: 0.5;
}
img:hover {
  opacity: 1;
}

이전:

The Ultimate Beginner

이미지 위로 마우스를 가져간 후:

The Ultimate Beginner

색상 대비 및 접근성:

색상 대비는 특정 색상을 볼 수 없거나 색상을 전혀 볼 수 없는 사람들이 모든 웹사이트를 정상적으로 사용할 수 있도록 보장하는 중요한 지침 중 하나입니다.

접근성 또는 정확하게 말하면 WCAG(웹 콘텐츠 접근성 지침)는 HTML, CSS 등과 같은 웹 표준을 개발하는 W3C 또는 World Wide Web Consortium에서 제시한 일련의 지침입니다. 이 지침은 웹에 접근성을 높이는 데 도움이 됩니다. 장애인들에게.

WCAG가 웹 접근성 지침을 통과하기 위한 기준으로 몇 가지 최소 비율을 설정한 적절한 색상 대비를 사용해야 합니다. WCAG AA, AAA, 인터페이스 구성요소 등과 같은 다양한 카테고리가 있습니다.

색상 대비 계산

색상 대비는 상대 휘도를 사용하여 계산됩니다. 이는 가장 어두운 검정색에 대해 0으로 정규화되고 가장 밝은 흰색에 대해 1로 정규화된 색 공간의 모든 지점의 상대적 밝기로 정의됩니다.
따라서 간단히 말해서 여기에서 볼 수 있듯이 가장 어두운 검정색은 16진수 코드 #000000에 불과하며 상대 휘도는 0이고 16진수 코드 #ffffff인 가장 밝은 흰색의 경우 1까지 올라가며 이는 거의 모든 것에 적용됩니다. 색상환의 색상을 빨간색의 예를 들어 여기에서 색상을 샘플링하면 상대 휘도 값은 다시 0에서 시작하여 1로 끝나는 다음과 같이 보일 것입니다.

The Ultimate Beginner
상대 휘도 값을 계산하려면 많은 수학이 필요하지만 여기에 명암비 명암비라는 도구가 있습니다. 여기서 16진수 코드를 입력하면 상대 휘도 값을 알 수 있습니다. 이제 상대 휘도를 모두 얻었습니다. 우리가 해야 할 일은 색상 대비 공식을 적용하는 것입니다.

색상 대비 공식= (L1 0.05)/( L2 0.05)
어디,
L1은 밝은색의 휘도
L2는 어두운 색의 휘도입니다.

흰색 배경에 파란색 텍스트

The Ultimate Beginner

여기서 흰색은 휘도가 1인 더 밝은 색상입니다.
파란색은 휘도가 0.0722로 더 어두운 색상입니다.
휘도는 대비율 도구를 사용하여 계산됩니다.

The Ultimate Beginner

이제 이 값을 수식에 적용하면

색상 대비 공식= (L1 0.05)/( L2 0.05)
= (1 0.05)/( 0.0722 0.05)
= 8.59 = 8.59 : 1

색상 대비를 확인하여 WCAG 지침을 통과했는지 확인할 수 있습니다.
이를 확인하는 도구가 대비체커(Contrast Checker)입니다.
웹페이지 요소의 대비에 대한 실시간 피드백을 제공할 수 있는 "색상 대비 분석기"와 같은 브라우저 확장 기능을 사용할 수도 있습니다.

아래에서 볼 수 있듯이 흰색 바탕에 파란색 텍스트가 텍스트를 전달합니다.

The Ultimate Beginner

가독성: 텍스트와 시각적 요소를 쉽게 읽을 수 있으려면 충분한 색상 대비가 중요합니다.
접근성: 웹 콘텐츠는 다양한 능력을 가진 사용자가 포괄적이고 접근할 수 있도록 설계되어야 합니다. 높은 색상 대비는 웹사이트나 애플리케이션의 전반적인 접근성을 향상시켜 더 많은 사람들이 사용할 수 있도록 해줍니다.

그라데이션

CSS 그라데이션을 사용하면 두 개 이상의 지정된 색상 사이를 부드럽게 전환할 수 있습니다.

CSS는 그라데이션 유형을 정의합니다.

  • 선형 그라데이션(아래/위/왼쪽/오른쪽/대각선 방향)
  • 방사형 그라데이션(중심으로 정의)

선형 그라데이션

선형 그래디언트를 만들려면 두 개 이상의 색상 정지점을 정의해야 합니다. 색상 정지점은 부드러운 전환을 렌더링하려는 색상입니다. 그라데이션 효과와 함께 시작점과 방향(또는 각도)도 설정할 수 있습니다.
구문

배경 이미지:선형 그라데이션(방향, 색상 정지1, 색상 정지2,...);

방향 기본 방향: 위에서 아래로

<h1>HEX Color</h1>
<h2>RGB Color</h2>
<h3>RGBA Color</h3>
<p>





</p><pre class="brush:php;toolbar:false">h1 {
  color: #ff5733; /* hex code for an orange color */
}
h2 {
  color: rgb(255, 87, 51); /*RGB code for the same orange color */
}
h3 {
    color: rgba(255, 87, 51, 0.7); /* RGBA code with 70% opacity */
}
.pre {
  color: red; /* color name */
}
.hsl {
  color: hsl(120, 100%, 50%); /* HSL code */
}
.hsla {
  color: hsla(240,100%,50%,0.3); /* /* HSL code with 30% lightness */
}
<img src="CSS%EC%97%90%EC%84%9C%20%EC%83%89%EC%83%81%EC%9D%84%20%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0%20%EC%9C%84%ED%95%9C%20%EC%B5%9C%EA%B3%A0%EC%9D%98%20%EC%B4%88%EB%B3%B4%EC%9E%90%20%EA%B0%80%EC%9D%B4%EB%93%9C.jpeg" alt="CSS에서 색상을 사용하기 위한 최고의 초보자 가이드">

구체적인 방향: 오른쪽, 위쪽, 아래쪽, 왼쪽, 왼쪽 위

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1;
}

<h1>Linear gradient without direction</h1>

각도 사용 :

<h1>HEX Color</h1>
<h2>RGB Color</h2>
<h3>RGBA Color</h3>
<p>





</p><pre class="brush:php;toolbar:false">h1 {
  color: #ff5733; /* hex code for an orange color */
}
h2 {
  color: rgb(255, 87, 51); /*RGB code for the same orange color */
}
h3 {
    color: rgba(255, 87, 51, 0.7); /* RGBA code with 70% opacity */
}
.pre {
  color: red; /* color name */
}
.hsl {
  color: hsl(120, 100%, 50%); /* HSL code */
}
.hsla {
  color: hsla(240,100%,50%,0.3); /* /* HSL code with 30% lightness */
}
<img src="CSS%EC%97%90%EC%84%9C%20%EC%83%89%EC%83%81%EC%9D%84%20%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0%20%EC%9C%84%ED%95%9C%20%EC%B5%9C%EA%B3%A0%EC%9D%98%20%EC%B4%88%EB%B3%B4%EC%9E%90%20%EA%B0%80%EC%9D%B4%EB%93%9C.jpeg" alt="CSS에서 색상을 사용하기 위한 최고의 초보자 가이드">

투명도 사용 : 투명도를 추가하려면 rgba() 함수를 사용합니다. 여기서 마지막 매개변수는 투명도이며 범위는 0(완전 투명)에서 1(투명 없음)입니다

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1;
}

<h1>Linear gradient without direction</h1>

The Ultimate Beginner

방사형 그라데이션

방사형 그래디언트는 중심으로 정의됩니다. 방사형 그래디언트를 만들려면 두 개 이상의 색상 정지점을 정의해야 합니다.

구문

background-image:radialr-gradient(위치의 모양 크기, 시작 색상,..,마지막 색상);


h1 {
  background-image: linear-gradient(blueviolet, black);
  color: white;
}
<h2>Linear gradient with right direction</h2>

The Ultimate Beginner

h2 {
  color: white;
  background-image: linear-gradient(to right, blueviolet, black);
}

The Ultimate Beginner

도구 및 리소스

색상 팔레트 생성기:

쿨러

Coolors는 색상 팔레트를 탐색, 생성 및 사용자 정의할 수 있는 색상 구성표 생성기입니다. 특정 색상을 잠그고 보완적인 팔레트를 생성할 수 있습니다.

Adobe 컬러 휠

Adobe 컬러 휠 컬러 휠을 사용하면 유사, 단색, 트라이어드 등의 색상 규칙을 기반으로 색상 구성표를 만들 수 있습니다. 조화로운 색상 팔레트를 디자인하기 위한 강력한 도구입니다.

브라우저 개발자 도구: Google Chrome 개발자 도구: 요소를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택한 다음 '스타일' 패널로 이동하고 색상 값 위로 마우스를 가져가 색상을 선택합니다. 색상 선택기를 사용하면 실시간으로 색상을 테스트하고 수정할 수 있습니다.

The Ultimate Beginner
결론
CSS의 색상을 마스터하는 것은 모든 웹 디자이너나 개발자에게 필수적입니다. 다양한 색상 사양을 활용하고 접근성을 위한 색상 대비의 중요성을 이해함으로써 더욱 매력적이고 포괄적인 웹 사이트를 만들 수 있습니다. 색상은 디자인을 아름답게 할 뿐만 아니라 유용성과 사용자 경험에도 영향을 미친다는 점을 기억하세요. 이 블로그에서 제공되는 도구와 리소스를 사용하면 이제 자신있게 색상을 실험하고 웹 프로젝트를 향상시킬 수 있습니다.

블로그를 읽고 시간을 투자해 주셔서 감사합니다. 이 블로그가 통찰력이 있고 이로부터 뭔가를 배울 수 있기를 바랍니다. 그렇다면 블로그에 반응을 올려 응원을 보내주세요.

위 내용은 CSS에서 색상을 사용하기 위한 최고의 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.