숫자로 본 골드 컬러. 스타일의 색상은 16진수 값, 이름, RGB, RGBA, HSL, HSLA 형식 등 다양한 방법으로 지정할 수 있습니다.

색상은 CSS에서 설정할 수 있습니다 다른 방법들:

  • 이름으로,
  • 16진수 값으로,
  • RGB 및 RGBA 형식으로,
  • HSL 및 HSLA 형식으로.

이름으로 색상 설정

브라우저는 이름별로 요소의 일부 색상을 지정하는 것을 지원합니다. 이 표에는 색상 속성, RGB 코드, 16진수 코드(HEX) 및 HSL 코드를 지정하는 데 사용되는 일부 키워드(영어 색상 이름)가 포함되어 있습니다.

테이블 1. 색상 이름, RGB, HEX 및 HSL 코드.
이름 색상 RGB 마녀 HSL 설명
하얀색 RGB(255, 255, 255) #ffffff 또는 #fff hsl(0, 0%, 100%) 하얀색
RGB(192, 192, 192) #c0c0c0 hsl(0, 0%, 75%) 회색
회색 RGB(128, 128, 128) #808080 hsl(0, 0%, 50%) 어두운 회색
검은색 RGB(0, 0, 0) #000000 또는 #000 hsl(0, 0%, 0%) 검은색
적갈색 RGB(128, 0, 0) #800000 hsl(0, 100%, 25%) 진한 빨간색
빨간색 RGB(255, 0, 0) #ff0000 또는 #f00 hsl(0, 100%, 50%) 빨간색
주황색 RGB(255, 165, 0) #ffa500 hsl(38.8, 100%, 50%) 주황색
노란색 RGB(255, 255, 0) #ffff00 또는 #ff0 hsl(60, 100%, 50%) 노란색
올리브 RGB(128, 128, 0) #808000 hsl(60, 100%, 25%) 올리브
라임 RGB(0, 255, 0) #00ff00 또는 #0f0 hsl(120, 100%, 50%) 연한 초록색
녹색 RGB(0, 128, 0) #008000 hsl(120, 100%, 25%) 녹색
아쿠아 RGB(0, 255, 255) #00ffff 또는 #0ff hsl(180, 100%, 50%) 파란색
파란색 RGB(0, 0, 255) #0000ff 또는 #00f hsl(240, 100%, 50%) 파란색
해군 RGB(0,0,128) #000080 hsl(240, 100%, 25%) 진한 파란색
물오리 RGB(0, 128, 128) #008080 hsl(180, 100%, 25%) 청록색
푹샤 RGB(255, 0, 255) #ff00ff 또는 #f0f hsl(300, 100%, 50%) 분홍색
보라 RGB(128, 0, 128) #800080 hsl(300, 100%, 25%) 제비꽃

이것은 색상 이름 사용의 예이며, 색상 이름은 확장 테이블에서 가져옵니다.

CSS의 RGB

중간 청록색
갈색
진홍
청자색
롤리브랍

이 코드의 작동 방식은 다음과 같습니다.

RGB를 사용하여 색상 설정

RGB는 추가 색상 모델입니다. ~에 영어 덧셈- 덧셈. RGB는 영어 단어 Red, Green, Blue - red, green, blue의 약어입니다. 이를 통해 RGB 모델에서는 세 가지 색상(빨간색, 녹색, 파란색)을 서로 다른 양으로 추가하여 색상이 합성된다는 것이 분명해졌습니다.

빨간색, 녹색, 파란색을 혼합하면 수백만 가지 색상을 얻을 수 있습니다. 가능한 모든 조합은 컴퓨터 메모리에 저장됩니다.

요점을 파악하세요.

이 형식으로 속성을 설정하려면 rgb(r, g, b) 표기법을 사용합니다. 여기서 r, g, b는 각 색상(빨간색, 녹색, 파란색)에 대한 세 가지 채널입니다. 각 채널의 값은 0~255 범위에서 설정됩니다.

예제 코드.

모든 것을 명확하게 하기 위해 코드 예제는 다음과 같습니다.

CSS의 RGB

RGB(255, 0, 0)
RGB(0, 255, 0)
RGB(0, 0, 255)

이 예제의 작동 방식은 다음과 같습니다.

그림 1. RGB 색상.

예를 들어 설명합니다.

페이지 시작 부분에서 div.rgb 클래스를 생성합니다. 이는 태그에 의해 생성된 블록에 필요합니다.

필요한 크기인 240px x 40px로 표시되었습니다. line-height 속성에 40px 값, 즉 블록 높이와 동일한 값을 할당하면 블록에 텍스트를 표시할 수 있습니다.
수직 중앙에. 규칙을 사용하여 텍스트를 가로 중앙에 배치합니다( 텍스트 정렬 : 가운데 ;).

다음으로 코드에서 블록의 배경색을 설정합니다.

style 속성을 사용하고, background 속성을 사용하고, rgb(255, 0, 0) , rgb(0, 255, 0) 및 rgb(0, 0, 255) 에 값을 할당합니다. 즉, 하나의 채널을 가능한 한 포화 상태로 교대로 만들고 나머지 채널은 값이 0이므로 합성에 사용되지 않습니다.

이 예제를 편집하고 rgb(100, 100, 100) 과 같은 고유한 값을 지정해 보세요.

RGBA를 사용하여 색상 설정

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

예제 코드.

CSS3의 RGBA

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

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

CSS3의 RGBA

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

알파 채널 값이 0이면 모든 색상이 보이지 않게 됩니다(완전히 투명함). 값이 1이면 변경 없이 RGB 코드의 색상을 변환합니다. rgba(255,0,0,1.0) 속성은 빨간색 rgb(255, 0, 0) 색상을 표시합니다.

16진수 값별(HEX 코드)

일상생활에서 우리는 십진법을 사용합니다. 그 기원은 매우 간단합니다. 우리 손에는 열 개의 손가락이 있고, 손가락으로 숫자를 세는 것이 생활에서 편리했습니다. 만약에 십진법 10자리: 0부터 9까지, 숫자 10이 다음 숫자이고, 16진수 체계는 16자리이고, 다음 숫자는 숫자 16이 됩니다.

색상 코드를 표시하기 위해 0부터 9까지의 일반 십진수를 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진수임이 분명합니다. 네, 기록상으로요 십진수 16진수 표기법으로 255는 FF입니다.

16진수 체계는 컴퓨터가 더 이해하기 쉽고, 16진수 값으로 설정된 값을 더 빠르게 처리합니다.

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

CSS의 HEX 코드

#FF0000
#00FF00
#0000FF

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

다음은 위 페이지의 "RGB를 사용하여 색상 설정" 섹션의 결과가 포함된 그림입니다.

그림 1. RGB 색상.

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

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

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

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

HSL을 사용하여 색상 설정

CSS3에 등장 새로운 형식색상을 나타내기 위해.

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

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

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


그림 2. HSL 색상환.

두 번째 값인 채도(Saturate)는 백분율로 설정됩니다. 채도가 100%이면 색상은 최대한 "과즙이 풍부"하고, 채도 표시기가 0%로 갈수록 색상이 더 흐려지고 회색으로 희미해집니다.

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

HSLA를 사용하여 색상 설정

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

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

CSS3의 새로운 형식(HSL, HSLA 및 RGBA)은 IE 9.0, Opera 10.0 Firefox 3.0 버전부터 브라우저에서 작동합니다. 이전 브라우저에서 스타일이 작동하도록 하려면 어떻게 해야 합니까?

Somebloсk ( 배경색: rgb(255,50,50); 배경색: rgba(255,50,50,0.85) )

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

15/02/26 8.9K

아시다시피 색상은 사람의 정신적, 육체적 상태에 영향을 미칠 수 있습니다. 매일 인터넷에서 웹사이트를 검색하는 동안 눈은 수백만 가지 색상과 음영을 평가합니다. 색상의 심리학에 익숙한 웹 디자이너는 특정 목표를 달성하기 위해 방문자의 기분을 조작할 수 있습니다.

이는 일부 음영이 차분하고 일부는 흥분된다는 사실 때문입니다. 다음으로 컴퓨터 기술을 사용하여 색상이 합성되고 표시되는 방법에 대해 이야기하겠습니다.

RGB는 다음과 같은 세 가지 주요 구성 요소를 다양한 비율로 혼합하여 모든 색상과 해당 음영을 얻는 방법을 나타내는 색상 모델입니다.

  • 빨간색 ( 빨간색);
  • 채색 (녹색);
  • 파란색( 파란색).

여기서 RGB라는 약칭이 유래되었습니다. 이러한 색상이 주요 색상으로 선택된 이유는 다음과 같습니다. 그 이유는 인간 눈의 망막 생리학과 이를 인식하는 방식입니다.


RGB 모델은 오늘날에도 가장 인기가 높으며 TV 화면과 색상을 재현하는 데 사용됩니다. 컴퓨터 모니터. 제조업체가 제품을 제공하기 때문에 다른 특성, 1996년에 만들어졌습니다. 하나의 시스템 Microsoft와 HP가 공동 개발한 sRGB라는 RGB 기반 색 합성입니다.

색상의 수치 표현

앞서 언급했듯이 RGB 색상은 기본 색상을 혼합하여 구성됩니다. 각각의 강도를 설명하기 위해 색상이 0-255(8비트) 범위로 표시되는 체계가 채택되었으며, 이는 16진수 표기법에서 00-FF에 해당합니다.

즉, 기본 색상은 다음과 같습니다.

  • 빨간색 - RGB(255,0,0);
  • 녹색 – RGB(0,255,0);
  • 파란색 - RGB(0,0,255);

색상 강도가 255보다 작은 값을 취하면 빨간색, 녹색 및 파란색의 다양한 음영이 얻어집니다. 다음은 그라데이션 표와 각 음영의 16진수 값입니다.

RGB 색상표

당연히 원색의 그라데이션 외에도 혼합된 색상도 있으며 그 수는 상당히 많습니다. 따라서 기존의 모든 음영과 이름 및 숫자 표현을 표시하는 RGB 색상 표가 생성되었습니다( 10진수와 16진수 형태로).

여기에서 볼 수 있습니다. 이 테이블몇 초 안에 필요한 색상을 찾고 수치 표현을 찾을 수 있으므로 웹 디자이너의 삶이 훨씬 쉬워집니다.

안전한 RGB 색상 팔레트

그러나 어느 시점에서 다른 브라우저에서 색상을 표시하는 데 문제가 있었고 이를 해결하기 위해 수학적 계산을 통해 파생된 소위 "안전한" RGB 색상 팔레트가 컴파일되었습니다.

브라우저가 색상을 올바르게 표시할 수 없으면 인접한 색상을 혼합하여 필요한 색상에 가까운 색상을 얻으려고 시도하며 결과는 전혀 받아들일 수 없을 가능성이 높습니다.

코드 사용 RGB 색상이 팔레트를 사용하면 웹 개발자는 다음을 사용하여 볼 때 사이트 페이지의 색상 표시에 대해 걱정할 필요가 없습니다. 다른 브라우저, 다양한 플랫폼과 모니터에서. 켜져 있지만 이 순간안전한 색상 표는 관련성을 잃습니다( 기술 발전은 여전히 ​​​​멈추지 않습니다), 그것을 사용하면 그들이 말하는 것처럼 평화롭게 잠을 잘 수 있습니다.

RGB 모델의 골드 색상

"금"이라는 단어는 14세기 초 Aurum(금)이라는 화학 원소의 색상을 설명하기 위해 처음 사용되었습니다. RGB 모델에서 금색은 다음 수치로 표현됩니다.

  • RGB(255, 215, 0) – 십진법;
  • HEX #FFD700 – 16진수 시스템.

RGB 모델의 베이지 색상

베이지 색은 표현력이 가장 뛰어나지는 않더라도 역사상 다소 중요한 위치를 차지합니다. 많은 문화 기념물, 특히 고대 조각품은 베이지색 색조를 띠는 동석과 동석으로 만들어졌습니다. 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으로 간주되어야 합니다.

이름으로

인터넷 익스플로러 크롬 오페라 원정 여행 파이어폭스 기계적 인조 인간 iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

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

테이블 1. 색상의 이름
이름 색상 암호 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

그림 물감

경고

사이트에 나열된 모든 사자 포획 방법은 이론적이며 계산 방법을 기반으로 합니다. 저자는 사용 시 안전을 보장하지 않으며 결과에 대해 어떠한 책임도 지지 않습니다. 사자는 포식자이자 위험한 동물이라는 것을 기억하세요!

아아아!

결과 이 예그림에 표시됩니다. 2.

쌀. 2. 웹페이지의 색상

>>색상 관리

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.
숫자를 한 숫자 체계에서 다른 숫자 체계로 또는 그 반대로 변환하려면 아래 계산기를 사용하세요. 여기서 최대값은 다음과 같습니다. FF - 255 .

이 경우 색상은 각각 두 자리 숫자로 구성된 세 개의 16진수 숫자로 지정됩니다. 첫 번째 숫자는 강도를 결정합니다. 빨간색색상, 중간- 녹색, 마지막 것- 파란색그림 물감. 모든 숫자는 다음 범위의 값을 가질 수 있습니다. 00 ~ 전에 FF(0에서 255까지). 예를 들어 녹색은 다음과 같이 주어진다. #00FF00, 빨간색 - 좋아요 #FF0000, 파란색 - 좋아요 #0000FF, 흰색 - 같은 #FFFFFF, 색상이 전혀 없거나 검은색은 다음과 같이 표시됩니다. #000000 .

아래 양식에서 세 가지 색상 각각에 대해 16진수 값을 지정하고 출력 필드를 클릭하여 혼합 결과를 확인할 수 있습니다.

빨간색녹색파란색
0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f
...여기를 클릭하세요

일부 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
파파야휩 피치퍼프 페루 분홍색
자두 파우더블루 로지브라운 로얄 블루
새들브라운 씨그린 조개 시에나
하늘색 슬레이트블루 슬레이트그레이
스프링그린 스틸블루 탠 껍질
물오리 엉겅퀴 훈장 토마토 터키 옥
제비꽃 화이트스모크 연두색
색상 이름이 포함된 소문자 리터럴 목록은 상당히 광범위하고 충분합니다. 너무 특이해서 이름조차 없는 배경색을 설정해야 하는 경우 16진수 값을 사용할 수 있습니다.

안전한 색상 팔레트 사용

불행하게도 다양한 플랫폼, 다양한 시스템 설정에서는 올바른 색상 재현이 문제가 됩니다. 문제는 브라우저가 항상 조정을 시도한다는 것입니다 색상 팔레트아래 문서 환경 설정색상을 독립적으로 혼합하고 교체하여 모니터의 기능을 향상시킵니다. 결과적으로 사용자는 웹마스터가 보여주고자 했던 내용을 정확하게 보지 못하는 경우가 있습니다. 이러한 상황을 해결하는 방법은 팔레트를 사용하는 것에서 발견되었으며, 팔레트의 각 색상은 서로 다른 플랫폼의 모든 브라우저에서 동일하게 렌더링되도록 보장됩니다. 이것이 소위 보장팔레트라고도 함 안전한팔레트. 이 팔레트에는 색상 구성 요소가 다음 값을 갖는 색상이 포함되어 있습니다. 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
보다 암호 보다 암호 보다 암호 보다 암호 보다 암호 보다 암호
공유하다