Upper- or lowercase hex codes in CSS?

When you write your CSS code, do you use upper- or lowercase hexadecimal codes? I.e., does it look like this: #F2F2F2 or this: #f2f2f2? Personally, I used to go the uppercase route but has now officially switched to lowercase.

What’s your preference?

75 Comments

  • trovster says:

    I use either, really. When typing shorthand, I use lowercase. If it is mixed with numbers, (or copied from a program) it tends to be uppercase, and I just leave it…

  • Phil Sherry says:

    Yes: #fff;

    No: #FFFFFF;

  • Always lowercase. Not sure why, it just feels good ๐Ÿ™‚

  • icaaq says:

    Does it matter?

    i use #fff; anyway.

    • katalin_2003 says:

      There are rare cases where it DOES matter.
      First of all Internet Explorer ignores the case and defaults to lowercase. All other major browsers will respect it the way you wrote it in your code.

      And now for why it does matter:
      Say you have a element with a stroke attribute set to '#FF0000' and another one with #ff0000 . If you try to target them with, say jQuery doing $('path[stroke="FF0000"]').hide(); well, only the first one will hide and the second one will still be visible in all browsers except Internet Explorer.
      If your goal is to hide both under all browser, you’ll have to change colors to lowercase in your code and use $('path[stroke="ff0000"]').hide();.

  • Chris says:

    I absolutely prefer lowercase! Can't explain ๐Ÿ™‚

  • James says:

    Lowerase, purely because I'm too lazy to press "shift".

  • George says:

    Personally I like uppercase. When you are using CSS shorthand it helps the colour stand out:

    background: #FF0000 url(/images/backgrounds/tickets.jpg) 5px 5px no-repeat;

    I wouldn't mind going lowercase though – I don't think it really matters does it?

  • Martin S. says:

    I try to use lowercase just to be consistent in my coding. Since I use XHTML and it requires elements, attributes and so on written in lowercase I try to apply it to other front end coding too.

    However, the hex codes in Photoshop are in uppercase and I just copy and paste them sometimes when time is a very important factor.

    And when possible, I use shorthand hex. ๐Ÿ™‚

    Robert: why are you now writing your hex codes in lowercase?

  • Jens says:

    Always lowercase.

  • FlorentG says:

    I use lowercase everywhere, so I can shave a few bytes when your CSS is gzipped

  • Johan says:

    I think it is fashion!

  • Goulven says:

    Always lowercase, because B looks a lot like 8. Not so with b.

    As an aside, this saves me from pressing shift, for what that's worth.

    Glad you asked ! ๐Ÿ™‚

  • When I type it's always lowercase and short form if I can, but when pasting from photoshop it uses all caps – sometimes I leave them alone, but usually end up hand editing 'cos they get on my nerves… How anal am I ? ๐Ÿ™‚

  • Kevin says:

    Lowercase. As Goulven pointed out it increases readibility (to me anyway).

    And Steve: you're not the only one ๐Ÿ˜‰

  • Ã&Acirc says:

    Uppercase all the way … and shorthand when I can ๐Ÿ™‚

  • BjÃ&Aci says:

    Always lowercase (even if I have to hand edit from Photoshop) – for no other reason than that it looks appropriate (from using XHTML code probably)…

  • Always lowercase. Not sure why, it just feels good ๐Ÿ™‚

  • Robin says:

    All lower, all the time. I even end up editing the uppercase letter my colleaguesรƒยขรขโ€šยฌรขโ€žยข Dreamweavers add, which thinking about it is probably quite sad.

  • Robert dM says:

    always uppercase since hexadecimal codes where always written in uppercase when I first learned about them (before I got into webdesign), haven't seen them used in lowercase outside weddesign much. Makes them easier to recognize as hexadecimal codes.

  • Johan says:

    Uppercase does make one think too much of the time when we used FONT TAGS.

    We thought the Web was big and now we are happy with lowercase and highband-width!

  • When I type them I always use lowercase. Must be because I had programmed in C for so long. However, when pasting from Photoshop or Eric Meyer's Color Blender most of the time I leave them as they are which is uppercase.

  • Devon says:

    Uppercase. Why? partially habit, and partially because it helps it stand out better when I glance through the code.

  • Eugene says:

    shorthand: lowercase, else uppercase.

  • UPPERCASE; because I just prefer how it looks. Also because Photoshop and Colorzilla product uppercase hex codes.

    I also try to go shorthand e.g. #FFF instead of #FFFFFF where possible.

  • Lowercase. And I find it very annoying that Photoshop uses uppercase since that prevents me from copying colour codes from it.

  • I do uppercase because of the aesthetics. I like it to be all the same size. #eb120f looks messy but #EB120F looks hot. ๐Ÿ™‚

  • Reine says:

    Lowercase, while having the same issue with Photoshop as the other commenters.

  • Sean Fraser says:

    Lowercase. I like the aesthetics. And, something to do with well-formedness written in all lowercase, I got into a habit. And, Yes; I'll rewrite Photoshop Hex.

  • eruntale says:

    uppercase, most of the times, it helps differencing colors from css code (i think :))

  • I use lowercase… and I think it's because almost everything else in the css is written in lowercase, except maybe some camelCased id's or something.

  • Robert Nyman says:

    Thanks for sharing, everyone! Interesting to hear about your woes with Photoshop. The reason I actually started with lowercase is that in Photoshop CS 2, the hex codes are in lowercase! ๐Ÿ™‚

    Once started, I liked the readability of it; I also agree with Martin's motivation above that everything else in the CSS is (usually) lowercase so it feels more consistent.

  • Nathan Smith says:

    Shorthand and lowercase, all the way. woot.

  • BjÃ&Aci says:

    Robert, you are right – CS2 is lower case and no need for editing! I hadn´t even noticed that och was ranting about passed sins…

  • Definitely lowercase. Using uppercase reminds me of the old days when HTML tags were written in uppercase to help distinguish them.

    Lowercase just has the "modern" edge to it.

  • Karl says:

    Lowercase, purely because it's one less key stroke (shift). I have set ColorZilla up to match when picking colours but there's no science to my choice.

  • Lachlan Hunt says:

    OMG! I'm very surprised to see so many people prefer lowercase! And I can't believe some of you use either and have them mixed throughout your code. What on earth is wrong with you? You're all crazy!

    Uppercase is more asthetically pleasing and it's how hexadecimal is supposed to be written. I use uppercase for all hex for colours (<code>#FFF</code>) and escape sequences (<code>A0 </code>) in CSS, character references in HTML (<code> </code>), and also Unicode code points (<code>U+00A0</code>). I never ever use lowercase and I don't like Photoshop CS2 because it does lowercase and I have to change it when I copy and paste.

  • Kanashii says:

    I use lower-case throughout my CSS and id/name attributes in HTML. I can understand Lachlan's point on hexadecimal though, and being consistent is important. One or the other, got to be neat.

    Lachlan: Why the upper-case for named character entities? They're not hexadecimal ๐Ÿ™‚

  • Lachlan Hunt says:

    Kanashii, I didn't say "named character entities", I said character references. They are different things.

    <code>&nbsp;</code> is an entity reference, <code>&#160</code> is a numeric character reference and <code>&#xA0</code> is a hexadecimal character reference. Besides, entity references are case sensitive, so you can't choose upper or lower case when you use them, and most (not all) are defined using lowercase.

  • Kanashii says:

    Lachlan: Sorry, I misunderstood. Brain not working to well for me today..

  • Tommy Olsson says:

    Lowercase. And I never use six digits if three will do; i.e., #369, not #336699.

  • Siegfried says:

    Hi,

    i'm neither using upper- nor lower case. I'm only using decimal notation in css. And luckily in decimal digits there is no such question.

  • Robert Nyman says:

    Again, thanks for sharing. I forgot to say that I also, of course, use shorthand (three characters instead of six) when possible. I've even heard of people using only colors that can be shortened to three characters, but that's stretching it a bit far, if you ask me… ๐Ÿ™‚

  • Jens Wedin says:

    lowercase as I think it goes quicker to type it. It also looks soo much nicer *smile *. I usually mix when coding css and copying and pasting from PS or FW, when done I use the "Convert to lowercase" in DW.

  • Rob Kirton says:

    I have long since harboured the belief that most developers are obsessive and to some extent their behaviour traits can be assigned to be somewhere in the autistic spectrum. Not really as scary as it sounds, but food for thought. The comments here certainly don't persuade me otherwise. Think about the ritualistic behaviour and the need to order (i.e. make consistent) when it has no real effect on the outcome.

    P.S. lowercase :0)

  • Phil Sherry says:

    Roger: "And I find it very annoying that Photoshop uses uppercase since that prevents me from copying colour codes from it."

    I find this with DigitalColor Meter as well, but the solution is easy: Highlight in TextMate, right-click, convert > lowercase.

  • Teddy says:

    When it comes to programming, web development, file/folder naming and so on I always tend to go with lowercase all the way.

  • Robert Nyman says:

    Comment bonanza here! Thanks for your comments.

    Rob,

    It is definitely food for thought, and I know exactly what you mean. ๐Ÿ™‚

  • Jens Meiert says:

    Lowercase, for a few months now, and tied in all new coding guidelines I can put my hands on (except the one just referenced… ;)).

    By the way, you'll certainly forgive me when I diplomatically note the fresh "World's Highest Website" here, which basically shows up "some CSS challenges".

  • Rowan Lewis says:

    Lowercase because its easier to distinguish between lowercase letters and numbers than it is uppercase letters. However, I'm sure this is the 100th time someone has said as such!

  • Rowan Lewis says:

    Oh, forgot to say, I never use the shortened three digit colour code because I often tweak with colours its easier to just INS + new character rather than have to fill out all the missing three ๐Ÿ™‚

  • Robert Nyman says:

    Jens,

    Thanks for the link.

    Rowan,

    Yeah, I see what you mean with tweaking and designing and choosing colors directly in the CSS.

  • I also decided to go lowercase on CSS a few years back even though it's not necessary and unconventional for hex.

  • Lowercase, short (where possible)

  • Uppercase with all 6 letters:

    #FFFFFF, not #FFF or #fff or #ffffff, just #FFFFFF

  • Robert Nyman says:

    Robert W, Michał, Billytheradponi,

    Thanks for sharing!

  • Fredrik Norlin says:

    I use lowercase and shorthand when possible.

    I first read this post yesterday. While I was reading the comments I began to wonder which one is most correct. My first thought was that the shorthand notation is illogic, since A isn't the same value as AA. The value of A should be 0A if it's hexadecimal. Now I just had to find a standard telling me whether upper- or lowercase representation of A-F should be used and my quest would be over. But I couldn't find any.

    Today another thought came to my mind. What's best for the page visitor? I began to calculate the cpu cost of the conversion from the string value read by the browser, to a rgb datatype value used to for the actual output on the screen. I figure the shorthand conversion cost more than converting from a six character hexadecimal value. Using the rgb functional notation should be the fastest color value to convert.

    Anyway – I guess no one use enough colors to make a notable difference and using the rgb functional notation would make the style sheet a few extra bytes per color… I'll stick to lowercase and shorthand for a while.

    Much ado about nothing – sorry for wasting your time ๐Ÿ˜‰

  • Robert Nyman says:

    Fredrik,

    Interesting thoughts! Like you say, not sure anyone notices a difference, but I like your thinking! ๐Ÿ™‚

    Pat,

    Maybe… ๐Ÿ™‚

  • neojp says:

    When I'm writing colors for CSS I use uppercase letters: #FF0000.

    But when it comes to black, white, gray, or other colors that have the same letter, I just use 3 uppercase letter: #FFF, #CCC. Oh yes, and numbers too: #000, #666.

  • Robert Nyman says:

    neojp, Azad,

    Thanks for your comments.

  • Azad says:

    Always UPPERCASE. So that the hex is easily distinguishable from the rest of the CSS mess.

  • MÃ&Acir says:

    For the sake of diplomacy I always change UPPER/lower every other:

    #FfFfFf ๐Ÿ™‚

  • Chad Bishop says:

    I'm with you. I used to exclusively do upper case, and now have officially switched to lower.

    Probably made sense at the time to not have to hit Shift or Caps-Lock!

    -cb

  • Robert Nyman says:

    MÃÂ&frac14;fit,

    Ha ha! ๐Ÿ™‚

    Chad,

    Welcome to the lowercase crowd. ๐Ÿ™‚

  • Niklas says:

    And I thought I was the only one thinking about stuff like this…

    Recently switched to lowercase!

  • Bel-Air says:

    I use the lowercase because simply it makes the flow of typing the css to be easier then making changes to the way that I type everything else. I type all of the selectors and others in lowercase so I stick with the same thing when it comes to the hex colors.

  • Robert Nyman says:

    Niklas. Bel-Air,

    Thanks for sharing!

  • Rudy Johnson says:

    Uppercase:

    – shorthand always

    – stands out for some reason in css files

    – habit

    Lowercase

    – shorthand always

    – habit from writing for xhtml

    I have been caught doing both … would not spend too much time thinking about it either way until someone tells it actually matters … css4 maybe? ๐Ÿ˜‰

    Content Heavy Web Development

  • Robert Nyman says:

    Rudy,

    Thanks for sharing.

  • TheMystical says:

    What's css in the first place???

    Ah ah j/k.

    Same as Rudy btw.

  • Sebastian says:

    Microsoft again… the filters for IE are not able to read something like #fff, nor are they able to read #ffffff… you have to write it #FFFFFF for their interface to understand what color you want.

    When everyone is on Win6.X (Windows Vista, Windows 7, Windows 8) and got IE9 installed you can use #fff everywhere.

  • Robert Nyman says:

    Sebastian,

    Yes, that’s an annoyance.

  • Jay says:

    I use uppercase, because I used to write my css code in firebug and copy from it. Firebug covering up almost all standers in CSS coding. If firebug is happy with uppercase me too ๐Ÿ˜€

    Some people think lowercase might save some bits well its years back. Now we are with super high speed internet lines. But itโ€™s ok if u wants to use shorthand or lowercase but you are out of firebug standers: D

    Info : firebug user count : 3119717 ๐Ÿ˜ฎ

Leave a Reply to Teddy Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.