Color Name in HTML plays a very important role in the web and application designing process. It helps to changes the look and feel of our website or application as well as it makes our application more attractive and interactive. There are various ways to define Color Names in HTML into the HTML coding format. one can use additional CSS properties to use it more effectively. We are able to use HTML color name at the page level by including it into the body part also able to set to individual color to the specific element. Color Name in HTML is purposely used for text color, background color, border color, shadows, gradients, and many more.
color : color_name;
Let’s see how this syntax will work,
<h4 style="color:blue;">Welcome to EDUBCA<h4>
In the above example, it will show text Welcome to EDUBCA in a blue color like:
background-color:color_name;
Let’s see how this syntax will work,
<p style="background-color:light-green;">
The category houses all the Design information spreading across numerous subcategories in the Design course.
value color_name;
Let’s see how this syntax will work,
<h4 style="border: 4px solid DodgerBlue;"> EDUCBA free certification course </h4>
There are different ways to define the color names in HTML. It’s difficult to remember a different name in different colors. So it’s to be decided to give some values to different colors. Let’s see one by one.
Example: RGB (0,0,0) for darkest color where RGB(255,255,255) for lightest color.
Implementing colors on your webpage is easy and can be done both inline and via a separate CSS Stylesheet.
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 |
Blau unterstrichener Text wird als Link betrachtet, da dies der Standard-Linkstil für die meisten Webbrowser ist. Sie sollten die Verwendung von Blau für den gesamten Text auf einer Seite vermeiden, da Besucher ihn mit Hyperlinks verwechseln können.
#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 |
Sur les sites liés à la nature, à l'argent, à l'environnement, etc., le vert peut être un bon choix de couleur à utiliser comme arrière-plan.
#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 |
Le jaune peut être utilisé pour créer une ambiance non sérieuse, faire preuve de créativité et d'optimisme dans une page. Gardez à l’esprit que le jaune fonctionne mieux comme arrière-plan que comme couleur de texte.
#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 |
Le fond marron peut rendre difficile la lecture du texte blanc ou noir, vous pouvez recourir à d'autres couleurs qui ont un bon contraste avec votre nuance de marron.
#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 |
L'orange fonctionne très bien pour mettre en évidence un point lorsque la couleur est utilisée comme arrière-plan et peut évoquer un sentiment d'enthousiasme et de chaleur sans être trop collant.6. Couleurs HTML orange
#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 |
Pour certains navigateurs, le texte souligné en rouge est utilisé comme liens visités, vous devez éviter de l'utiliser pour ne pas confondre les visiteurs.
#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 |
Selon la science des couleurs, le rose et ses nuances peuvent être utilisés si vous souhaitez que le visiteur ressente un sentiment de confiance, de sophistication et de chaleur dans son subconscient.
#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 |
L'utilisation de la couleur du texte blanc sur un fond blanc le rendra illisible par les utilisateurs et en plus de ne pas être convivial, vous pourriez obtenir une pénalité de référencement pour votre site. Utilisez donc toujours du blanc et d'autres couleurs claires sur des arrière-plans sombres.
#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 |
Voici quelques-unes des couleurs populaires utilisées sur le Web ; Je les ai mis dans un tableau séparé pour les retrouver rapidement.
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.
Das obige ist der detaillierte Inhalt vonFarbname in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!