HTML 中的颜色名称
- WBOY原创
- 2024-09-04 16:34:32429浏览
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 颜色，还可以将它们添加为背景颜色。
2.背景颜色语法
background-color:color_name;
让我们看看这个语法是如何工作的，
<p style="background-color:light-green;">
该类别包含设计课程中众多子类别中的所有设计信息。
- 还可以通过使用以下语法使用 HTML 颜色在任何文本或元素周围添加彩色边框：
3.边框颜色语法：border
value color_name;
让我们看看这个语法是如何工作的，
<h4 style="border: 4px solid DodgerBlue;"> EDUCBA free certification course </h4>
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:
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:
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:
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中文网其他相关文章！