상위 질문
타임라인
채팅
관점
웹 색상
월드 와이드 웹에서 웹 페이지 표시에 사용되는 색 위키백과, 무료 백과사전
Remove ads
웹 색상(web colors)은 월드 와이드 웹에서 웹 페이지를 표시하는 데 사용되는 색으로, 다음 세 가지 방법으로 설명할 수 있다. 색은 RGB 삼중색으로, 십육진법 형식(헥스 삼중색)으로 또는 어떤 경우에는 일반적인 영어 이름으로 지정될 수 있다. 색상 도구 또는 기타 그래픽 소프트웨어는 종종 색상 값을 생성하는 데 사용된다. 어떤 경우에는 선행 번호 기호(#)를 사용하는 표기법으로 십육진법 색상 코드가 지정된다.[1][2] 색은 빨강, 초록, 파랑 구성 요소의 강도에 따라 지정되며, 각 구성 요소는 8 비트로 표현된다. 따라서 SRGB 영역 내에서 웹 색상을 지정하는 데 24비트가 사용되며, 16,777,216가지 색상을 그렇게 지정할 수 있다.
sRGB 영역 외부의 색상은 캐스케이딩 스타일 시트에서 빨강, 초록, 파랑 구성 요소 중 하나 이상을 음수 또는 100%보다 크게 만들어 지정할 수 있으므로 색 공간은 이론적으로 scRGB와 유사한 sRGB의 무한 확장이다.[3] 이런 방식으로 비 sRGB 색상을 지정하려면 RGB() 함수 호출이 필요하다. 이는 십육진법 구문으로는 불가능하다(따라서 CSS를 사용하지 않는 레거시 HTML 문서에서는 불가능하다).
모자이크 및 넷스케이프 내비게이터의 첫 번째 버전은 둘 다 X 윈도 시스템 응용 프로그램으로 시작했기 때문에 X11 색 이름을 색상 목록의 기반으로 사용했다. 웹 색상은 특정 형광체 세트, 주어진 전송 곡선, 적응형 백색점 및 시청 조건의 색도를 연결하는 SRGB라는 명확한 측색학적 정의를 갖는다.[4] 이는 많은 실제 컴퓨터 모니터 및 시청 조건과 유사하도록 선택되어 색 관리 없이도 렌더링이 지정된 값에 상당히 가깝게 허용된다. 사용자 에이전트는 지정된 색상을 표현하는 충실도에서 다양하다. 고급 사용자 에이전트는 색상 관리를 사용하여 더 나은 색상 충실도를 제공한다. 이는 Web-to-print 응용 프로그램에 특히 중요하다.
Remove ads
헥스 삼중색
요약
관점
헥스 삼중색은 HTML, CSS, SVG 및 기타 컴퓨팅 응용 프로그램에서 색상을 나타내는 데 사용되는 6자리(또는 8자리), 3바이트 (또는 4바이트) 십육진법 숫자이다. 바이트는 색상의 빨강, 초록, 파랑 구성 요소를 나타낸다. 선택 사항인 네 번째 바이트는 알파 채널을 참조한다. 1바이트는 00에서 FF (십육진법 표기), 또는 십진법으로 0에서 255 범위의 숫자를 나타낸다. 이는 각 색상 구성 요소의 최소 (0)에서 최대 (255) 강도를 나타낸다. 따라서 웹 색상은 24비트 RGB 색상 체계로 색상을 지정한다. 헥스 삼중색은 다음 순서로 세 바이트를 십육진법 표기법으로 연결하여 형성된다.
- 바이트 1: 빨강 값 (색상 유형 빨강)
- 바이트 2: 초록 값 (색상 유형 초록)
- 바이트 3: 파랑 값 (색상 유형 파랑)
- 바이트 4 (선택 사항): 알파 값
예를 들어, 빨강/초록/파랑 값이 십진수 123, 58, 30인 색상(하드우드 갈색)을 고려해 보자. 십진수 123, 58, 30은 각각 십육진수 7B, 3A, 1E와 동일하다. 헥스 삼중색은 이 예시에서 7B3A1E로 여섯 개의 십육진수 숫자를 함께 연결하여 얻는다.
세 가지 색상 값 중 하나라도 10진수 (16진수) 미만인 경우, 삼중색이 항상 정확히 6자리로 유지되도록 앞에 0을 붙여야 한다. 예를 들어, 십진수 삼중색 4, 8, 16은 16진수 04, 08, 10으로 표현되며, 16진수 삼중색 040810을 형성한다.
이 시스템으로 표현할 수 있는 색상의 수는 2563, 166 또는 224 = 16,777,216가지이다.
약식 십육진법 형식
세 자리(16진수) 또는 네 자리 약식 형식을 사용할 수 있지만,[5] 소프트웨어 또는 유지보수 스크립트가 긴 형식만 예상하는 경우 오류가 발생할 수 있다. 이 형식을 6자리 형식으로 확장하는 것은 각 숫자를 반복하는 것만큼 간단하다. 다음 캐스케이딩 스타일 시트 예시에서 09C는 0099CC가 된다.
.threedigit { color: #09C; }
.sixdigit { color: #0099CC; } /* same color as above */
이 단축 형식은 팔레트를 4,096가지 색상으로 줄이며, 이는 6자리 전체 형식을 사용하는 24비트 색상(16,777,216가지 색상)과 달리 12비트 색상에 해당한다. 이 제한은 많은 텍스트 기반 문서에 충분하다.
RGB를 십육진법으로 변환하기
RGB 값은 일반적으로 0-255 범위로 주어진다. 만약 0-1 범위라면, 변환 전에 255를 곱한다. 이 숫자를 16으로 나눈 값(정수 나눗셈; 나머지는 무시)은 첫 번째 16진수 숫자(0에서 F 사이, 여기서 A부터 F는 숫자 10에서 15를 나타낸다. 자세한 내용은 십육진법 참조)를 준다. 나머지는 두 번째 16진수 숫자를 준다. 예를 들어, 58의 RGB 값(헥스 삼중색의 이전 예시에서 보여진 대로)은 16의 3개 그룹으로 나뉘므로 첫 번째 숫자는 3이다. 나머지 10은 16진수 3A를 준다. 마찬가지로 RGB 값 201은 16의 12개 그룹으로 나뉘므로 첫 번째 숫자는 C이다. 나머지 9는 16진수 C9를 준다. 이 과정은 세 가지 색상 값 각각에 대해 반복된다.
진수 간 변환은 휴대용 모델과 대부분의 최신 운영체제에 번들로 제공되는 소프트웨어 계산기를 포함한 계산기의 일반적인 기능이다. 색상 값 변환을 위한 웹 기반 도구도 사용할 수 있다.
Remove ads
HTML 색 이름
요약
관점
최근 W3C 색상 이름 사양은 기본 색상과 확장 색상을 구분한다.[6] HTML 및 XHTML에서 색상은 텍스트, 배경색, 프레임 테두리, 표 및 개별 표 셀에 사용될 수 있다.[7]
기본 색상
기본 색상은 1999년에 비준된 HTML 4.01 사양에 정의된 16가지 색상으로,[8] 다음과 같다(이 맥락에서 이름은 대소문자를 구분하지 않는다).
이 16가지 색상은 sRGB로 지정되어 HTML 3.0 사양에 포함되었으며, 이는 "윈도우 VGA 팔레트에서 지원되는 표준 16가지 색상"이라고 언급했다.[9]
확장 색상
확장 색상은 HTML 4.01, CSS 2.0, SVG 1.0 및 CSS3 사용자 인터페이스(CSS3 UI)의 사양을 병합한 결과이다.[6]
여러 색상은 웹 브라우저에 의해 정의된다. 특정 브라우저는 이 모든 색상을 인식하지 못할 수도 있지만, 2005년 현재 모든 현대적이고 일반적인 그래픽 브라우저는 전체 색상 목록을 지원한다. 이 색상 중 다수는 X 윈도 시스템과 함께 배포되는 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 표준 이름)과 그레이.[11][12]
Remove ads
CSS 색상
요약
관점
캐스케이딩 스타일 시트 사양은 HTML 4 사양과 동일한 수의 명명된 색상, 즉 16가지 HTML 색상과 넷스케이프 X11 색상 목록의 124가지 색상을 정의하여 총 140가지 이름을 인터넷 익스플로러(IE) 3.0 및 넷스케이프 내비게이터 3.0이 인식했다.[13] Blooberry.com은 Opera 2.1 및 Safari 1도 넷스케이프의 확장된 140가지 색상 이름 목록을 포함했지만, 나중에 Windows 98의 Opera 3.5에는 포함되지 않은 14가지 이름을 발견했다고 언급한다.[14]
CSS 2.1에서 '주황' 색상(140가지 중 하나)은 16가지 HTML4 색상 섹션에 17번째 색상으로 추가되었다.[15] CSS3.0 사양에는 "HTML4 색상 키워드" 섹션에 주황색이 포함되지 않았으며, 이 섹션은 "기본 색상 키워드"로 이름이 변경되었다.[16] 동일한 참조에서 "SVG 색상 키워드" 섹션은 이전 작업 초안에서 "X11 색상 키워드"로 시작된 후 "확장 색상 키워드"로 이름이 변경되었다.[17] 레벨 4 색상 모듈의 작업 초안은 기본 및 확장 섹션을 단순한 "명명된 색상" 섹션으로 결합한다.[18] CSS 2, 스케일러블 벡터 그래픽스 및 CSS 2.1은 웹 작성자가 시스템 색상을 사용하도록 허용한다. 시스템 색상은 운영체제에서 값을 가져오는 색상 이름으로, 운영체제의 강조 표시된 텍스트 색상 또는 도구 설명 컨트롤의 배경 색상을 선택한다. 이를 통해 웹 작성자는 사용자 에이전트의 운영체제에 맞춰 콘텐츠 스타일을 지정할 수 있다.[19] CSS3 색상 모듈은 CSS3 UI 시스템 외관 속성을 선호하여 시스템 색상 사용을 비권장했다.[20][21] 이는 나중에 CSS3에서 삭제되었다.[22]
CSS3 사양은 또한 HSL 색 공간 값을 스타일 시트에 도입한다.[23]
/* RGB 모델 */
p { color: #F00 } /* #rgb */
p { color: #FF0000 } /* #rrggbb */
p { color: rgb(255, 0, 0) } /* 정수 범위 0 - 255 */
p { color: rgb(100%, 0%, 0%) } /* 부동 소수점 범위 0.0% - 100.0% */
/* CSS3에 추가된 알파 채널을 포함한 RGB */
p { color: rgba(255, 0, 0, 0.5) } /* 50% 불투명도, 반투명 */
/* CSS3에 추가된 HSL 모델 */
p { color: hsl(0, 100%, 50%) } /* 빨강 */
p { color: hsl(120, 100%, 50%) } /* 초록 */
p { color: hsl(120, 100%, 25%) } /* 어두운 초록 */
p { color: hsl(120, 100%, 75%) } /* 밝은 초록 */
p { color: hsl(120, 50%, 50%) } /* 파스텔 초록 */
/* 알파 채널을 포함한 HSL 모델 */
p { color: hsla(120, 100%, 50%, 1) } /* 초록 */
p { color: hsla(120, 100%, 50%, 0.5) } /* 반투명 초록 */
p { color: hsla(120, 100%, 50%, 0.1) } /* 매우 투명한 초록 */
CSS는 또한 알파 값이 0인 특수 색상 transparent를 지원한다. 기본적으로 transparent는 보이지 않는 명목상의 검정색으로 렌더링된다: rgba(0, 0, 0, 0). 이는 CSS1에 도입되었지만 버전이 지남에 따라 사용 범위가 확장되었다.[23]
CSS 컬러 4
CSS 색상 사양의 레벨 4에서는 몇 가지 새로운 CSS 색상 형식을 도입했다.[24]
새로운 색상 작성 방법 외에도 비-SRGB 색상 공간에서 색상을 혼합하는 개념을 도입하여 색상 그라데이션의 잘 알려진 문제를 해결하는 첫 단계를 제공한다. 색상 이론 및 색역 매핑과 같은 일반적인 작업을 설명하는 일부 섹션도 구현을 돕기 위해 추가되었다.[24]
p { color: #F80A } /* #rgba */
p { color: #FF8800AA } /* #rrggbbaa */
p { color: rgb(255.0 136.0 0.0 / 0.667) } /* 8비트 이상의 정밀도를 위한 부동 소수점 범위 0.0 - 255.0 */
p { color: rgb(100% 53.3% 0% / 66.7%) } /* 부동 소수점 범위 0.0% - 100.0% */
p { color: color(sRGB 1 0.533 0 / 0.667) } /* 색상 공간을 포함한 color() 함수 */
장치 독립 색상
CSS 색상 4는 장치 독립 색상을 위한 여러 가지 다른 형식을 도입하여 (지원되는 화면에서) 가시 색상 전체를 표시할 수 있다.[25]
- CIE Lab 및 LCH
- OKLab 및 OKLCH (Lab/LCH보다 선호됨)[24](§§9.2–3)
- XYZ (D50 또는 D65 [기본값])
사전 정의된 색상 공간
SRGB보다 더 넓은 색역을 가진 여러 RGB 공간도 새로운 color() 함수를 통해 도입되었다.[25]
sRGB의 선형화된 변형도 색상 혼합을 위해 정의된다.[24]
기타 형식
2014년 6월 21일, CSS WG는 2014년 6월 7일 여섯 번째 생일에 사망한 에릭 A. 마이어의 딸 레베카를 추모하기 위해 색상 모듈 레벨 4의 편집자 초안에 레베카퍼플 색상을 추가했다.[26] CSS4는 또한 HSL/HSV의 대안으로 HWB 색 모델을 도입한다.[18]
CSS 컬러 5
초안 CSS 색상 5[27] 사양은 기존 색상을 혼합하고 조작하기 위한 구문을 도입하며 다음을 포함한다.
- 색상 혼합을 위한
color-mix()함수 - 기존 색상의 구성 요소를 조작하기 위한 상대 색상 구문
사용자 정의 색상 공간도 ICC 프로파일을 통해 지원된다. 이를 통해 웹 페이지에서 CMYK를 사용할 수 있다.[27]
Remove ads
웹 안전 색상
요약
관점
1990년대 중반, 많은 디스플레이는 하드웨어에 의해 결정되거나 "색상 테이블"에 의해 변경될 수 있는 256가지 색상만 표시할 수 있었다.[28] 사용할 수 없는 색상이 발견되면 (예: 이미지에서) 다른 색상을 사용해야 했다. 이는 가장 가까운 색상을 사용하거나 디더링을 사용하여 수행되었다.
"표준" 색상 팔레트를 만들기 위한 다양한 시도가 있었다. 256색 디스플레이에서 디더링 없이 표시될 수 있는 색상 집합이 필요했다. 216이라는 숫자는 부분적으로 컴퓨터 운영 체제가 일반적으로 16~20가지 색상을 자체 용도로 예약했기 때문에 선택되었으며, 각 색상이 00에서 FF (두 제한 모두 포함)까지 정확히 6가지 균등 간격의 빨강, 초록, 파랑 음영(6 × 6 × 6 = 216)을 허용했기 때문에 선택되었다.
색상 목록은 디더링에 면역이 되는 특별한 속성을 가진 것처럼 제시되었지만, 256색 디스플레이에서는 응용 프로그램이 원하는 색상 선택 팔레트를 실제로 설정할 수 있었고 나머지는 디더링했다. 이 색상들은 특히 다양한 브라우저 응용 프로그램에서 선택한 팔레트와 일치했기 때문에 선택되었다. 다른 브라우저에서 사용되는 팔레트는 크게 다르지 않았다.
"웹 안전" 색상은 X11과 같이 팔레트가 응용 프로그램 간에 공유되는 시스템에서 브라우저가 더 작은 색상 큐브(5×5×5 또는 4×4×4)를 할당하여 "웹 안전" 색상이 그러한 시스템에서 디더링된다는 결함이 있었다. 더 넓은 범위의 색상을 가진 이미지를 제공하고 브라우저가 필요한 경우 색상 공간을 양자화하도록 허용하면 이중 양자화의 품질 손실을 겪지 않고 다른 결과를 얻을 수 있었다.
2000년대 내내 개인용 컴퓨터에서 256색 디스플레이 사용이 24비트 (트루컬러) 디스플레이를 선호하여 급격히 줄어들었고,[29] "웹 안전" 색상 사용은 사실상 폐기되었다.
"웹 안전" 색상이 모두 표준 이름을 가지고 있지는 않지만, 각각은 RGB 삼중색으로 지정할 수 있다. 각 구성 요소(빨강, 초록, 파랑)는 아래 표에서 6가지 값 중 하나를 취한다(전체 24비트 색상에서 각 구성 요소에 사용 가능한 256가지 값 중에서).
다음 표는 모든 "웹 안전" 색상을 보여준다. 웹 안전 팔레트의 한 가지 단점은 웹 페이지 배경을 위한 밝은 색상의 범위가 작다는 것이다. 반면, 범위의 낮은 끝에 있는 강도, 예를 들어 가장 어두운 두 가지는 서로 비슷하여 구별하기 어렵다. "*" (별표)로 표시된 값은 "정말 안전한 팔레트"의 일부이다. 아래 가장 안전한 웹 색상을 참조하라.
색상표
| *000* | 300 | 600 | 900 | C00 | *F00* |
| *003* | 303 | 603 | 903 | C03 | *F03* |
| 006 | 306 | 606 | 906 | C06 | F06 |
| 009 | 309 | 609 | 909 | C09 | F09 |
| 00C | 30C | 60C | 90C | C0C | F0C |
| *00F* | 30F | 60F | 90F | C0F | *F0F* |
| 030 | 330 | 630 | 930 | C30 | F30 |
| 033 | 333 | 633 | 933 | C33 | F33 |
| 036 | 336 | 636 | 936 | C36 | F36 |
| 039 | 339 | 639 | 939 | C39 | F39 |
| 03C | 33C | 63C | 93C | C3C | F3C |
| 03F | 33F | 63F | 93F | C3F | F3F |
| 060 | 360 | 660 | 960 | C60 | F60 |
| 063 | 363 | 663 | 963 | C63 | F63 |
| 066 | 366 | 666 | 966 | C66 | F66 |
| 069 | 369 | 669 | 969 | C69 | F69 |
| 06C | 36C | 66C | 96C | C6C | F6C |
| 06F | 36F | 66F | 96F | C6F | F6F |
| 090 | 390 | 690 | 990 | C90 | F90 |
| 093 | 393 | 693 | 993 | C93 | F93 |
| 096 | 396 | 696 | 996 | C96 | F96 |
| 099 | 399 | 699 | 999 | C99 | F99 |
| 09C | 39C | 69C | 99C | C9C | F9C |
| 09F | 39F | 69F | 99F | C9F | F9F |
| 0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 |
| 0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
| 0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 |
| 0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
| 0CC | 3CC | 6CC | 9CC | CCC | FCC |
| 0CF | 3CF | 6CF | 9CF | CCF | FCF |
| *0F0* | 3F0 | *6F0* | 9F0 | CF0 | *FF0* |
| 0F3 | *3F3* | *6F3* | 9F3 | CF3 | *FF3* |
| *0F6* | *3F6* | 6F6 | 9F6 | *CF6* | *FF6* |
| 0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
| *0FC* | *3FC* | 6FC | 9FC | CFC | FFC |
| *0FF* | *3FF* | *6FF* | 9FF | CFF | *FFF* |
나열된 각 색상 코드는 RGB 값을 약어로 나타낸 것이다. 예를 들어, 코드 609는 RGB 코드 102-0-153 또는 HEX 코드 #660099와 같다.
가장 안전한 웹 색상
디자이너들은 216색 팔레트가 개발될 당시 8비트 컬러 디스플레이가 많았기 때문에 웹사이트에서 이 216가지 "웹 안전" 색상을 고수하도록 권장되었다. 데이비드 렌과 해들리 스턴은 웹 안전 팔레트의 216가지 색상 중 22가지 색상만이 16비트 컴퓨터 디스플레이에서 일관되지 않은 재매핑 없이 안정적으로 표시된다는 사실을 발견했다. 그들은 이 22가지 색상을 "정말 안전한 팔레트"라고 불렀다. 이 팔레트는 주로 녹색, 노란색, 시안색의 음영으로 구성되어 있다.[30][31]
Remove ads
접근성
색상 선택
일부 브라우저 및 장치는 색상을 지원하지 않는다. 이러한 디스플레이 또는 시각 장애인 및 색각 이상 사용자의 경우 색상에 의존하는 웹 콘텐츠는 사용할 수 없거나 사용하기 어려울 수 있다.
검정 바탕에 검정 또는 하양 바탕에 하양 효과를 피하기 위해 색상을 지정하지 않거나(브라우저의 기본 색상을 호출하기 위해), 배경색과 모든 전경색(일반 텍스트, 방문하지 않은 링크, 마우스 오버 링크, 활성 링크, 방문한 링크의 색상 등)을 모두 지정해야 한다.[32]
색상 대비
웹 콘텐츠 접근성 가이드라인은 텍스트의 상대 휘도와 배경색 사이에 최소 4.5:1의 대비 비율 또는 큰 텍스트의 경우 최소 3:1을 권장한다.[33] 향상된 접근성을 위해서는 7:1보다 큰 대비 비율이 필요하다.
그러나 접근성 문제를 해결하는 것은 단순히 대비 비율을 높이는 문제가 아니다. 웹 접근성 이니셔티브에 대한 보고서가 나타내는 바와 같이,[34] 난독증 독자는 최대 대비 비율 미만의 대비 비율에서 더 잘 읽는다. 그들이 언급하는 오프-블랙(#0A0A0A)에 오프-화이트(#FFFFE5) 및 블랙(#000000)에 크림색(#FAFAC8)은 각각 11.7:1 및 20.3:1의 대비 비율을 갖는다. 다른 색상 쌍 중에는 어두운 갈색(#282800)에 어두운 녹색(#A0A000)은 3.24:1의 대비 비율을 가지며, 이는 WCAG 권장 사항보다 작다. 어두운 갈색(#1E1E00)에 밝은 녹색(#B9B900)은 4.54:1의 대비 비율을 가지며, 파랑(#00007D)에 노랑(#FFFF00)은 11.4:1의 대비 비율을 갖는다. 보고서에 언급된 색상은 동일한 이름의 웹 색상과 다른 색상 값을 사용한다.
Remove ads
같이 보기
- 어도비 RGB 색 공간
- CIE 1931 색 공간
- CIE L*a*b* 색 공간
- 색상 선택기
- 색상 팔레트 목록
- 색상 목록
- 음영별 색상 목록
- 프로포토 RGB
- RGB 색 공간
- scRGB
- 광역색 RGB 색 공간
각주
외부 링크
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads