색상

색상은 웹사이트에서 중요한 부분이며 CSS에는 색상 유형, 함수, 처리에 관한 다양한 옵션이 있습니다.

사용할 색상 유형은 어떻게 결정하나요? 색상을 반투명하게 만드는 방법 이 과에서는 프로젝트와 팀에 적합한 결정을 내리는 데 도움이 되는 옵션을 알아봅니다.

CSS에는 문자열, 숫자와 같은 다양한 데이터 유형이 있습니다. 색상은 이러한 유형 중 하나이며 자체 정의에 숫자와 같은 다른 유형을 사용합니다.

CSS에서 색상을 처음 접하는 경우 숫자 색상을 통해 접하게 될 가능성이 큽니다. 숫자 색상 값은 여러 가지 형식으로 사용할 수 있습니다.

16진수 색상

h1 {
  color: #b71540;
}

16진수 표기법 (흔히 16진수로 줄임)은 RGB의 약어 문법으로, 세 가지 기본 색상인 빨간색, 녹색, 파란색에 숫자 값을 할당합니다.

16진수 범위는 0~9A~F입니다. 6자리 순서로 사용하면 빨간색, 녹색, 파란색 색상 채널에 각각 해당하는 0~255의 RGB 숫자 범위로 변환됩니다.

숫자 색상으로 알파 값을 정의할 수도 있습니다. 알파 값은 투명도의 백분율입니다. 16진수 코드에서는 6자리 시퀀스에 2자리 숫자를 추가하여 8자리 시퀀스를 만듭니다. 예를 들어 16진수 코드로 검은색을 설정하려면 #000000를 작성합니다. 투명도를 50% 추가하려면 #00000080로 변경합니다.

16진수 척도는 0~9A~F이므로 예상한 것과는 다른 투명도 값이 표시될 수 있습니다. 다음은 검은색 16진수 코드 #000000에 추가된 몇 가지 일반적인 주요 값입니다.

  • 완전히 투명한 0% 알파는 00입니다. #00000000
  • 알파 50% 는 80입니다. #00000080
  • 알파 75% 는 BF: #000000BF입니다.

16진수 두 자리를 십진수로 변환하려면 첫 번째 자리를 취해 16을 곱한 다음 (16진수는 16진수이므로) 두 번째 자리를 더합니다. 75% 알파의 예로 BF를 사용합니다.

  1. B는 11이고 16을 곱하면 176이 됩니다.
  2. F는 15와 같습니다.
  3. 176 + 15 = 191
  4. 알파 값은 191(255의 75%)입니다.

RGB (빨강, 녹색, 파랑)

h1 {
  color: rgb(183, 21, 64);
}

RGB 색상은 숫자 또는 비율을 매개변수로 사용하여 rgb() 색상 함수로 정의됩니다. 숫자는 0~255 범위여야 하며 비율은 0~100%여야 합니다. RGB는 0~255의 척도로 작동하므로 255는 100%에 해당하고 0은 0%에 해당합니다.

RGB로 검은색을 설정하려면 빨간색 0, 녹색 0, 파란색 0인 rgb(0 0 0)로 정의합니다. 검은색은 rgb(0%, 0%, 0%)로 정의할 수도 있습니다. 흰색은 정확히 그 반대인 rgb(255, 255, 255) 또는 rgb(100%, 100%, 100%)입니다.

알파는 다음 두 가지 방법 중 하나로 rgb()에 설정됩니다. 빨강, 녹색, 파랑 매개변수 뒤에 /를 추가하거나 rgba() 함수를 사용합니다. 알파는 백분율 또는 0과 1 사이의 소수점으로 정의할 수 있습니다. 예를 들어 최신 브라우저에서 50% 알파 검은색을 설정하려면 rgb(0 0 0 / 50%) 또는 rgb(0 0 0 / 0.5)을 작성합니다. 더 광범위한 지원을 위해 rgba() 함수를 사용하여 rgba(0, 0, 0, 50%) 또는 rgba(0, 0, 0, 0.5)를 작성합니다.

HSL (색조, 채도, 밝기)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL은 색조, 채도, 밝기를 나타냅니다. 색조는 색상환의 값을 나타내며, 0~360도 (빨간색이 0 및 360도)로 시작합니다. 색조가 180도(50%)이면 파란색 범위에 해당합니다. 우리가 보는 색상의 출처입니다.

각 각도 값을 시각적으로 표현하는 데 도움이 되도록 60도 단위로 각도 값 라벨이 지정된 색상환

채도는 선택한 색조의 선명도를 나타냅니다. 채도가 완전히 제거된 색상 (채도 0%)은 그레이 스케일로 표시됩니다. 마지막으로 밝기는 추가된 빛의 흰색에서 검은색까지의 크기를 나타내는 매개변수입니다. 밝기가 100%이면 항상 흰색이 됩니다.

hsl() 색상 함수를 사용하여 hsl(0 0% 0%) 또는 hsl(0deg 0% 0%)를 작성하여 진정한 검은색을 정의합니다. 색조 매개변수는 색상환의 각도를 정의하며, 숫자 유형을 사용하는 경우 이 각도는 0~360입니다. 각도 유형 (0deg) 또는 (0turn)을 사용할 수도 있습니다. 채도와 밝기 모두 백분율로 정의됩니다.

HSL 색상 함수가 시각적으로 분류되어 있습니다. 색조는 색상환을 사용합니다. 채도는 회색이 청록색으로 블렌딩되는 것을 보여줍니다. 밝기는 검은색에서 흰색으로 표시됩니다.

알파는 색조, 채도, 밝기 매개변수 뒤에 /를 추가하거나 hsla() 함수를 사용하여 rgb()와 동일한 방식으로 hsl()에 정의됩니다. 알파는 백분율 또는 0과 1 사이의 소수점으로 정의할 수 있습니다. 예를 들어 50% 알파 검은색을 설정하려면 hsl(0 0% 0% / 50%) 또는 hsl(0 0% 0% / 0.5)를 사용합니다. hsla() 함수를 사용하여 hsla(0, 0%, 0%, 50%) 또는 hsla(0, 0%, 0%, 0.5)를 작성합니다.

색상 키워드

CSS에는 148개의 이름이 지정된 색상이 있습니다. 보라색, 토마토, 골든로드와 같은 영어 이름입니다. 웹 연감에 따르면 가장 인기 있는 이름은 검은색, 흰색, 빨간색, 파란색, 회색입니다. 즐겨 사용하는 색상은 골든로드, 앨리스블루, 핫핑크입니다.

표준 색상 외에도 다음과 같은 특수 키워드도 사용할 수 있습니다.

  • transparent은 완전히 투명한 색상입니다. background-color의 초기 값이기도 합니다.
  • currentColorcolor 속성의 문맥 계산된 동적 값입니다. 텍스트 색상이 red이고 border-colorcurrentColor로 설정하면 빨간색이 됩니다. currentColor를 정의하는 요소에 정의된 color 값이 없는 경우 대신 캐스케이드에 의해 currentColor가 계산됩니다.

CSS 규칙에서 색상을 사용하는 위치

CSS 속성이 <color> 데이터 유형을 값으로 허용하는 경우 위의 색상 표현 방법 중 하나를 허용합니다. 텍스트 스타일을 지정하려면 color, text-shadow, text-decoration-color 속성을 사용하세요. 이 속성은 모두 색상을 값으로 허용하거나 색상을 값의 일부로 허용합니다.

배경의 경우 색상을 background 또는 background-color의 값으로 설정할 수 있습니다. 색상은 그라디언트(예: linear-gradient)에서도 사용할 수 있습니다. 그라데이션은 CSS에서 프로그래매틱 방식으로 정의할 수 있는 이미지 유형입니다. 그라데이션은 16진수, RGB, HSL과 같은 색상 형식의 조합으로 2개 이상의 색상을 허용합니다.

마지막으로 border-coloroutline-color는 상자의 테두리와 윤곽선의 색상을 설정합니다. box-shadow 속성은 색상도 값 중 하나로 허용합니다.

이해도 확인

색상에 대한 지식 테스트

다음 중 유효한 색상은 무엇인가요?

hotpink
#OOFZ2
#0f08
hsl(180deg 50% 50%)
rgb(255, 0, 0)
rbga(400 0 1)

잘못된 hsl 색상을 찾습니다.

hsl(5, 0%, 90%)
hsl(0, 0, 0)
hsl(.5turn 40% 60%)
hsl(0 0% 0% / 20%)
hsl(2rad 50% 50%)

리소스