펄 컬러 RGB. 이름별로 색상을 지정합니다. CSS 색상 - RGB 값

블라드 메르제비치

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진수 값을 기반으로 한 색상은 경험적으로 선택할 필요가 없습니다. 이를 위해서는 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진수를 사용하여 색상을 지정하는지는 중요하지 않습니다. 이러한 방법은 효과가 동일합니다. 예제 6.1에서는 웹 페이지의 배경색과 텍스트 색상을 설정하는 방법을 보여줍니다.

예제 6.1. 배경 및 텍스트 색상

예시 텍스트

이 예에서는 배경색이 태그의 bgcolor 속성을 사용하여 설정됩니다. , 텍스트 속성을 통한 텍스트 색상입니다. 다양성을 위해 text 속성은 16진수로 설정되고 bgcolor 속성은 예약된 키워드 teal로 설정됩니다.

CSS의 색상 코드는 색상을 지정하는 데 사용됩니다. 일반적으로 색상 코드나 색상 값은 요소의 전경색(예: 텍스트 색상, 링크 색상) 또는 요소의 배경색(배경색, 블록 색상)에 대한 색상을 설정하는 데 사용됩니다. 또한 버튼, 테두리, 마커, 호버 및 기타 장식 효과의 색상을 변경하는 데 사용할 수도 있습니다.

다양한 형식으로 색상 값을 지정할 수 있습니다. 다음 표에는 가능한 모든 형식이 나열되어 있습니다.

나열된 형식은 아래에 더 자세히 설명되어 있습니다.

CSS 색상 - 16진수 코드

16진수 색상 코드 6자리 색상 표현입니다. 처음 두 자리(RR)는 빨간색 값, 다음 두 자리는 녹색 값(GG), 마지막 두 자리는 파란색 값(BB)을 나타냅니다.

CSS 색상 - 짧은 16진수 코드

짧은 16진수 색상 코드 6자리 표기법의 단축 형식입니다. 이 형식에서는 각 숫자가 반복되어 동등한 6자리 색상 값을 생성합니다. 예를 들어 #0F0은 #00FF00이 됩니다.

16진수 값은 Adobe Photoshop, Core Draw 등과 같은 모든 그래픽 소프트웨어에서 가져올 수 있습니다.

CSS의 각 16진수 색상 코드 앞에는 해시 기호 "#"이 옵니다. 다음은 16진수 표기법을 사용하는 예입니다.

CSS 색상 - RGB 값

RGB 값 rgb() 속성을 사용하여 설정되는 색상 코드입니다. 이 속성은 빨간색, 녹색, 파란색 각각 하나씩 세 가지 값을 사용합니다. 값은 0~255 사이의 정수 또는 백분율일 수 있습니다.

메모:모든 브라우저가 rgb() 색상 속성을 지원하는 것은 아니므로 사용하지 않는 것이 좋습니다.

아래는 RGB 값을 사용하여 여러 색상을 보여주는 예입니다.

색상 코드 생성기

우리 서비스를 사용하면 수백만 개의 색상 코드를 만들 수 있습니다.

브라우저 안전 색상

다음은 가장 안전하고 컴퓨터 독립적인 216가지 색상의 표입니다. CSS의 이러한 색상 범위는 000000부터 FFFFFF 16진수 코드까지입니다. 256색상 팔레트로 작업할 때 모든 컴퓨터가 색상을 올바르게 표시하도록 보장하므로 안전하게 사용할 수 있습니다.

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):

채도와 색조에 따른 색상 코드(배경)입니다.