rgb(100, 100, 100) 과 같은 고유한 값을 포함하도록 이 예제를 편집해 보십시오.

RGBA로 색상 설정하기

CSS3에서 등장 새로운 도구색상 작업용 - RGBA 형식. RGB 모델의 진화라고 할 수 있지만 하나의 새로운 채널(A 또는 알파 채널)이 추가되었습니다. 이 채널은 색상의 투명도를 설정합니다. 값은 0에서 1 사이의 범위로 설정됩니다. 값이 0이면 전체 투명도, 1 - 전체 불투명도에 해당합니다(색상은 설정된 것과 동일합니다. 처음 세 RGB 채널) 및 0.4 또는 0.6과 같은 중간 값 - 다양한 정도의 반투명.

코드 예.

작동 방식은 다음과 같습니다.

이 코드는 RGB 모델을 사용하여 색상 값을 설정하는 다음과 시각적으로 유사합니다.

그의 결과는 다음과 같습니다.

알파 채널 값이 0이면 모든 색상이 보이지 않습니다. 절대적으로 투명하고 값이 1이면 변경 없이 RGB 코드의 색상을 변환합니다. rgba(255,0,0,1.0) 속성은 빨간색 rgb(255, 0, 0) 을 표시합니다.

16진수 값으로(HEX 코드)

일상 생활에서 우리는 십진법을 사용합니다. 그 기원은 매우 간단합니다. 우리는 손에 10개의 손가락을 가지고 있으며 인생에서 손가락을 의지하는 것이 편리했습니다. 만약에 십진법 10자리: 0에서 9까지, 숫자 10은 다음 숫자이고 16진수 시스템에는 16자리가 있으며 다음 숫자는 숫자 16입니다.

색상 코드를 나타내기 위해 0에서 9까지의 일반 10진수는 16진수로 사용되며 A에서 F까지의 라틴 문자는 10에서 15, 즉 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). 명확성을 위해 표로 요약해 보겠습니다.

10진법에서와 같이 F(10진수 15)보다 큰 16진법 숫자를 쓰기 위해 두 자릿수의 합집합도 사용하지만 이미 16진법이므로 자명합니다. 예, 기록을 위해 십진수 255는 16진법으로 FF입니다.

16진법 시스템은 컴퓨터가 더 이해하기 쉽고 16진법 값으로 주어진 값을 더 빨리 처리합니다.

16진수 시스템에서 색상을 지정하려면 숫자 값 앞에 "#" 기호를 추가합니다(예: #FFC0CB ). #FFC0CB 값 자체는 세 개의 16진수 FF , C0 및 CB 로 구성됩니다. 이 항목의 의미는 색상을 설정하는 것과 동일합니다. RGB 형식(rgb(r, g, b) ) - HEX 코드의 각 16진수 숫자는 RGB 모델 채널의 색상 채도를 나타냅니다.

이 코드는 다음 요소를 표시합니다.

그리고 여기 위의 이 페이지의 "RGB로 색상 설정" 섹션의 결과가 있는 그림이 있습니다.

색상이 동일하다는 것을 알 수 있습니다.

HEX 색상 코드에 대한 약어 표기가 허용됩니다. 6자리 숫자는 3자리 숫자로 쓸 수 있습니다. 동일한 채널의 색상 값에서 두 자리가 반복되는 경우에만 유효합니다.

즉, 다음 약어가 허용됩니다.

예를 들어 #ff22aa 색상은 #f2a 로, #44aa22 색상은 #4a2 로 작성할 수 있습니다.

HSL로 색상 설정

CSS3에는 색상 지정을 위한 새로운 형식이 있습니다.

HSL 형식은 Hue(색조), Saturate(채도) 및 Lightness(밝기)의 영어 단어의 약어입니다.

HSL의 색조는 특수 색상환의 색상 값(그림 2)이며 도 단위로 지정됩니다. RGB 모델과 유추하면 0°는 빨간색, 120°는 녹색, 240°는 파란색에 해당합니다.

색조 값은 0에서 359로 변경됩니다.

두 번째 값 - 채도(Saturate)는 백분율로 설정됩니다. 100% 채도에서 색상은 최대한 "즙이 많은" 색상이 되며 채도 표시기가 0%로 이동함에 따라 색상이 점점 흐려지고 회색으로 변합니다.

세 번째 값인 밝기(Lightness)도 백분율로 설정됩니다. 백분율이 높을수록 색상이 더 밝아집니다. 0%와 100%의 극단값은 각각 검정색(빛 부족)과 흰색(노출) 색상을 나타내며 첫 번째 채널에서 색상환의 어떤 색상이 선택되었는지는 중요하지 않습니다. 최적 값은 50%와 동일한 색상 밝기 값으로 간주할 수 있습니다.

HSLA를 사용한 색상 설정

HSLA 형식은 RGB에서 RGBA와 마찬가지로 HSL과 관련이 있습니다. HSLA 형식과 RGBA에서는 색상 투명도를 담당하는 알파 채널이 추가됩니다.

HSL 형식으로 지정된 색상은 읽기 쉽습니다. 직관적이라고 할 수 있습니다. 예를 들어, 코드 hsl(120,60%,50%)은 메모리에 HSL 색상환의 그림이 있는 경우 최종 색상을 나타낼 수 있습니다. RGB 및 HEX 형식에 대해서는 말할 수 없으며 이러한 형식에 지정된 색상 코드는 모니터에서 렌더링된 후에야 명확해집니다.

CSS3의 새로운 형식(HSL, HSLA 및 RGBA)은 IE 9.0, Opera 10.0 Firefox 3.0 버전부터 브라우저에서 작동합니다. 이전 브라우저에서 스타일을 작동시키는 방법은 무엇입니까?

Someblock ( 배경색: rgb(255,50,50); 배경색: rgba(255,50,50,0.85) )

이전 브라우저에서 이 코드를 사용할 때 .somebloсk 클래스의 배경색은 알파 채널을 사용하지 않지만 RGB 형식으로 표시됩니다.

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으로 간주되어야 합니다.

이름으로

브라우저는 이름별로 일부 색상을 지원합니다. 테이블에서. 1은 이름, 16진수 코드, RGB 값, HSL 형식 및 설명을 보여줍니다.

RGB로

적색, 녹색, 청색 값을 십진법으로 사용하여 색상을 정의할 수 있습니다. 세 가지 색상 구성 요소 각각은 0에서 255 사이의 값을 취합니다. 색상을 백분율로 설정하는 것도 허용되지만 100%는 숫자 255에 해당합니다. 먼저 rgb 키워드를 지정한 다음 색상 구성 요소를 지정합니다. 예를 들어 rgb(255, 128, 128) 또는 rgb(100%, 50%, 50%)와 같이 쉼표로 구분하여 대괄호로 지정합니다.

RGBA

RGBA 형식은 RGB와 구문이 유사하지만 요소의 투명도를 설정하는 알파 채널을 포함합니다. 값 0은 완전히 투명하고 1은 불투명하며 0.5와 같은 중간 값은 반투명합니다.

RGBA가 CSS3에 추가되었으므로 이 버전에 따라 CSS 코드의 유효성 검사를 수행해야 합니다. CSS3 표준은 아직 개발 중이며 일부 기능이 변경될 수 있습니다. 예를 들어 background-color 속성에 추가된 RGB 색상은 유효성 검사를 통과하지만 background 속성에 추가된 RGB 색상은 통과하지 못합니다. 동시에 브라우저는 두 속성의 색상을 매우 정확하게 이해합니다.

HSL

HSL 형식의 이름은 첫 글자 Hue(색조), Saturate(채도) 및 Lightness(밝기)의 조합으로 구성됩니다. 색조는 색상환의 색상 값(그림 1)이며 도 단위로 지정됩니다. 0°는 빨간색, 120°는 녹색, 240°는 파란색입니다. 색조 값은 0에서 359까지 다양합니다.

쌀. 1. 컬러 휠

채도는 0%에서 100% 사이의 백분율로 측정되는 색상의 강도입니다. 0% 값은 색상이 없고 회색 음영을 나타내며 100%는 최대 채도 값입니다.

밝기는 색상의 밝기를 설정하며 0%에서 100% 사이의 백분율로 지정됩니다. 값이 작을수록 색상이 어두워지고 값이 높으면 더 밝아지며 0%와 100%의 극한 값은 흑백에 해당합니다.

HSLA

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)는 파란색 구성 요소를 정의합니다. 최종 결과는 이 색상입니다.

빨강, 녹색 및 파랑의 세 가지 색상 각각은 00에서 FF까지 값을 취할 수 있으며 결국 256개의 음영을 형성합니다. 따라서 총 색상 수는 256x256x256 = 16.777.216 조합이 될 수 있습니다. 빨강, 초록, 파랑 ​​구성 요소를 기반으로 하는 색상 모델을 RGB(빨강, 녹색, 파랑, 빨강, 녹색, 파랑)라고 합니다. 이 모델은 세 가지 구성 요소를 모두 추가하여 흰색을 형성하는 가산(추가 - 추가)입니다.

16진수 색상으로 쉽게 탐색할 수 있도록 몇 가지 규칙을 고려하십시오.

• 색상 구성 요소의 값이 동일하면(예: #D6D6D6) 회색 색조를 얻습니다. 숫자가 높을수록 색상이 밝아지며 값이 #000000(검정)에서 #FFFFFF(흰색)으로 변경됩니다.
• 적색 성분을 최대(FF)로 하고 나머지 성분을 0으로 하면 밝은 적색이 된다. 값이 #FF0000인 색상은 가능한 가장 붉은 색조입니다. 녹색(#00FF00)과 파란색(#0000FF)도 마찬가지입니다.
• 빨간색과 녹색을 혼합하여 노란색(#FFFF00)을 얻습니다. 이것은 기본 색상(빨간색, 녹색, 파란색)과 보색 또는 보색을 나타내는 색상환(그림 6.1)에서 명확하게 볼 수 있습니다. 여기에는 노란색, 시안색 및 보라색(자홍색이라고도 함)이 포함됩니다. 일반적으로 인접한 색상을 혼합하여 모든 색상을 얻을 수 있습니다. 따라서 청록색(#00FFFF)은 파란색과 녹색을 결합하여 얻습니다.

쌀. 6.1. 컬러 서클

16진수 값을 기반으로 하는 색상은 경험적으로 선택할 필요가 없습니다. 이 목적에 적합 그래픽 편집기다른 색상 모델로 작업할 수 있는 사람, 예를 들어 어도비 포토샵. 무화과에. 6.2는 이 프로그램에서 색상을 선택하기 위한 창을 보여줍니다. 선은 현재 색상의 결과 16진수 값에 동그라미를 치고 있습니다. 복사하여 코드에 붙여넣을 수 있습니다.

쌀. 6.2. Photoshop의 색상 선택기

웹 색상

모니터의 색상 품질을 8비트(256색)로 설정하면 동일한 색상으로 표시될 수 있습니다. 다른 브라우저내 방식대로. 이것은 브라우저가 자체 팔레트로 작동하고 팔레트에 없는 색상을 표시할 수 없을 때 그래픽이 렌더링되는 방식과 관련이 있습니다. 이 경우 색상은 주어진 색상을 모방하는 다른 색상의 픽셀 조합으로 대체됩니다. 다른 브라우저에서 색상을 동일하게 유지하기 위해 소위 웹 색상 팔레트가 도입되었습니다. 웹 색상은 빨강, 녹색 및 파랑의 각 구성 요소에 대해 0(00), 51(33), 102(66), 153(99)으로 설정된 6개 값 중 하나, 204(CC), 255(FF). 이 구성요소의 16진수 값은 대괄호로 표시됩니다. 가능한 모든 조합의 총 색상 수는 6x6x6 - 216 색상을 제공합니다. 웹 색상의 예는 #33FF66입니다.

웹 컬러의 주요 특징은 모든 브라우저에서 동일하게 표시된다는 것입니다. 현재 웹 색상의 관련성은 모니터의 품질 향상과 기능의 확장으로 인해 매우 미미합니다.

이름별 색상

숫자 모음을 기억하지 않으려면 일반적으로 사용되는 색상 이름을 대신 사용할 수 있습니다. 테이블에서. 6.3은 인기있는 색상 이름의 이름을 보여줍니다.

색상을 이름으로 지정하거나 16진수를 사용하여 지정하는 방법은 중요하지 않습니다. 사실상 이러한 방법은 동일합니다. 예제 6-1은 웹페이지의 배경색과 글자색을 설정하는 방법을 보여줍니다.

예 6.1. 배경 및 텍스트 색상

샘플 텍스트

에 이 예배경색은 태그의 bgcolor 속성을 사용하여 설정됩니다. , 그리고 text 속성을 통한 텍스트의 색상. 다양성을 위해 text 속성의 값은 16진수로 설정되고 bgcolor는 예약된 값으로 설정됩니다. 예어물오리.