HTML의 색상 이름-HTML 튜토리얼-php.cn

HTML의 색상 이름은 웹 및 애플리케이션 디자인 과정에서 매우 중요한 역할을 합니다. 이는 웹사이트나 애플리케이션의 모양과 느낌을 바꾸는 데 도움이 될 뿐만 아니라 애플리케이션을 더욱 매력적이고 대화형으로 만듭니다. HTML의 색상 이름을 HTML 코딩 형식으로 정의하는 방법은 다양합니다. 추가 CSS 속성을 사용하면 더 효과적으로 사용할 수 있습니다. 페이지 수준에서 HTML 색상 이름을 본문 부분에 포함하여 사용할 수 있으며 특정 요소에 개별 색상을 설정할 수도 있습니다. HTML의 색상 이름은 텍스트 색상, 배경 색상, 테두리 색상, 그림자, 그라디언트 등에 의도적으로 사용됩니다.

구문

HTML 색상을 사용할 수 있는 방법은 다양합니다. 하나씩 살펴보겠습니다.
HTML 색상의 가장 기본적인 사용법은 텍스트에 적용하는 것입니다. 다양한 HTML 색상으로 텍스트를 표시하려면 텍스트 색상으로 사용하세요.

1. 텍스트 색상 구문

color : color_name;

로그인 후 복사

이 구문이 어떻게 작동하는지 살펴보겠습니다.

<h4 style="color:blue;">Welcome to EDUBCA<h4>

로그인 후 복사

위 예에서는 다음과 같이 파란색으로 Welcome to EDUBCA라는 텍스트가 표시됩니다.

HTML의 색상 이름

HTML 색상을 사용하면 배경색으로 추가할 수도 있습니다.

2. 배경색 구문

background-color:color_name;

로그인 후 복사

이 구문이 어떻게 작동하는지 살펴보겠습니다.

<p style="background-color:light-green;">

로그인 후 복사

이 카테고리에는 디자인 과정의 다양한 하위 카테고리에 걸쳐 있는 모든 디자인 정보가 포함되어 있습니다.

HTML의 색상 이름

다음 구문을 사용하면 HTML 색상을 사용하여 텍스트나 요소 주위에 색상 테두리를 추가할 수도 있습니다.

3. 테두리 색상 구문: border

value color_name;

로그인 후 복사

이 구문이 어떻게 작동하는지 살펴보겠습니다.

<h4 style="border: 4px solid DodgerBlue;"> EDUCBA free certification course </h4>

HTML의 색상 이름

HTML의 색상 이름 유형

HTML에서 색상 이름을 정의하는 방법에는 여러 가지가 있습니다. 다른 색깔로 다른 이름을 기억하는 것은 어렵습니다. 따라서 다양한 색상에 몇 가지 값을 부여하기로 결정해야 합니다. 하나씩 살펴보겠습니다.

HTML의 색상 이름

1. RGB 값

Red, Green, Blue 색상 형식 값의 조합으로 HTML 색상 이름을 정의하는 방법 중 하나입니다. 숫자 0에서 255 사이의 색상 강도를 정의하는 데 사용되는 것은 무엇입니까?
RGB 조합을 사용하여 검정색을 정의하려면 RGB(0,0,0)가 좋습니다. 여기서 색상의 모든 매개변수는 0으로 설정됩니다. 따라서 검은색으로 표시됩니다.
다른 RGB(0,0,255)가 파란색으로 표시되는 것처럼 255가 파란색으로 가장 높은 값으로 설정되고 나머지는 0으로 설정됩니다.
3개의 동일한 RGB 값을 사용하면 회색 음영이 생성됩니다.

예: 가장 어두운 색상의 경우 RGB(0,0,0)이고 가장 밝은 색상의 경우 RGB(255,255,255)입니다.

2. HEX 값

HTML에서 가장 일반적으로 사용되는 색상 이름 형식 중 하나로 색상 이름을 16진수 값 형식으로 정의합니다.
#rrggbb 형식에는 빨간색의 경우 RR, 녹색의 경우 gg, 파란색의 경우 bb 값이 포함되며 16진수 값은 00 사이에 배치됩니다.
색상 #00ff00 을 정의하는 한 가지 예를 살펴보겠습니다. 이 값은 녹색이 가장 높은 값(ff)을 포함하고 다른 값은 00으로 설정되어 있기 때문에 녹색으로 생성됩니다.

3. HSL 값

Hue, Saturation, Lightness 형식으로 HTML 색상을 정의하는 또 다른 형식입니다.
이제 모든 용어를 하나씩 살펴보겠습니다. 색조는 0에서 360 사이의 색상 정도로 정의됩니다. 0은 빨간색, 120은 녹색, 240은 파란색입니다.
채도는 색상의 값을 백분율로 정의하며, 여기서 0%는 회색 음영을 나타내고 100%는 풀 컬러를 나타냅니다.
명도는 백분율로도 작동하며, 검정색은 0%, 밝지도 어두움도 아닌 50%, 흰색은 100%로 정의됩니다.

4. RGBA 값

이 유형의 HTML 색상은 색상의 불투명도를 정의하는 데 알파가 사용되는 알파 값을 포함하여 RGB 색상의 확장을 정의합니다.
알파 값은 0.0(완전히 투명함)에서 1.0(전혀 투명하지 않음) 사이입니다.
예제는 rgba(255,99,71,0)

5. HSLA 가치

HSL 색상 값과 색상의 불투명도를 정의하기 위한 추가 알파 값과 동일하게 작동합니다.
hsla(8,100%,80%,0) 완전 투명한 색상입니다.
hsla(8,100%,80%,0.9) 그렇게 투명하지는 않은 색상입니다.

HTML 색상 이름 사용

웹페이지에 색상을 구현하는 것은 쉽고 인라인과 별도의 CSS 스타일시트를 통해 수행할 수 있습니다.

When you are going to be using the same HTML Color Names on a page multiple times, it is a better idea to use CSS Sheet to define and set colors. Conversely, if you only have to use color once or twice, using the inline method is considered better.

1. Using HTML Color Inline

<body>
<h3 style="color: Brown">Brown H3 Heading</h3>
<p style="color: Gainsboro">Gainsboro colored paragraph text</p>
</body>

로그인 후 복사

2. Implementing in CSS

h1 { color: Brown; }
p { color: Gainsboro; }

로그인 후 복사

Different HTML Color Codes

Colors can be denoted by using their hex value or their name. HTML has support for the most common colors; in this article, I will share with you 140 names and hex values of these colors. One thing to keep in mind is that you don’t have to limit yourself to these colors; you can use any color picker tool to find the Hex value of any color you want and use it on your web page.

Now that you know what HTML Color Names are and how you can use them in your pages, here is a list of Color names with appropriate color codes:

1. Grey and Black HTML Color Names

Grey and Black colors are, in most cases, perfect for the text color of the page as against a white background; these colors have the best readability. One interesting thing to keep in mind is that modern phones with OLED displays done need any battery power to display Black color; if your audience is going to be on mobile, it is a wise idea to use Black as a background color and white or other light colors as the foreground color.

Code	Color
#000000	Black
#0C090A	Night
#2C3539	Gunmetal
#2B1B17	Midnight
#34282C	Charcoal
#25383C	Dark Slate Grey
#3B3131	Oil
#413839	Black Cat
#3D3C3A	Iridium
#463E3F	Black Eel
#4C4646	Black Cow
#504A4B	Gray Wolf
#565051	Vampire Gray
#5C5858	Gray Dolphin
#625D5D	Carbon Gray
#666362	Ash Gray
#6D6968	Cloudy Gray
#726E6D	Smokey Gray
#736F6E	Gray
#837E7C	Granite
#848482	Battleship Gray
#B6B6B4	Gray Cloud
#D1D0CE	Gray Goose
#E5E4E2	Platinum
#BCC6CC	Metallic Silver
#98AFC7	Blue Gray
#6D7B8D	Light Slate Gray
#657383	Slate Gray
#616D7E	Jet Gray

2. 파란색 HTML 색상 이름

파란색 밑줄이 그어진 텍스트는 대부분 웹 브라우저의 기본 링크 스타일이므로 링크로 간주됩니다. 방문자가 하이퍼링크로 착각할 수 있으므로 페이지의 모든 텍스트에 파란색을 사용하지 않는 것이 좋습니다.

#646D7E	Mist Blue
#566D7E	Marble Blue
#737CA1	Slate Blue
#4863A0	Steel Blue
#2B547E	Blue Jay
#2B3856	Dark Slate Blue
#151B54	Midnight Blue
#000080	Navy Blue
#342D7E	Blue Whale
#15317E	Lapis Blue
#151B8D	Denim Dark Blue
#0000A0	Earth Blue
#0020C2	Cobalt Blue
#0041C2	Blueberry Blue
#2554C7	Sapphire Blue
#1569C7	Blue Eyes
#2B60DE	Royal Blue
#1F45FC	Blue Orchid
#6960EC	Blue Lotus
#736AFF	Light Slate Blue
#357EC7	Windows Blue
#368BC1	Glacial Blue Ice
#488AC7	Silk Blue
#3090C7	Blue Ivy
#659EC7	Blue Koi
#87AFC7	Columbia Blue
#95B9C7	Baby Blue
#728FCE	Light Steel Blue
#2B65EC	Ocean Blue
#306EFF	Blue Ribbon
#157DEC	Blue Dress
#1589FF	Dodger Blue
#6495ED	Cornflower Blue
#6698FF	Sky Blue
#38ACEC	Butterfly Blue
#56A5EC	Iceberg
#5CB3FF	Crystal Blue
#3BB9FF	Deep Sky Blue
#79BAEC	Denim Blue
#82CAFA	Light Sky Blue
#82CAFF	Day Sky Blue
#A0CFEC	Jeans Blue
#B7CEEC	Blue Angel
#B4CFEC	Pastel Blue
#C2DFFF	Sea Blue
#C6DEFF	Powder Blue
#AFDCEC	Coral Blue
#ADDFFF	Light Blue
#BDEDFF	Robin Egg Blue
#CFECEC	Pale Blue Lily
#E0FFFF	Light Cyan
#EBF4FA	Water
#F0F8FF	AliceBlue
#F0FFFF	Azure
#CCFFFF	Light Slate
#93FFE8	Light Aquamarine
#9AFEFF	Electric Blue
#7FFFD4	Aquamarine
#00FFFF	Cyan or Aqua
#7DFDFE	Tron Blue
#57FEFF	Blue Zircon
#8EEBEC	Blue Lagoon
#50EBEC	Celeste
#4EE2EC	Blue Diamond
#81D8D0	Tiffany Blue
#92C7C7	Cyan Opaque
#77BFC7	Blue Hosta
#78C7C7	Northern Lights Blue
#48CCCD	Medium Turquoise
#43C6DB	Turquoise
#46C7C7	Jellyfish
#7BCCB5	Blue green

3. Green HTML Colors

On sites related to nature, money, environment etc, Green can be a good choice of color to use as a background.

#43BFC7	Macaw Blue Green
#3EA99F	Light Sea Green
#3B9C9C	Dark Turquoise
#438D80	Sea Turtle Green
#348781	Medium Aquamarine
#307D7E	Greenish Blue
#5E7D7E	Grayish Turquoise
#4C787E	Beetle Green
#008080	Teal
#4E8975	Sea Green
#78866B	Camouflage Green
#848b79	Sage Green
#617C58	Hazel Green
#728C00	Venom Green
#667C26	Fern Green
#254117	Dark Forest Green
#306754	Medium Sea Green
#347235	Medium Forest Green
#437C17	Seaweed Green
#387C44	Pine Green
#347C2C	Jungle Green
#347C17	Shamrock Green
#348017	Medium Spring Green
#4E9258	Forest Green
#6AA121	Green Onion
#4AA02C	Spring Green
#41A317	Lime Green
#3EA055	Clover Green
#6CBB3C	Green Snake
#6CC417	Alien Green
#4CC417	Green Apple
#52D017	Yellow Green
#4CC552	Kelly Green
#54C571	Zombie Green
#99C68E	Frog Green
#89C35C	Green Peas
#85BB65	Dollar Bill Green
#8BB381	Dark Sea Green
#9CB071	Iguana Green
#B2C248	Avocado Green
#9DC209	Pistachio Green
#A1C935	Salad Green
#7FE817	Hummingbird Green
#59E817	Nebula Green
#57E964	Stoplight Go Green
#64E986	Algae Green
#5EFB6E	Jade Green
#00FF00	Green
#5FFB17	Emerald Green
#87F717	Lawn Green
#8AFB17	Chartreuse
#6AFB92	Dragon Green
#98FF98	Mint green
#B5EAAA	Green Thumb
#C3FDB8	Light Jade
#CCFB5D	Tea Green
#B1FB17	Green Yellow
#BCE954	Slime Green
#EDDA74	Goldenrod
#EDE275	Harvest Gold
#FFE87C	Sun Yellow

4. Yellow HTML Color Names

Yellow can be used to set a non-serious mood, show creativity and optimism in a page. Keep in mind that yellow works better as background then a text color.

#FFFF00	Yellow
#FFF380	Corn Yellow
#FFFFC2	Parchment
#FFFFCC	Cream
#FFF8C6	Lemon Chiffon
#FFF8DC	Cornsilk
#F5F5DC	Beige
#FBF6D9	Blonde
#FAEBD7	AntiqueWhite
#F7E7CE	Champagne
#FFEBCD	BlanchedAlmond
#F3E5AB	Vanilla
#ECE5B6	Tan Brown
#FFE5B4	Peach
#FFDB58	Mustard
#FFD801	Rubber Ducky Yellow
#FDD017	Bright Gold
#EAC117	Golden brown
#F2BB66	Macaroni and Cheese
#FBB917	Saffron
#FBB117	Beer
#FFA62F	Cantaloupe
#E9AB17	Bee Yellow

5. Brown HTML Colors

Brown background can make it difficult to read the white or black text, you can resort to user other colors that have good contrast against your shade of brown.

#E2A76F	Brown Sugar
#DEB887	BurlyWood
#FFCBA4	Deep Peach
#C9BE62	Ginger Brown
#E8A317	School Bus Yellow
#EE9A4D	Sandy Brown
#C8B560	Fall Leaf Brown
#D4A017	Orange Gold
#C2B280	Sand
#C7A317	Cookie Brown
#C68E17	Caramel
#B5A642	Brass
#ADA96E	Khaki
#C19A6B	Camel brown
#CD7F32	Bronze
#C88141	Tiger Orange
#C58917	Cinnamon
#AF9B60	Bullet Shell
#AF7817	Dark Goldenrod
#B87333	Copper
#966F33	Wood
#806517	Oak Brown
#827839	Moccasin
#827B60	Army Brown
#786D5F	Sandstone
#493D26	Mocha
#483C32	Taupe
#6F4E37	Coffee
#835C3B	Brown Bear
#7F5217	Red Dirt
#7F462C	Sepia

6. Orange HTML Colors

Orange works great to highlight a point the when color used as a background and it can evoke feeling of enthusiasm and warmth without being too tacky.6. Orange HTML Colors

#C47451	Orange Salmon
#C36241	Rust
#C35817	Red Fox
#C85A17	Chocolate
#CC6600	Sedona
#E56717	Papaya Orange
#E66C2C	Halloween Orange
#F87217	Pumpkin Orange
#F87431	Construction Cone Orange
#E67451	Sunrise Orange
#FF8040	Mango Orange
#F88017	Dark Orange
#FF7F50	Coral
#F88158	Basket Ball Orange
#F9966B	Light Salmon
#E78A61	Tangerine
#E18B6B	Dark Salmon
#E77471	Light Coral
#F75D59	Bean Red
#E55451	Valentine Red
#E55B3C	Shocking Orange

7. Red HTML Color Codes

For some browsers, Red underlined text is used as visited links, you should avoid using it to not confuse the visitors.

#FF0000	Red
#FF2400	Scarlet
#F62217	Ruby Red
#F70D1A	Ferrari Red
#F62817	Fire Engine Red
#E42217	Lava Red
#E41B17	Love Red
#DC381F	Grapefruit
#C34A2C	Chestnut Red
#C24641	Cherry Red
#C04000	Mahogany
#C11B17	Chilli Pepper
#9F000F	Cranberry
#990012	Red Wine
#8C001A	Burgundy
#954535	Chestnut
#7E3517	Blood Red
#8A4117	Sienna
#7E3817	Sangria
#800517	Firebrick
#810541	Maroon
#7D0541	Plum Pie
#7E354D	Velvet Maroon
#7D0552	Plum Velvet
#7F4E52	Rosy Finch
#7F5A58	Puce
#7F525D	Dull Purple
#B38481	Rosy Brown
#C5908E	Khaki Rose

8. Pink HTML Color Codes

According to color science, Pink and its shades can be used if you want the visitor to have a feeling of confidence, sophistication and warmness in their subconscious.

#C48189	Pink Bow
#C48793	Lipstick Pink
#E8ADAA	Rose
#ECC5C0	Rose Gold
#EDC9AF	Desert Sand
#FDD7E4	Pig Pink
#FCDFFF	Cotton Candy
#FFDFDD	Pink Bubble Gum
#FBBBB9	Misty Rose
#FAAFBE	Pink
#FAAFBA	Light Pink
#F9A7B0	Flamingo Pink
#E7A1B0	Pink Rose
#E799A3	Pink Daisy
#E38AAE	Cadillac Pink
#F778A1	Carnation Pink
#E56E94	Blush Red
#F660AB	Hot Pink
#FC6C85	Watermelon Pink
#F6358A	Violet Red
#F52887	Deep Pink
#E45E9D	Pink Cupcake
#E4287C	Pink Lemonade
#F535AA	Neon Pink
#FF00FF	Magenta
#E3319D	Dimorphotheca Magenta
#F433FF	Bright Neon Pink
#D16587	Pale Violet Red
#C25A7C	Tulip Pink
#CA226B	Medium Violet Red
#C12869	Rogue Pink
#C12267	Burnt Pink
#C25283	Bashful Pink
#C12283	Dark Carnation Pink
#B93B8F	Plum

9. Purple and White HTML Color Codes

Using White Text color against White background will make it unreadable by the users and aside from not being user friendly, you could get an SEO penalty for your site thus, always use white and other light colors against dark backgrounds.

#7E587E	Viola Purple
#571B7E	Purple Iris
#583759	Plum Purple
#4B0082	Indigo
#461B7E	Purple Monster
#4E387E	Purple Haze
#614051	Eggplant
#5E5A80	Grape
#6A287E	Purple Jam
#7D1B7E	Dark Orchid
#A74AC7	Purple Flower
#B048B5	Medium Orchid
#6C2DC7	Purple Amethyst
#842DCE	Dark Violet
#8D38C9	Violet
#7A5DC7	Purple Sage Bush
#7F38EC	Lovely Purple
#8E35EF	Purple
#893BFF	Aztech Purple
#8467D7	Medium Purple
#A23BEC	Jasmine Purple
#B041FF	Purple Daffodil
#C45AEC	Tyrian Purple
#9172EC	Crocus Purple
#9E7BFF	Purple Mimosa
#D462FF	Heliotrope Purple
#E238EC	Crimson
#C38EC7	Purple Dragon
#C8A2C8	Lilac
#E6A9EC	Blush Pink
#E0B0FF	Mauve
#C6AEC7	Wisteria Purple
#F9B7FF	Blossom Pink
#D2B9D3	Thistle
#E9CFEC	Periwinkle
#EBDDE2	Lavender Pinocchio
#E3E4FA	Lavender blue
#FDEEF4	Pearl
#FFF5EE	SeaShell
#FEFCFF	Milk White
#FFFFFF	White

Some most used HTML Color Codes

These are some of the popular colors used on the web; I have put them in a separate table to quickly find these.

Red	#FF0000	White	#FFFFFF
Cyan	#00FFFF	Silver	#C0C0C0
Blue	#0000FF	Gray or Grey	#808080
DarkBlue	#0000A0	Black	#000000
LightBlue	#ADD8E6	Orange	#FFA500
Purple	#800080	Brown	#A52A2A
Yellow	#FFFF00	Maroon	#800000
Lime	#00FF00	Green	#008000
Magenta	#FF00FF	Olive	#808000

Examples of Color Name in HTML

Let us see how color name in HTML is used with the help of some examples mentioned below:

Example #1

Let us consider a general example showing how example color name in HTML is going to be used:

HTML code:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:Violet;">About Life.....</h1>
<h4 >Creativity Is Intelligence Having Fun </h4>
<p style="background-color: #00FFFF; color:blue">

로그인 후 복사

You Learn More From Failure Than From Success. Don’t Let It Stop You. Failure Builds Character. If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You

</p>
</body>
</html>

로그인 후 복사

Output:

HTML의 색상 이름

Example #2

Now we are taking another example which will define all types of HTML color as follows:

HTML code:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:rgb(255, 0, 0);">RGB defines Red color</h1>
<h1 style="color:rgb(60, 60, 60);">RGB same values define Gray shade</h1>
<h1 style="background-color:#ffa500;">New color using Hex Value</h1>
<h1 style="background-color:#787878;">Shade of Gray</h1>
<h1 style="background-color:hsl(50, 100%, 50%);">hsl color shade</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba color shade</h1>
<h1 style="color:hsla(9, 100%, 80%, 0.5);">hsla color shade</h1>
</body>
</html>

로그인 후 복사

Output:

HTML의 색상 이름

In the above example, we are able to see the use of different HTML color types and how they are named in HTML.

Example #3

One more use of HTML color is to define a border to the element, which is as follows:

In Example, Here, we can add a border to your code body, changing the background and text colour.

HTML code:

<p style="border: 2px solid #A52A2A; background-color:#ffa500;color:#FFF8DC">Self-actualizing theory talks of intrinsic rewards inherent in the task performance such as job satisfaction, feeling of achievement, etc.</p>

로그인 후 복사

Output:

HTML의 색상 이름

Conclusion

We came across that HTML colors are defined with different names, percentage value, Hex value, alpha value, and many more. Color name in HTML is used to do color for text, for background, for a border, for gradations. Different types define HTML color name as RGB, hex, hsl, rgba, hsla.

위 내용은 HTML의 색상 이름의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!