웹 컬러

웹 색상은 월드 와이드 웹에서 웹 페이지를 표시하는 데 사용되는 색상으로, 세 가지 방법으로 설명할 수 있습니다: 색상은 RGB 삼중항, 16진수 형식(16진수) 또는 경우에 따라 일반적인 영어 이름에 따라 지정될 수 있습니다. 컬러 도구 또는 기타 그래픽 소프트웨어는 종종 컬러 값을 생성하는 데 사용됩니다. 일부 용도에서는 16진수 색상 코드를 선두 숫자 기호(#)^[1][2]를 사용한 표기로 지정합니다. 색상은 각각 8비트로 표시되는 빨간색, 녹색 및 파란색 구성 요소의 강도에 따라 지정됩니다. 따라서 sRGB 영역 내에서 웹 색상을 지정하는 데 사용되는 24비트와 그렇게 지정될 수 있는 16,777,216 색상이 있습니다.

sRGB 영역 밖의 색상은 빨간색, 녹색 및 파란색 구성 요소 중 하나 이상을 음수로 만들거나 100%를 초과하여 캐스캐이딩 스타일 시트에서 지정할 수 있으므로 색상 공간은 이론적으로 scRGB와 유사한 sRGB의 무제한 외삽입니다.^[3] 이러한 방식으로 sRGB가 아닌 색상을 지정하려면 RGB() 함수 호출 16진수 구문으로는 불가능합니다. 따라서 CSS를 사용하지 않는 기존 HTML 문서에서는 불가능합니다.

모자이크와 넷스케이프 네비게이터의 첫 번째 버전은 X11 색상 이름을 X 윈도우 시스템 응용 프로그램으로 시작한 것처럼 색상 목록의 기본으로 사용했습니다. 웹 색상은 특정 형광체 세트의 색도, 주어진 전달 곡선, 적응성 백색점 및 시청 조건을 연관시키는 명확한 비색 정의인 sRGB를 갖습니다.^[4] 색상 관리 없이도 렌더링이 지정된 값에 상당히 근접할 수 있도록 많은 실제 모니터 및 보기 조건과 유사하도록 선택되었습니다. 사용자 에이전트는 지정된 색상을 나타내는 충실도가 다릅니다. 고급 사용자 에이전트는 색 관리를 사용하여 색 충실도를 향상시킵니다. 이는 웹-투-프린트 애플리케이션에 특히 중요합니다.

육삼중주

16진수는 HTML, CSS, SVG 및 기타 컴퓨팅 응용 프로그램에서 색을 나타내기 위해 사용되는 6자리(또는 8자리), 3바이트(또는 4바이트)의 16진수입니다. 바이트는 색상의 빨간색, 녹색 및 파란색 구성 요소를 나타냅니다. 선택적인 네 번째 바이트는 알파 채널을 나타냅니다. 1바이트는 00~FF(16진수 표기) 범위의 숫자 또는 0~255(10진수 표기)를 나타냅니다. 이는 각 색상 성분의 최소(0)에서 최대(255) 강도를 나타냅니다. 따라서 웹 색상은 24비트 RGB 색상 체계에서 색상을 지정합니다. 16진수 3진수는 16진수 표기법으로 3바이트를 다음과 같은 순서로 연결하여 구성됩니다.

• 바이트 1: 빨간색 값(색상 빨간색)
• 바이트 2: 녹색 값(색상 녹색)
• 바이트 3: 블루 값(컬러 타입 블루)
• 바이트 4(옵션): 알파 값

예를 들어 빨간색/녹색/파란색 값이 10진수인 빨간색=36, 녹색=104, 파란색=160(회색-파란색)을 고려합니다. 10진수 36, 104 및 160은 각각 16진수 24, 68 및 A0에 해당합니다. 16진수는 6개의 16진수를 연결하여 얻어지는데, 이 예에서는 2468A0입니다.

세 가지 색상 값 중 하나가 10 헥스(십진법 16) 미만인 경우에는 선두 0으로 표시해야 삼중항이 항상 정확히 6자리를 가질 수 있습니다. 예를 들어, 십진수 3진수 4, 8, 16은 육진수 04, 08, 10으로 표시되며, 육진수 040810을 구성합니다.

이 시스템으로 표현할 수 있는 색상의 수는 16 또는 256 또는 2 = 16, 777,216입니다.

16진법

약칭된 세 자리(16진수) 또는 네 자리 형식을 사용할 수 ^[5]있지만 소프트웨어 또는 유지보수 스크립트가 긴 형식만 예상하는 경우 오류가 발생할 수 있습니다. 이 양식을 6자리 형태로 확장하면 각 자리를 반복하는 것처럼 간단합니다. 09C는 0099가 됩니다.다음 CSS 예에 제시된 CC:

.세 자릿수 { 색.: #09C;    } .여섯 자리   { 색.: #0099CC; } /* 위와 같은 색 */ 

이 약어 형태는 팔레트를 4,096색으로 줄이며, 이는 전체 6자리 형태(16,777,216색)를 사용하는 24비트 색상과 동일한 수준입니다. 이 제한은 많은 텍스트 기반 문서에 충분합니다.

RGB를 16진수로 변환

RGB 값은 일반적으로 0~255 범위에서 제공되며, 0~1 범위에 있으면 변환 전에 값에 255를 곱합니다. 이 숫자를 16으로 나누면 (정수 나눗셈, 나머지는 무시) 첫 번째 16진수(0에서 F 사이)가 나옵니다. 여기서 문자 A에서 F까지는 숫자 10에서 15를 나타냅니다. 자세한 내용은 16진수 참조). 나머지는 두 번째 16진수 숫자를 제공합니다. 예를 들어, RGB 값 201은 16개의 12개 그룹으로 나뉘며, 따라서 첫 번째 숫자는 C입니다. 9의 나머지는 16진수 C9를 나타냅니다. 이 과정은 세 가지 색상 값 각각에 대해 반복됩니다.

숫자 기반 간 변환은 휴대용 모델과 최신 운영 체제와 함께 제공되는 소프트웨어 계산기를 모두 포함하는 계산기의 공통 기능입니다. 특별히 색상 값을 변환하기 위한 웹 기반 도구도 사용할 수 있습니다.

HTML 색 이름

최근 W3C 색상명 규격은 기본 색상과 확장 색상을 구분합니다.^[6] HTML 및 XHTML에서 색상은 텍스트, 배경 색상, 프레임 경계, 테이블 및 개별 테이블 셀에 사용할 수 있습니다.^[7]

기본색상

기본 색상은 HTML 4.01 규격에 정의된 16가지 색상으로,^[8] 1999년에 승인되었으며 다음과 같습니다. (이 문맥에서 이름은 대소문자를 구분하지 않도록 정의됨)

이 16가지 색상은 sRGB로 분류되어 HTML 3.0 사양에 포함되었으며 "Windows VGA 팔레트에서 지원되는 표준 16가지 색상"이라고 언급했습니다.^[9]

확장색

확장 색상은 HTML 4.01, CSS 2.0, SVG 1.0 및 CSS3 사용자 인터페이스(CSS3 UI)의 사양을 병합한 결과입니다.^[6]

몇 가지 색상은 웹 브라우저에 의해 정의됩니다. 특정 브라우저가 이러한 모든 색상을 인식하지는 못하겠지만, 2005년 현재 모든 현대적이고 일반적인 그래픽 브라우저가 전체 색상 목록을 지원합니다. 이러한 색상 중 많은 부분은 X Window System과 함께 배포된 X11 색상 이름 목록에서 가져온 것입니다. 이러한 색상은 SVG 1.0에 의해 표준화되었으며 SVG Full 사용자 에이전트에서 허용됩니다. 그들은 SVG Tiny의 일부가 아닙니다.

X11 제품과 함께 제공되는 색상 목록은 구현마다 다르고 특정 HTML 이름(예: 녹색)과 충돌합니다. X11 색상은 sRGB가 아닌 단순 RGB(따라서 특별한 색 공간 없음)로 정의됩니다. 이는 X11(예: /usr/lib/X11/rgb.txt)에서 발견된 색상 목록을 웹의 색상을 선택하는 데 직접 사용해서는 안 된다는 것을 의미합니다.^[10]

CSS3 규격의 웹 "X11 색상" 목록은 16진수 및 10진수에 해당하는 색상과 함께 다음과 같습니다. W3C 표준의 알파벳 순서 목록을 비교합니다. 여기에는 아쿠아(HTML4/CSS 1.0 표준 명칭)와 시안(공통 sRGB 명칭), 푹시아(HTML4/CSS 1.0 표준 명칭)와 마젠타(공통 sRGB 명칭), 그레이(HTML4/CSS 1.0 표준 명칭), 그레이(HTML4/CSS 1.0 표준 명칭)의 공통 동의어가 포함됩니다.^[11][12]

CSS컬러

Cascading Style Sheets 사양은 Internet Explorer(IE) 3.0 및 Netscape Navigator 3.0에서 인식된 총 140개의 이름에 대해 HTML 4 사양과 동일한 수, 즉 16개의 HTML 색상 및 Netscape X11 색상 목록의 124개 색상을 정의합니다.^[13] Blooberry.com 은 오페라 2.1과 사파리 1도 넷스케이프의 확장된 140개의 색상 이름 목록을 포함했지만 나중에 윈도우 98에서 오페라 3.5에 포함되지 않은 14개의 이름을 발견했다고 언급합니다.

CSS 2.1에서는 16개의 HTML4 색상을 17번째 색상으로 하여 섹션에 '오렌지'(140개 중 하나) 색상이 추가되었습니다.^[15] CSS3.0 규격은 "HTML4 color keywords" 섹션에 오렌지를 포함하지 않았으며, 이는 "Basic color keywords"로 이름이 변경되었습니다.^[16] 같은 참고로, "SVG 컬러 키워드" 섹션은 이전 작업 초안에서 "X11 컬러 키워드"로 시작한 후 "Extended color 키워드"로 이름이 변경되었습니다.^[17] 레벨 4 컬러 모듈의 작업 초안은 기본 섹션과 확장 섹션을 간단한 "이름이 지정된 색상" 섹션에 함께 결합합니다.^[18]

CSS 2, SVG 및 CSS 2.1을 통해 웹 작성자는 운영 체제에서 값을 가져온 색상 이름인 시스템 색상을 사용할 수 있으며, 운영 체제에서 강조된 텍스트 색상을 선택하거나 툴팁 제어를 위한 배경 색상을 선택할 수 있습니다. 이를 통해 웹 작성자는 사용자 에이전트의 운영 체제에 맞게 콘텐츠를 스타일링할 수 있습니다.^[19] CSS3 컬러 모듈은 CSS3 UI 시스템 외관 속성에 유리하도록 시스템 색상의 사용을 감소시켰으며,^[20][21] 그 자체는 CSS3에서 삭제되었습니다.^[22]

CSS3 사양은 또한 HSL 색 공간 값을 스타일 시트에 도입합니다.^[23]

/* RGB 모델 */ p { 색.: #F00 } /* #rgb */ p { 색.: #FF0000 } /* #rrggbb */ p { 색.: rgb(255, 0, 0) } /* 정수 범위 0 - 255 */ p { 색.: rgb(100%, 0%, 0%) } /* 플로트 범위 0.0% - 100.0% */  /* 알파 채널이 있는 RGB, CSS3에 추가 */ p { 색.: rgba(255, 0, 0, 0.5) } /* 0.5 불투명도, 반transpa렌트 */  /* HSL 모델, CSS3에 추가 */ p { 색.: hsl(0, 100%, 50%) } /* 빨간색 */ p { 색.: hsl(120, 100%, 50%) } /* 녹색*/ p { 색.: hsl(120, 100%, 25%) } /* 짙은 녹색 */ p { 색.: hsl(120, 100%, 75%) } /* 연두색 */ p { 색.: hsl(120, 50%, 50%) } /* 파스텔 그린 */  /* 알파 채널이 있는 HSL 모델 */ p { 색.: hsla(120, 100%, 50%, 1) } /* 녹색*/ p { 색.: hsla(120, 100%, 50%, 0.5) } /* 반 transpa렌트 그린 */ p { 색.: hsla(120, 100%, 50%, 0.1) } /* 매우 투명한 녹색 */ 

CSS도 특별한 색상을 지원합니다. transparent, 이 값은 알파 값이 0임을 나타냅니다. 기본적으로, transparent 보이지 않는 공칭 블랙으로 렌더링됩니다. rgba(0, 0, 0, 0). CSS1에 도입되었지만 버전에 따라 사용 범위가 확장되었습니다.^[23]

CSS 컬러 4

CSS 컬러 사양의 레벨 4는 몇 가지 새로운 CSS 컬러 포맷을 도입했습니다.^[24]

색상을 작성하는 새로운 방법 외에도 색상 구배에서 잘 알려진 문제를 해결하기 위한 첫 단계인 비-sRGB 색상 공간에서 색상을 혼합하는 개념도 소개합니다. 색 이론과 색역 매핑과 같은 일반적인 작동을 설명하는 일부 섹션도 구현을 돕기 위해 추가되었습니다.^[24]

기기독립색

CSS Color 4에는 다음과 같은 여러 가지 장치 독립 색상 형식이 도입되어 있으며, 모든 가시 색상을 화면으로 표시할 수 있습니다.^[25]

• 실험실과 LCH
• OKLab 및 OKLCH(Lab/LCH보다 선호)^{[24]: §§9.2–3}
• XYZ(D50 또는 D65[기본값])

미리 정의된 색 공간

sRGB보다 넓은 영역의 RGB 공간도 이번 신제품을 통해 대거 선보였습니다. color() 기능:^[25]

• 디스플레이 P3
• 프로포토
• REC.2020
• 어도비 1998 RGB

sRGB의 선형화된 변형도 색상 혼합에 대해 정의됩니다.^[24]

다른 형식

2014년 6월 21일, CSS WG는 2014년 6월 7일에 사망한 에릭 마이어의 딸 레베카를 기념하기 위해 레베카 퍼플(RebeccaPurple)이라는 색상을 편집자의 디자인 모듈 레벨 4에 추가했습니다.^[26]

CSS4는 HSL/HSV의 대안으로 HWB 컬러 모델도 선보입니다.^[18]

CSS 컬러 5

CSS Color 5^[27] 사양 초안에는 다음과 같은 기존 색상을 혼합하고 조작하기 위한 구문이 소개되어 있습니다.

• A color-mix() 색을 섞는 기능
• 기존 색상의 성분을 조작하기 위한 상대 색상 구문

사용자 지정 색 공간은 ICC 프로파일을 통해서도 지원됩니다. 이를 통해 웹 페이지에서 CMYK를 사용할 수 있습니다.^[27]

웹에 안전한 색상

1990년대 중반에는 많은 디스플레이가 256가지 색상만 표시할 수 있었습니다.^[28] 이들은 하드웨어에 의해 지시되거나 "컬러 테이블"에 의해 변경 가능할 수 있습니다. 사용할 수 없는 색상(예: 이미지에서)이 발견되면 다른 색상을 사용해야 했습니다. 가장 가까운 색상을 사용하거나 디더링을 사용하여 수행할 수 있습니다.

"표준" 색상 팔레트를 만들기 위한 다양한 시도가 있었습니다. 256색 디스플레이에 망설임 없이 표시할 수 있는 색상 세트가 필요했습니다. 컴퓨터 운영 체제가 일반적으로 16~20개의 색상을 자체적으로 사용하도록 예약했기 때문에 216번이 선택되었습니다. 또한 동일한 간격으로 6개의 빨간색, 녹색 및 파란색 음영(6 × 6 × 6 = 216)을 허용하기 때문에 선택되었습니다. 각각 00에서 FF까지(두 한도 모두 포함).

색상 목록은 마치 디더링에 대한 면역성을 갖게 하는 특별한 특성을 가진 것처럼 표시되지만 256색 디스플레이의 응용 프로그램은 실제로 선택한 색상의 팔레트를 설정하여 나머지를 디더링할 수 있습니다. 이 색상은 다양한 브라우저 애플리케이션에서 선택한 팔레트와 일치하기 때문에 특별히 선택되었습니다. 다른 브라우저에서 사용되는 팔레트는 크게 다르지 않았습니다.^{[citation needed]}

웹-세이프 색상은 응용 프로그램 간에 팔레트를 공유하는 X11과 같은 시스템에서는 더 작은 색 큐브(5×5×5 또는 4×4)가 브라우저에 의해 할당되는 단점이 있었습니다. 더 큰 범위의 색상을 가진 이미지를 제공하고 브라우저가 이중 양자화의 품질 손실을 겪지 않고 필요한 경우 색상 공간을 양자화할 수 있도록 함으로써 다른 결과를 얻었습니다.

2000년대 들어 개인용 컴퓨터에서 256색 디스플레이의 사용이 급감하면서 24비트(TrueColor) 디스플레이를 선호하게 되었고,^[29] "웹 세이프(web-safe)" 색상의 사용은 실용적으로 사용되지 않게 되었습니다.

"web-safe" 색상은 모두 표준 이름이 있는 것은 아니지만 RGB 삼중항으로 각각 지정할 수 있습니다. 각 구성 요소(적색, 녹색 및 파란색)는 다음 표에서 6개 값 중 하나를 가져옵니다(전체 24비트 색상의 각 구성 요소에 대해 사용 가능한 256개 값 중 하나).

다음 표는 모든 "웹 안전" 색상을 보여줍니다. 웹 안전 팔레트의 한 가지 단점은 웹 페이지 배경에 대한 밝은 색상 범위가 작은 반면 가장 어두운 두 가지와 같은 범위의 낮은 끝 부분의 강도는 서로 비슷하여 구별하기가 어렵습니다. "*"(위험) 옆에 있는 값은 "정말 안전한 팔레트"의 일부입니다. 아래의 가장 안전한 웹 색상을 참조하십시오.

색상표

나열된 각 컬러 코드는 RGB 값의 약자입니다. 예를 들어 코드 609는 RGB 코드 102-0-153 또는 HEX 코드 #660099와 동등합니다.

가장 안전한 웹 색상

216색 팔레트가 개발되었을 때 8비트 컬러 디스플레이가 많았기 때문에 디자이너들은 웹사이트에 이러한 216개의 "웹 세이프" 색상을 고수하도록 권장되었습니다. 데이비드 렌과 해들리 스턴은 웹 세이프 팔레트의 216가지 색상 중 22가지 색상만 16비트 컴퓨터 디스플레이에 일관성 없는 재매핑 없이 안정적으로 표시된다는 사실을 발견했습니다. 그들은 이 22가지 색상을 "정말 안전한 팔레트"라고 불렀습니다. 그것은 주로 녹색, 노란색, 그리고 청록색의 색조로 구성되어 있습니다.^[30][31]

접근성

색상선택

일부 브라우저 및 장치는 색상을 지원하지 않습니다. 이러한 디스플레이 또는 블라인드 및 색맹 사용자의 경우 색상에 따른 웹 콘텐츠를 사용할 수 없거나 사용하기 어려울 수 있습니다.

(브라우저의 기본 색상을 호출하기 위해) 색상을 지정하지 않거나 배경 및 모든 전경 색상(예: 일반 텍스트, 방문하지 않은 링크, 호버 링크, 활성 링크 및 방문한 링크의 색상)을 모두 지정하여 흰색 효과의 검은색 또는 흰색을 방지해야 합니다.^[32]

색 대비

Web Content Accessibility Guidelines에서는 텍스트의 상대적인 휘도와 배경색^[33] 사이의 대비비를 4.5:1 이상 또는 큰 텍스트의 경우 3:1 이상을 권장합니다. 향상된 접근성을 위해서는 7:1 이상의 명암비가 필요합니다.

그러나 접근성 문제를 해결하는 것은 단순히 대비 비율을 높이는 문제가 아닙니다. 웹 접근성 이니셔티브의 보고서에서 알 수 있듯이 난독증 판독기는 최대치 미만의 대비 비율로 제공되는 것이 더 좋습니다.^[34] 이들이 언급하는 권장 사항은 오프화이트(#FFFE5)의 오프블랙(#0A0A0A)과 크림(#FAFAC8)의 블랙(#0000)의 콘트라스트비가 각각 11.7:1과 20.3:1입니다. 다른 색상 쌍 중 짙은 녹색(#A0A000)의 갈색(#2800)은 WCAG 권고치보다 낮은 3.24:1의 명암비를 가지며, 밝은 녹색(#B9B900)의 짙은 갈색(#1E1E00)은 4.54:1의 명암비를 가지며, 노란색(#FFF00)의 청색(#00007D)은 11.4:1의 명암비를 갖습니다. 보고서에 이름이 지정된 색상은 동일한 이름의 웹 색상과 다른 색상 값을 사용합니다.

참고 항목

참고문헌

외부 링크

• MDN 웹 문서의 CSS 색상 값
• CSS2.1 색상 규격
• 컬리의 웹 컬러