Fff 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에서는 색상을 세 가지 방법으로 지정할 수 있습니다.
이름으로 HTML에서 색상 설정
일부 색상은 영어로 된 색상 이름을 값으로 사용하여 이름으로 지정할 수 있습니다. 가장 일반적인 키워드: 검정색, 흰색, 빨간색, 녹색, 파란색 등:
텍스트 색상 – 빨간색
W3C(World Wide Web Consortium) 표준의 가장 인기 있는 색상은 다음과 같습니다.
| 색상 | 이름 | 색상 | 이름 | 색상 | 이름 | 색상 | 이름 |
|---|---|---|---|---|---|---|---|
| 검은색 | 회색 | 은 | 하얀색 | ||||
| 노란색 | 라임 | 아쿠아 | 푹샤 | ||||
| 빨간색 | 녹색 | 파란색 | 보라 | ||||
| 적갈색 | 올리브 | 해군 | 물오리 |
다른 색상 이름을 사용하는 예:
예: 이름으로 색상 지정
- 직접 해보세요 "
빨간색 배경에 헤더
주황색 배경의 헤더
라임 배경으로 향하고
파란색 배경에 흰색 텍스트
빨간색 배경에 헤더
주황색 배경의 헤더
라임 배경으로 향하고
파란색 배경에 흰색 텍스트
RGB를 사용하여 색상 지정
모니터에 다양한 색상을 표시할 때 RGB 팔레트가 기본으로 사용됩니다. 모든 색상은 세 가지 기본 색상을 혼합하여 얻습니다. R - 빨간색, G - 녹색, B - 파란색. 각 색상의 밝기는 1바이트로 지정되므로 0부터 255까지의 값을 가질 수 있습니다. 예를 들어 RGB(255,0,0)는 빨간색이 가장 높은 값(255)으로 설정되어 있으므로 빨간색으로 표시됩니다. 나머지는 0으로 설정됩니다. 색상을 백분율로 설정할 수도 있습니다. 각 매개변수는 해당 색상의 밝기 수준을 나타냅니다. 예를 들어 rgb(127, 255, 127) 및 rgb(50%, 100%, 50%) 값은 동일한 중간 녹색으로 설정됩니다.
예: RGB를 사용하여 색상 지정
- 직접 해보세요 "
RGB(127, 255, 127)
RGB(50%, 100%, 50%)
RGB(127, 255, 127)
RGB(50%, 100%, 50%)
16진수 값으로 색상 설정
가치 아르 자형 G 비#RRGGBB 형식의 16진수(HEX) 색상 값을 사용하여 지정할 수도 있습니다. 여기서 RR(빨간색), GG(녹색) 및 BB(파란색)는 00부터 FF(10진수 0-255와 동일)의 16진수 값입니다. ) . 16진법은 10진법과 달리 이름에서 알 수 있듯이 숫자 16을 기반으로 합니다. 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 값에 해당합니다. 10진수 시스템과 달리 16진수 앞에는 해시 기호가 붙습니다. # 예를 들어 #FF0000은 빨간색이 가장 높은 값(FF)으로 설정되고 나머지 색상은 최소값(00)으로 설정되므로 빨간색으로 표시됩니다. 해시 기호 뒤의 기호 # 대문자와 소문자를 모두 입력할 수 있습니다. 16진수 시스템을 사용하면 각 문자가 double에 해당하는 약어 형식 #rgb를 사용할 수 있습니다. 따라서 #f7O 항목은 #ff7700으로 간주되어야 합니다.
예: HEX 색상
- 직접 해보세요 "
빨간색: #FF0000
녹색: #00FF00
파란색: #0000FF
빨간색: #FF0000
녹색: #00FF00
파란색: #0000FF
빨간색+녹색=노란색: #FFFF00
빨간색+파란색=보라색: #FF00FF
녹색+파란색=청록색: #00FFFF
일반적인 색상 목록(이름, HEX 및 RGB):
| 영어 이름 | 러시아 이름 | 견본 | 마녀 | RGB | ||
|---|---|---|---|---|---|---|
| 아마란스 | 아마란스 | #E52B50 | 229 | 43 | 80 | |
| 호박색 | 호박색 | #FFBF00 | 255 | 191 | 0 | |
| 아쿠아 | 청록색 | #00FFFF | 0 | 255 | 255 | |
| 하늘빛 | 하늘빛 | #007FFF | 0 | 127 | 255 | |
| 검은색 | 검은색 | #000000 | 0 | 0 | 0 | |
| 파란색 | 파란색 | #0000FF | 0 | 0 | 255 | |
| 본다이 블루 | 본다이 해변의 물 | #0095B6 | 0 | 149 | 182 | |
| 놋쇠 | 놋쇠 | #B5A642 | 181 | 166 | 66 | |
| 갈색 | 갈색 | #964B00 | 150 | 75 | 0 | |
| 세룰리안 | 하늘빛 | #007BA7 | 0 | 123 | 167 | |
| 진한 봄 녹색 | 진한 봄 녹색 | #177245 | 23 | 114 | 69 | |
| 에메랄드 | 에메랄드 | #50C878 | 80 | 200 | 120 | |
| 가지 | 가지 | #990066 | 153 | 0 | 102 | |
| 푹샤 | 푹샤 | #FF00FF | 255 | 0 | 255 | |
| 금 | 금 | #FFD700 | 250 | 215 | 0 | |
| 회색 | 회색 | #808080 | 128 | 128 | 128 | |
| 녹색 | 녹색 | #00FF00 | 0 | 255 | 0 | |
| 남빛 | 남빛 | #4B0082 | 75 | 0 | 130 | |
| 옥 | 옥 | #00A86B | 0 | 168 | 107 | |
| 라임 | 라임 | #CCFF00 | 204 | 255 | 0 | |
| 공작석 | 공작석 | #0BDA51 | 11 | 218 | 81 | |
| 해군 | 진한 파란색 | #000080 | 0 | 0 | 128 | |
| 황토 | 황토 | #CC7722 | 204 | 119 | 34 | |
| 올리브 | 올리브 | #808000 | 128 | 128 | 0 | |
| 주황색 | 주황색 | #FFA500 | 255 | 165 | 0 | |
| 복숭아 | 복숭아 | #FFE5B4 | 255 | 229 | 180 | |
| 호박 | 호박 | #FF7518 | 255 | 117 | 24 | |
| 보라 | 제비꽃 | #800080 | 128 | 0 | 128 | |
| 빨간색 | 빨간색 | #FF0000 | 255 | 0 | 0 | |
| 사프란 | 사프란 | #F4C430 | 244 | 196 | 48 | |
| 씨 그린 | 푸른 바다 | #2E8B57 | 46 | 139 | 87 | |
| 늪 녹색 | 볼로트니 | #ACB78E | 172 | 183 | 142 | |
| 물오리 | 청록색 | #008080 | 0 | 128 | 128 | |
| 군청색 | 군청색 | #120A8F | 18 | 10 | 143 | |
| 제비꽃 | 제비꽃 | #8B00FF | 139 | 0 | 255 | |
| 노란색 | 노란색 | #FFFF00 | 255 | 255 | 0 | |
채도와 색조에 따른 색상 코드(배경)입니다.
블라드 메르제비치
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로 설정됩니다.>>색상 관리
16진수 RGB 색상 값
색상을 설명하고 처리하는 방법은 최종 표현의 목적이 무엇인지에 따라 서로 다릅니다. 예를 들어 인쇄와 컴퓨터 모니터의 색상 표현을 비교해 보겠습니다. 첫 번째 경우에는 기초가 취해집니다. 하얀색이후 세 가지 기본 색상이 적용되는 용지 색상: 파란색, 보라그리고 노란색. 서로 다른 비율로 종이의 흰색과 혼합하면 이 세 가지 기본 색상은 순수한 검정색을 제외하고 페인트가 전혀 없는 경우 흰색 종이를 제공하는 경우를 제외하고 서로 다른 색조를 제공합니다. 여기에 검은색을 더하면 CMYK-흰색에서 누락된 색상을 빼서 원하는 색상을 얻었을 때 색상을 전송하는 방법입니다.
두 번째 경우에는 기초가 사용됩니다. 검은색모니터 화면의 색상, 각 셀은 세 가지 색상 중 하나로 빛납니다. 빨간색-빨간색, 녹색-녹색과 파란색-파란색. 그런 다음 빛이 전혀 없으면 순수한 검정색 화면 색상을 얻습니다. 필요한 색상은 세 가지 색상 각각의 비율로 제공됩니다. 이 경우 우리는 얻을 것입니다 RGB-색상 전달 방법. 기본 색상은 다음과 같습니다. 0
~ 전에 255
, 또는 0%
~ 전에 100%
, 또는 16진수 값으로 표시될 수 있습니다. 아래 그림에서는 기본 색상을 혼합한 결과를 볼 수 있습니다.
16진수 체계는 10진수 체계와 달리 10자리가 아니라 16자리이므로 이름이 붙었습니다. 따라서 두 자리 숫자 조합의 반복되지 않는 변형만 있을 수 있습니다. 256 , 이후 일련의 숫자를 계속하려면 9 편지 ㅏ~ 전에 에프따라서 시리즈는 다음과 같습니다.
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
이 경우 색상은 각각 두 자리 숫자로 구성된 세 개의 16진수 숫자로 지정됩니다. 첫 번째 숫자는 강도를 결정합니다. 빨간색색상, 중간- 녹색, 마지막 것- 파란색그림 물감. 모든 숫자는 다음 범위의 값을 가질 수 있습니다. 00 ~ 전에 FF(0에서 255까지). 예를 들어 녹색은 다음과 같이 주어진다. #00FF00, 빨간색 - 좋아요 #FF0000, 파란색 - 좋아요 #0000FF, 흰색 - 같은 #FFFFFF, 색상이 전혀 없거나 검은색은 다음과 같이 표시됩니다. #000000 .
아래 양식에서 세 가지 색상 각각에 대해 16진수 값을 지정하고 출력 필드를 클릭하여 혼합 결과를 확인할 수 있습니다.
일부 16진수 RGB 색상 값의 예: 빨간색, 파란색 및 녹색 그라데이션.
| 보다 | 암호 | 보다 | 암호 | 보다 | 암호 | 보다 | 암호 | 보다 | 암호 | 보다 | 암호 |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
문자열 리터럴을 사용하여 색상 지정
사용 편의성을 위해 일부 색상과 그 조합에는 모든 브라우저에서 인식되는 이름이 지정되었으며, 그 중 다수는 이름으로 설정하는 것이 가능해졌습니다. 아래 표에는 일부 색상 이름이 나와 있습니다.
| 보다 | 이름 | 보다 | 이름 | 보다 | 이름 | 보다 | 이름 |
| 하얀색 | 빨간색 | 주황색 | 노란색 | ||||
| 녹색 | 파란색 | 보라 | 검은색 | ||||
| 앨리스블루 | 앤틱화이트 | 아쿠아 | 남옥 | ||||
| 하늘빛 | 베이지 | 비스크 | 블랜치달몬드 | ||||
| 청자색 | 갈색 | 벌리우드 | 생도블루 | ||||
| 연두빛 | 초콜릿 | 산호 | 수레국화블루 | ||||
| 옥수수 실크 | 진홍 | 청록색 | 진한 파란색 | ||||
| 다크시안 | 다크골든로드 | 짙은 회색 | 짙은 녹색 | ||||
| 다크카키색 | 다크마젠타 | 다크올리브그린 | 다크오렌지 | ||||
| 다크오키드 | 다크레드 | 다크살몬 | 다크씨그린 | ||||
| 다크슬레이트블루 | 다크슬레이트그레이 | 어두운 청록색 | 다크바이올렛 | ||||
| 딥핑크 | 딥스카이블루 | 딤그레이 | 다저블루 | ||||
| 내화 벽돌 | 꽃무늬화이트 | 포레스트그린 | Fuschia | ||||
| 게인즈버러 | 고스트화이트 | 금 | 갈조색 | ||||
| 회색 | 녹황색 | 단물 | 핫 핑크 | ||||
| 인디언레드 | 남빛 | 상아 | 카키색 옷감 | ||||
| 라벤더 | 라벤더 블러쉬 | 레몬쉬폰 | 하늘색 | ||||
| 라이트산호 | 라이트시안 | Lightcoldenrod노란색 | 연한 초록색 | ||||
| 밝은 회색 | 라이트핑크 | 라이트연어 | 라이트시그린 | ||||
| 라이트스카이블루 | 라이트레이트그레이 | 라이트스틸블루 | 연노랑 | ||||
| 라임 | 라임그린 | 리넨 | 마젠타 | ||||
| 적갈색 | 미디엄 아쿠아마린 | 미디엄 블루 | 미디엄오키드 | ||||
| 중간 보라색 | 미디엄씨그린 | 중슬레이트블루 | 미디엄스프링그린 | ||||
| 중간 청록색 | 중간 보라색 | 자정 블루 | 민트크림 | ||||
| 미스티로즈 | 나바호백인 | 해군 | 올드레이스 | ||||
| 올리브 | 올리랍랩 | 오렌지 레드 | 난초 | ||||
| 팔레골든로드 | 옅은 녹색 | 팔레트르콰이즈 | Palevioletred | ||||
| 파파야휩 | 피치퍼프 | 페루 | 분홍색 | ||||
| 자두 | 파우더블루 | 로지브라운 | 로얄 블루 | ||||
| 새들브라운 | 씨그린 | 조개 | 시에나 | ||||
| 은 | 하늘색 | 슬레이트블루 | 슬레이트그레이 | ||||
| 눈 | 스프링그린 | 스틸블루 | 탠 껍질 | ||||
| 물오리 | 엉겅퀴 훈장 | 토마토 | 터키 옥 | ||||
| 제비꽃 | 밀 | 화이트스모크 | 연두색 |
안전한 색상 팔레트 사용
불행하게도 다양한 플랫폼, 다양한 시스템 설정에서는 정확한 색상 재현이 문제가 됩니다. 문제는 브라우저가 항상 색상을 독립적으로 혼합하고 교체하여 문서의 색상 팔레트를 시스템 설정 및 모니터 기능에 맞게 조정하려고 한다는 것입니다. 결과적으로 사용자는 웹마스터가 보여주고자 했던 내용을 정확하게 보지 못하는 경우가 있습니다. 이러한 상황을 해결하는 방법은 팔레트를 사용하는 것에서 발견되었으며, 팔레트의 각 색상은 서로 다른 플랫폼의 모든 브라우저에서 동일하게 렌더링되도록 보장됩니다. 이것이 소위 보장팔레트라고도 함 안전한팔레트. 이 팔레트에는 색상 구성요소가 다음 값을 갖는 색상이 포함되어 있습니다. 00 ,33 ,66 ,99 , CC,FF, 가능한 모든 방법으로 216 그들의 조합.
| 보다 | 암호 | 보다 | 암호 | 보다 | 암호 | 보다 | 암호 | 보다 | 암호 | 보다 | 암호 |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |