HTML 中的颜色名称

WBOY
发布: 2024-09-04 16:34:32
原创
343 人浏览过

HTML 中的颜色名称在 Web 和应用程序设计过程中起着非常重要的作用。它有助于改变我们网站或应用程序的外观和感觉,并使我们的应用程序更具吸引力和互动性。有多种方法可以将 HTML 中的颜色名称定义为 HTML 编码格式。可以使用额外的 CSS 属性来更有效地使用它。我们可以通过将 HTML 颜色名称包含在正文部分中来在页面级别使用 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 值

  • 这是在红、绿、蓝颜色格式值的组合中定义 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.十六进制值

  • 它是 HTML 中最常用的颜色名称格式之一,其中颜色名称将以十六进制值的格式定义。
  • #rrggbb 格式包括 RR 表示红色、gg 表示绿色和 bb 表示蓝色的值,这些值放置在 00 toff 十六进制值之间。
  • 让我们考虑一个定义颜色 #00ff00 的示例。这些值将生成绿色,因为绿色包含最高值(ff),而另一个值设置为 00。

3.福彩价值

  • 另一种以色调、饱和度、亮度形式定义 HTML 颜色的格式。
  • 现在我们将一一查看所有术语。色调定义为 0 到 360 之间的颜色程度。 0 表示红色,120 表示绿色,240 表示蓝色。
  • 饱和度将颜色的值定义为百分比,其中 0% 表示灰色阴影,100% 表示全彩。
  • 亮度也可以用作百分比,它定义 0% 为黑色,50% 既不亮也不暗,100% 表示白色。

4. RGBA 值

  • 这种类型的 HTML 颜色定义了 RGB 颜色的扩展,包括 alpha 值,其中 alpha 用于定义颜色的不透明度。
  • Alpha 值介于 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.绿色 HTML 颜色

在与自然、金钱、环境等相关的网站上,绿色可以作为背景颜色的不错选择。

#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.黄色 HTML 颜色名称

黄色可以用来营造一种不严肃的情绪,在页面中展现创造力和乐观情绪。请记住,黄色作为背景颜色比文本颜色效果更好。

#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.棕色 HTML 颜色

棕色背景会使阅读白色或黑色文本变得困难,您可以使用与棕色阴影形成良好对比的其他颜色。

#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.橙色 HTML 颜色

橙色作为背景色可以很好地突出一点,既能唤起热情和温暖的感觉,又不会太俗气。6.橙色 HTML 颜色

#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.红色 HTML 颜色代码

对于某些浏览器,红色下划线文本用作访问过的链接,您应该避免使用它,以免迷惑访问者。

#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.粉色 HTML 颜色代码

根据色彩科学,如果您想让访客在潜意识中感受到自信、成熟和温暖的感觉,可以使用粉红色及其色调。

#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.紫色和白色 HTML 颜色代码

在白色背景上使用白色文本颜色将使其无法被用户阅读,除了用户不友好之外,您的网站可能会受到 SEO 惩罚,因此,请始终在深色背景下使用白色和其他浅色。

#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

一些最常用的 HTML 颜色代码

这些是网络上使用的一些流行颜色;我已将它们放在单独的表中以便快速找到它们。

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中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!