CSS 팟캐스트 - 006: 색상 1부
색상은 웹사이트에서 중요한 부분이며 CSS에는 색상을 지정하고 조작하는 다양한 옵션이 있습니다.
어떤 색상 유형을 사용할지 어떻게 결정하나요? 색상을 반투명하게 만드는 방법 이 과에서는 프로젝트와 팀에 적합한 결정을 내리는 데 도움이 되는 옵션을 알아봅니다.
CSS에는 문자열, 숫자와 같은 다양한 데이터 유형이 있습니다. 색상은 이러한 유형 중 하나이며 자체 정의에 숫자와 같은 다른 유형을 사용합니다.
색상 선택
이름이 지정된 색상
색상을 선택하는 가장 간단한 방법은 CSS의 148개 이름 지정 색상 중 하나를 선택하는 것입니다.
purple, tomato, goldenrod와 같은 일반 영어 이름입니다. 웹 연감에 따르면 가장 인기 있는 이름은 black, white, red, blue, gray입니다. 즐겨 사용하는 값에는 goldenrod, aliceblue, hotpink가 있습니다.
숫자 색상
이름이 지정된 색상은 편리하지만 해당 세트에서 사용할 수 없는 특정 색상을 사용해야 할 수도 있습니다. 숫자 값을 사용하여 색상을 지정하는 방법에는 여러 가지가 있습니다.
16진수 색상
h1 {
color: #b71540;
}
16진수 표기법 (흔히 16진수로 줄임)은 RGB의 약어 문법으로, 세 가지 기본 색상인 빨간색, 녹색, 파란색에 숫자 값을 할당합니다.
16진수 범위는 0~9 및 A~F입니다. 6자리 시퀀스로 사용하면 빨간색, 녹색, 파란색 색상 채널에 각각 해당하는 0~255의 RGB 숫자 범위로 변환됩니다.
숫자 색상으로 알파 값을 정의할 수도 있습니다.
알파 값은 투명도의 백분율입니다.
16진수 코드에서는 6자리 시퀀스에 2자리 숫자를 추가하여 8자리 시퀀스를 만듭니다.
예를 들어 16진수 코드로 검은색을 설정하려면 #000000를 작성합니다.
투명도를 50% 추가하려면 #00000080로 변경합니다.
16진수 척도는 0~9 및 A~F이므로 예상한 것과는 다른 투명도 값이 표시될 수 있습니다.
다음은 검은색 16진수 코드 #000000에 추가된 몇 가지 일반적인 주요 값입니다.
- 완전히 투명한 0% 알파는 00입니다.
#00000000 - 알파 50% 는 80입니다.
#00000080 - 알파 75% 는 BF:
#000000BF입니다.
16진수 두 자리를 십진수로 변환하려면 첫 번째 자릿수를 16으로 곱한 다음 (16진수의 밑은 16이므로) 두 번째 자릿수를 더합니다. 75% 알파의 예로 BF를 사용합니다.
- B는 11이고 16을 곱하면 176이 됩니다.
- F는 15와 같습니다.
- 176 + 15 = 191
- 알파 값은 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)을 작성합니다.
HSL (색조, 채도, 밝기)
h1 {
color: hsl(344 79% 40%);
}
HSL은 색조, 채도, 밝기를 나타냅니다. 색조는 색상환의 값을 나타내며, 0~360도 (빨간색이 0 및 360도)입니다. 색조가 180도(50%)이면 파란색 범위에 해당합니다. 우리가 보는 색상의 출처입니다.
채도는 선택한 색조의 선명도를 나타냅니다. 채도가 완전히 제거된 색상 (채도 0%)은 그레이 스케일로 표시됩니다.
마지막으로 밝기는 추가된 빛의 흰색에서 검은색까지의 크기를 나타내는 매개변수입니다.
밝기가 100%이면 항상 흰색이 됩니다.
hsl() 색상 함수를 사용하여 hsl(0 0% 0%) 또는 hsl(0deg 0% 0%)를 작성하여 진정한 검은색을 정의합니다.
색조 매개변수는 색상환의 각도를 정의하며, 숫자 유형을 사용하는 경우 이 각도는 0~360입니다.
각도 유형 (0deg) 또는 (0turn)을 사용할 수도 있습니다.
채도와 밝기 모두 백분율로 정의됩니다.
알파는 색조, 채도, 밝기 매개변수 뒤에 /를 추가하거나 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)를 작성합니다.
고화질 색상
RGB 및 HSL은 sRGB 색상 공간에서 색상을 정의합니다. 최신 모니터는 이러한 형식으로 설명할 수 있는 것보다 훨씬 더 많은 색상과 sRGB 색상 영역 외부의 색상을 지원합니다. 다양한 CSS 함수를 사용하여 이러한 색상을 선택할 수 있습니다.
color() 함수
h1 {
color: color(srgb 0.9 0.2 0.4);
}
CSS color() 함수를 사용하면 특정 색상 공간에서 색상을 선택할 수 있습니다.
첫 번째 인수는 사용할 색상 공간으로, 다음 채널의 옵션을 정의합니다. rgb()와 마찬가지로 / 뒤에 0과 1 사이의 숫자 또는 비율을 설정하여 알파 채널을 설정할 수 있습니다.
예를 들어 이전 코드 스니펫의 어두운 빨간색 RGB 색상(rgb(183 21 64)로 정의됨)은 백분율로 rgb(72% 8% 25%)로 정의할 수 있습니다. color() 함수를 srgb 키워드와 함께 사용하여 color(srgb .72 .08 .25)로 동일한 색상을 지정할 수 있습니다.
srgb는 색상 공간을 설정하고 다음 세 인수가 빨간색, 녹색, 파란색이라고 알려줍니다. 값이 0~255가 아닌 0~1로 이동합니다.
rgb()와 마찬가지로 / 및 백분율 또는 0과 1 사이의 소수점으로 알파를 설정할 수 있습니다.
color() 함수와 함께 사용할 수 있는 색상 공간은 여러 가지가 있으며 각각 장점과 사용 사례가 다릅니다.
디스플레이 P3
h1 {
color: color(display-p3 0.9 0.2 0.4);
}
디스플레이 P3 색상 영역은 sRGB보다 50% 더 많은 색상을 포함합니다. color() 함수를 사용하여 Display P3 색상 공간으로 Display P3 색 영역의 모든 색상을 지정할 수 있습니다.
디스플레이 P3에서 검은색을 설정하려면 color(display-p3 0 0 0)로 정의합니다. color() 함수에 display-p3 색상 공간을 지정하면 color(srgb)와 마찬가지로 빨간색, 녹색, 파란색의 세 가지 채널이 있습니다. 하지만 채널 값은 더 넓은 색상 공간의 좌표를 나타내므로 동일한 채널 값이 다른 의미를 갖습니다.
color(srgb 1 .5 0)은 color(display-p3 0.93596 0.52724 0.1983)와 동일한 주황색입니다. 주황색을 sRGB 공간에서 color(display-p3 1 .5 0)로 확장하여 더 생생하게 만들 수 있습니다.
Oklab
Oklab은 밝기, a, b 채널이 있는 oklab() 함수로 정의됩니다. 색조와 밝기를 유지하면서 부드러운 그라디언트를 만들고 색상의 채도를 조정하는 데 유용합니다.
h1 {
color: oklab(75% 0.1 0.1)
}
밝기 채널은 0에서 1 또는 0%에서 100%로 이동합니다. 밝기가 0인 색상은 항상 검은색입니다.
a 채널이 -0.4에서 0.4 또는 0%에서 100%로 이동합니다. 값이 낮을수록 녹색이 더 진해지고 값이 높을수록 빨간색이 더 진해집니다.
b 채널이 -0.4에서 0.4 또는 0%에서 100%로 이동합니다. 값이 낮을수록 더 파랗고 값이 높을수록 더 노란색입니다.
OkLCh
OkLCh는 OKLab의 극점 또는 원통형 형식이며 밝기, 채도, 색조 채널로 정의됩니다. 지각적으로 균일한 방식으로 색상을 조정하는 데 유용합니다. 즉, 색조를 변경해도 색상이 밝게 표시되거나 채도가 높아지는 데 영향을 미치지 않습니다.
h1 {
color: oklch(80% 0.1 200)
}
HSL에서 밝기와 색조를 사용해 보았으며 채도는 채도와 유사합니다. oklch(0 0 0)를 사용하여 검은색을, oklch(1 0 0)를 사용하여 흰색을 설정할 수 있습니다.
밝기 채널은 0에서 1 또는 0%에서 100%로 이동합니다. 밝기가 0인 색상은 항상 검은색입니다.
크로마 채널은 색상의 선명도를 설정합니다. 0 또는 0% 이면 채도가 낮아지고 값이 클수록 색상이 더 많아집니다. 100% 값은 .4와 동일하지만 .4에 가까운 값을 사용하면 색상 범위를 빠르게 벗어날 수 있습니다.
색조는 hsl()와 마찬가지로 도 단위로 지정됩니다.
OkLCh는 Display P3와 같은 색상 영역으로 제한되지 않으므로 표시할 수 있는 색상을 만들어야 합니다. oklch(80% 50% 200)은 수치적으로 적절한 색상처럼 보이지만 밝은 파란색으로 디스플레이 P3 색상 영역 밖에 있습니다.
기타 스페이스
CSS에서 색상을 지정하는 방법에는 여러 가지가 있으며 모두 학습할 필요는 없습니다. rgb() 및 Hex 형식은 설계 도구와 기존 코드에서 일반적으로 사용되며 알아두면 유용합니다. 예측 가능하게 조작할 수 있는 형식에 익숙한 것도 도움이 됩니다. hsl 또는 oklch 값을 직접 변경하고 결과 색상을 파악할 수 있습니다.
더 많은 색상 및 새로운 스페이스에 액세스하기에서 자세히 알아보세요.
시스템 색상
보라색이나 청록색과 같은 이름이 지정된 색상 외에도 사용할 수 있는 특수 키워드가 있습니다.
transparent은 완전히 투명한 색상입니다.background-color의 초깃값이기도 합니다.currentColor는color속성의 문맥 계산된 동적 값입니다. 텍스트 색상이red이고border-color를currentColor로 설정하면red이 됩니다.currentColor를 정의하는 요소에 정의된 색상 값이 없는 경우 대신 계단식 적용에 의해currentColor가 계산됩니다.
색상 조작
사이트에 사용할 색상 팔레트가 있을 수 있지만 마우스 오버 상태, 테두리, 기타 UI 요소에는 이러한 색상의 변형이 필요할 수 있습니다. 각 색상을 지정할 수도 있지만 CSS는 색상을 변환하여 이러한 변형을 만드는 방법도 제공합니다.
color-mix()
두 색상을 혼합한 결과를 사용하려면 color-mix() 메서드를 사용하면 됩니다.
이는 색상을 흰색 또는 검은색과 혼합하여 더 밝거나 어두운 변형을 만드는 데 유용합니다.
color-mix()를 사용하려면 두 가지 색상, 혼합 방법 (보간 방법), 각 색상의 양을 정의해야 합니다.
색조가 있는 색상 공간의 경우 색상환을 어느 방향으로 이동할지도 결정할 수 있습니다. 기본값은 shorter 경로를 사용하는 것이지만 longer 또는 increasing 및 decreasing를 선택할 수도 있습니다.
색상 공간과 방향은 함께 보간 방법입니다.
혼합할 각 색상의 양을 지정할 수도 있습니다.
상대 색상 문법
상대 색상 문법을 사용하여 색상을 더 직접적으로 작업할 수도 있습니다. 이를 통해 임의의 색상을 가져와 계산을 실행하여 새 색상을 만들 수 있습니다.
h1 {
color: oklch(from red l c h);
}
oklch() 함수를 사용하면 밝기, 채도, 색조 채널을 사용할 수 있습니다. from 키워드 뒤에는 어떤 구문으로든 색상을 지정할 수 있습니다. 그러면 문자로 사용할 각 채널 값이 제공됩니다. 이렇게 하면 조정 없이 빨간색으로 표시됩니다.
조정하려면 calc() 함수를 사용하여 채널 값을 변경하거나 채널을 완전히 교체하면 됩니다. 여기서는 동일한 red 색상을 사용하지만 oklch(62% 0.25 29)로 정의합니다.
h1 {
color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}
밝기 채널은 62% / 2 또는 31%입니다. 채도 채널은 변경되지 않으므로 0.25입니다. 색조 채널은 180입니다. 이렇게 하면 새 어두운 녹색 색상인 oklch(31% 0.25 180)가 생성됩니다.
맞춤 속성을 입력 색상으로 사용하는 경우가 많습니다. 이렇게 하면 색상 변형을 동적으로 만들 수 있습니다.
어떤 색상 함수로도 이 작업을 할 수 있으며, 변경사항을 설명하는 채널이 있는 색상 함수로 이 작업을 하면 유용합니다. 예를 들어 색상의 밝기를 조정하려면 밝기 채널을 직접 변경할 수 있으므로 oklch 또는 hsl를 선택합니다.
h1 {
color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}
상대 색상 문법(RCS)을 사용하면 사이트에 사용할 색상 팔레트를 만들 수 있습니다.
색상 범위 외 색상
콘텐츠는 넓은 색상 범위를 지원하거나 지원하지 않을 수 있는 다양한 화면에 표시됩니다. 화면에서 지원되지 않는 색상을 지정하면 색상 범위 매핑이라는 프로세스를 거쳐 화면에 표시할 수 있는 유사한 색상을 찾습니다. 이러한 경우에 특정 색상을 정의하려면 color-gamut 미디어 쿼리를 사용하면 됩니다.
CSS 규칙에서 색상을 사용하는 위치
CSS 속성이 <color> 데이터 유형을 값으로 허용하는 경우 이전에 설명된 색상 표현 방법 중 어떤 방법이든 허용합니다.
텍스트 스타일을 지정하려면 color, text-shadow, text-decoration-color 속성을 사용하세요. 이 속성은 모두 색상을 값으로 허용하거나 색상을 값의 일부로 허용합니다.
배경의 경우 색상을 background 또는 background-color의 값으로 설정할 수 있습니다.
색상은 그라디언트(예: linear-gradient)에서도 사용할 수 있습니다.
그라데이션은 CSS에서 프로그래매틱 방식으로 정의할 수 있는 이미지 유형입니다.
그라데이션은 16진수, RGB, HSL과 같은 색상 형식의 조합으로 2개 이상의 색상을 허용합니다.
마지막으로 border-color 및 outline-color는 상자의 테두리와 윤곽선의 색상을 설정합니다.
box-shadow 속성은 색상도 값 중 하나로 허용합니다.
이해도 확인
색상에 대한 지식 테스트
다음 중 유효한 색상은 무엇인가요?
rbga(400 0 1)#0f08#OOFZ2rgb(255, 0, 0)hsl(180deg 50% 50%)hotpink잘못된 hsl 색상을 찾습니다.
hsl(5, 0%, 90%)hsl(.5turn 40% 60%)hsl(0, 0, 0)hsl(2rad 50% 50%)hsl(0 0% 0% / 20%)