Logo

HEX Color Codes

HEX Color Codes are used in HTML and CSS. Check out the Major Hexadecimal Color Codes and HEX Color Codes Chart.

#32A852

RED

32

GREEN

A8

BLUE

52

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.

Understanding the HEX Color Code System

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.

How to Use HEX Color Codes in Web Design?

Setting background and font colors in HTML and CSS

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; }

Creating color gradients and transparency

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 */ }

Tips for selecting an ideal color palette

  • 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

Major Hexadecimal Color Codes Chart

NAMEHEXNAMEHEX
Red#FF0000White#FFFFFF
Cyan#00FFFFSilver#C0C0C0
Blue#0000FFGray or Grey#808080
DarkBlue#0000A0Black#000000
LightBlue#ADD8E6Orange#FFA500
Purple#800080Brown#A52A2A
Yellow#FFFF00Maroon#800000
Lime#00FF00Green#008000
Magenta#FF00FFOlive#808000

HEX Color Codes Chart

HEXNAME
#000000Black
#0C090ANight
#2C3539Gunmetal
#2B1B17Midnight
#34282CCharcoal
#25383CDark Slate Grey
#3B3131Oil
#413839Black Cat
#3D3C3AIridium
#463E3FBlack Eel
#4C4646Black Cow
#504A4BGray Wolf
#565051Vampire Gray
#5C5858Gray Dolphin
#625D5DCarbon Gray
#666362Ash Gray
#6D6968Cloudy Gray
#726E6DSmokey Gray
#736F6EGray
#837E7CGranite
#848482Battleship Gray
#B6B6B4Gray Cloud
#D1D0CEGray Goose
#E5E4E2Platinum
#BCC6CCMetallic Silver
#98AFC7Blue Gray
#6D7B8DLight Slate Gray
#657383Slate Gray
#616D7EJet Gray
#646D7EMist Blue
#566D7EMarble Blue
#737CA1Slate Blue
#4863A0Steel Blue
#2B547EBlue Jay
#2B3856Dark Slate Blue
#151B54Midnight Blue
#000080Navy Blue
#342D7EBlue Whale
#15317ELapis Blue
#151B8DDenim Dark Blue
#0000A0Earth Blue
#0020C2Cobalt Blue
#0041C2Blueberry Blue
#2554C7Sapphire Blue
#1569C7Blue Eyes
#2B60DERoyal Blue
#1F45FCBlue Orchid
#6960ECBlue Lotus
#736AFFLight Slate Blue
#357EC7Windows Blue
#368BC1Glacial Blue Ice
#488AC7Silk Blue
#3090C7Blue Ivy
#659EC7Blue Koi
#87AFC7Columbia Blue
#95B9C7Baby Blue
#728FCELight Steel Blue
#2B65ECOcean Blue
#306EFFBlue Ribbon
#157DECBlue Dress
#1589FFDodger Blue
#6495EDCornflower Blue
#6698FFSky Blue
#38ACECButterfly Blue
#56A5ECIceberg
#5CB3FFCrystal Blue
#3BB9FFDeep Sky Blue
#79BAECDenim Blue
#82CAFALight Sky Blue
#82CAFFDay Sky Blue
#A0CFECJeans Blue
#B7CEECBlue Angel
#B4CFECPastel Blue
#C2DFFFSea Blue
#C6DEFFPowder Blue
#AFDCECCoral Blue
#ADDFFFLight Blue
#BDEDFFRobin Egg Blue
#CFECECPale Blue Lily
#E0FFFFLight Cyan
#EBF4FAWater
#F0F8FFAliceBlue
#F0FFFFAzure
#CCFFFFLight Slate
#93FFE8Light Aquamarine
#9AFEFFElectric Blue
#7FFFD4Aquamarine
#00FFFFCyan or Aqua
#7DFDFETron Blue
#57FEFFBlue Zircon
#8EEBECBlue Lagoon
#50EBECCeleste
#4EE2ECBlue Diamond
#81D8D0Tiffany Blue
#92C7C7Cyan Opaque
#77BFC7Blue Hosta
#78C7C7Northern Lights
#48CCCDMedium Turquoise
#43C6DBTurquoise
#46C7C7Jellyfish
#7BCCB5Blue green
#43BFC7Macaw Blue Green
#3EA99FLight Sea Green
#3B9C9CDark Turquoise
#438D80Sea Turtle Green
#348781Medium Aquamarine
#307D7EGreenish Blue
#5E7D7EGrayish Turquoise
#4C787EBeetle Green
#008080Teal
#4E8975Sea Green
#78866BCamouflage Green
#848b79Sage Green
#617C58Hazel Green
#728C00Venom Green
#667C26Fern Green
#254117Dark Forest Green
#306754Medium Sea Green
#347235Medium Forest Green
#437C17Seaweed Green
#387C44Pine Green
#347C2CJungle Green
#347C17Shamrock Green
#348017Medium Spring Green
#4E9258Forest Green
#6AA121Green Onion
#4AA02CSpring Green
#41A317Lime Green
#3EA055Clover Green
#6CBB3CGreen Snake
#6CC417Alien Green
#4CC417Green Apple
#52D017Yellow Green
#4CC552Kelly Green
#54C571Zombie Green
#99C68EFrog Green
#89C35CGreen Peas
#85BB65Dollar Bill Green
#8BB381Dark Sea Green
#9CB071Iguana Green
#B2C248Avocado Green
#9DC209Pistachio Green
#A1C935Salad Green
#7FE817Hummingbird Green
#59E817Nebula Green
#57E964Stoplight Go Green
#64E986Algae Green
#5EFB6EJade Green
#00FF00Green
#5FFB17Emerald Green
#87F717Lawn Green
#8AFB17Chartreuse
#6AFB92Dragon Green
#98FF98Mint green
#B5EAAAGreen Thumb
#C3FDB8Light Jade
#CCFB5DTea Green
#B1FB17Green Yellow
#BCE954Slime Green
#EDDA74Goldenrod
#EDE275Harvest Gold
#FFE87CSun Yellow
#FFFF00Yellow
#FFF380Corn Yellow
#FFFFC2Parchment
#FFFFCCCream
#FFF8C6Lemon Chiffon
#FFF8DCCornsilk
#F5F5DCBeige
#FBF6D9Blonde
#FAEBD7AntiqueWhite
#F7E7CEChampagne
#FFEBCDBlanchedAlmond
#F3E5ABVanilla
#ECE5B6Tan Brown
#FFE5B4Peach
#FFDB58Mustard
#FFD801Rubber Ducky Yellow
#FDD017Bright Gold
#EAC117Golden brown
#F2BB66Macaroni and Cheese
#FBB917Saffron
#FBB117Beer
#FFA62FCantaloupe
#E9AB17Bee Yellow
#E2A76FBrown Sugar
#DEB887BurlyWood
#FFCBA4Deep Peach
#C9BE62Ginger Brown
#E8A317School Bus Yellow
#EE9A4DSandy Brown
#C8B560Fall Leaf Brown
#D4A017Orange Gold
#C2B280Sand
#C7A317Cookie Brown
#C68E17Caramel
#B5A642Brass
#ADA96EKhaki
#C19A6BCamel brown
#CD7F32Bronze
#C88141Tiger Orange
#C58917Cinnamon
#AF9B60Bullet Shell
#AF7817Dark Goldenrod
#B87333Copper
#966F33Wood
#806517Oak Brown
#827839Moccasin
#827B60Army Brown
#786D5FSandstone
#493D26Mocha
#483C32Taupe
#6F4E37Coffee
#835C3BBrown Bear
#7F5217Red Dirt
#7F462CSepia
#C47451Orange Salmon
#C36241Rust
#C35817Red Fox
#C85A17Chocolate
#CC6600Sedona
#E56717Papaya Orange
#E66C2CHalloween Orange
#F87217Pumpkin Orange
#F87431Construction Orange
#E67451Sunrise Orange
#FF8040Mango Orange
#F88017Dark Orange
#FF7F50Coral
#F88158Basket Ball Orange
#F9966BLight Salmon
#E78A61Tangerine
#E18B6BDark Salmon
#E77471Light Coral
#F75D59Bean Red
#E55451Valentine Red
#E55B3CShocking Orange
#FF0000Red
#FF2400Scarlet
#F62217Ruby Red
#F70D1AFerrari Red
#F62817Fire Engine Red
#E42217Lava Red
#E41B17Love Red
#DC381FGrapefruit
#C34A2CChestnut Red
#C24641Cherry Red
#C04000Mahogany
#C11B17Chilli Pepper
#9F000FCranberry
#990012Red Wine
#8C001ABurgundy
#954535Chestnut
#7E3517Blood Red
#8A4117Sienna
#7E3817Sangria
#800517Firebrick
#810541Maroon
#7D0541Plum Pie
#7E354DVelvet Maroon
#7D0552Plum Velvet
#7F4E52Rosy Finch
#7F5A58Puce
#7F525DDull Purple
#B38481Rosy Brown
#C5908EKhaki Rose
#C48189Pink Bow
#C48793Lipstick Pink
#E8ADAARose
#ECC5C0Rose Gold
#EDC9AFDesert Sand
#FDD7E4Pig Pink
#FCDFFFCotton Candy
#FFDFDDPink Bubble Gum
#FBBBB9Misty Rose
#FAAFBEPink
#FAAFBALight Pink
#F9A7B0Flamingo Pink
#E7A1B0Pink Rose
#E799A3Pink Daisy
#E38AAECadillac Pink
#F778A1Carnation Pink
#E56E94Blush Red
#F660ABHot Pink
#FC6C85Watermelon Pink
#F6358AViolet Red
#F52887Deep Pink
#E45E9DPink Cupcake
#E4287CPink Lemonade
#F535AANeon Pink
#FF00FFMagenta
#E3319DDimorphotheca Magenta
#F433FFBright Neon Pink
#D16587Pale Violet Red
#C25A7CTulip Pink
#CA226BMedium Violet Red
#C12869Rogue Pink
#C12267Burnt Pink
#C25283Bashful Pink
#C12283Dark Carnation Pink
#B93B8FPlum
#7E587EViola Purple
#571B7EPurple Iris
#583759Plum Purple
#4B0082Indigo
#461B7EPurple Monster
#4E387EPurple Haze
#614051Eggplant
#5E5A80Grape
#6A287EPurple Jam
#7D1B7EDark Orchid
#A74AC7Purple Flower
#B048B5Medium Orchid
#6C2DC7Purple Amethyst
#842DCEDark Violet
#8D38C9Violet
#7A5DC7Purple Sage Bush
#7F38ECLovely Purple
#8E35EFPurple
#893BFFAztech Purple
#8467D7Medium Purple
#A23BECJasmine Purple
#B041FFPurple Daffodil
#C45AECTyrian Purple
#9172ECCrocus Purple
#9E7BFFPurple Mimosa
#D462FFHeliotrope Purple
#E238ECCrimson
#C38EC7Purple Dragon
#C8A2C8Lilac
#E6A9ECBlush Pink
#E0B0FFMauve
#C6AEC7Wisteria Purple
#F9B7FFBlossom Pink
#D2B9D3Thistle
#E9CFECPeriwinkle
#EBDDE2Lavender Pinocchio
#E3E4FALavender blue
#FDEEF4Pearl
#FFF5EESeaShell
#FEFCFFMilk White
#FFFFFFWhite

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.

Tips for designing with these color schemes

  • 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

Online Tools and Resources

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.

Frequently Asked Questions

1. What is the difference between HEX and RGB color codes?

HEX codes use a 6-digit hexadecimal format to represent colors, while RGB codes use three decimal values representing red, green, and blue intensities.

2. Can HEX codes represent transparency?

Yes, using an 8-digit HEX notation, where the last two digits represent the alpha channel (transparency).

3. How do I convert a HEX code to RGB?

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)

4. What is the purpose of using HEX codes in web design?

HEX codes ensure color consistency across different devices and browsers by providing a standard way to define colors.

5. How can I choose the right color palette for my website?

Consider color psychology, color theory, target audience, brand identity, and current design trends.