Extract color from image

Automatic color matching based on photos and pictures. Upload an image, define a scheme of 10 primary colors, and see how they match on the web page

Drag and drop a file or select add Image
www.gradients.app — pick colors from image
{{ color.hex }}

Accent colors

Bright colors of the palette, highlight important details and attract attention 🔥

#{{getColor(1)}}

#{{getColor(2)}}

#{{getColor(3)}}

#{{color}}
#{{color}}

We'll help you choose the color of the text and background

Contrasting colors make your content even better 🤩

Muted colors

Suitable for notifications, information cards and other blocks 👍

#{{getColor(7)}}

#{{getColor(8)}}

#{{getColor(9)}}

#{{getColor(10)}}

Light colors

Ideal for backgrounds and substrates 😺

#{{color}}

Dark colors

Can be used for text and headings 📝

#{{color}}

Invert colors

The reverse side of the color palette. Contrast well with the colors in your scheme. 🦇

#{{invertColor(getColor(1))}}
#{{invertColor(getColor(2))}}
#{{invertColor(getColor(3))}}
#{{invertColor(getColor(4))}}
#{{invertColor(getColor(5))}}
#{{invertColor(getColor(6))}}
#{{invertColor(getColor(7))}}
#{{invertColor(getColor(8))}}
#{{invertColor(getColor(9))}}
#{{invertColor(getColor(10))}}

Tools

Hello,
nice to see you!

google login
github white login github black login
yandex login

Forgot Password?

Enter the email address you used when you joined and we’ll send you instructions to reset your password.

Create
a new account

Password mismatch

Any ideas or suggestions? 💡

Write to us, we'll try to implement them or correct any mistakes. Google Form

Introducing Mesh Gradients

We've added a mesh gradient generator and a new mesh library for you to enrich with your gradients. Now you can create beautiful abstract gradients, download them, copy their CSS codes, save them in your personal dashboard, and add them to the public library.

We will soon add a radial gradient generator!

Mesh Gradients