🎨 Color Mix Wheel
Add colors and watch your mixed color change automatically.
MIX
Your Colors
Color Outcome
⚙️ Settings
Color Presets
Generated Color Palette
Color Combination Generator
Pick a single color in seconds. Choosing more than one is trickier. The same blue might look good in isolation, but it can make other colors muddy.
This website will let you experiment before finalizing the combination. Pick a color, add a second, and see how they work together instantly. All colors will have their codes displayed, so you can copy them over.
How to Use It
Pick a color with the picker tool, or type in the code. Add another color of your choice – the result will update as you make changes. Experiment until you find the balance that appeals to you. Copy the values in the format of your choice.
Pro tip: Only change one color at a time. You won’t be able to tell which of the two changed colors had an effect.
Color Wheel Basics
The color wheel is a tool that showcases the spectrum of visible colors in a circle. There are a few basic rules to picking combinations:
Complementary – colors opposite each other on the wheel, a high contrast combination. Try using blue and orange.
Analogous – colors next to each other, in a range of 3 on the wheel. These are safest and most calm – try blue, teal, and green.
Triadic – every other color on the wheel. These are lively and warm, but harder to combine.
A good default for a website is to use analogous colors and one complementary hue. The accent will draw the eye, and looks great as a button. Another way to combine two colors is to blend two of them into one muted or bright.
Mixing Two Colors
Your screen displays colors using light, not pigment. This means that combining two colors will rarely give you an expected result. When you mix two colors, the outcome will always be closer to the middle of the spectrum. As a rule of thumb, use two colors that are not very different, or desaturate the outcome later.
For example, blue and orange are both strong and saturated. Their mix will turn into a grayish brown – a neutral color, that is neither warm nor cold.
Use blending to create your own variations and shades:
Tint – your color mixed with white.
Shade – your color mixed with black.
Tone – your color mixed with a neutral hue, like gray.
Understanding Color Codes
The value of a certain color can be displayed in a few different notations. Each has a purpose, and will produce the same color result.
Format | What it looks like | Best used for
HEX | #3366FF | Pasting into CSS files
RGB | 51, 102, 255 | Lights (code or physical)
HSL | 225, 100%, 60% | Adjusting colors by hand
CMYK | 80, 60, 0, 0 | Printing
A few tips:
- To make a similar shade of your color for a hover effect: keep the hue the same, and reduce the lightness by 10%.
- Light colors and highly saturated hues such as electric blue often turn out duller when printed. Order a proof before a large print run.
- Keep a list of all your colors in HEX code. Only convert the codes when you need them in a different format. This will prevent the same blue from being in 3 slightly different shades.
Choosing Colors for a Website
Websites rarely need more than 5 colors, so a few variations of a single hue will get you quite far. Here is a general guideline as to what each color is used for:
Main color
Secondary color
Accent
Background
Text color
A general rule of thumb is to follow the 60 30 10 pattern. 60% of neutral colors for backgrounds, 30% for secondary colors, and 10% for accents.
60%
30%
10%
Check Your Contrast
Contrast is the most overlooked aspect of color choice. The recommended contrast ratio, according to WCAG guidelines is 4.5:1 for normal text, and 3:1 for large texts.
The most common mistake is to use light gray text on a white background. It looks nice on a designer’s screen, but it becomes unreadable in bright conditions on a phone. Double check your color combinations with a contrast checker before finalizing them.
Don’t Rely on Color Alone
Some colors appear different to people with color vision deficiency. Avoid using red and green in the same interface, or pair them with another cue, such as a word or an additional icon. About 8% of men are colorblind in some way – and this is not a design problem. It’s a biology issue.
Test in Context
Place the colors in the context of the interface you intend to use them in. A hover state in a card component looks one way on a white background, and another – on a dark background where the card appears gray.
Interface Colors
In an interface, each color has a role to play. A general recommendation for interfaces is to have:
One color for primary actions, such as “Buy” or “Sign up”
One color for links
Red for errors
Green for success
Amber for warnings
Do not use the same red for a sale banner and an error message. Your users will get confused as to what you want them to do in either case. A set of standard colors also applies to the following:
Default
Hover
Pressed
Disabled
Use the same base color for each of your button states, with variations in lightness for the hover and pressed effects. All the colors will appear to belong together. Dark mode: avoid using the same intense colors that you would use on a white background. They will wash out on dark backgrounds – desaturate them slightly.
Building a Palette or Mixing?
If you have nothing to work with, start with a combination. A simple spectrum will give you a set of colors you feel comfortable working with. Any five or six colors make up a good palette. For logos, pick a base and two or three variations. If you already have a color to work with, mixing is faster and gives you better control.
Knowing which tool to use in which case will help you make quicker decisions.
Where This Helps
- Websites: backgrounds, buttons, and text links.
- Logos: choose your combination, and make sure it works in black and white and at a small scale.
- App UIs: compare your options before finalizing a pair.
- Social graphics and slides: keep a consistent set of colors for an entire series.
Common Questions
Can I choose more than two colors?
You certainly can, but every additional color will complicate the choice.
What format is best for a website?
HEX is the standard, but others work in CSS as well.
Can I use these values for a logo?
As a guide, yes. As a printed color, no: order a proof to make sure that the printer reproduces the colors correctly.
Does it work on mobile?
Yes: this works on phones, tablets, and computers.
Try it – there is no need to have a clear idea of the end result. Start with one color, add another, and keep changing them until you feel like you have something you want to see.