Now offer period OUR API HAS BEEN EXPANDED

New Year: Get our API at a special price. Get it now. Get more detailed color conversion results - perfect for web projects, plugins, internal tools or SaaS applications. Valid from 2025-12-31 up to and including 2026-01-14 (23:59 CET)

API packages & prices X

CSS Gradients:
#467992

Information

close all

2-color gradients - Complementary color

Let CSS suggest color gradients from two hues such as the base hue and the complementary color.

Find examples of linear and radial color transitions.

Easy for web design: Copy the CSS code for easy integration on your website.

2-color gradients - Lighter colors

Let CSS suggest color gradients from two hues such as the base hue and a lighter hue.

Find examples of linear and radial color transitions from Lighter colors.

Simple for web design: copy the CSS code for easy integration on your website.

2-color gradients - Darker colors

Let CSS suggest color gradients from two hues such as the base hue and a darker hue.

Find examples of linear and radial color transitions from Darker colors.

Simple for web design: copy the CSS code for easy integration on your website.

Display options

Description

Dark color: low color values appear darker.

The breakdown of the color into the RGB color system: of 255 maximum color components, 70 red, 121 green and 146 blue.

The mixing ratio of these colors results in the displayed hue in the middle of the overlaps.

In the illustration you can see how the color is composed of the three components: red (top),green (bottom right) and blue (bottom left). In the middle you can see the result color.

In the CMYK color system the color is composed as follows: In this color tone, out of 100 maximum color components, 52 cyan, 17 magenta, none yellow and 43 key.

The mixing ratio of these colors results in the displayed hue in the middle of the overlaps.

In the diagram you can see how the color is composed of the four components cyan (top left),magenta (top right),yellow (bottom right) and black or key (bottom left). In the middle you can see the result color.

Verification of their color palette as a manufacturer!

Provide designers and agencies with accurate color values.

Let's go

2-color gradients of #467992 - Complementary color

Lineal

HEX #467992 to HEX #B9866D

CSS-Code:

background-image: linear-gradient(135deg, #467992 9%, #B9866D 90%);

Radial

HEX #467992 to HEX #B9866D

CSS-Code:

background-image: radial-gradient(circle, #467992 14%, #B9866D 96%);

HEX #B9866D to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #B9866D 12%, #467992 86%);

HEX #B9866D to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #B9866D 4%, #467992 89%);

2-color gradients of #467992 - Lighter colors

Lineal

HEX #467992 to HEX #468D91

CSS-Code:

background-image: linear-gradient(135deg, #467992 13%, #468D91 90%);

Radial

HEX #467992 to HEX #468D91

CSS-Code:

background-image: radial-gradient(circle, #467992 12%, #468D91 90%);

HEX #468D91 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #468D91 4%, #467992 93%);

HEX #468D91 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #468D91 4%, #467992 100%);

HEX #467992 to HEX #467991

CSS-Code:

background-image: linear-gradient(135deg, #467992 1%, #467991 90%);

HEX #467992 to HEX #467991

CSS-Code:

background-image: radial-gradient(circle, #467992 3%, #467991 97%);

HEX #467991 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #467991 4%, #467992 100%);

HEX #467991 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #467991 3%, #467992 92%);

HEX #467992 to HEX #466591

CSS-Code:

background-image: linear-gradient(135deg, #467992 3%, #466591 91%);

HEX #467992 to HEX #466591

CSS-Code:

background-image: radial-gradient(circle, #467992 14%, #466591 99%);

HEX #466591 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #466591 2%, #467992 98%);

HEX #466591 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #466591 5%, #467992 89%);

HEX #467992 to HEX #465191

CSS-Code:

background-image: linear-gradient(135deg, #467992 7%, #465191 87%);

HEX #467992 to HEX #465191

CSS-Code:

background-image: radial-gradient(circle, #467992 1%, #465191 96%);

HEX #465191 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #465191 14%, #467992 100%);

HEX #465191 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #465191 5%, #467992 86%);

2-color gradients of #467992 - Darker colors

Lineal

HEX #467992 to HEX #386175

CSS-Code:

background-image: linear-gradient(135deg, #467992 14%, #386175 89%);

Radial

HEX #467992 to HEX #386175

CSS-Code:

background-image: radial-gradient(circle, #467992 0%, #386175 93%);

HEX #386175 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #386175 5%, #467992 90%);

HEX #386175 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #386175 5%, #467992 93%);

HEX #467992 to HEX #467891

CSS-Code:

background-image: linear-gradient(135deg, #467992 13%, #467891 100%);

HEX #467992 to HEX #467891

CSS-Code:

background-image: radial-gradient(circle, #467992 12%, #467891 97%);

HEX #467891 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #467891 12%, #467992 88%);

HEX #467891 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #467891 1%, #467992 94%);

HEX #467992 to HEX #538FAC

CSS-Code:

background-image: linear-gradient(135deg, #467992 12%, #538FAC 92%);

HEX #467992 to HEX #538FAC

CSS-Code:

background-image: radial-gradient(circle, #467992 1%, #538FAC 100%);

HEX #538FAC to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #538FAC 7%, #467992 91%);

HEX #538FAC to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #538FAC 3%, #467992 93%);

HEX #467992 to HEX #6FA1BA

CSS-Code:

background-image: linear-gradient(135deg, #467992 3%, #6FA1BA 95%);

HEX #467992 to HEX #6FA1BA

CSS-Code:

background-image: radial-gradient(circle, #467992 1%, #6FA1BA 99%);

HEX #6FA1BA to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #6FA1BA 1%, #467992 94%);

HEX #6FA1BA to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #6FA1BA 2%, #467992 95%);

2-color gradients of #467992 - Analogue colors

Lineal

HEX #467992 to HEX #468D91

CSS-Code:

background-image: linear-gradient(135deg, #467992 12%, #468D91 94%);

Radial

HEX #467992 to HEX #468D91

CSS-Code:

background-image: radial-gradient(circle, #467992 2%, #468D91 98%);

HEX #468D91 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #468D91 11%, #467992 95%);

HEX #468D91 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #468D91 0%, #467992 95%);

HEX #467992 to HEX #467991

CSS-Code:

background-image: linear-gradient(135deg, #467992 12%, #467991 95%);

HEX #467992 to HEX #467991

CSS-Code:

background-image: radial-gradient(circle, #467992 11%, #467991 100%);

HEX #467991 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #467991 13%, #467992 94%);

HEX #467991 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #467991 10%, #467992 96%);

HEX #467992 to HEX #466591

CSS-Code:

background-image: linear-gradient(135deg, #467992 7%, #466591 86%);

HEX #467992 to HEX #466591

CSS-Code:

background-image: radial-gradient(circle, #467992 13%, #466591 99%);

HEX #466591 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #466591 12%, #467992 100%);

HEX #466591 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #466591 11%, #467992 97%);

HEX #467992 to HEX #465191

CSS-Code:

background-image: linear-gradient(135deg, #467992 7%, #465191 100%);

HEX #467992 to HEX #465191

CSS-Code:

background-image: radial-gradient(circle, #467992 5%, #465191 100%);

HEX #465191 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #465191 5%, #467992 90%);

HEX #465191 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #465191 2%, #467992 88%);

2-color gradients of #467992 - Monochromatic colors

Lineal

HEX #467992 to HEX #386175

CSS-Code:

background-image: linear-gradient(135deg, #467992 13%, #386175 100%);

Radial

HEX #467992 to HEX #386175

CSS-Code:

background-image: radial-gradient(circle, #467992 12%, #386175 86%);

HEX #386175 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #386175 11%, #467992 88%);

HEX #386175 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #386175 9%, #467992 97%);

HEX #467992 to HEX #467891

CSS-Code:

background-image: linear-gradient(135deg, #467992 5%, #467891 88%);

HEX #467992 to HEX #467891

CSS-Code:

background-image: radial-gradient(circle, #467992 0%, #467891 99%);

HEX #467891 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #467891 6%, #467992 95%);

HEX #467891 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #467891 14%, #467992 92%);

HEX #467992 to HEX #538FAC

CSS-Code:

background-image: linear-gradient(135deg, #467992 12%, #538FAC 87%);

HEX #467992 to HEX #538FAC

CSS-Code:

background-image: radial-gradient(circle, #467992 11%, #538FAC 93%);

HEX #538FAC to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #538FAC 10%, #467992 97%);

HEX #538FAC to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #538FAC 7%, #467992 86%);

HEX #467992 to HEX #6FA1BA

CSS-Code:

background-image: linear-gradient(135deg, #467992 11%, #6FA1BA 98%);

HEX #467992 to HEX #6FA1BA

CSS-Code:

background-image: radial-gradient(circle, #467992 8%, #6FA1BA 90%);

HEX #6FA1BA to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #6FA1BA 2%, #467992 96%);

HEX #6FA1BA to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #6FA1BA 13%, #467992 89%);

2-color gradients of #467992 - Partial complementary colors

Lineal

HEX #467992 to HEX #6C4691

CSS-Code:

background-image: linear-gradient(135deg, #467992 11%, #6C4691 88%);

Radial

HEX #467992 to HEX #6C4691

CSS-Code:

background-image: radial-gradient(circle, #467992 11%, #6C4691 92%);

HEX #6C4691 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #6C4691 10%, #467992 93%);

HEX #6C4691 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #6C4691 11%, #467992 94%);

HEX #467992 to HEX #918A46

CSS-Code:

background-image: linear-gradient(135deg, #467992 12%, #918A46 96%);

HEX #467992 to HEX #918A46

CSS-Code:

background-image: radial-gradient(circle, #467992 13%, #918A46 89%);

HEX #918A46 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #918A46 0%, #467992 87%);

HEX #918A46 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #918A46 6%, #467992 93%);

2-color gradients of #467992 - Triadic colors

Lineal

HEX #467992 to HEX #914679

CSS-Code:

background-image: linear-gradient(135deg, #467992 6%, #914679 100%);

Radial

HEX #467992 to HEX #914679

CSS-Code:

background-image: radial-gradient(circle, #467992 9%, #914679 90%);

HEX #914679 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #914679 13%, #467992 96%);

HEX #914679 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #914679 7%, #467992 87%);

HEX #467992 to HEX #799146

CSS-Code:

background-image: linear-gradient(135deg, #467992 2%, #799146 86%);

HEX #467992 to HEX #799146

CSS-Code:

background-image: radial-gradient(circle, #467992 4%, #799146 98%);

HEX #799146 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #799146 3%, #467992 97%);

HEX #799146 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #799146 5%, #467992 95%);

2-color gradients of #467992 - Rectangular (tetradic) colors

Lineal

HEX #467992 to HEX #6C4691

CSS-Code:

background-image: linear-gradient(135deg, #467992 6%, #6C4691 91%);

Radial

HEX #467992 to HEX #6C4691

CSS-Code:

background-image: radial-gradient(circle, #467992 2%, #6C4691 93%);

HEX #6C4691 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #6C4691 2%, #467992 88%);

HEX #6C4691 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #6C4691 13%, #467992 87%);

HEX #467992 to HEX #915D46

CSS-Code:

background-image: linear-gradient(135deg, #467992 9%, #915D46 94%);

HEX #467992 to HEX #915D46

CSS-Code:

background-image: radial-gradient(circle, #467992 10%, #915D46 100%);

HEX #915D46 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #915D46 4%, #467992 97%);

HEX #915D46 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #915D46 1%, #467992 88%);

HEX #467992 to HEX #6A9146

CSS-Code:

background-image: linear-gradient(135deg, #467992 10%, #6A9146 86%);

HEX #467992 to HEX #6A9146

CSS-Code:

background-image: radial-gradient(circle, #467992 4%, #6A9146 94%);

HEX #6A9146 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #6A9146 9%, #467992 97%);

HEX #6A9146 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #6A9146 4%, #467992 89%);

2-color gradients of #467992 - Square colors

Lineal

HEX #467992 to HEX #834691

CSS-Code:

background-image: linear-gradient(135deg, #467992 1%, #834691 89%);

Radial

HEX #467992 to HEX #834691

CSS-Code:

background-image: radial-gradient(circle, #467992 14%, #834691 98%);

HEX #834691 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #834691 4%, #467992 91%);

HEX #834691 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #834691 8%, #467992 91%);

HEX #467992 to HEX #915D46

CSS-Code:

background-image: linear-gradient(135deg, #467992 1%, #915D46 87%);

HEX #467992 to HEX #915D46

CSS-Code:

background-image: radial-gradient(circle, #467992 13%, #915D46 89%);

HEX #915D46 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #915D46 4%, #467992 94%);

HEX #915D46 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #915D46 13%, #467992 94%);

HEX #467992 to HEX #539146

CSS-Code:

background-image: linear-gradient(135deg, #467992 13%, #539146 96%);

HEX #467992 to HEX #539146

CSS-Code:

background-image: radial-gradient(circle, #467992 2%, #539146 95%);

HEX #539146 to HEX #467992

CSS-Code:

background-image: linear-gradient(135deg, #539146 3%, #467992 95%);

HEX #539146 to HEX #467992

CSS-Code:

background-image: radial-gradient(circle, #539146 11%, #467992 96%);

Show more color palettes

Services

Colors

RGB to HEX

convert from RGB red green blue to #RRGGBB

RGB to CMYK

convert from RGB red green blue to CMYK cyan / magenta / yellow / black

RGB to RAL®

convert from RGB red green blue to RAL®-number (RAL 0000)

RGB to HKS®

convert from RGB red green blue to HKS®-number (HKS 00)

RGB to PANTONE®

convert from RGB red green blue to Pantone®-number (Pantone 0000)

RGB to Sherwin Williams®

convert from RGB red green blue to Sherwin Williams®-number (SW 0000)

RGB to NCS®

convert from RGB red green blue to NCS-number (S0000-X00X)

RGBA to HEX

convert from RGBA red green blue transparency to #RRGGBB

RGBA to CMYK

convert from RGBA red green blue transparency to CMYK cyan / magenta / yellow / black

RGBA to RAL®

convert from RGBA red green blue transparency to RAL®-number (RAL 0000)

RGBA to HKS®

convert from RGBA red green blue transparency to HKS®-number (HKS 00)

RGBA to PANTONE®

convert from RGBA red green blue transparency to Pantone®-number (Pantone 0000)

RGBA to Sherwin Williams®

convert from RGBA red green blue transparency to Sherwin Williams®-number (SW 0000)

RGBA to NCS®

convert from RGBA red green blue transparency to NCS-number (S0000-X00X)

CMYK to HEX

convert from CMYK cyan / magenta / yellow / black to #RRGGBB

CMYK to RGB

convert from CMYK cyan / magenta / yellow / black to RGB red green blue

CMYK to RGBA

convert from CMYK cyan / magenta / yellow / black to RGBA red green blue transparency

CMYK to RAL®

convert from CMYK cyan / magenta / yellow / black to RAL®-number (RAL 0000)

CMYK to HKS®

convert from CMYK cyan / magenta / yellow / black to HKS®-number (HKS 00)

CMYK to PANTONE®

convert from CMYK cyan / magenta / yellow / black to Pantone®-number (Pantone 0000)

CMYK to Sherwin Williams®

convert from CMYK cyan / magenta / yellow / black to Sherwin Williams®-number (SW 0000)

CMYK to NCS®

convert from CMYK cyan / magenta / yellow / black to NCS-number (S0000-X00X)

HEX to RGB

convert from #RRGGBB to RGB red green blue

HEX to RGBA

convert from #RRGGBB to RGBA red green blue transparency

HEX to CMYK

convert from #RRGGBB to CMYK cyan / magenta / yellow / black

HEX to RAL®

convert from #RRGGBB to RAL®-number (RAL 0000)

HEX to HKS®

convert from #RRGGBB to HKS®-number (HKS 00)

HEX to PANTONE®

convert from #RRGGBB to Pantone®-number (Pantone 0000)

HEX to Sherwin Williams®

convert from #RRGGBB to Sherwin Williams®-number (SW 0000)

HEX to NCS®

convert from #RRGGBB to NCS-number (S0000-X00X)

RAL® to RGB

convert from RAL®-number (RAL 0000) to RGB red green blue

RAL® to RGBA

convert from RAL®-number (RAL 0000) to RGBA red green blue transparency

RAL® to CMYK

convert from RAL®-number (RAL 0000) to CMYK cyan / magenta / yellow / black

RAL® to HEX

convert from RAL®-number (RAL 0000) to #RRGGBB

RAL® to HKS®

convert from RAL®-number (RAL 0000) to HKS®-number (HKS 00)

RAL® to PANTONE®

convert from RAL®-number (RAL 0000) to Pantone®-number (Pantone 0000)

RAL® to Sherwin Williams®

convert from RAL®-number (RAL 0000) to Sherwin Williams®-number (SW 0000)

RAL® to NCS®

convert from RAL®-number (RAL 0000) to NCS-number (S0000-X00X)

HKS® to RGB

convert from HKS®-number (HKS 00) to RGB red green blue

HKS® to RGBA

convert from HKS®-number (HKS 00) to RGBA red green blue transparency

HKS® to CMYK

convert from HKS®-number (HKS 00) to CMYK cyan / magenta / yellow / black

HKS® to HEX

convert from HKS®-number (HKS 00) to #RRGGBB

HKS® to RAL®

convert from HKS®-number (HKS 00) to RAL®-number (RAL 0000)

HKS® to PANTONE®

convert from HKS®-number (HKS 00) to Pantone®-number (Pantone 0000)

HKS® to Sherwin Williams®

convert from HKS®-number (HKS 00) to Sherwin Williams®-number (SW 0000)

HKS® to NCS®

convert from HKS®-number (HKS 00) to NCS-number (S0000-X00X)

PANTONE® to RGB

convert from Pantone®-number (Pantone 0000) to RGB red green blue

PANTONE® to RGBA

convert from Pantone®-number (Pantone 0000) to RGBA red green blue transparency

PANTONE® to CMYK

convert from Pantone®-number (Pantone 0000) to CMYK cyan / magenta / yellow / black

PANTONE® to HEX

convert from Pantone®-number (Pantone 0000) to #RRGGBB

PANTONE® to RAL®

convert from Pantone®-number (Pantone 0000) to RAL®-number (RAL 0000)

PANTONE® to HKS®

convert from Pantone®-number (Pantone 0000) to HKS®-number (HKS 00)

PANTONE® to Sherwin Williams®

convert from Pantone®-number (Pantone 0000) to Sherwin Williams®-number (SW 0000)

PANTONE® to NCS®

convert from Pantone®-number (Pantone 0000) to NCS-number (S0000-X00X)

Sherwin Williams® to RGB

convert from Sherwin Williams®-number (SW 0000) to RGB red green blue

Sherwin Williams® to RGBA

convert from Sherwin Williams®-number (SW 0000) to RGBA red green blue transparency

Sherwin Williams® to CMYK

convert from Sherwin Williams®-number (SW 0000) to CMYK cyan / magenta / yellow / black

Sherwin Williams® to HEX

convert from Sherwin Williams®-number (SW 0000) to #RRGGBB

Sherwin Williams® to RAL®

convert from Sherwin Williams®-number (SW 0000) to RAL®-number (RAL 0000)

Sherwin Williams® to HKS®

convert from Sherwin Williams®-number (SW 0000) to HKS®-number (HKS 00)

Sherwin Williams® to PANTONE®

convert from Sherwin Williams®-number (SW 0000) to Pantone®-number (Pantone 0000)

Sherwin Williams® to NCS®

convert from Sherwin Williams®-number (SW 0000) to NCS-number (S0000-X00X)

NCS® to RGB

convert from NCS-number (S0000-X00X) to RGB red green blue

NCS® to RGBA

convert from NCS-number (S0000-X00X) to RGBA red green blue transparency

NCS® to CMYK

convert from NCS-number (S0000-X00X) to CMYK cyan / magenta / yellow / black

NCS® to HEX

convert from NCS-number (S0000-X00X) to #RRGGBB

NCS® to RAL®

convert from NCS-number (S0000-X00X) to RAL®-number (RAL 0000)

NCS® to HKS®

convert from NCS-number (S0000-X00X) to HKS®-number (HKS 00)

NCS® to PANTONE®

convert from NCS-number (S0000-X00X) to Pantone®-number (Pantone 0000)

To be able to save color palettes, a registration is required.

Log in to your account

or

Create an account

Current color palette Share
Should it be public or private?
Link(s) will follow after sharing.

Public

Color palette shared
Please copy and save the desired link.

Share

View

OK, I have copied the links

Your colors will be saved in a new color palette.
View them under your profile.
You can customize them further, and share them.

Show color palette

Close

Create a color palette

DownloadDownload in different formats

By clicking on you can create palettes and download the color swatches.