Web Design Information |
|
Hexadecimal Color Notation on the Web
When designing elements for your webpage, you will often be called upon to specify a color. For example, the code for a span shown below specifies that the color of the text within the span will be yellow. Text Colors can be specified according to their names, for example "yellow", "green", or "blue". In many cases, these simple color names will work. But what if you want to specify a more sophisticated color like "cornflowerblue"? A particular browser may not recognize a particular color name. It's more reliable to specify colors with an "RGB triplet". An RGB triplet specifies a color based upon the amounts of red, green, and blue, on a scale from 0 to 255, required to create the color. For example, to create the color cornflowerblue you need red=100, green=149, and blue=237. We could then specify the color of the text within a span using the rgb function as shown below. Text This will work fine with style notation, but what if you want to use straight html. Html doesn't recognize the rgb function. In that case, you can specify color using "hexadecimal" notation. Whereas the decimal numbering system uses the characters 0 through 9 to get 10 values, the hexadecimal numbering system uses the characters 0 through f to get 16 values. (After 9 the characters a, b, c, d, e and f are used, as shown below.) Decimal Hexidecimal Equivilants dec hex 0 = 0 1 = 1 2 = 2 3 = 3 4 = 4 5 = 5 6 = 6 7 = 7 8 = 8 9 = 9 10 = A 11 = B 12 = C 13 = D 14 = E 15 = F On first appearance, this looks pretty simple but you need two hexadecimal characters to represent all decimal values from 0 to 255. When you increment decimal 9 by 1, you change the 9 to 0 and put 1 in the ten's place. When you increment hexidecimal F by one, you change the F to 0 and put 1 in the "sixteens" place. Sometimes it's not easy to convert between decimal and hexadecimal in your head. RGB Triplet for Cornflowerblue color dec hex red 100 64 green 149 95 blue 237 ED We could then specify the color of text within a span using the hexadecimal notation as shown below. Text Note that when we indicate the use of hexadecimal notation by placing a pound (#) sign in front of the number, and we don't use commas to separate the color components. If it's not easy to convert between decimal and hexadecimal in your head, then how do you do it? You can use a calculator that has a decimal to hexadecimal coversion function, or you can learn to think in hexadecimal. For example, what's the next number after CE? That would be CF. what's the next number after CF? That would be D0. Which hexadecimal number is higher 99 or B2? B2 would be higher than 99. It gets easier with experience. Here's Java Script code for a simple decimal to hexidecimal color converter function convert(decvalue) { var num = parseInt(decvalue); if(num >= 0 && num < 256) { var hexnum = num.toString(16); alert("#" + hexnum); } else {alert("Error!");} } It's important to use hexadecimal notation to specify colors when you use DHTML with visual effects, because to create a dynamic color change you have to increment or add a value to a color. The vast amount of color specification on webpages is in hexadecimal notation, so it would be wise to become familiar with it. Copyright(C) Bucaro TecHelp. Permission is granted for the below article to forward, reprint, distribute, use for ezine, newsletter, website, offer as free bonus or part of a product for sale as long as no changes are made and the byline, copyright, and the resource box below is included. About The Author To learn how to maintain your computer and use it more effectively to design a Web site and make money on the Web visit bucarotechelp.com. To subscribe to Bucaro TecHelp Newsletter visit http://bucarotechelp.com/search/000800.asp
MORE RESOURCES: Best web design software of 2024 TechRadar Top Web Design Firms Announced by SEMFirms for May 2024 24-7 Press Release Renowned Designer and Entrepreneur Thom Fajemisin, the Creative Force Behind the Redesign of the Ducati Logo ... News Channel Nebraska Graphic design trends | Web Design and Content Marketing Crescent Vale MDS launches new web design services Boating Industry Website Design Competition - MCWT Michigan Council of Women in Technology New Insurance Lead Generation Company Increases Online Visibility for Niche Insurance Agencies and Carriers Kentucky Today Moving Your Website into the Web Design System (WDS) Washington State University Why (and How) I Learned Web Development as a Data Scientist Towards Data Science 33 Best Web Design Companies 2024 Built In 9 Chicago Web Design and Development Agencies To Know Built In Chicago Top Web Design Trends 2024 Designmodo 18 beautiful parallax scrolling websites Creative Bloq 8 Things I know about ... Web design trends for 2024 Worcester Business Journal 30 Best Web Design Agencies To Partner With in 2024 Influencer Marketing Hub TSTC Marshall spotlights online web design and development program Marshall News Messenger Why isn't Adobe doing web design better? Creative Bloq Fastest Online Web Development Degrees Arizona Education News Service Sweb CEO puts AI to work for small business web design San Antonio Report Design Studies (Minor) | College of Liberal Arts UNH's College of Liberal Arts Website Design | Alton | Edwardsville | St Louis RiverBender.com How to design a website: A beginner's guide CNN Underscored Jessica Sorden's Transformation from Corporate Burnout to Web Design Maestro - by Carly Winchell The Ark Valley Voice Empowering Innovation: Shopify and Google Cloud Partner to Transform Customer Experience (2024) Shopify Jeremy McGilvrey, A Houston Web Design Agency, Inks Long-Term Lease In Prestigious Williams Tower Office Space Yahoo Finance Valpo Web Design & Marketing helps businesses through intentional design and forward thinking Valpo.Life 6 ways AI is changing web design Creative Bloq Are you up to build the next best website? Get started with one of these 5 web design courses Fortune Information technology students delve into web design with capstone project University of Missouri College of Engineering How to Design an ADA-Compliant Website | CO- by US Chamber of Commerce CO— by the U.S. Chamber of Commerce Valve and Picnik vets Hatch new idea — a no-code web design platform for 'tech curious creators' GeekWire Valpo Web Design supports NWI No Child Hungry in fight against food insecurity with new website Valpo.Life Web Design Statistics 2024 and Facts Enterprise Apps Today Valpo Web Design & Marketing | Partners Valpo.Life 5 seriously useful AI web design tools Creative Bloq 25 Awesome About Us Page Examples For Web Design Inspiration Search Engine Journal 18 Free Web Design Tools, Winter 2024 Practical Ecommerce Michelle Belleville Science@NASA Locofy.ai's accelerates web design-to-code with AI as it pioneers Large Design Models Markets Insider The best free blog websites Creative Bloq Mizzou alumna uses web design expertise to give back to engineering, community University of Missouri College of Engineering Best web development tool of 2024 TechRadar 17 Free Web Design Tools, Fall 2023 Practical Ecommerce The 39 best free web fonts Creative Bloq Top 12 Web Design Agencies in the US for 2024 Influencer Marketing Hub How web design trends have evolved Creative Bloq 25 Best eCommerce Website Design Examples for 2024 Influencer Marketing Hub Regulator: “Harmful” Web Design Could Break Data Protection Laws Infosecurity Magazine 6 great tools for testing responsive design for websites Creative Bloq |
RELATED ARTICLES
Give People What They Want And Watch Your Profits Soar! Do you know why the majority of people use the Internet?The majority of people use the Internet to do some type of research. In other words, to read. Make it Clear What Your Website is About Just about every list of the "Top 10 Web Design Mistakes" includes at least one reference to either1. Not clearly specifying the objectives of your website, or2. Double Ad-Trackers Its Not as Crazy as It Sounds Here Are 7 Reasons Why? A Double Ad Tracker is an Ad-Tracker that points to an AD-Tracker. It may sound a bit like overkill to have an Ad-Tracker Pointing at another Ad-Tracker but it's not crazy. Does Your Website Induce Seizures? QUESTION: We promote our web site in all our ad campaigns, but according to my website statistics program, we are getting very few visitors who click past the first page. The site has a cool Flash introduction page that the designer said would impress visitors, but it doesn't seem to be working. Make Your Site Quick To Load! The time it takes to load your site can make or break a visitor's first impression of your site. If your site takes too long to load, the visitor will click "Stop" or "Back" and leave your web site. What Does Your Website Say About Your Business? QUESTION: My business is very small, just me and two employees, and our product really can't be sold online. Do I really need a website? -- Robin C. The Ultimate Web Site Marketing Strategies That You Should Know Most of us know that we need to advertise our products and our services, some of us still believe we are too small to invest in a advertising campaign. Now while a full-fledged marketing effort may be too much for your operation, it is however crucial to your success that you are involved in some kind of marketing activities. Custom Web Site Design Strategies Web site design has certainly, in the past decade, evolved tremendously. More clients now are demanding custom design, as opposed to the 'cookie cutter' sites of yesteryear. 20 Tips to Creating a Profitable Website As an online Entrepreneur you require a successful website.One that you personal own. Web Copywriting: The Psychology Of Scarcity, Less Is More If You Want Faster Sales Countdown to Armageddon - at least you'd think so judging from some of the garish copy and blaring headlines screaming at you from so many websites.At the opposite extreme though, you've some sites which don't even have a single decent headline anywhere that captures visitors attention, let alone leads them into captivating copywriting that'll get them a sale. Converting Print Advertising For Use On The Web - A How-To Contrary to the beliefs of some, advertising for web and print are very different. Converting print ads for use on the web is very tricky. Simple Steps To Proper Web Design Over the course of the last decade, the Internet has grown beyond all expectations. Each and everyday there is a new website that is being developed. You Too Can Have an Amazing Website It is a well-known fact that a successful business depends greatly on how it is marketed. With an ever increasing dependence on the web, the use of a professional website is not only a necessity, but a priority. Web Usability: The Basics What is web usability & why is it important?Web usability is about making your website in such a way that your site users can find what they're looking for quickly and efficiently. A usable website can reap huge benefits on to your website and your business. Increase Sales on Your Website! Use Graphics! How many times have you clicked on a website only to find a screen full of text? You read a large-scale headline and then all you see is text, much like reading a letter. You scan down the page looking for something to attract your attention. A Landing Page is Not an Order Page (and why it matters) To explain my point I need to first confuse the issue a bit (you'll see why): While a landing page is not an order page, it can, and in many cases should, contain the order form.So what is the difference? Is this just a question of semantics? Actually, there is a big difference and it can have a big effect on your conversion rate. Some File Naming Tricks for Your Online Home Based Business Web Pages Conventional Wisdom states you should use Sub-Directories to organize your web Pages. Unfortunately the Page Indexing Tools Penalize your Page Rankings when you Do this, Many of the Page Ranking Algorithms in use today deem that pages closed to your Root are of a Higher Value then pages that are further away from your root. Choosing Form Over Function Kills Your Site Never put form over function. Why? Because it's crucial that visitors actually be able to USE your site. How to Create a Favicon for Your Web Site One of the simplest things you can do to give your site 'identity' and to make it stand out from other sites is to use a favicon (favourite icon). They are the little logos that go next to the website listing in your favourites folder, and pop up in other places, (depending on your browser and operating system). Your Site Map: Spider Food or Just A Light Snack? Mechanical spiders have to eat. In fact, they usually have bigger appetites than the real-life spiders you squish under your shoe. |
home | site map |
© 2006 |