Dear color lovers – together, we’ll have a more colorful future. Support us on

✕

CSS Gradients:
#115482

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, 17 red, 84 green and 130 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, 87 cyan, 35 magenta, none yellow and 49 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 #115482 - Complementary color

Lineal

HEX #115482 to HEX #EEAB7D

CSS-Code:

background-image: linear-gradient(135deg, #115482 10%, #EEAB7D 94%);

Radial

HEX #115482 to HEX #EEAB7D

CSS-Code:

background-image: radial-gradient(circle, #115482 9%, #EEAB7D 90%);

HEX #EEAB7D to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #EEAB7D 12%, #115482 90%);

HEX #EEAB7D to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #EEAB7D 9%, #115482 89%);

2-color gradients of #115482 - Lighter colors

Lineal

HEX #115482 to HEX #117483

CSS-Code:

background-image: linear-gradient(135deg, #115482 6%, #117483 96%);

Radial

HEX #115482 to HEX #117483

CSS-Code:

background-image: radial-gradient(circle, #115482 9%, #117483 86%);

HEX #117483 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #117483 9%, #115482 93%);

HEX #117483 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #117483 0%, #115482 95%);

HEX #115482 to HEX #115583

CSS-Code:

background-image: linear-gradient(135deg, #115482 4%, #115583 95%);

HEX #115482 to HEX #115583

CSS-Code:

background-image: radial-gradient(circle, #115482 8%, #115583 96%);

HEX #115583 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #115583 12%, #115482 98%);

HEX #115583 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #115583 2%, #115482 86%);

HEX #115482 to HEX #113783

CSS-Code:

background-image: linear-gradient(135deg, #115482 2%, #113783 96%);

HEX #115482 to HEX #113783

CSS-Code:

background-image: radial-gradient(circle, #115482 3%, #113783 90%);

HEX #113783 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #113783 7%, #115482 88%);

HEX #113783 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #113783 14%, #115482 90%);

HEX #115482 to HEX #111983

CSS-Code:

background-image: linear-gradient(135deg, #115482 6%, #111983 89%);

HEX #115482 to HEX #111983

CSS-Code:

background-image: radial-gradient(circle, #115482 7%, #111983 100%);

HEX #111983 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #111983 5%, #115482 97%);

HEX #111983 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #111983 0%, #115482 98%);

2-color gradients of #115482 - Darker colors

Lineal

HEX #115482 to HEX #0C3D5E

CSS-Code:

background-image: linear-gradient(135deg, #115482 1%, #0C3D5E 92%);

Radial

HEX #115482 to HEX #0C3D5E

CSS-Code:

background-image: radial-gradient(circle, #115482 12%, #0C3D5E 98%);

HEX #0C3D5E to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #0C3D5E 8%, #115482 94%);

HEX #0C3D5E to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #0C3D5E 3%, #115482 88%);

HEX #115482 to HEX #115583

CSS-Code:

background-image: linear-gradient(135deg, #115482 13%, #115583 89%);

HEX #115482 to HEX #115583

CSS-Code:

background-image: radial-gradient(circle, #115482 7%, #115583 87%);

HEX #115583 to HEX #115482

CSS-Code:

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

HEX #115583 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #115583 12%, #115482 90%);

HEX #115482 to HEX #166CA7

CSS-Code:

background-image: linear-gradient(135deg, #115482 6%, #166CA7 96%);

HEX #115482 to HEX #166CA7

CSS-Code:

background-image: radial-gradient(circle, #115482 1%, #166CA7 94%);

HEX #166CA7 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #166CA7 5%, #115482 89%);

HEX #166CA7 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #166CA7 8%, #115482 97%);

HEX #115482 to HEX #1A84CC

CSS-Code:

background-image: linear-gradient(135deg, #115482 2%, #1A84CC 92%);

HEX #115482 to HEX #1A84CC

CSS-Code:

background-image: radial-gradient(circle, #115482 1%, #1A84CC 87%);

HEX #1A84CC to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #1A84CC 4%, #115482 97%);

HEX #1A84CC to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #1A84CC 8%, #115482 89%);

2-color gradients of #115482 - Analogue colors

Lineal

HEX #115482 to HEX #117483

CSS-Code:

background-image: linear-gradient(135deg, #115482 11%, #117483 100%);

Radial

HEX #115482 to HEX #117483

CSS-Code:

background-image: radial-gradient(circle, #115482 13%, #117483 96%);

HEX #117483 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #117483 4%, #115482 98%);

HEX #117483 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #117483 14%, #115482 98%);

HEX #115482 to HEX #115583

CSS-Code:

background-image: linear-gradient(135deg, #115482 7%, #115583 92%);

HEX #115482 to HEX #115583

CSS-Code:

background-image: radial-gradient(circle, #115482 8%, #115583 98%);

HEX #115583 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #115583 11%, #115482 94%);

HEX #115583 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #115583 12%, #115482 94%);

HEX #115482 to HEX #113783

CSS-Code:

background-image: linear-gradient(135deg, #115482 9%, #113783 94%);

HEX #115482 to HEX #113783

CSS-Code:

background-image: radial-gradient(circle, #115482 6%, #113783 98%);

HEX #113783 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #113783 3%, #115482 88%);

HEX #113783 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #113783 4%, #115482 96%);

HEX #115482 to HEX #111983

CSS-Code:

background-image: linear-gradient(135deg, #115482 0%, #111983 94%);

HEX #115482 to HEX #111983

CSS-Code:

background-image: radial-gradient(circle, #115482 12%, #111983 90%);

HEX #111983 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #111983 14%, #115482 88%);

HEX #111983 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #111983 7%, #115482 86%);

2-color gradients of #115482 - Monochromatic colors

Lineal

HEX #115482 to HEX #0C3D5E

CSS-Code:

background-image: linear-gradient(135deg, #115482 0%, #0C3D5E 86%);

Radial

HEX #115482 to HEX #0C3D5E

CSS-Code:

background-image: radial-gradient(circle, #115482 12%, #0C3D5E 93%);

HEX #0C3D5E to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #0C3D5E 3%, #115482 94%);

HEX #0C3D5E to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #0C3D5E 9%, #115482 88%);

HEX #115482 to HEX #115583

CSS-Code:

background-image: linear-gradient(135deg, #115482 2%, #115583 92%);

HEX #115482 to HEX #115583

CSS-Code:

background-image: radial-gradient(circle, #115482 10%, #115583 96%);

HEX #115583 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #115583 14%, #115482 96%);

HEX #115583 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #115583 0%, #115482 95%);

HEX #115482 to HEX #166CA7

CSS-Code:

background-image: linear-gradient(135deg, #115482 11%, #166CA7 90%);

HEX #115482 to HEX #166CA7

CSS-Code:

background-image: radial-gradient(circle, #115482 14%, #166CA7 99%);

HEX #166CA7 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #166CA7 6%, #115482 94%);

HEX #166CA7 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #166CA7 4%, #115482 90%);

HEX #115482 to HEX #1A84CC

CSS-Code:

background-image: linear-gradient(135deg, #115482 9%, #1A84CC 97%);

HEX #115482 to HEX #1A84CC

CSS-Code:

background-image: radial-gradient(circle, #115482 1%, #1A84CC 100%);

HEX #1A84CC to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #1A84CC 6%, #115482 90%);

HEX #1A84CC to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #1A84CC 4%, #115482 93%);

2-color gradients of #115482 - Partial complementary colors

Lineal

HEX #115482 to HEX #551183

CSS-Code:

background-image: linear-gradient(135deg, #115482 8%, #551183 100%);

Radial

HEX #115482 to HEX #551183

CSS-Code:

background-image: radial-gradient(circle, #115482 4%, #551183 91%);

HEX #551183 to HEX #115482

CSS-Code:

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

HEX #551183 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #551183 7%, #115482 89%);

HEX #115482 to HEX #838311

CSS-Code:

background-image: linear-gradient(135deg, #115482 0%, #838311 94%);

HEX #115482 to HEX #838311

CSS-Code:

background-image: radial-gradient(circle, #115482 14%, #838311 95%);

HEX #838311 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #838311 1%, #115482 94%);

HEX #838311 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #838311 1%, #115482 86%);

2-color gradients of #115482 - Triadic colors

Lineal

HEX #115482 to HEX #831155

CSS-Code:

background-image: linear-gradient(135deg, #115482 13%, #831155 87%);

Radial

HEX #115482 to HEX #831155

CSS-Code:

background-image: radial-gradient(circle, #115482 2%, #831155 88%);

HEX #831155 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #831155 9%, #115482 93%);

HEX #831155 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #831155 13%, #115482 89%);

HEX #115482 to HEX #558311

CSS-Code:

background-image: linear-gradient(135deg, #115482 2%, #558311 95%);

HEX #115482 to HEX #558311

CSS-Code:

background-image: radial-gradient(circle, #115482 12%, #558311 92%);

HEX #558311 to HEX #115482

CSS-Code:

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

HEX #558311 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #558311 0%, #115482 88%);

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

Lineal

HEX #115482 to HEX #551183

CSS-Code:

background-image: linear-gradient(135deg, #115482 4%, #551183 86%);

Radial

HEX #115482 to HEX #551183

CSS-Code:

background-image: radial-gradient(circle, #115482 7%, #551183 97%);

HEX #551183 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #551183 8%, #115482 90%);

HEX #551183 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #551183 1%, #115482 87%);

HEX #115482 to HEX #833F11

CSS-Code:

background-image: linear-gradient(135deg, #115482 8%, #833F11 91%);

HEX #115482 to HEX #833F11

CSS-Code:

background-image: radial-gradient(circle, #115482 4%, #833F11 100%);

HEX #833F11 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #833F11 9%, #115482 94%);

HEX #833F11 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #833F11 11%, #115482 89%);

HEX #115482 to HEX #3F8311

CSS-Code:

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

HEX #115482 to HEX #3F8311

CSS-Code:

background-image: radial-gradient(circle, #115482 9%, #3F8311 97%);

HEX #3F8311 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #3F8311 14%, #115482 88%);

HEX #3F8311 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #3F8311 3%, #115482 96%);

2-color gradients of #115482 - Square colors

Lineal

HEX #115482 to HEX #781183

CSS-Code:

background-image: linear-gradient(135deg, #115482 2%, #781183 97%);

Radial

HEX #115482 to HEX #781183

CSS-Code:

background-image: radial-gradient(circle, #115482 2%, #781183 95%);

HEX #781183 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #781183 4%, #115482 93%);

HEX #781183 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #781183 13%, #115482 94%);

HEX #115482 to HEX #833F11

CSS-Code:

background-image: linear-gradient(135deg, #115482 4%, #833F11 90%);

HEX #115482 to HEX #833F11

CSS-Code:

background-image: radial-gradient(circle, #115482 2%, #833F11 98%);

HEX #833F11 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #833F11 1%, #115482 89%);

HEX #833F11 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #833F11 7%, #115482 86%);

HEX #115482 to HEX #1C8311

CSS-Code:

background-image: linear-gradient(135deg, #115482 11%, #1C8311 91%);

HEX #115482 to HEX #1C8311

CSS-Code:

background-image: radial-gradient(circle, #115482 2%, #1C8311 100%);

HEX #1C8311 to HEX #115482

CSS-Code:

background-image: linear-gradient(135deg, #1C8311 0%, #115482 91%);

HEX #1C8311 to HEX #115482

CSS-Code:

background-image: radial-gradient(circle, #1C8311 1%, #115482 90%);

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.