How can we help?

Learn how to create gradients and how to use our color tools with Colorffy.

Website

Learn how to use our color tools.

Palettes

All Colorffy´s palettes are accessible from: https://colorffy.com/palettes

📃 Basic usage

Every palette has 5 colors.

Click on some palette color to copy the value, click the "Custom color codes" button to open the sidebar with the color codes for mobile development like Android or Flutter.

Clicking the "Share" button will open a modal to share the palette with Pinterest, Twitter or if you want, copy the link and send it to someone.

If you want to download the palette as an image, just click the floating button and a new button with a download icon will appear, click on it and that's all, your palette image will be downloaded.

A palette will have these features:

📃 Features

• Custom color codes

  • Flutter color code

  • Android color code

• Different color formats for each color

  • Hexadecimal

  • RGB

  • HSL

  • HSV

  • CMYK

  • Pantone (or similar)

• Color blindness filters

• Palette colors applied on icons

Gradients

All Colorffy´s gradients are accessible from: https://colorffy.com/gradients

📃 Basic usage

Every palette has 2 to 3 colors.

Click the "Custom color codes" button to open the sidebar with the color codes for mobile development like Android or Flutter.

But if you need the CSS gradient code, just hit the "Copy CSS" button and a modal will pop up, after that just click on the code with the direction you want and you'll get something like this:

background: linear-gradient(to right, #03a9f4, #00bcd4);

Clicking the "Share" button will open a modal to share the gradient with Pinterest, Twitter or if you want, copy the link and send it to someone.

If you want to download the gradient as an image, just click the floating button and a new button with a download icon will appear, click on it and that's all, your palette image will be downloaded.

A gradient will have these features:

📃 Features

• Custom color codes

  • Flutter color code

  • Android color code

  • CSS code

• Different color formats for each color

  • Hexadecimal

  • RGB

  • HSL

  • HSV

  • CMYK

  • Pantone (or similar)

• Color blindness filters

• UI components preview for

  • Buttons

  • Cards

  • Text

Tools

🎨 Color shades and tints

https://colorffy.com/color

A simple tool, you just need to select a color from the color picker and you will see the shades and tints of that color.

📸 Image color palette

https://colorffy.com/color-image-picker

Click on the input and upload an image in one of these formats:

• .jpg

• .jpeg

• .png

• .gif

After uploading the image you will get a collage with your image and its 6 predominant colors.

🎲 Random color

https://colorffy.com/random-color

The most simple tool of Colorffy, just click the "New random color" button the number of times you want and see the random and complementary color generated.

🌆 Gradient generator

https://colorffy.com/gradient/generator

Follow these steps to create a fresh and cool gradient

• First of all, the colors. As you can see, the generator is divided into two parts, the "Colors" and "Rotation" tabs.

• The Colors tab has 3 inputs where you can choose one of the hundreds of colors available, be sure you fill in at least two inputs, the third one is optional so you are not forced to fill.

• Rotation, this tab has 2 inputs (A name input if you are logged in) and 1 button to select the gradient type (Linear or Radial), be sure you choose a Type and a Rotation, and if you change the type, the last rotation will disappear and new options will appear. If you are logged in, just change the input name to name your gradients.

• After you fill in all the inputs and your gradient is ready, you can:

  • Save your gradient

  • Copy gradient CSS

  • Download the gradient as an image (The same as palettes and gradients)

• If you want to restart the inputs, just click the "Clear inputs" button.

Account

Learn how to manage your information and content.

Profile

https://colorffy.com/profile

Here you'll have shortcuts to some places on the website, you can see your information, or if you want you can delete your account.

Also, you can go to the "Support" tab if you need help with something or if you want to report a bug, request a feature, etc. And send a message via Twitter to @giangzadev or send an email.

My gradients

https://colorffy.com/user/gradients

Here you will find your saved gradient from the generator, the layout it's the same for the other gradients and the features are the same.

Liked gradients

https://colorffy.com/user/likes/gradients

Here you will find your collection of liked gradients.

Liked palettes

https://colorffy.com/user/likes/palettes

Here you will find your collection of liked palettes.