Web Design

Useful when designing for the web! Selected 3 plus 1 useful color scheme tools for beginners

Webデザイン時に役立つ! 初心者にもおすすめの便利な配色ツール3+1選

Hi there.
I’m Sato, a Web/App/UI designer.

This time, I would like to introduce 3+1 useful tools for beginners to help you when designing web! I would like to introduce 3+1 useful color scheme tools for beginners.
We have chosen simple and easy-to-use ones, so we recommend them even for beginners in web design.

The Pain of Designing Color Schemes

When you are doing web design, you usually need to design a color scheme using two, three, or more colors.
The first thing to consider are these three types of colors.

  • Base color
  • Main color
  • Accent color

Base color is the base or background color.
It is the color that occupies the majority of the screen.

Main color is, as you can read, the main color.
In many cases, this color will determine the impression of the website.

Accent color is also an accent color.
It is used when you want to draw the eye, such as in an eye-catcher, or when you want to emphasize, differentiate, or distinguish a particular part of the site.

It is said that these three colors should be used in a base 70% : main 25% : accent 5% ratio.

When considering a color scheme like this, it is difficult to come up with a coherent idea even if you think about it in your head.
In this article, I would like to introduce three (plus one) color scheme tools that can be useful in such cases.

[Color Scheme Tool 1] “Paletton,” easy to use even for beginners

First of all, I would like to introduce Paletton – The Color Scheme Designer, the color scheme tool that I usually use most often.

It is very simple and easy to use, and I like to use it a lot.
I think even beginners can use it right away.

This tool can be used with

  • When the main color is fixed and you want to think of an accent color.
  • When you want to think of 2-4 color schemes based on a certain color.

This is very useful for

When creating a corporate or product website, there are cases where the image color of the company or product has already been decided and the color scheme is based on that one color.
It is good to use it in such cases.

How to use Paletton.

Paletton is easy to use.
Simply enter the base color in RGB color code and select a color scheme pattern (approximate color, triad, or tetrad).
It will then present you with the selected color pattern and the gradient color for each color.

Just enter the RGB color code of the color you want as the base
Just enter the RGB color code of the color you want to use as the base.
3 approximate colors
Approximate colors for base color and both sides.
triad
Triad
tetrad
Tetrad
Change the distance for each color
The distance between colors can be set freely for any color scheme pattern.

In addition, you can adjust the brightness and saturation, and the gradient width of each color, while keeping the hue of the base color the same.

Vivid Color Palette
Vivid color palette and more.
palette of pale colors
Conversely, a palette of pale colors.
Wider gradient width
Wide gradient width and more.
Narrower gradient width
On the contrary, narrow the width of the gradient.

The simplicity of the operation makes it easy to use, even for design novices.

Using Paletton

Easy-to-use color scheme tool for beginners
Paletton

[Color scheme tool 2] “Coolors” which can generate color palettes from images

Next, we will introduce “Coolors”, a color scheme tool that can generate color palettes from images.

This tool can be used to generate a color palette from

  • When tone and manner are clear.
  • When you want to come up with a color scheme from a shared image.

This is very useful for

It is good to use when you have a clear image of what the client has in mind, such as vivid or pale, light or dark, warm or cold colors, and so on.

Or it is also useful to generate a color palette from your own image when making a proposal based on tone and manner to begin with.

How to use Coolors.

Using Coolors is simple.
Simply load the image you want to use as the base of your color palette into Coolors.
Coolors will generate a color palette from that image.

Color Scheme Tool Coolors_01
Click on “Browse an image”.
Color Scheme Tool Coolors_02
Select “Upload image” to upload an image from local, “URL” to reference an image on the web, “Camera” to take a new photo, or “Search” to search from Unsplash.
Color Scheme Tool Coolors_06
A five color palette was generated just by uploading the image.

The generated color palette can be exported in various formats.
Click on “Export” and choose the format.

Color Scheme Tool Coolors_03
If you are a web designer coding, CSS is the easiest to use.

You can also copy the color code directly in the browser without exporting.
Click on the downward pointing > icon to the right of “Export” and choose how you want to use it.

Color Scheme Tool Coolors_04
“View palette” will display a simple color palette.
Color Scheme Tool Coolors_05
“View palette”. Click to copy the color code.

The number of colors in the palette can be set freely from 2 to 10, and you can decide randomly or arbitrarily which part of the image to take as the base color.

Color Scheme Tool Coolors_07

Using Coolors.

A color scheme tool that can generate color palettes from images
Coolors

[Color scheme tool 3] “0to255” which can create gradients from a single color.

The third tool we will introduce is “0to255”, a color scheme tool that can create gradients from a single color.
What is meant by “creating gradients from a single color” here is that “based on an arbitrary color, you can create gradients by changing the L (Luminance) in the HSL color space.

This tool can be used to create a gradient based on any color in the HSL color space by using

  • When the main color is fixed and you want to use multiple colors in a gradation of that color.
  • When you want to design with a single gradient color.

This is very useful for

When using the main color for multiple elements on a site, such as headlines, eye catchers, illustrations, etc., you may want to use various tones while adjusting brightness and saturation.
In such cases, it is useful to quickly and easily generate a gradation of the specified color.

How to use 0to255.

Using 0to255 is simple.
Simply specify the RGB color code of the base color for which you want to generate a gradient.
That is all you need to do to generate a beautiful gradient color palette.

Color Scheme Tool 0to255_01
Just enter the RGB color code in the input field in the upper right corner of the screen.
Color Scheme Tool 0to255_02
A beautiful gradient color palette has been generated.

Using 0to255.

color scheme tool that can generate a single color gradient color palette.
0to255

[Color Scheme Tool +1] Adobe Color, a multifunctional tool provided by Adobe

Now, this is +1.
Adobe Color, a multifunctional color scheme tool provided by Adobe.

This is a tool that seems to be all you need, and it has both Paletton and Coolors functions.
However, the feel is slightly different, so you should use whichever you prefer.

The strong point of this tool is that it is made by Adobe, and the generated color palette can be used in the libraries of Adobe software such as Photoshop and Illustrator.
As a Web & App developer, I use figma rather than Adobe, so this advantage is not so attractive to me…

However, it is of course an excellent tool, so it is useful enough just for normal use.

Color Wheel

Color Scheme Tool AdobeColor_Color Wheel

The “color wheel” is a function similar to Paletton’s, which generates a color palette with an arbitrary color scheme pattern based on a certain color.
There are 10 color scheme patterns: “similar,” “monochromatic,” “triad,” “complementary,” “split complementary,” “double split complementary,” “square,” “compound,” “shade,” and “custom.

No matter which color scheme pattern is selected, the palette has 5 colors.

Extract theme

Color Scheme Tool AdobeColor_Extract Theme

The “Extract Themes” feature is similar to Coolors and generates a color palette from the uploaded image.
By selecting one of the six color moods (Colorful, Bright, Muted, Deep, Dark, or None), you can create a palette with different atmospheres.
It is interesting to note that the color palette generated from the same image can be completely different between “Colorful” or “Bright” and “Deep” or “Dark”.

Extracting gradients

Color Scheme Tool AdobeColor_Extract Gradients 1 Color Scheme Tool AdobeColor_Extract Gradient 2

The “Extract Gradient” feature generates a gradient from an uploaded image.
This feature may be a bit tricky to master.
If you create a gradient without thinking, you will end up with a very dirty gradient…
It is a good idea to adjust the gradient a little so that you can create the gradient you like.

Use Adobe Color.

A color scheme tool provided by Adobe with useful tools for color schemes
Adobe Color

[Extra Edition] Color sample tool “NIPPON COLORS – Traditional Japanese colors”.

From here, we will introduce two tools for “color samples” rather than “color schemes.
While the tools introduced up to this point are tools to be used at the stage of “considering several color combinations,” the tools introduced here are tools to be used at the stage of “deciding on the first color from among many colors.

The first tool is “NIPPON COLORS – Traditional Japanese Colors”.

NIPPON COLORS - Traditional Japanese Colors

This tool shows “traditional colors” that have been handed down in Japan since ancient times with a cool UI.
When you access the tool, one color is displayed at random, and the color changes with each reload.
You can also switch the main color to any color by clicking on the colors lined up on the left side.

Once you have decided on the main color, you can choose an accent color from the colors lined up on the left side.
Of course, you can also copy the color code and bring it to other tools such as “Adobe Color,” “Paletton,” or “Coolors.

NIPPON COLORS – Try using traditional Japanese colors

You can get color codes for traditional Japanese colors
NIPPON COLORS – Traditional Japanese Colors

[Extra Edition] Color Sample Tool “WEB Color Sample Primary Colors Dictionary – HTML Color Codes”

The second color sample tool is “WEB Color Sample Primary Colors Dictionary – HTML Color Code”.

WEB color swatch primary color dictionary - HTML color code

This tool covers “140 colors whose names are defined in the browser,” their “color names” and “hexadecimal codes.
You can switch the list of colors by switching tabs.
The color list includes “primary colors,” “Japanese colors,” “Western colors,” “web216,” “pastel colors,” “vivid colors,” “monotone colors,” and “metro colors.
Metro Colors” are the image colors of Tokyo Metro lines.

I think it is best to use this to get a general idea of what you are looking for.
For example, you can try to get a general idea of the direction of the color here, and then generate a color with a different gradation by setting the color to “0 to 255.

Web color swatch primary color dictionary – try using HTML color codes

Web color swatches with color names and color codes at a glance
WEB Color Swatches Primary Color Dictionary – HTML Color Code

[Extra Edition] Color palette distribution site “SchemeColor”

We would like to introduce a site where you can download color palettes with color schemes based on various themes.
You can use them as a reference for color schemes or customize them for your own designs.

The first color palette distribution site is “SchemeColor.

SchemeColor

The color palette is arranged by theme, such as “Summer Beach Party,” “Coronavirus (COVID-19),” etc.
The list of color palettes can be roughly oriented from 12 colors such as “red,” “orange,” “pink,” and so on.
You can also search by keywords such as “sports” or “kids.

Clicking on a color palette from the list will take you to the palette details screen.
Here, you can copy the color code or download it as a png image.

Using SchemeColor.

You can download color palettes for various themes.
SchemeColor

[Extra Edition] Color palette distribution site “BrandColors”

The second color palette distribution site is “BrandColors”.

Color palette distribution site

This site presents a color palette of brand colors for various brands.
The site offers a wide range of brand colors from brands such as Adidas, Adobe, Toyota, and Sony.
You can also search by brand name.

Clicking on a brand name allows you to check it and download the color palette you have checked.
The downloadable formats are ASE (Adobe’s swatch palette) and CSS/SCSS/LESS/Stylus source codes.

You can also copy the hexadecimal color codes for each color individually by clicking on the color chips.

Using BrandColors.

Download color palettes for various brand colors.
BrandColors

[Extra Edition] Color palette distribution site “Random Material Palette Generator”

The third color palette distribution site is “Random Material Palette Generator”.

Color palette distribution site

It randomly generates a color palette of three colors.
Clicking on the screen will regenerate the palette.
The generated palette will be saved at the bottom of the screen, and clicking on a saved palette will make that palette visible again.
It is also possible to lock some of the colors in the palette and regenerate only the remaining colors.

Using the Random Material Palette Generator

It randomly generates a 3-color palette for you.
Random Material Palette Generator

[Extra Edition] Color palette distribution site “hello-color”

The fourth color palette distribution site is “hello-color”.

color palette distribution site

It randomly generates two color palettes.
They are displayed on the entire screen, so it is easy to visualize.
Clicking on the screen regenerates the palette.
To copy a color code, drag and select the displayed color code and copy it.

It also displays the JIS contrast standard attainment value along with the color code.
The color palette seems to be generated by focusing on the standard attainment values AA to AAA.

Try using hello-color.

It generates two color palettes at random and also displays the JIS contrast standard attainment value.
hello-color

[Extra Edition] Color palette distribution site “Pigment – Simple Color Palette Generator”

The fifth color palette distribution site is “Pigment – Simple Color Palette Generator”.

This one also generates two random color palettes.
The palette is displayed as a list, and the brightness and saturation can be changed for the displayed palette using the tools on the left side of the screen.

In the list state, you can copy the hex color code in color units, and when you click on a palette to go to the detail screen, you can copy the rgb color code and the Pantone color code in addition to the hex color code.

Using Pigment.

Generate two random color palettes and adjust lightness saturation freely
Pigment – Simple Color Palette Generator

[Extra Edition] Color Hunt – Color Palettes for Designers and Artists

, a color palette distribution site

The sixth color palette distribution site is “Color Hunt – Color Palettes for Designers and Artists”.

Color Hunt - Color Palettes for Designers and Artists

A huge number of four-color palettes can be seen.
The color palettes can be viewed by “New,” “Popular,” and “Random,” as well as by theme, such as “Pastel,” “Vintage,” and “Warm,” allowing you to efficiently find the color palette that best suits your design direction.

Clicking on a palette on the list will take you to the detail screen.
On the detail screen, hexadecimal color codes and RGB values can be copied with a single click and pasted directly into css.

Using Color Hunt.

You can see a huge number of 4-color palettes
Color Hunt – Color Palettes for Designers and Artists

Tools can help you design more efficiently.

I believe that if there is something you can do with a tool to make it more efficient, you should do it.
The time you save by doing so can be used for other tasks, which in turn improves the quality of the final product.
Of course, I do not deny the option of “daring not to do it.
I think it is best if you can design comfortably with a production style that suits you.

I don’t think there is anything wrong with relying on tools to help you with the parts of your design that you are not good at.
Automobiles have automatic transmissions, cameras have auto-focus, vacuum cleaners and washing machines, and all other useful items in the world were created to support people.
People who want to use them use them, and people who don’t want to use them don’t use them.
It is the freedom of each individual, and I don’t think it is a matter of right and wrong or “should”.

Now, let’s look at Helpful tools for web design! We introduced 3+1 useful color scheme tools for beginners.
How was it?
I would be happy if it could be of some help to you.
See you next time.