HTML CSS 색상코드 – 컬러코드 16가지 RGB CMYK 가산혼합

티스토리, 워드프레스, 네이버블로그 HTML CSS RGB 색상코드 블랜딩

웹 사이트를 만들 때 색상은 중요한 역할을 합니다. HTML과 CSS를 사용하여 웹 사이트의 색상을 지정하는 여러 가지 방법이 있으며 이러한 색상코드를 통해 티스토리워드프레스, 네이버블로그등 웹사이트에 원하는 색상을 표현할 수 있습니다.

참고 : 포토샵 캔버스 크기 변경 RGB CMYK 해상도 확인

포토샵 CMYK RGB 정의 및 모드변환 방법
HTML CSS 색상코드 컬러코드 16가지 RGB 가산혼합 색상표 1

가장 일반적인 방법은 십육진법으로 색상을 표현하며 RGB 가산혼합을 사용하여 빨강, 녹색, 청록색을 나타내는 두 자리 십육진수 세 쌍을 조합하여 색상을 지정합니다.

색상 선택기
RGB:
CMYK:
HEX:

각 채널은 0부터 255까지의 값을 가질 수 있으며, 이를 두 자리 십육진수로 표현합니다. 예를 들어, #FF0000은 빨간색을 나타내며, #00FF00은 녹색을, #0000FF는 청록색을 나타냅니다.

구분설명색상 코드 예시
배경색
(Background Color)
HTML 요소의 배경색을 지정background-color: #RRGGBB
글자색
(Text Color)
HTML 요소의 글자색을 지정color: #RRGGBB
테두리색
(Border Color)
HTML 요소의 테두리색을 지정border-color: #RRGGBB
색상 코드
(Color Codes)
색상을 표현하기 위해 사용되는 코드#RRGGBB: 16진수 RGB 값
(예: #FF0000는 빨간색을 의미)

rgb(R, G, B): 10진수 RGB 값
(예: rgb(255, 0, 0)은 빨간색을 의미

rgba(R, G, B, A): 10진수 RGBA 값
(예: rgba(255, 0, 0, 0.5) 반투명한 빨간색 의미
HTML CSS 색상코드 컬러코드 16가지 RGB 가산혼합 색상표 3

또한, 몇 가지 색상에는 이름이 지정되어 있습니다. HTML 4.01 표준에는 16가지 색깔 이름이 정의되어 있으며, 예를 들어 검정은 "black", 빨강은 "red", 초록은 "green"과 같이 이름으로 색상을 지정할 수 있습니다.

HTML CSS 색상코드 컬러코드 16가지 RGB 가산혼합 색상표 4

또한 X11 색 이름을 사용하여 색상을 지정할 수도 있으며 이는 넷스케이프나 인터넷 익스플로러와 같은 브라우저에서 지원되는 색상 이름입니다.

마지막으로, 웹 안전 색상이라고도 하는 표준으로 설정된 색상을 사용할 수 있습니다. 이러한 색상은 호환성을 위해 216가지로 제한되어 있으며, 모두 51의 배수로 이루어져 있습니다.

이러한 다양한 방법을 사용하여 웹 사이트에서 원하는 색상을 선택할 수 있습니다. 색상은 웹 디자인의 중요한 요소이므로 적절한 색상 선택은 사용자 경험과 브랜딩에 큰 영향을 미칠 수 있습니다.

HTML 특정요소 색상설정

  1. HTML 태그 배경색 변경:
    • 태그 뒤에 style 속성과 background-color 속성을 사용하여 배경색을 변경합니다.
    • 색 이름(gold, greenyellow, tomato) 또는 색 코드(#D6B1EA)를 입력합니다.
  2. HTML 글자 색 변경:
    • 태그 뒤에 style 속성과 color 속성을 사용하여 글자 색을 변경합니다.
    • 색 이름(red, green, blue, hotpink) 또는 색 코드(#83AB57)를 입력합니다.
  3. HTML 테두리 색 변경:
    • border 속성을 사용하여 테두리 색을 변경합니다.
    • style 속성 뒤에 border 값을 입력합니다.
    • 선 두께(px), 선 종류(solid), 색 이름(red, blue, green) 또는 색 코드(#57AB9A)를 입력합니다.

<element style="color: code;"></element>을 사용하여 특정 요소의 색상을 설정합니다.

HTML CSS 색상코드 컬러코드 16가지 RGB 가산혼합 색상표 5

예시: 단락 텍스트 색상을 빨간색으로 설정:

  • 특정 단락의 색상 설정: <p style="color: #FF0000;">Some text ...</p>
  • 모든 단락의 색상 설정
<style> p { color: #FF0000; } </style>
  1. 요소의 배경색 설정:
    • element { background: code; } 형식으로 요소의 배경색을 설정합니다.
  2. 예시: 단락 배경색을 빨간색으로 설정:
    • 특정 단락의 배경색 설정: <p style="background: #FF0000;">Some text ...</p>
    • 모든 단락의 배경색 설정
<style> p { background: #FF0000; } </style>
  1. 요소의 테두리 색상 설정:
    • element { border-color: topcode rightcode bottomcode leftcode; } 형식으로 요소의 테두리 색상을 설정합니다.
  2. 예시: 단락 테두리 색상을 빨강, 녹색, 파랑, 검정으로 설정:
    • 특정 단락의 테두리 색상 설정: <p style="border-color: #FF0000 #00FF00 #0000FF #000000; border-style: solid;">Some text ...</p>
    • 모든 단락의 테두리 색상 설정
<style> p { border-color: #FF0000 #00FF00 #0000FF #000000; } </style>

웹페이지 HTML CSS 색상표

HTML 색상 CSS 코드 표
색상 이름HEX

White#FFFFFF

Snow#FFFAFA

Honeydew#F0FFF0

MintCream#F5FFFA

Azure#F0FFFF

AliceBlue#F0F8FF

GhostWhite#F8F8FF

WhiteSmoke#F5F5F5

Seashell#FFF5EE

Beige#F5F5DC

OldLace#FDF5E6

FloralWhite#FFFAF0

Ivory#FFFFF0

AntiqueWhite#FAEBD7

Linen#FAF0E6

LavenderBlush#FFF0F5

MistyRose#FFE4E1

Cornsilk#FFF8DC

BlanchedAlmond#FFEBCD

Bisque#FFE4C4

NavajoWhite#FFDEAD

Wheat#F5DEB3

Burlywood#DEB887

Tan#D2B48C

RosyBrown#BC8F8F

SandyBrown#F4A460

Goldenrod#DAA520

DarkGoldenrod#B8860B

Peru#CD853F

Chocolate#D2691E

SaddleBrown#8B4513

Sienna#A0522D

Brown#A52A2A

Maroon#800000

LightSalmon#FFA07A

Salmon#FA8072

DarkSalmon#E9967A

LightCoral#F08080

IndianRed#CD5C5C

Crimson#DC143C

Firebrick#B22222

DarkRed#8B0000

Red#FF0000

OrangeRed#FF4500

Tomato#FF6347

Coral#FF7F50

DarkOrange#FF8C00

Orange#FFA500

Yellow#FFFF00

LightYellow#FFFFE0

LemonChiffon#FFFACD

LightGoldenrodYellow#FAFAD2

PapayaWhip#FFEFD5

Moccasin#FFE4B5

PeachPuff#FFDAB9

PaleGoldenrod#EEE8AA

Khaki#F0E68C

DarkKhaki#BDB76B

Gold#FFD700

DarkOliveGreen#556B2F

Olive#808000

OliveDrab#6B8E23

YellowGreen#9ACD32

LimeGreen#32CD32

Lime#00FF00

LawnGreen#7CFC00

Chartreuse#7FFF00

GreenYellow#ADFF2F

SpringGreen#00FF7F

MediumSpringGreen#00FA9A

LightGreen#90EE90

PaleGreen#98FB98

DarkSeaGreen#8FBC8F

MediumAquamarine#66CDAA

MediumSeaGreen#3CB371

SeaGreen#2E8B57

ForestGreen#228B22

Green#008000

DarkGreen#006400

Aqua#00FFFF

Cyan#00FFFF

LightCyan#E0FFFF

PaleTurquoise#AFEEEE

Aquamarine#7FFFD4

Turquoise#40E0D0

MediumTurquoise#48D1CC

DarkTurquoise#00CED1

LightSeaGreen#20B2AA

CadetBlue#5F9EA0

DarkCyan#008B8B

Teal#008080

LightSteelBlue#B0C4DE

PowderBlue#B0E0E6

LightBlue#ADD8E6

SkyBlue#87CEEB

LightSkyBlue#87CEFA

DeepSkyBlue#00BFFF

DodgerBlue#1E90FF

CornflowerBlue#6495ED

SteelBlue#4682B4

RoyalBlue#4169E1

Blue#0000FF

MediumBlue#0000CD

DarkBlue#00008B

Navy#000080

MidnightBlue#191970

Pink#FFC0CB

LightPink#FFB6C1

HotPink#FF69B4

DeepPink#FF1493

PaleVioletRed#DB7093

MediumVioletRed#C71585

Lavender#E6E6FA

Thistle#D8BFD8

Plum#DDA0DD

Violet#EE82EE

Orchid#DA70D6

Fuchsia#FF00FF

Magenta#FF00FF

MediumOrchid#BA55D3

MediumPurple#9370DB

BlueViolet#8A2BE2

DarkViolet#9400D3

DarkOrchid#9932CC

DarkMagenta#8B008B

Purple#800080

Indigo#4B0082

DarkSlateBlue#483D8B

SlateBlue#6A5ACD

MediumSlateBlue#7B68EE

RebeccaPurple#663399

Gainsboro#DCDCDC

LightGray#D3D3D3

LightGrey#D3D3D3

Silver#C0C0C0

DarkGray#A9A9A9

DarkGrey#A9A9A9

Gray#808080

Grey#808080

DimGray#696969

DimGrey#696969

LightSlateGray#778899

LightSlateGrey#778899

SlateGray#708090

SlateGrey#708090

DarkSlateGray#2F4F4F

DarkSlateGrey#2F4F4F

Black#000000


참고 : 사진인화 인쇄 깨지지 않는 해상도 및 DPI – 이미지 사이즈

Leave a Comment