HTML의 표준 색상. 스타일의 색상은 16진수 값, 이름, RGB, RGBA, HSL, HSLA 형식 등 다양한 방법으로 지정할 수 있습니다.
16진수는 색상을 지정하는 데 사용됩니다. 16진법은 10진법과 달리 이름에서 알 수 있듯이 숫자 16을 기반으로 합니다. 숫자는 다음과 같습니다: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C, D, E, F. 10부터 15까지의 숫자는 라틴 문자로 대체됩니다. 16진법에서 15보다 큰 숫자는 두 숫자를 하나로 결합하여 구성됩니다. 예를 들어, 10진수 255는 16진수 FF에 해당합니다. 숫자 체계를 결정할 때 혼란을 피하기 위해 해시 기호 #이 16진수 앞에 배치됩니다(예: #666999). 빨간색, 녹색, 파란색의 세 가지 색상은 각각 00에서 FF까지의 값을 가질 수 있습니다. 따라서 색상 기호는 세 가지 구성 요소 #rrggbb로 나누어집니다. 여기서 처음 두 기호는 색상의 빨간색 구성 요소를 나타내고 중간 두 개는 녹색, 마지막 두 개는 파란색을 나타냅니다. 각 문자를 두 배로 늘려야 하는 축약형 #rgb를 사용할 수 있습니다. 따라서 #fe0 항목은 #ffee00으로 간주되어야 합니다.
이름으로
| 인터넷 익스플로러 | 크롬 | 오페라 | 원정 여행 | 파이어폭스 | 기계적 인조 인간 | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
브라우저는 이름별로 일부 색상을 지원합니다. 테이블에 1은 이름, 16진수 코드, RGB, HSL 값 및 설명을 보여줍니다.
| 이름 | 색상 | 암호 | RGB | HSL | 설명 |
|---|---|---|---|---|---|
| 하얀색 | #ffffff 또는 #fff | RGB(255,255,255) | hsl(0.0%,100%) | 하얀색 | |
| 은 | #c0c0c0 | RGB(192,192,192) | hsl(0.0%,75%) | 회색 | |
| 회색 | #808080 | RGB(128,128,128) | hsl(0.0%,50%) | 어두운 회색 | |
| 검은색 | #000000 또는 #000 | RGB(0,0,0) | hsl(0.0%,0%) | 검은색 | |
| 적갈색 | #800000 | RGB(128,0,0) | hsl(0.100%,25%) | 진한 빨간색 | |
| 빨간색 | #ff0000 또는 #f00 | RGB(255,0,0) | hsl(0,100%,50%) | 빨간색 | |
| 주황색 | #ffa500 | RGB(255,165,0) | hsl(38.8,100%,50%) | 주황색 | |
| 노란색 | #ffff00 또는 #ff0 | RGB(255,255,0) | hsl(60,100%,50%) | 노란색 | |
| 올리브 | #808000 | RGB(128,128,0) | hsl(60,100%,25%) | 올리브 | |
| 라임 | #00ff00 또는 #0f0 | RGB(0,255,0) | hsl(120,100%,50%) | 연한 초록색 | |
| 녹색 | #008000 | RGB(0,128,0) | hsl(120,100%,25%) | 녹색 | |
| 아쿠아 | #00ffff 또는 #0ff | RGB(0,255,255) | hsl(180,100%,50%) | 파란색 | |
| 파란색 | #0000ff 또는 #00f | RGB(0,0,255) | hsl(240,100%,50%) | 파란색 | |
| 해군 | #000080 | RGB(0,0,128) | hsl(240,100%,25%) | 진한 파란색 | |
| 물오리 | #008080 | RGB(0,128,128) | hsl(180,100%,25%) | 청록색 | |
| 푹샤 | #ff00ff 또는 #f0f | RGB(255,0,255) | hsl(300,100%,50%) | 분홍색 | |
| 보라 | #800080 | RGB(128,0,128) | hsl(300,100%,25%) | 제비꽃 |
RGB 사용
| 인터넷 익스플로러 | 크롬 | 오페라 | 원정 여행 | 파이어폭스 | 기계적 인조 인간 | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
빨간색, 녹색, 파란색 값을 십진수로 사용하여 색상을 정의할 수 있습니다. 세 가지 색상 구성 요소 각각은 0에서 255 사이의 값을 갖습니다. 색상을 백분율로 지정할 수도 있으며 100%는 숫자 255에 해당합니다. 먼저 rgb 키워드를 지정한 다음 괄호 안에 색상 구성 요소를 지정합니다. , 쉼표로 구분됩니다(예: rgb(255 , 128, 128) 또는 rgb(100%, 50%, 50%)).
RGBA
| 인터넷 익스플로러 | 크롬 | 오페라 | 원정 여행 | 파이어폭스 | 기계적 인조 인간 | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA 형식은 RGB와 구문이 유사하지만 요소의 투명도를 지정하는 알파 채널을 포함합니다. 0 값은 완전히 투명하고, 1은 불투명하며, 0.5와 같은 중간 값은 반투명합니다.
RGBA가 CSS3에 추가되었으므로 이 버전에 대해 CSS 코드의 유효성을 검사해야 합니다. CSS3 표준은 아직 개발 중이므로 일부 기능은 변경될 수 있습니다. 예를 들어, background-color 속성에 추가된 RGB 형식의 색상은 유효성이 검사되지만 background 속성에 추가된 색상은 더 이상 유효하지 않습니다. 동시에 브라우저는 두 속성의 색상을 매우 정확하게 이해합니다.
HSL
| 인터넷 익스플로러 | 크롬 | 오페라 | 원정 여행 | 파이어폭스 | 기계적 인조 인간 | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL 형식의 이름은 Hue(색조), Saturate(채도) 및 Lightness(밝기)의 첫 글자 조합에서 파생됩니다. 색조는 색상환(그림 1)의 색상 값이며 각도로 표시됩니다. 0°는 빨간색, 120°는 녹색, 240°는 파란색에 해당합니다. 색조 값은 0에서 359까지 다양합니다.
쌀. 1. 컬러 휠
채도는 색상의 강도를 말하며 0%에서 100%까지의 백분율로 측정됩니다. 0% 값은 색상이 없고 회색 음영을 나타내며, 100%는 채도의 최대값입니다.
밝기는 색상의 밝기를 지정하며 0%에서 100% 사이의 백분율로 지정됩니다. 값이 낮을수록 색상이 어두워지고, 값이 높을수록 0%와 100%의 극단값은 흑백에 해당합니다.
HSLA
| 인터넷 익스플로러 | 크롬 | 오페라 | 원정 여행 | 파이어폭스 | 기계적 인조 인간 | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA 형식은 구문이 HSL과 유사하지만 요소의 투명도를 지정하는 알파 채널을 포함합니다. 0 값은 완전히 투명하고, 1은 불투명하며, 0.5와 같은 중간 값은 반투명합니다.
RGBA, HSL, HSLA 색상 값은 CSS3에 추가되므로 이러한 형식을 사용할 때는 코드의 버전 유효성을 확인하세요.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
경고
사이트에 나열된 모든 사자 포획 방법은 이론적이며 계산 방법을 기반으로 합니다. 저자는 사용 시 안전을 보장하지 않으며 결과에 대해 어떠한 책임도 지지 않습니다. 사자는 포식자이자 위험한 동물이라는 것을 기억하세요!
이 예의 결과는 그림 1에 나와 있습니다. 2.
쌀. 2. 웹페이지의 색상
블라드 메르제비치
HTML에서 색상은 16진수 코드를 사용하거나 특정 색상의 이름을 사용하는 두 가지 방법 중 하나로 지정됩니다. 16진수 체계를 기반으로 한 방법이 가장 보편적이므로 주로 사용됩니다.
16진수 색상
HTML은 16진수를 사용하여 색상을 지정합니다. 16진법은 10진법과 달리 이름에서 알 수 있듯이 숫자 16을 기반으로 합니다. 숫자는 다음과 같습니다: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C, D, E, F. 10부터 15까지의 숫자는 라틴 문자로 대체됩니다. 테이블에 6.1은 10진수와 16진수 사이의 대응을 보여줍니다.
16진수 시스템에서 15보다 큰 숫자는 두 숫자를 하나로 결합하여 구성됩니다(표 6.2). 예를 들어, 10진수 255는 16진수 FF에 해당합니다.
숫자 체계를 정의할 때 혼란을 피하기 위해 16진수 앞에 해시 기호 #(예: #aa69cc)을 붙입니다. 이 경우 대소문자는 상관없으므로 #F0F0F0, #f0f0f0 등의 표기는 허용됩니다.
HTML에서 사용되는 일반적인 색상은 다음과 같습니다.
여기서 웹페이지의 배경색은 #FA8E47로 설정되어 있습니다. 숫자 앞에 해시 기호 #이 있으면 16진수임을 의미합니다. 처음 두 자리(FA)는 색상의 빨간색 구성 요소를 정의하고, 세 번째부터 네 번째 자리(8E)는 녹색 구성 요소를 정의하고, 마지막 두 자리(47)는 파란색 구성 요소를 정의합니다. 최종 결과는 이 색상이 됩니다.
| 파. | + | 8E | + | 47 | = | FA8E47 |
빨간색, 녹색, 파란색의 세 가지 색상은 각각 00에서 FF까지의 값을 가질 수 있으므로 총 256가지 음영이 생성됩니다. 따라서 총 색상 수는 256x256x256 = 16,777,216 조합이 될 수 있습니다. 빨간색, 녹색, 파란색 구성 요소를 기반으로 하는 색상 모델을 RGB(빨간색, 녹색, 파란색; 빨간색, 녹색, 파란색)라고 합니다. 이 모델은 세 가지 구성 요소를 모두 추가하면 흰색이 형성되는 가산형(추가 - 추가) 모델입니다.
16진수 색상을 더 쉽게 탐색하려면 몇 가지 규칙을 고려해야 합니다.
- 색상 구성요소의 값이 동일한 경우(예: #D6D6D6) 결과는 회색 색조가 됩니다. 숫자가 높을수록 색상이 밝아지며 값은 #000000(검은색)부터 #FFFFFF(흰색)까지입니다.
- 빨간색 성분을 최대(FF)로 하고 나머지 성분을 0으로 설정하면 밝은 빨간색이 형성됩니다. 값이 #FF0000인 색상은 가능한 가장 붉은색 음영입니다. 녹색(#00FF00)과 파란색(#0000FF)도 마찬가지입니다.
- 노란색(#FFFF00)은 빨간색과 녹색을 혼합하여 만들어집니다. 이는 기본 색상(빨간색, 녹색, 파란색)과 보색 또는 추가 색상을 나타내는 색상환(그림 6.1)에서 명확하게 볼 수 있습니다. 여기에는 노란색, 청록색, 보라색(자홍색이라고도 함)이 포함됩니다. 일반적으로 어떤 색상이든 가까운 색상을 혼합하면 얻을 수 있습니다. 따라서 파란색과 녹색을 결합하여 청록색(#00FFFF)을 얻습니다.
쌀. 6.1. 컬러 서클
16진수 값을 기반으로 한 색상은 경험적으로 선택할 필요가 없습니다. 이를 위해서는 Adobe Photoshop과 같이 다양한 색상 모델로 작업할 수 있는 그래픽 편집기가 적합합니다. 그림에서. 그림 6.2는 이 프로그램에서 색상을 선택하는 창을 보여줍니다. 현재 색상의 결과 16진수 값이 선으로 윤곽선으로 표시됩니다. 이를 복사하여 코드에 붙여넣을 수 있습니다.
쌀. 6.2. Photoshop에서 색상을 선택하는 창
웹 색상
모니터의 연색성 품질을 8비트(256색)로 설정하면 동일한 색상이 브라우저마다 다르게 표시될 수 있습니다. 이는 브라우저가 자체 팔레트로 작업하고 팔레트에 없는 색상을 표시할 수 없는 경우 그래픽이 표시되는 방식 때문입니다. 이 경우 색상은 주어진 색상을 모방하는 가까운 다른 색상의 픽셀 조합으로 대체됩니다. 다양한 브라우저에서 색상이 동일하게 유지되도록 소위 웹 색상 팔레트가 도입되었습니다. 웹 색상은 빨간색, 녹색, 파란색의 각 구성 요소가 0(00), 51(33), 102(66), 153(99), 204(CC)의 6가지 값 중 하나로 설정된 색상입니다. , 255(FF). 이 구성 요소의 16진수 값은 괄호 안에 표시됩니다. 가능한 모든 조합의 총 색상 수는 6x6x6 - 216개의 색상을 제공합니다. 웹 색상의 예는 #33FF66입니다.
웹 컬러의 가장 큰 특징은 모든 브라우저에서 동일하게 나타난다는 것입니다. 현재 모니터 품질 향상과 기능 확장으로 인해 웹 색상의 관련성은 매우 적습니다.
이름별 색상
일련의 숫자를 기억할 필요가 없도록 일반적으로 사용되는 색상의 이름을 대신 사용할 수 있습니다. 테이블에 6.3은 널리 사용되는 색상 이름을 보여줍니다.
| 색상명 | 색상 | 설명 | 16진수 값 |
|---|---|---|---|
| 검은색 | 검은색 | #000000 | |
| 파란색 | 파란색 | #0000FF | |
| 푹샤 | 연한 보라색 | #FF00FF | |
| 회색 | 어두운 회색 | #808080 | |
| 녹색 | 녹색 | #008000 | |
| 라임 | 연한 초록색 | #00FF00 | |
| 적갈색 | 진한 빨간색 | #800000 | |
| 해군 | 진한 파란색 | #000080 | |
| 올리브 | 올리브 | #808000 | |
| 보라 | 어두운 보라색 | #800080 | |
| 빨간색 | 빨간색 | #FF0000 | |
| 은 | 라이트 그레이 | #C0C0C0 | |
| 물오리 | 청록색 | #008080 | |
| 하얀색 | 하얀색 | #FFFFFF | |
| 노란색 | 노란색 | #FFFF00 |
이름으로 색상을 지정하거나 16진수를 사용하여 색상을 지정하는지는 중요하지 않습니다. 이러한 방법은 효과가 동일합니다. 예제 6.1에서는 웹 페이지의 배경색과 텍스트 색상을 설정하는 방법을 보여줍니다.
예제 6.1. 배경 및 텍스트 색상
예시 텍스트
이 예에서는 배경색이 태그의 bgcolor 속성을 사용하여 설정됩니다.
, 텍스트 속성을 통한 텍스트 색상. 다양성을 위해 text 속성은 16진수로 설정되고 bgcolor 속성은 예약된 키워드 teal 로 설정됩니다. 11/28/14 11.1K아쉽게도 웹사이트에서는 아직 미각 감각을 표시할 수 없습니다. 그러나 이는 색상의 도움으로 완전히 보상될 수 있습니다. 결국 HTML 색상을 사용하면 수백만 가지 색상을 표시할 수 있습니다. 그래서 " 색연필그의 세트에는 7개보다 더 많은 것이 있습니다.
HTML의 색 구성표
HTML에서는 색상을 여러 형식으로 지정할 수 있습니다.
1. 16진수 값 – 16진수 체계에 지정된 코드가 사용됩니다. HTML의 이러한 색상 코드는 세 쌍의 16진수 숫자로 구성됩니다. 각 쌍은 기본 색상으로 음영의 채도를 담당합니다.
- 첫 번째 숫자 쌍은 빨간색을 담당합니다.
- 두 번째 쌍은 녹색 콘텐츠용입니다.
- 후자는 파란색 콘텐츠를 위한 것입니다.
해시 표시는 코드 시작 부분(숫자 앞)에 배치됩니다. 16진수 색상 코드입니다. 이 숫자 체계는 1부터 9까지의 숫자 외에도 라틴 알파벳 문자(A, B, C, D, E, F)를 사용합니다.
예를 들어 HTML의 흰색 색상 코드는 #FFFFFF와 같습니다.:
2. 키워드 – HTML은 현재 약 147개의 키워드를 지원합니다. 하지만 이 단어들이 모두 독특한 것은 아닙니다. 그들 중 일부는 동일한 색조를 나타냅니다.
회색은 grey 와 grey 의 두 가지 키워드로 표현됩니다. 16진수 코드(HEX)는 동일한 값 #808080으로 지정됩니다.
예:
#808080
3. RGB 형식 - HTML의 이 색상 인코딩은 0에서 255 사이의 범위로 설정된 세 가지 값의 사용을 기반으로 합니다. 각 값은 기본 색상 중 하나로 색조의 채도를 결정합니다.
- R – 빨간색 (빨간색);
- G - 녹색(녹색);
- B – 파란색 (파란색).
RGB 형식의 색상 번호는 rgb(0, 210, 100) 형식으로 작성됩니다.
배경색:rgb(100,186,43)
4. RGBA 형식 - 개선된 RGB 형식으로, 네 번째 값은 색상의 투명도를 0에서 1까지의 소수로 지정합니다.
사용 예:
배경색:rgba(100,86,143,0.2)
배경색:rgba(100,86,143,0.5)
배경색:rgba(100,86,143,0.8)
배경색:rgba(100,86,143,1)
HTML 색상표 및 색상 생성기
이렇게 다양한 색상 설정 형식을 사용하면 혼동되기 쉽습니다. 따라서 특별한 색상표가 발명되었습니다. 모든 주요 색상 표준의 준수 코드와 함께 147개의 주요 색상 이름을 제공합니다. 또한 각 필드에는 시각적 색상 선택을 위한 막대가 있습니다. 이 테이블 중 하나가 웹 사이트 colorscheme.ru에 표시됩니다.
그러나 이러한 매칭 구조에도 불구하고 올바른 색상을 선택하는 것은 어려울 수 있습니다. 그리고 색상 코드 표에 필요한 색상 코드가 포함되어 있다는 것은 사실이 아닙니다.
이러한 장애물을 극복하고 올바른 색상을 가능한 한 쉽게 선택할 수 있도록 대화형 웹 서비스가 개발되었습니다. 사용자 인터페이스는 서로 약간 다를 수 있습니다.
html-color-codes.info 웹사이트에서 색상 생성기는 다음과 같습니다:
color-picker.appsmaster.co 서비스 내에서 이 도구는 약간 다르게 구현됩니다.
생성기의 각 색상 채도는 특수 슬라이더를 사용하여 설정됩니다. 시각적으로 음영은 왼쪽 프레임과 직사각형의 색상으로 표시됩니다. 하단의 3개 필드에는 기본 형식의 색상 코드가 표시됩니다.
그러나 색상 생성기는 전문 사이트에서만 사용할 수 있는 것이 아닙니다. 거의 모든 그래픽 편집기에는 유사한 도구가 장착되어 있습니다. 예를 들어, 포토샵:
색상 작업 시 안전 예방 조치
그리고 이것은 오래 전, 256색만 지원하는 비디오 카드 시대였습니다. 그 옛날에는 운영 체제가 왜곡 없이 특정 개수의 8비트 음영만 표시할 수 있었습니다.
그런 다음 안전한 색상의 훌륭한 테이블이 개발되었습니다. 당시의 어떤 브라우저에서도 왜곡 없이 표시될 수 있는 216가지 색상을 지정했습니다. 그리고 오늘날까지 " 훌륭한 원고»는 일부 리소스에서는 계속 사용할 수 있습니다.
요즘에는 모든 것이 바뀌었습니다. 따라서 HTML에서 색상 작업 시 모든 안전 규칙이 완전히 취소됩니다. 결국, 최신 컴퓨터 하드웨어는 1,600만 가지가 넘는 다양한 색상을 지원합니다. 그리고 216가지 안전한 색상이 망각 속으로 빠져들었습니다.