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?
69 Comments/Reactions
October 23rd, 2006 at 16:32
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…
October 23rd, 2006 at 16:34
Yes: #fff;
No: #FFFFFF;
October 23rd, 2006 at 16:44
Does it matter?
i use #fff; anyway.
October 23rd, 2006 at 16:56
I absolutely prefer lowercase! Can’t explain
October 23rd, 2006 at 16:59
Lowerase, purely because I’m too lazy to press “shift”.
October 23rd, 2006 at 17:02
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?
October 23rd, 2006 at 17:07
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?
October 23rd, 2006 at 17:20
Always lowercase.
October 23rd, 2006 at 17:27
I use lowercase everywhere, so I can shave a few bytes when your CSS is gzipped
October 23rd, 2006 at 17:36
I think it is fashion!
October 23rd, 2006 at 17:56
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 !
October 23rd, 2006 at 18:04
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 ?
October 23rd, 2006 at 18:13
Lowercase. As Goulven pointed out it increases readibility (to me anyway).
And Steve: you’re not the only one
October 23rd, 2006 at 18:15
Uppercase all the way … and shorthand when I can
October 23rd, 2006 at 18:36
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)…
October 23rd, 2006 at 18:41
Always lowercase. Not sure why, it just feels good
October 23rd, 2006 at 18:42
Always lowercase. Not sure why, it just feels good
October 23rd, 2006 at 18:51
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.
October 23rd, 2006 at 19:28
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!
October 23rd, 2006 at 19:39
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.
October 23rd, 2006 at 19:44
Uppercase. Why? partially habit, and partially because it helps it stand out better when I glance through the code.
October 23rd, 2006 at 19:46
Lowercase. And I find it very annoying that Photoshop uses uppercase since that prevents me from copying colour codes from it.
October 23rd, 2006 at 19:47
I do uppercase because of the aesthetics. I like it to be all the same size. #eb120f looks messy but #EB120F looks hot.
October 23rd, 2006 at 19:55
Lowercase, while having the same issue with Photoshop as the other commenters.
October 23rd, 2006 at 20:36
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.
October 23rd, 2006 at 20:36
uppercase, most of the times, it helps differencing colors from css code (i think
)
October 23rd, 2006 at 20:45
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.
October 23rd, 2006 at 21:45
shorthand: lowercase, else uppercase.
October 23rd, 2006 at 21:46
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.
October 23rd, 2006 at 22:17
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.
October 23rd, 2006 at 22:30
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.
October 23rd, 2006 at 22:44
Shorthand and lowercase, all the way. woot.
October 23rd, 2006 at 23:37
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…
October 24th, 2006 at 0:51
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.
October 24th, 2006 at 1:07
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.
October 24th, 2006 at 4:14
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 (
#FFF) and escape sequences (\A0) in CSS, character references in HTML (U+00A0). 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.October 24th, 2006 at 5:20
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
October 24th, 2006 at 5:59
Kanashii, I didn’t say “named character entities”, I said character references. They are different things.
is an entity reference, is a numeric character reference and 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.October 24th, 2006 at 6:22
Lachlan: Sorry, I misunderstood. Brain not working to well for me today..
October 24th, 2006 at 7:24
Lowercase. And I never use six digits if three will do; i.e., #369, not #336699.
October 24th, 2006 at 8:56
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.
October 24th, 2006 at 8:58
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…
October 24th, 2006 at 9:30
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.
October 24th, 2006 at 9:54
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)
October 24th, 2006 at 12:33
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.
October 24th, 2006 at 12:48
When it comes to programming, web development, file/folder naming and so on I always tend to go with lowercase all the way.
October 24th, 2006 at 20:31
Comment bonanza here! Thanks for your comments.
Rob,
It is definitely food for thought, and I know exactly what you mean.
October 25th, 2006 at 0:16
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”.
October 25th, 2006 at 1:38
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!
October 25th, 2006 at 1:41
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
October 25th, 2006 at 9:01
Jens,
Thanks for the link.
Rowan,
Yeah, I see what you mean with tweaking and designing and choosing colors directly in the CSS.
October 25th, 2006 at 12:07
I also decided to go lowercase on CSS a few years back even though it’s not necessary and unconventional for hex.
October 25th, 2006 at 13:08
Lowercase, short (where possible)
October 25th, 2006 at 15:19
Uppercase with all 6 letters:
#FFFFFF, not #FFF or #fff or #ffffff, just #FFFFFF
October 25th, 2006 at 22:09
Robert W, Michał, Billytheradponi,
Thanks for sharing!
October 26th, 2006 at 1:15
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
October 26th, 2006 at 10:21
Fredrik,
Interesting thoughts! Like you say, not sure anyone notices a difference, but I like your thinking!
Pat,
Maybe…
October 26th, 2006 at 19:42
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.
October 27th, 2006 at 21:04
Always UPPERCASE. So that the hex is easily distinguishable from the rest of the CSS mess.
October 27th, 2006 at 22:16
neojp, Azad,
Thanks for your comments.
October 28th, 2006 at 0:42
For the sake of diplomacy I always change UPPER/lower every other:
#FfFfFf
October 29th, 2006 at 0:52
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
October 29th, 2006 at 13:13
Müfit,
Ha ha!
Chad,
Welcome to the lowercase crowd.
October 29th, 2006 at 21:52
And I thought I was the only one thinking about stuff like this…
Recently switched to lowercase!
October 30th, 2006 at 2:27
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.
October 30th, 2006 at 9:42
Niklas. Bel-Air,
Thanks for sharing!
November 8th, 2006 at 22:38
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
November 9th, 2006 at 9:50
Rudy,
Thanks for sharing.
May 17th, 2007 at 19:44
What’s css in the first place???
Ah ah j/k.
Same as Rudy btw.
Write a comment
Twitter reactions