HTML 中的颜色名称在 Web 和应用程序设计过程中起着非常重要的作用。它有助于改变我们网站或应用程序的外观和感觉，并使我们的应用程序更具吸引力和互动性。有多种方法可以将 HTML 中的颜色名称定义为 HTML 编码格式。可以使用额外的 CSS 属性来更有效地使用它。我们可以通过将 HTML 颜色名称包含在正文部分中来在页面级别使用 HTML 颜色名称，也可以为特定元素设置单独的颜色。 HTML 中的颜色名称专门用于文本颜色、背景颜色、边框颜色、阴影、渐变等。
color : color_name;
让我们看看这个语法是如何工作的，
<h4 style="color:blue;">Welcome to EDUBCA<h4>
在上面的示例中，它将以蓝色显示文本“Welcome to EDUBCA”，例如：
background-color:color_name;
让我们看看这个语法是如何工作的，
<p style="background-color:light-green;">
该类别包含设计课程中众多子类别中的所有设计信息。
value color_name;
让我们看看这个语法是如何工作的，
<h4 style="border: 4px solid DodgerBlue;"> EDUCBA free certification course </h4>
在 HTML 中定义颜色名称有不同的方法。记住不同颜色的不同名字是很困难的。因此需要决定为不同的颜色赋予一些值。我们来一一看看。
示例： RGB (0,0,0) 表示最暗的颜色，RGB(255,255,255) 表示最浅的颜色。
在网页上实现颜色非常简单，可以内联或通过单独的 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.
<body> <h3 style="color: Brown">Brown H3 Heading</h3> <p style="color: Gainsboro">Gainsboro colored paragraph text</p> </body>
h1 { color: Brown; }
p { color: Gainsboro; }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:
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 |
蓝色下划线文本被视为链接，因为它是大多数网络浏览器的默认链接样式，您应该避免在页面上的所有文本中使用蓝色，因为访问者可能会将其误认为是超链接。
| #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 |
在与自然、金钱、环境等相关的网站上，绿色可以作为背景颜色的不错选择。
| #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 |
黄色可以用来营造一种不严肃的情绪，在页面中展现创造力和乐观情绪。请记住，黄色作为背景颜色比文本颜色效果更好。
| #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 |
棕色背景会使阅读白色或黑色文本变得困难，您可以使用与棕色阴影形成良好对比的其他颜色。
| #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 颜色
| #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 |
对于某些浏览器，红色下划线文本用作访问过的链接，您应该避免使用它，以免迷惑访问者。
| #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 |
根据色彩科学，如果您想让访客在潜意识中感受到自信、成熟和温暖的感觉，可以使用粉红色及其色调。
| #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 |
在白色背景上使用白色文本颜色将使其无法被用户阅读，除了用户不友好之外，您的网站可能会受到 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 |
这些是网络上使用的一些流行颜色；我已将它们放在单独的表中以便快速找到它们。
| 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 |
Let us see how color name in HTML is used with the help of some examples mentioned below:
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:
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.
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:
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中文网其他相关文章！
