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

In The News:

How Top Web Design Agencies Charge Clients For Their Services, According To New Insights From DesignRush  Yahoo FinanceDesignRush reveals the top web design agencies that create successful online brands and uncovers how they charge for their work. Internet user growth comes ...
CE Pro All-Star Band Member Profile: Geoff Meads, Presto Web Design  CEProGeoff Meads, managing director of the U.K.-based company Presto Web Design, has played more than 1000 gigs in his musical life. Today, Meads is one half of ...
Consumer Survey Demonstrates Strong Link Between Website Design and Credibility  Business 2 CommunityMost businesses understand the importance of having a website in 2019. Strangely, a number of these same businesses don't appreciate the need to carefully ...
6 Web Design Tips to Keep People on Your Website for Longer [Infographic]  Social Media TodayAre you looking for ways to reduce your website bounce rate? Want to keep people on your website and engaged for longer? The team from CMS Wire share ...
Good Mobile UX: More Vital Than Ever  Dice InsightsMore Americans than ever are only interacting with the web via their smartphones and other mobile devices. For web app designers and any tech.
Should websites be accessible to everyone? Domino's says no  Fast CompanyThe pizza company has petitioned the Supreme Court to hear a three-year-old case that deals with whether Domino's is legally required to make its websites ...
IoT: Revolutionizing the web development sector with  JAXenterIoT is a diligent technology that has totally transformed our daily lives. But how has the technology affected web developers? In this article, we attempt to ...
The rise of the smart site: How web design is driving business growth  NetimperativeA new white paper from Kayo demonstrates how web design and development can drive business growth. Kent-based technical agency, Kayo, has launched a ...
Mobile web design: responsive vs adaptive  ITProPortalWhen building your site for mobile, should you build a responsive or adaptive site?
What Are the Top 10 Web Design Mistakes to Avoid?  MarTech AdvisorMegan Dennis, Freelance Writer, Independent, discusses common mistakes while designing and shares tips on how to avoid them.
The Top Web Design Companies Of 2019, Says New Report From DesignRush  Yahoo FinanceDesignRush determined the best website design firms who can build custom platforms. NEW YORK, Aug. 9, 2019 /PRNewswire-PRWeb/ -- DesignRush.com, ...
The Top Elements of Effective B2B Web Design  Business 2 CommunityWhile B2B sales are typically complicated, your website shouldn't be (at least not to your user). Below are eight essential things every B2B website design must ...
Web Design Market Key Development Factors, SWOT Analysis, Key Strategies and Financial Overview 2019-2024  Chеstеr Rеgіstеr“Global Web Design Market Analysis, Forecast & Outlook (2019-2024)” provides an extensive research and detailed analysis of the present market along with ...
How to Create Functional Minimalism Web Design  Promotion WorldMinimalism is the art of using less to achieve more. You remove all the excess and yet get the job done. In its purest form, minimalism is fluid,
70 Web Design and Development Terms We Wish You Knew, Part 2  Business 2 CommunityIn Part One of this two-part post, we gave you some definitions and comments for terms we use here every day. I broke it into two parts because it was getting ...
Conveying Attentiveness in Web Designers  Thrive GlobalHere are some tips that will help web designers to instill awareness in their workforce.
TryMyUI Study Finds Sen. Harris Is Winning the Web Design Primary  EContentAccording to a study by web usability company TryMyUI Inc., Senator Kamala Harris has the best website of leading 2020 Democratic nominee candidates.
Free Generators for Web Designers and Developers  DesignmodoAre you looking for a way to ditch the routine and have more time for art and creativity? The harsh reality is that every project involves boring, mundane …
Yes, Your Website Design Has a Shelf Life  Business 2 CommunityChances are if you've recently gone through the website design process you're hoping that you won't ever have to do it again. Maybe you felt the whole process ...
Web Development Company in NYC, Huemor, Discusses the Difference Between Web Design vs. Web Development  Yahoo FinanceNEW YORK, July 24, 2019 /PRNewswire/ -- Though the two terms are used interchangeably, "web design" and "web development" describe different tasks in a ...
ProPublica Programs Are Helping Diverse Candidates Break Into Newsrooms. Here Are Their Inspiring Stories.  ProPublicaAlmost 100 journalists and journalism students have gone through our Data Institute and scholarship program. Many have told us that their experience shaped ...
Web Design Trends in 2019 predictions  Times ConnectionWhat will be the web design trends in 2019. We list the main trends and predictions going forward. Fast download times and enhanced mobile experience are ...
GitHub adds 21 new partners to its free Student Developer Pack  TechCrunchFor a few years now, GitHub has been running a program that gives students around the world free access to GitHub Pro and various free and discounted ...
Web Design Company, Huemor, Explains the Top Five Ways to Get More Leads  PRNewswireNEW YORK, July 29, 2019 /PRNewswire/ -- Getting more leads for your business doesn't have to be a hassle or cost your company a fortune. Huemor, a web ...
HIRED: New chamber director steps up  St. Helens ChronicleNew South Columbia County Chamber of Commerce director, Chrissy Marquardt, is a self-professed island girl from Jamaica living on a farm in Scappoose.
Hackers steal California hospital's website domain, email addresses  Becker's Hospital ReviewSonoma (Calif.) Valley Hospital was forced to change the name of its website URL and email addresses after its domain, svh.com, was hijacked Aug. 6, Sonoma ...
Sonoma Valley Hospital loses 3-letter domain name to hijackers  Sonoma Index-TribuneSonoma Valley Hospital loses its three-letter domain name to 'malicious pirates.'
The Best Custom Website Design Companies From Around The World, According To DesignRush  Yahoo FinanceDesignRush discovered the top website design and development agencies who can build custom platforms for businesses of all industries, successfully solving ...
Handy tips of web design to create the best website  RecentlyHeard.comYou will be surprised to know that 48% of users on the web say that a website's design is crucial. It is the topmost determining factor for a business's.
Before You Accept a Website Design Price Think of This...  Business 2 CommunityKelsey needed a new website. At least, that's what she thought after reading an article on websites, revenue, design, and the modern customer. After sifting ...
Launching and maintaining a project in a web design agency  Augusta Free PressNo matter if the project is large or small, there are tasks you should keep in mind to ensure that it's running smoothly.
Profile In Success: atCommunications Marks Two Decades of Excellence in Web Development and Digital Marketing  EIN NewsAs technology has evolved over the course of the last two decades, so have firms like atCommunications that create *content* for it.
New software school set to open, offering web development and design program  DevdiscourseThe school will be the first of its kind in the region and spaces are limited as the newly minted Private Training Establishment seeks to address both a skills ...
Web-design expert offers tips to spot false news stories  KWCHA false news article Tuesday causes confusion and concern in Wichita. The article, shared by many on social media Tuesday night, talked about Wichita police ...
Beauty Bay unveils distinctive new web design  Essential RetailOnline beauty retailer Beauty Bay refreshes website complete with separate scrolling homepage columns for commerce and *content*.
Web Design New York Company, Huemor, Explains How to Make Your Brand Stand Out and Resonate with Customers  PRNewswireNEW YORK, July 26, 2019 /PRNewswire/ -- Having a memorable brand is easier said than done. When it comes to brand awareness, there's never been a set ...
Three Things You Should Look Online For Before Designing a Business Website  HostReview.comBuilding a website for your business is normally a very challenging undertaking for anyone who has never had the opportunity to design a site before. ,General ...
Web Design Company Toronto Improves Its Services By Specializing in Responsive Web Design  MENAFN.COM(MENAFN - ForPressRelease) 12 A leading web company specializing in online strategy, web development, and web marketing, now specializes in responsiv.
Modesto needs a kids museum, these parents say. So they’re working to create one  Modesto BeeThree couples with young children have formed the founding board to create a Modesto Children's Museum and launched an ambitious effort that, if all goes ...
Hate Twitter's new design? Here's how to get the old look back  The Next WebWelcome to TNW Basics, a collection of tips, guides, and advice on how to easily get the most out of your gadgets, apps, and other stuff. You've probably heard ...
The best web hosting service 2019  TechRadarNeed a new web hosting *service* for your company website or personal blog, we've tested the best options. Shares. A web hosting provider, otherwise known as ...
Former Grant Union student offers web development, design  Blue Mountain EagleJohn Day resident Harsh Patel, a former Grant Union student and recent Boston University graduate, is jumping into real-world entrepreneurial experiences.
How Artificial Intelligence Is Transforming Digital Marketing  ForbesAI marketing is a method of leveraging technology to improve the customer journey.
VatorNews | Today's entrepreneur: David Karandish  VatorNewsToday's entrepreneur: David Karandish. "Openly communicating with your coworkers will help you to build a stronger team overall" by Steven Loeb on August 21 ...
7 Quick Ways To Increase Your Website's Conversion Rate  Promotion WorldNow that your web design Singapore firm has created your website; and it is up and running, what next? Well, the answer to this is you need to get.
Be Ready To Drop The Ball  ForbesIt doesn't have to be the end of the world as long as you take ownership of the mistake.
Incorporate Visual Storytelling into Your Website  Business 2 CommunityA good story draws you in, even if it is set in a different era, or a different culture. Visual storytelling in web design does the same thing. It draws the audience in ...
4 Rules to Finding the Best Web Development Agency  Be Global Fashion NetworkHaving a great website goes a long way in building your brand credibility and trust. Whether you have an existing website or want to have a new one built, it is ...
Find Your Match: 6 Advertising Agency Types  G2Are you looking for an advertising agency to *service* your company? Learn more about how to know which advertising agency is right for you and your needs.
Web Design Agency, Huemor, Discusses Tips for Designing the Perfect Ecommerce Page  Yahoo FinanceNEW YORK, July 31, 2019 /PRNewswire/ -- Ecommerce sales represented over 50% of all retail growth in 2018 and the growing customer preference for online ...
Ask Brien – Bob Bell on Full Blown Studio and Web Design – July 25, 2019  KHTS RadioOn this episode of the Ask Brien Radio Show, Brien is joined live over the phone by Bob Bell, as he discusses his company Full Blown Studio.
City goes to on-line mapping of utilities  Lincoln SentinelErin Allen, director of Business Development for Midland GIS Solutions, presented a proposal to Lincoln's city council at their regular August meeting regarding ...
Progressive Web Apps are Taking Over the Mobile Web  DevOps.comPWAs allow companies to deliver the user-friendliness and page load speeds of a native app, but directly from the company's mobile web site.
Best Graphic Design Software 2019  Digital Arts OnlineWhatever your budget and level of expertise, there's a wide range of cool design tools to choose from. The term 'graphic design software' covers a multitude of ...
How To Use Web Design To Create A Lasting Brand Identity  Demotix.comA brand is a term or image by which your customers know your products or services. The brand is the face of your company. Now, there are many brands out ...
Web Developer (Full-Time) job with Wilmington University | 402445  mediabistro.comWeb Developer. Wilmington University. Employment Status: Full time. Location: Wilson Graduate Center. department: University Relations. Effective ...
Kick off a career in graphic design with this $29 course bundle  The Next WebTLDR: You can get a graphic design education for only $29. The digital revolution and its constant need for snazzy visuals has launched graphic design work ...
20 prestigious jobs with surprisingly low pay  LaddersWe've picked out some of the most prestigious jobs that have surprisingly low earnings. They pay less than you might think.
Finding A Top Web Design Agency  KAKEThe importance of a website which is easy to use but also looks impressive is something that should not be downplayed. After all, your website is a direct ...
13 free tools for API design, development, and testing  InfoWorldThe rise of RESTful APIs has been met by a rise in tools for creating, testing, and managing them. Whether you're an API newbie or an expert on an intractable ...
How to Leverage Your B2B Website Design to Grow Sales  Business 2 CommunityIf you aren't using your B2B website to increase your firm's revenue, you are missing out on a huge opportunity. Unfortunately, many sales professionals ...
DesignRush Reveals The Top Search Engine Optimization Tactics That Improve Rankings In 2019 - Plus, The Best SEO Agencies  PR WebA recent report states that every second, more than 67 thousand searches are performed in Google. DesignRush researched some of the trends that are ...
What Is a Creative Agency? What to Know Before You Hire One  Business 2 CommunityBuilding a brand doesn't happen overnight. It takes a lot of work to forge strong relationships with people—and much of that work is done through marketing.
How to create a website with Google Sites  TechRadarSites is a Google *service* that helps you create websites. You can use the freely available web *service* to create dynamic and interactive websites with just a few ...
Aurora IL Web Design Lead Generation Digital Marketing Expert Services Launched  NewswireOswego, Illinois, digital marketing agency Viper Direct Digital Marketing updated its range of web design services for companies in Aurora.
Assembling a Winning WCM Project Team  EContentWCM projects are hard. Selecting the right technology, migrating *content*, software customizations, and business change are inherently complex activities.
Looking back on 30 years of Summit Daily editors  Summit Daily NewsCurtis RobinsonEditor 1989-1990(not pictured) Mike KirschbaumEditor 1990-1994 Memorable stories One is “Assault by burrito” chronicling the exploits of an ...
Kelowna Google Ranking Digital Marketing Expert Web Design Service Announced  NewswireKelowna based digital marketing and SEO agency, Fazz Media, has announced it can help Kelowna clients to grow their business and bring in more sales.
DesignRush Announces The Best Website Design Agencies From Around The World  PR WebDesignRush.com, a B2B marketplace connecting brands with agencies, rounded up the top local and global website design companies who can design and ...
‘User Inyerface’ teaches you about terrible modern web design by making you suffer through it  The VergeBad website user interfaces are perhaps the worst part of the internet: spammy pop-ups designed to trick you, dark patterns that are intentionally misleading, and ...
Web Design Practices That Frustrate SEO Pros  Search Engine JournalIt takes a skilled team to build a successful website. That means developers and SEO pros need to work together. Here's how to make it happen.
User Inyerface is a maddening tour of the worst web design mistakes  PolygonGood interface design works best when you don't even notice it. But what if every UI mistake existed on one website? User Inyerface is an example of everything ...
This Website's Deliberately Frustrating Interface Will Make You Appreciate Good Web Design  GizmodoYou don't know what you have until it's gone is a well-worn cliche, but also an apt description of a web game called User Inyerface, created by design firm ...
5 Web Design Mistakes You Must Avoid  Customer ThinkWe already have enough quotes on how wise men learn from the mistakes of others. It is time that we put into practice and find out what are the common web ...
What Should You Know Before Starting An Online Business  Patch.comStarting a new business is always an exciting opportunity, and easier than in years prior. It is a journey that starts by investing in sufficient research and due ...
Four Tips For Effective Web Design  ForbesOn the surface, web design is about making a website look good, and anyone who says that would be right. After all, beautifully designed sites do get a lot of ...
EpicPxls offers pro web design assets for life, and it's over 90% off  The Next WebWeb design is absolutely an art, but don't think there isn't a fair amount of practical process work happening there as well. While creating the perfect style ...
20 Free Web Design Tools from Spring 2019  Practical EcommerceAdd value to your website by utilizing free resources from the design community. Here is a list of new web tools and design elements from spring 2019.
Global Web Design Software Market 2019 – Adobe, Webflow, H5P, Coda, RapidWeaver  Biz Trends 24The Web Design Software Market report presents key information on the market status of the key players and is a precious source of direct and plan for ...
Web design and development  IndivigitalAs featured on. Web design. We build user-friendly websites that help small brands standout in competitive marketplaces. We believe a website should and can ...
Policymakers Sound Alarm On "Dark Patterns", Deceptive Web Design Trick  NDTV NewsTwo U.S. senators unveiled new legislation Tuesday targeting what they say are deceptive tricks, employed by websites and tech companies, that are designed ...
The 'Captain Marvel' site revisits classic 90s web design  EngadgetNo matter your level of excitement over the first Disney+-exclusive Marvel movie, if you remember web browsing in the days of 28.8 dial-up and web rings then th ...
Seven Aspects Of Website Design Crucial For Drawing In Customers  ForbesWhen drawing in clients or customers, it is important to remember that each interaction they have with you or your company reflects upon your brand as a whole.
4 Ways Web Design Can Help You Improve Customer Experience  Customer ThinkThe design of your website is one of those key elements of modern brand building that has the power and potential to make or break customer experience and ...
6 Campaign Web Design Trends to Watch in 2020  Campaigns & ElectionsEach cycle we see website design trends that come to dominate the digital aesthetics for campaigns. In 2008, it was overstuffed landing pages.
Your Next Website Redesign: 6 Trends to Embrace Now  Search Engine JournalAre you in the early planning stages of a new website? Here are the trends that web designers and their clients expect to embrace in the year to come.
5-Step Web Design Process to Create Winning Websites  Business.comA stellar design isn't merely focused on how pretty the interface looks.
Top 17 Web Design and UI Trends for 2019  DesignmodoNew year, new time to think about web design trends. The start of the year is a great time to look back on the previous year and your successes and look …
Six visual web design trends set to be big in 2019 – Econsultancy  EconsultancyAs January comes to a close, it's time for a round up of web design trends we're likely to see a lot more of as 2019 progresses. Expect even more video *content*, ...
AI Needs to Develop to Impact Web Design  Business.comArtificial intelligence has had a big impact on web design and development, but it still has a long way to go.
10 Lessons from Hertz's $32M Web Design Lawsuit Against Accenture  CMSWireHertz has sued Accenture for $32 million over a website redesign failure. We asked around to see if there was anything to be learned from this suit.
Digital Influence: Web Design's Impact On Marketing Strategy  ForbesWhen strategizing an integrated marketing plan for your brand, the right web design is essential. The standard for web design is no longer just function or ...
How Big Data is influencing web design and what you can learn for it  CRN.inBig Data refers to huge volume of data, both structured and unstructured. The volume of data is so massive in scope that it is almost impossible to process it ...
Web Design Don'ts: 13 Website Features That Can Ruin The User Experience  ForbesA "flashy" website may look cool, but intrusive, slow-loading or unintuitive features may ruin the user experience. Members of Forbes Technology Council detail ...
A Guide to Landing Page SEO A/B Testing  KTVAOriginally posted on https://www.samsonwebdesign.co.uk/a-guide-to-landing-page-seo-a-b-testing/ Many compnaies use A/B testing to optimise their ...
The seven deadly sins of web design  Packt HubFor a great website, web developers meet client demands while at the same time thinking about users. Gary stevens discusses more such in his article.
Hertz Sues Accenture for Breach of Contract Over 'Seriously Deficient' Web Design Work  AdweekHertz, one of the world's largest rental car brands, is suing former marketing partner Accenture LLP for breach of contract, claiming the company failed to deliver ...
5 Solid Web-Design Tips For Drawing In Clients  ForbesGood websites inspire action. From educational *content* to well-crafted menus to a focus on users' needs, here are some things to consider when looking to ...
CSS Grid is finally starting to live up to its potential in web design  AdAge.comThe technology promises to modernize the way the web looks for brands and publishers.
The Top 25 Web Design Companies from Around the World, According to DesignRush  Yahoo FinanceAt Mad Icarus Media, they believe mediocrity is the enemy. Mad Icarus Media works with its clients to take the creative and calculated risks needed to create ...

How Do You Make A Website?

No, that's not the real question. The real question is... Read More

Website Design: Secrets Of Professional Website Designers Revealed

What colors do you have at your website?Can they make... Read More

Website Maintenance: What Does it Take to Manage Your Website?

Every action has a beginning phase where you launch your... Read More

To Flash, or Not to Flash

When considering whether or not to incorporate Flash into your... Read More

The Right Trigger Words

CNN.com's designers have gone out of their way to make... Read More

Keep It Simple, Stupid: The Beauty of a Clean Cut Website

Don't knock it; "Keep It Simple, Stupid" is a great... Read More

Create Favorite Icon

Favorite icon appears to the left of your link in... Read More

Will You Site be a BIG SUCCESS. 7 Reasons Why It Might Not!

With so many new websites going up, it is hard... Read More

Simple Lines and Shapes for Your Logo Design

Geometric designs come in all shapes and sizes? and lines.... Read More

Don?t Put Your Slogan in the Title Tag - Optimize Your Web Pages

Don't just put your slogan in the title tag when... Read More

How To Improve The Professional Look And Feel Of Your Website

Projecting a professional image is paramount to your website's success.... Read More

Choosing A Color Scheme

When you begin the design of your Web site, one... Read More

The Top Ten Checklist For Low Web Site Sales

You have good traffic, but low client sign ups and... Read More

10 Important Web Design Tips: SEO Friendly Website

A website should firstly be searched out by visitors before... Read More

My Top Ten List Of Extremely Annoying Web Page Design Elements!

Easy navigation and usability are one of the most important... Read More

The Testimonial Trick

One of the most popular methods of traffic generation is... Read More

Selling Multiple Products? Avoid These Top Blunders

When your web site sells more than a dozen items,... Read More

Other Ways to Look at Things

Many people today are tired of the Microsoft software that... Read More

Facts You Should Know About Web Site Design and Search Engine Optimization

1. Web site File Structure / File NamingMost search engines... Read More

Do-It-Yourself Web Design for Home-Based Businesses

Home-based businesses need a strong web presence to combat the... Read More

Keep Your Navigation Simple!

Navigation must be simple. Since it's the backbone of your... Read More

Should You Bother Learning HTML to Build Webpages?

The most popular method to build webpages today is to... Read More

Professional Web Design Companies - How to Avoid Getting Ripped Off

Building a website that is exactly what you want and... Read More

10 Profitable Ways To Recycle Your Content

1. Repackage your web site content in to different products... Read More

Keep Them Coming Back - Update Your Site

If you are anything like me, your website is a... Read More