HEX Color Codes are used in HTML and CSS. Check out the Major Hexadecimal Color Codes and HEX Color Codes Chart.
#32A852
RED
GREEN
BLUE
HEX color codes are essential tools in web design, allowing designers to precisely define colors for various elements on a webpage. These 6-digit codes represent colors using the hexadecimal numbering system, providing various color options.
This guide will introduce you to the basics of HEX color codes, their relationship with the RGB color model, and how to apply them in your web design projects.
CSS offers various color code types, including HEX, RGB, HSL, and Named Colors, providing flexibility and precision when defining colors in your web projects. The provided CSS color code chart makes it easy to find the right color for your designs.
Each pair of digits represents the intensity of red, green, and blue (RGB) components in color, with "00" being the lowest and "FF" is the highest intensity. By combining different intensities of red, green, and blue, HEX codes can represent up to 16,777,216 colors.
The RGB color model is based on mixing red, green, and blue light to create different colors. To convert an RGB color to a HEX code, convert each of the three RGB values (ranging from 0-255) to their 2-digit hexadecimal equivalent. For example, an RGB color of (0, 128, 255) would be represented as #0080FF in HEX notation.
Color representation using HEX values is essential in web design because it ensures consistency across different devices and browsers. It provides a standard way to define colors for various elements on a webpage.
To apply HEX color codes in HTML, use the style attribute with the background-color or color properties. In CSS, use the background-color or color properties within a selector.
Example (HTML):
<body style="background-color: #0080FF;"> <p style="color: #FFFFFF;">This text is white on a blue background.</p> </body>Example (CSS):
body { background-color: #0080FF; } p { color: #FFFFFF; }CSS3 introduced the ability to create color gradients using the linear-gradient or radial-gradient functions. You can also add transparency to colors using the 8-digit HEX notation or the rgba function in CSS.
Example (Gradient):
div { background-image: linear-gradient(#0080FF, #FFFFFF); }Example (Transparency):
p { color: #FFFFFF80; /* 50% transparent white using 8-digit HEX */ color: rgba(255, 255, 255, 0.5); /* 50% transparent white using rgba */ }Consider color psychology and the meaning behind colors
Use color theory to choose harmonious color schemes
Consider your target audience and brand identity
Refer to color trends in web design
| NAME | HEX | NAME | HEX |
|---|---|---|---|
| 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 |
| HEX | NAME |
|---|---|
| #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 |
| #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 |
| #C47451 | Orange Salmon |
| #C36241 | Rust |
| #C35817 | Red Fox |
| #C85A17 | Chocolate |
| #CC6600 | Sedona |
| #E56717 | Papaya Orange |
| #E66C2C | Halloween Orange |
| #F87217 | Pumpkin Orange |
| #F87431 | Construction 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 |
| #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 |
Monochromatic color schemes involve different shades, tints, and tones of a single base color, offering a clean and cohesive look.
Analogous color schemes use colors that are adjacent on the color wheel, creating a harmonious and visually appealing design. Complementary color schemes involve opposite colors on the color wheel, providing a high contrast and vibrant appearance. Triadic color schemes use three evenly spaced colors on the color wheel, balancing contrast and harmony.
Examples of popular and trendy color palettes can be found on our color names page.
Balance colors by using one dominant color and supporting colors
Consider the color contrast for readability and accessibility
Experiment with different shades, tints, and tones
Color picker tools, such as Color Picker, allow you to choose or identify HEX color codes visually. Color palette generators, like Random Color Generator, create color schemes based on various parameters or by random selection.
HEX codes use a 6-digit hexadecimal format to represent colors, while RGB codes use three decimal values representing red, green, and blue intensities.
Yes, using an 8-digit HEX notation, where the last two digits represent the alpha channel (transparency).
Convert each pair of HEX digits to decimal values representing the red, green, and blue intensities. (Refer to the "Understanding the HEX Color Code System" section)
HEX codes ensure color consistency across different devices and browsers by providing a standard way to define colors.
Consider color psychology, color theory, target audience, brand identity, and current design trends.