This is the color that you’ll use to call attention to important elements on a web page or email (e.g. Calls to action). If you want your reader to click on a certain button or text, the accent color is what you should use for it. Let’s look at Ramit Sethi’s blog as an example. Yellow is his accent color. There’s a lot of thought that goes into creating your own website. While structure and functionality provide the building blocks of a great site, when you’re ready to wrap it up into the stunning package that it is, design becomes the main driver. There are many elements in design, but the most noticeable will be your use of color. When deciding on a color scheme to use for your website, it’s best to keep your palette to four hues or fewer. A simple formula is to find one dominant hue, one secondary hue, and one accent hue. The dominant and secondary hues can have color variations, such as shades, tints, or tones.

One of the most important steps of any graphic or web design project is to create an appropriate color palette to use across the entire design.

Coming up with a professional and creative color palette can also be a very time-consuming task. We’re here to make that process easier for you.

In this post, we feature some of the best color palette generators you can use to create an effective color palette for any type of design with just a few clicks.

Some of these generators will even help you find color palettes based on different trends like flat color and material color design. They also include hex code you can copy to add proper color codes when designing websites as well. Best of all, they are completely free to use.

• Making Effective use of Color in Websites When discussing the design of a new website, a question that consistently arises is - “How do I select the most effective colors?” Choosing the right color palette for a site is essential to communicate your message, brand your product or service, and, if you are an online business, sell your products.
• When setting out to design a website, a top priority is perfecting your website’s color palette. The best way to do this is to look at existing websites and to research competitors, so we’ve done the leg work for you and compiled a list of 11 website color schemes that work perfectly for each brand.

4 Tips For Creating Professional Color Palettes

Before we get to the list, let’s learn the basics of creating more effective color palettes.

1. Different Types Of Color Palettes

First and foremost you should be aware of the four main types of color palettes out there.

• Monochromatic: Monochromatic color palettes are the ones you create using different shades of the same color. These are quite easy to make and are commonly used by many popular brands.
• Analogous: Analogous palettes consist of colors that are close to each other on the color wheel. If you pick the main color then the colors right next to it can be picked as secondary colors for this type of palettes.
• Complementary: Similar to Analogous, Complementary palettes are comprised of colors that are opposite to each other in the color wheel.
• Triadic: Triadic palettes are made of three main colors. These color palettes are best for creating clearly visible contrast in designs.

In addition, you should also learn and understand the color theory as well.

2. Consider The Color Psychology

There’s a certain factor of psychology involved in colors. According to color psychology, different colors have a strong effect on evoking specific emotions in humans. For example, the color black is associated with elegance, mystery, and authority. This is why the color is mainly used by luxury brands.

Consider applying the color psychology when picking colors for your color palette.

3. Using Color Trends

It’s important to also consider color trends when creating a color palette. Especially if you’re making a design for a modern brand or a startup, trends play an important role in appealing to current audiences.

Trends are constantly changing and there are many different trends you can apply to your color palettes like the flat color trend, material design colors, metro colors, and more.

4. Find Inspiration From Real Photos

The best colors are found in real-life. If you prefer a more realistic and nature-inspired color palette, you can use real photos to find inspiration for your color palette. There are tools and apps that allow you to generate color palettes based on photos and images as well.

Without further ado, let’s start exploring the color palette generators, shall we?

01. BrandColors

If you’ve ever wondered about the color palettes popular brands use or wanted to steal the color palette from your favorite brand, BrandColors is a website worth keeping bookmarked. It features a massive collection of color palettes used by popular brands.

02. Coolors.co

Coolors.co is one of the easy to use color palette generators that’s ideal for beginners. It lets you create color palettes from scratch or explore palettes made by others. The tool also includes a useful option for uploading images to pick the base colors from photos.

By creating an account on the site, you can save your palettes on the cloud and create your own collections to access later as well.

03. Color Hunt

Color Hunt is a massive collection of color palettes made by designers. It includes many different types of color palettes that you can explore based on popularity or trends. Since these color palettes are already crafted by other designers, you can easily pick a palette and start your design.

The tool also lets you create your own color palettes as well. However, it might require a bit of experience to find the best colors for your palette.

04. Colormind

Colormind is another beginner-friendly color palette generator that includes a very cool feature that allows you to live preview your color palette applied to an example design. It also lets you choose between material and paper color designs as well as the ability to switch between website and template designs.

In addition to generating color palettes with just one-click, Colormind lets you create color palettes from images as well.

05. Color Designer

Color Designer is a slightly advanced color palette generator that features many unique tools for creating professional color palettes. The tool lets you make color palettes using three different systems: Swatches, Color Picker, and Mass Editor. Each option provides you with its own benefits.

Once you pick the base colors, you can also take it to the next level by exploring different tints, shades, and color harmonies from an extensive list as well.

06. Paletton

Paletton is another advanced color scheme designing tool that comes with a more complex set of options for creating color palettes. At first sight, the tool may seem quite daunting to understand. However, it’s one of the few tools that lets you create color palettes based on the main color palette types, including monochromatic and triad.

This tool is most suitable for advanced designers who like to experiment and test different types of color palettes and color schemes.

07. Canva Palette Generator

Canva’s color palette generator features very basic functionality but it does its job perfectly. The tool is simple, you just upload a photo or an image to the site and the tool automatically generates a color palette based on the main colors from the image. Then you can copy the color codes with just a single click.

Even though the tool offers limited features, it’s ideal for finding the base colors for creating a natural color palette.

08. Adobe Color Wheel

How To Use Color On Your Website Generator

This is an advanced color palette creator made by Adobe for professional designers. This tool also allows you to create color palettes based on monochromatic, triad, analogous, and other palette types. In addition, you can upload an image to extract colors from it as well.

09. Khroma

Khroma is a modern color palette generator that uses AI technology to come up with creative color palettes. First, you have to select 50 different colors to train the AI to generate color palettes based on your choices. Then you’ll be able to choose from many color combinations generated by the AI to find the right color palette for your project.

10. ColorSpace

ColorSpace is yet another easy to use palette generator that allows you to create color palettes with just one-click. All you have to do is enter a main color hex code to the website and then hit the Generate button. Then the tool generates different styles of color palettes along with matching gradients.

11. Color Tool

Color Tool is an advanced color palette maker designed for web and user interface designers. The tool allows you to create material design color palettes based on user interface and accessibility categories. A useful feature of this tool is how it offers a live preview as you select colors for the palette.

12. Collor

Collor is yet another simple color palette generator that offers a simpler experience in creating color palettes. Simply select main and secondary colors and it will generate a selection of color palettes for you to choose from and customize. The only downside to using this tool is that it requires Flash to be enabled in your browser.

13. ColourLovers

ColourLovers features a collection of color palettes created by other designers. You can either choose a pre-made palette from the list or create a palette of your own. The color palette creator also offers options for making basic and advanced palettes as well as an option for extracting colors from a photo.

14. Colourcode

Colourcode is a simple color palette maker that you can use to create unique color schemes by simply hovering your mouse cursor around on the screen. Once you find a color simple left-clicking selects it and then you can move on to the next color. The tool also allows you to find colors based on monochrome, analogic, triad, and other types as well.

15. Data Color Picker

This color picker is also a great tool you can use to create color palettes. It allows you to pick colors that fit in with light and dark backgrounds and it also features options to select single hue and divergent color schemes as well.

Want to learn how to pick colors? Then be sure to check out our guide on how to pair colors like a pro as well as our article on designing with a monochromatic color scheme.

By HTMLGoodies Staff

Cascading Style Sheets (CSS) is the preferred method of changing text color, so first we will show the (archival) method of changing text color using inline HTML color codes, then we will move on to how to achieve the same effect using CSS.

Using Text Color (Hex) Codes

In order to change text colors, you will need two things:

1. A command to change the text.
2. A color (hex) code.

The color codes, as I mentioned above, are technically called hex codes. The codes are not very user friendly, so you'll need a chart to tell you what code makes what color. Well, I happen to have one right here: Click to go.

Drop by, grab a six-pack of color code, and come on back.

Old School: Changing Text Colors on the Whole Page

You have the ability to change full-page text colors over four levels:

<TEXT='######'> -- This denotes the full-page text color.
<LINK='######'> -- This denotes the color of the links on your page.
<ALINK='######'> -- This denotes the color the link will flash when clicked upon.
<VLINK='######'> -- This denotes the colors of the links after they have been visited.

These commands come right after the <TITLE> commands. Again, in that position they affect everything on the page. Also... place them all together inside the same command along with any background commands. Something like this:

< BODY BGCOLOR='######' TEXT='######' LINK='######' VLINK='######'>
Please note: When you write these codes, you can write them with a # sign in front of the hex code or not. It used to be that the symbol was required, but not any more. I still use it just because I started that way. You may want to just go with the six-digit code. Also make sure to place a space between each command and be sure to enclose it in quotation marks, like so:

<VLINK='#FFFFFF'>

How To Use Color On Your Website Step By Step

Old School: Changing Specific Word Color

But I only want to changeoneword'scolor

!

You'll use a color (hex) code to do the trick. Follow this formula:

<FONT COLOR='######'>text text text text text</FONT>

It's a pain in the you-know-where, but it gets the job done. It works with all H commands and text size commands. Basically, if it's text, it'll work.

Using Cascading Style Sheets (CSS) to Change Text Colors

There isn't enough space to fully describe what CSS is capable of in this article, but we have several articles here that can get you up to speed in no time! For a great tutorial on using CSS to change color properties, check out this article by Vincent Wright.

A quick intro to CSS is in order, so let's describe it a bit. CSS is used to define different elements on your web page. These elements include text colors, link colors, page background, tables, forms--just about every aspect of the style of the web page. You can use CSS inline, much like the HTML above, or you can, more preferably, include theh style sheet within the HEAD tags on your page, as in this example:

Alternately, you can include the CSS that is between the STYLE tags above, and save it in a file that you could call 'basic.css' which would be placed in the root directory of your website. You would then refer to that style sheet by using a link that goes between the HEAD tags in your web page, like this:

As you can see in the example above, you can refer to the colors using traditional color names, or hex codes as described above.

How To Use Color On Your Website

The use of CSS is vastly superior to using inline FONT tags and such, as it separates the content of your site from the style of your site, simplifying the process as you create more pages or change the style of elements. If you are using an external style sheet, you can make the change once in the style sheet, and it will be applied to your entire site. If you choose to include the style sheet itself within the HEAD tags as shown above, then you will have to make those changes on every page on your site.

How To Use Color On Your Website Page

CSS is such a useful tool in your web developer arsenal, you should definitely take the time to read more about it in our CSS Tutorials section.

How To Use Color On Your Website Drawing