Color Matcher

Matching colors for your color

Eight color combinations built from color-wheel harmony. Click a swatch to copy its hex, Preview to try the scheme on the mock-up below, or the ↻ button to make any color the new base.

Preview the color match

The complementary scheme applied to a simple page, with readable text picked automatically.

Do these two colors match?

Compare your color with a second one — a paint chip, a brand color, a fabric you photographed — to see how close they are and whether they work as text and background.

How to use the color matcher

1. Enter your color. Type a hex code, an rgb() or hsl() value or a color name, drag in the picker, or use the eyedropper to grab a color from anywhere on your screen.
2. Find its closest match. The color matcher instantly finds the nearest named color, CSS keyword, Tailwind CSS class, Material Design color, Flat UI color and web-safe color, with a match score for each.
3. Choose matching colors. Browse eight color combinations — complementary, analogous, triadic and more — and preview any of them on a real-looking page before you commit.
4. Copy the codes. Click any swatch for its hex code, or copy a whole scheme as a list or as CSS variables.

The page address updates as you work, so Copy link saves the exact color match to share with a client or teammate. Everything runs in your browser — nothing is uploaded.

What colors go with my color?

Colors that match are usually related by their position on the color wheel (or the artist's RYB wheel in our Adobe color wheel alternative). A complementary match sits directly opposite your color and gives the strongest contrast — blue and orange, purple and yellow. Analogous colors sit right next to it and feel calm and natural. Split-complementary and triadic schemes balance contrast with variety, and tetradic (square) schemes give four evenly spaced hues for richer designs. Monochromatic schemes use lighter and darker versions of one hue, and a neutral pairing sets your color against tinted off-whites and charcoals — the safest choice for websites, interiors and branding.

A good rule when matching colors is 60-30-10: use one dominant color for about 60% of the space, a secondary color for 30%, and an accent for the last 10%. The mock-up above follows that split. For more control over a full palette, including an 11-step shade ramp you can export as CSS, take your base color into the palette generator; to blend two matching colors into each other, use the color mixer or the gradient creator. Not sure which color to start from? The color personality test suggests a personality color and palette in about two minutes.

Finding the closest color match

Two colors can look nearly identical while their hex codes look nothing alike, so this color match finder does not compare raw RGB numbers. It converts every color to OKLab, a color space designed so that equal distances look like equal differences to the human eye, and reports the difference as a match score. As a rule of thumb, a score of 98% or more is indistinguishable side by side, 94–98% is a very close match, and below about 90% the difference is easy to see.

That makes the color matcher useful for snapping a color to a design system: paste a color from a mock-up and it tells you the nearest Tailwind CSS color class or Material Design color, the nearest of the 140 CSS color names, the nearest Flat UI color, and the nearest of the 216 web-safe colors. To learn what a color is called, the named match links to its page in the color library; for a color in a photo, sample it first with the image color picker or color name from image.

Matching colors that are easy to read

A color match is not finished until text on it is readable. The two-color check above shows the WCAG contrast ratio of your pair: at least 4.5:1 is needed for normal text and 3:1 for large text. Colors that match beautifully as a palette — analogous pairs especially — often have too little contrast to put one on top of the other. Test the exact combination in the contrast checker, and preview it for color-blind viewers with the color blindness simulator. Not sure how well you tell colors apart yourself? Take the color blind test before judging a close match by eye.

More color tools

• HTML color picker — pick a color and copy ready-made HTML and CSS.
• HTML color codes — search 245 named colors and click to copy their codes.
• Color picker — every format from hex to OKLCH, with shades, tints and tones.
• Color converter — convert between hex, RGB, HSL, HSV, CMYK and OKLCH.
• Color charts — the full Tailwind, Material, Flat UI and web-safe palettes.

Color matcher FAQ