Starting color
—
Reference color
—
Find your color’s counterpart.
Bring a saved or shared palette, keep its original colors, and test how they work together. Or explore harmony presets and build your own combination.
Color harmony Signature mix
Choose a preset to explore a different relationship between your colors.
Work with a color.
Drag to change your starting color. The numbered dots locate your palette colors by hue and saturation.
Explore your color harmony.
Explore the combination, then check how two colors read together below.
Complement
—
Contrast with starting color
—
Suggested accent
—
Contrast with starting color
—
Fourth color
—
Contrast with starting color
—
Fifth color
—
Contrast with starting color
—
Complement is the opposite HSL hue. Suggested accent uses a neighboring split-complementary hue. Palette colors are not adjusted to pass text contrast.
Put your colors to the test.
Choose the text and background for the preview. Readable text selects black or white against the chosen background.
A little color.
A different feeling. This is how your text reads against the background. Try a different pair and see what changes.
A different feeling. This is how your text reads against the background. Try a different pair and see what changes.
—Choose your colors
Text and background contrast
Normal text needs 4.5:1. Large text needs 3:1.
A different color is not always a readable color.
Presets use the RGB/HSL wheel. Analogous 5 explores nearby hues; Tonal 5 adds shades and tints; Balanced 5 is our own mix of related hues, opposite accents, and a pale tint. Custom 5 lets you edit each color independently. Imported palettes keep their original colors and roles until you edit them. The bright wheel shows hue and saturation; result colors include brightness. Colors can share a wheel position. Palette suggestions do not guarantee readable text.
Contrast is calculated from the final, opaque sRGB HEX colors. AA text needs 4.5:1; AA large text needs 3:1; AAA normal text needs 7:1. Large text means at least 24 CSS px, or about 18.7 CSS px when bold. Ratios are displayed to two decimal places without rounding up; pass/fail uses the full calculation. Transparency, images, and gradients need their own checks.
Read the WCAG contrast guidance How HSL complementary colors work