

Discover
Palettes
Gradients
Tools

Upgrade
Sign in
Create account

Featured tools

Unleash your creativity with the easiest color generators.

Color tools

Explore, create, and transform stunning colors.

Color conversion

Transform a single color into various formats.



Join Colorffy Pro

Upgrade to Pro and unlock more features.



Discord community

Join our new Discord, ask questions, share your projects, and get the latest updates.



Loading gradient…

Loading...

Main Actions

Actions

Explore the gradient in different formats, and actions.

Colors overview

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

Color blindness

The simulation of color blindness may not be 100% accurate sometimes.

UI components preview

Preview the gradient in different UI components.

Details


Type
Gradient



Copy CSS

Get CSS, SCSS, & Tailwind code for web development.

HDR color space

HDR colors OKLAB

Loading syntax highlighting...

Fallback colors

Loading syntax highlighting...



HDR gradient

Switch to HDR to enhance the gradient.

HDR space

Precision (3)

Intensity (1.2)

Gradient preview

See the HD CSS color spaces use guide.



Copy app colors tokens

Get Android, Flutter, Swift, & MAUI tokens.

Colors

Loading syntax highlighting...

Gradient PRO

Pro feature only

Get access to AI features, all app tokens, export files, and more.



Quick view

Inspect colors in multiple color spaces.

SRGB HDR

color(srgb 0 0 0)

OKLAB HDR

oklab(0 0 0)

OKLCH HDR

oklch(0 0 0)

P3 HDR

color(display-p3 0 0 0)

Name

black

RGB

rgb(0, 0, 0)

HEX

#000000

HSL

hsl(0, 0%, 0%)

HWB

hwb(0, 0%, 100%)

HSV

hsv(0, 0%, 0%)

CMYK

cmyk(0%, 0%, 0%, 100%)

LAB

lab(0, 0, 0)

LCH

lch(0, 0, 0)

XYZ

xyz(0, 0, 0)

colorffy.com



Download gradient image

Choose the perfect size and format for your image wallpaper or background.

Image formats


PNG

JPEG

SVG

Image sizes

3840x2160

PRO

Ultrawide Desktop

3440x1440

PRO

Widescreen Monitor

2560x1440

PRO

1080p

1920x1080

PRO

iPhone 16 Plus

1290x2796

PRO

iPhone 16 Pro

1179x2556

PRO

Pixel 9 Pro

1344x2992

PRO

Mobile Portrait

1080x1920

Free

Instagram Square

1080x1080

Free

Instagram Portrait

1080x1350

Free

Instagram Landscape

1080x566

Free

Instagram Story

1080x1920

Free

Twitter Header

1500x500

Free

Profile Picture

1080x1080

Free

Google Slides (Standard)

960x540

Free

A4 Paper (Print)

2480x3508

Free

Letter Paper (Print)

2550x3300

Free

Upgrade to Pro and build faster.

Trusted by designers and developers around the world.

.css.csv.scss.json.pdf.jpg.png.svgtailwindstyle dictionarywallpapers4kultrawidewidescreenapp tokensflutterandroidswiftmaui.nethdr colors

Create faster. Export anywhere.

Unlock advanced exports, app tokens, unlimited collections, wallpapers, and an ad‑free experience.


AI tools for color insights and faster creation
New

Export a polished Branding Kit as PDF
New

Export Light/Dark themes to CSS and CSV
New

Generate app color tokens for Android, Flutter, Swift, and .NET MAUI
New

App gradient code (Android, Flutter, Swift)
New

One‑click wallpapers for desktop and mobile (4K, ultrawide, iPhone, Pixel, more)
New

Unlimited collections
New

Export color data to JSON, CSS, SCSS, Tailwind, Style Dictionary, and CSV

Download colors as PNG, JPG, or SVG

Ad‑free experience