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

✕

CSS Gradienten:
#036881

Information

schließe alle

Lass Dir CSS Farbverläufe aus zwei Farbtönen wie dem Grundfarbton und der Komplementärfarbe vorschlagen.

Finde Beispiele für Lineare und Radiale Farbübergänge.

Einfach für Webdesign: Kopiere Dir den CSS-Code zum einfachen integrieren auf Deiner Webseite.

Lass Dir CSS Farbverläufe aus zwei Farbtönen wie dem Grundfarbton und einem helleren Farbton vorschlagen.

Finde Beispiele für Lineare und Radiale Farbübergänge von Hellere Farbtöne.

Einfach für Webdesign: Kopiere Dir den CSS-Code zum einfachen integrieren auf Deiner Webseite.

Lass Dir CSS Farbverläufe aus zwei Farbtönen wie dem Grundfarbton und einem dunkleren Farbton vorschlagen.

Finde Beispiele für Lineare und Radiale Farbübergänge von Dunklere Farbtöne.

Einfach für Webdesign: Kopiere Dir den CSS-Code zum einfachen integrieren auf Deiner Webseite.

Anzeigeoptionen

Beschreibung

Da die Farbwerte im Vergleich zu anderen relativ gering sind, erscheint uns dieser Farbton dunkler.

Die Aufschlüsselung der Farbe in das RGB-Farbsystem: In diesem Farbton sind von 255 maximalen Farbanteilen jeweils 3 Rot, 104 Grün und 129 Blau.

Aus dem Mischverhältnis dieser Farben ergibt sich der angezeigte Farbton in der Mitte der Überschneidungen.

In der Darstellung siehst du, wie die Farbe aus den drei Bestandteilen Rot (oben), Grün (rechts unten) und Blau (links unten) zusammengestellt wird. Mittig ist die Ergebnissfarbe zu sehen.
3 104 129 R G B
Im CMYK-Farbsystem wird die Farbe folgendermaßen zusammengesetzt: In diesem Farbton sind von 100 maximalen Farbanteilen jeweils 98 Cyan, 19 Magenta, keine Gelb und 49 Schwarz.

Aus dem Mischverhältnis dieser Farben ergibt sich der angezeigte Farbton in der Mitte der Überschneidungen.

In der Darstellung siehst du, wie die Farbe aus den vier Bestandteilen Cyan (links oben), Magenta (rechts oben), Gelb oder Yellow (rechts unten) und Schwarz oder Key (links unten) zusammengestellt wird. Mittig ist die Ergebnissfarbe zu sehen.
98% 19% 0% 49% C M Y K

Verifizierung ihrer Farbpalette als Hersteller!

Bieten Sie Designern und Agenturen präzise Farbwerte.

Los geht's

Linear

HEX #036881 zu HEX #FC977E


CSS-Code:

background-image: linear-gradient(135deg, #036881 4%, #FC977E 90%);

Radial

HEX #036881 zu HEX #FC977E


CSS-Code:

background-image: radial-gradient(circle, #036881 5%, #FC977E 86%);

 

HEX #FC977E zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #FC977E 8%, #036881 97%);

 

HEX #FC977E zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #FC977E 9%, #036881 96%);

Linear

HEX #036881 zu HEX #038176


CSS-Code:

background-image: linear-gradient(135deg, #036881 8%, #038176 95%);

Radial

HEX #036881 zu HEX #038176


CSS-Code:

background-image: radial-gradient(circle, #036881 1%, #038176 86%);

 

HEX #038176 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #038176 13%, #036881 91%);

 

HEX #038176 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #038176 13%, #036881 94%);

 

HEX #036881 zu HEX #036A81


CSS-Code:

background-image: linear-gradient(135deg, #036881 10%, #036A81 90%);

 

HEX #036881 zu HEX #036A81


CSS-Code:

background-image: radial-gradient(circle, #036881 0%, #036A81 88%);

 

HEX #036A81 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #036A81 2%, #036881 91%);

 

HEX #036A81 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #036A81 4%, #036881 97%);

 

HEX #036881 zu HEX #034881


CSS-Code:

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

 

HEX #036881 zu HEX #034881


CSS-Code:

background-image: radial-gradient(circle, #036881 11%, #034881 99%);

 

HEX #034881 zu HEX #036881


CSS-Code:

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

 

HEX #034881 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #034881 6%, #036881 99%);

 

HEX #036881 zu HEX #032781


CSS-Code:

background-image: linear-gradient(135deg, #036881 8%, #032781 92%);

 

HEX #036881 zu HEX #032781


CSS-Code:

background-image: radial-gradient(circle, #036881 8%, #032781 98%);

 

HEX #032781 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #032781 8%, #036881 96%);

 

HEX #032781 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #032781 4%, #036881 96%);

Linear

HEX #036881 zu HEX #024759


CSS-Code:

background-image: linear-gradient(135deg, #036881 9%, #024759 88%);

Radial

HEX #036881 zu HEX #024759


CSS-Code:

background-image: radial-gradient(circle, #036881 4%, #024759 88%);

 

HEX #024759 zu HEX #036881


CSS-Code:

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

 

HEX #024759 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #024759 1%, #036881 97%);

 

HEX #036881 zu HEX #0488A9


CSS-Code:

background-image: linear-gradient(135deg, #036881 9%, #0488A9 100%);

 

HEX #036881 zu HEX #0488A9


CSS-Code:

background-image: radial-gradient(circle, #036881 11%, #0488A9 97%);

 

HEX #0488A9 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #0488A9 14%, #036881 100%);

 

HEX #0488A9 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #0488A9 3%, #036881 89%);

 

HEX #036881 zu HEX #05A9D1


CSS-Code:

background-image: linear-gradient(135deg, #036881 3%, #05A9D1 97%);

 

HEX #036881 zu HEX #05A9D1


CSS-Code:

background-image: radial-gradient(circle, #036881 6%, #05A9D1 92%);

 

HEX #05A9D1 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #05A9D1 4%, #036881 93%);

 

HEX #05A9D1 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #05A9D1 12%, #036881 89%);

Linear

HEX #036881 zu HEX #038176


CSS-Code:

background-image: linear-gradient(135deg, #036881 10%, #038176 96%);

Radial

HEX #036881 zu HEX #038176


CSS-Code:

background-image: radial-gradient(circle, #036881 5%, #038176 89%);

 

HEX #038176 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #038176 9%, #036881 99%);

 

HEX #038176 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #038176 4%, #036881 91%);

 

HEX #036881 zu HEX #036A81


CSS-Code:

background-image: linear-gradient(135deg, #036881 14%, #036A81 87%);

 

HEX #036881 zu HEX #036A81


CSS-Code:

background-image: radial-gradient(circle, #036881 5%, #036A81 98%);

 

HEX #036A81 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #036A81 2%, #036881 98%);

 

HEX #036A81 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #036A81 13%, #036881 99%);

 

HEX #036881 zu HEX #034881


CSS-Code:

background-image: linear-gradient(135deg, #036881 5%, #034881 96%);

 

HEX #036881 zu HEX #034881


CSS-Code:

background-image: radial-gradient(circle, #036881 12%, #034881 93%);

 

HEX #034881 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #034881 7%, #036881 99%);

 

HEX #034881 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #034881 13%, #036881 93%);

 

HEX #036881 zu HEX #032781


CSS-Code:

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

 

HEX #036881 zu HEX #032781


CSS-Code:

background-image: radial-gradient(circle, #036881 6%, #032781 90%);

 

HEX #032781 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #032781 14%, #036881 91%);

 

HEX #032781 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #032781 0%, #036881 93%);

Linear

HEX #036881 zu HEX #024759


CSS-Code:

background-image: linear-gradient(135deg, #036881 6%, #024759 90%);

Radial

HEX #036881 zu HEX #024759


CSS-Code:

background-image: radial-gradient(circle, #036881 12%, #024759 90%);

 

HEX #024759 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #024759 2%, #036881 89%);

 

HEX #024759 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #024759 10%, #036881 88%);

 

HEX #036881 zu HEX #0488A9


CSS-Code:

background-image: linear-gradient(135deg, #036881 1%, #0488A9 98%);

 

HEX #036881 zu HEX #0488A9


CSS-Code:

background-image: radial-gradient(circle, #036881 5%, #0488A9 98%);

 

HEX #0488A9 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #0488A9 10%, #036881 99%);

 

HEX #0488A9 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #0488A9 12%, #036881 100%);

 

HEX #036881 zu HEX #05A9D1


CSS-Code:

background-image: linear-gradient(135deg, #036881 9%, #05A9D1 99%);

 

HEX #036881 zu HEX #05A9D1


CSS-Code:

background-image: radial-gradient(circle, #036881 0%, #05A9D1 95%);

 

HEX #05A9D1 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #05A9D1 1%, #036881 89%);

 

HEX #05A9D1 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #05A9D1 12%, #036881 88%);

Linear

HEX #036881 zu HEX #330381


CSS-Code:

background-image: linear-gradient(135deg, #036881 0%, #330381 89%);

Radial

HEX #036881 zu HEX #330381


CSS-Code:

background-image: radial-gradient(circle, #036881 9%, #330381 98%);

 

HEX #330381 zu HEX #036881


CSS-Code:

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

 

HEX #330381 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #330381 4%, #036881 95%);

 

HEX #036881 zu HEX #816503


CSS-Code:

background-image: linear-gradient(135deg, #036881 12%, #816503 92%);

 

HEX #036881 zu HEX #816503


CSS-Code:

background-image: radial-gradient(circle, #036881 2%, #816503 95%);

 

HEX #816503 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #816503 8%, #036881 86%);

 

HEX #816503 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #816503 14%, #036881 87%);

Linear

HEX #036881 zu HEX #81036A


CSS-Code:

background-image: linear-gradient(135deg, #036881 0%, #81036A 94%);

Radial

HEX #036881 zu HEX #81036A


CSS-Code:

background-image: radial-gradient(circle, #036881 5%, #81036A 94%);

 

HEX #81036A zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #81036A 9%, #036881 89%);

 

HEX #81036A zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #81036A 2%, #036881 90%);

 

HEX #036881 zu HEX #6A8103


CSS-Code:

background-image: linear-gradient(135deg, #036881 5%, #6A8103 94%);

 

HEX #036881 zu HEX #6A8103


CSS-Code:

background-image: radial-gradient(circle, #036881 13%, #6A8103 99%);

 

HEX #6A8103 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #6A8103 9%, #036881 88%);

 

HEX #6A8103 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #6A8103 13%, #036881 92%);

Linear

HEX #036881 zu HEX #330381


CSS-Code:

background-image: linear-gradient(135deg, #036881 5%, #330381 86%);

Radial

HEX #036881 zu HEX #330381


CSS-Code:

background-image: radial-gradient(circle, #036881 14%, #330381 90%);

 

HEX #330381 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #330381 7%, #036881 99%);

 

HEX #330381 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #330381 1%, #036881 92%);

 

HEX #036881 zu HEX #811A03


CSS-Code:

background-image: linear-gradient(135deg, #036881 4%, #811A03 96%);

 

HEX #036881 zu HEX #811A03


CSS-Code:

background-image: radial-gradient(circle, #036881 14%, #811A03 100%);

 

HEX #811A03 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #811A03 9%, #036881 96%);

 

HEX #811A03 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #811A03 6%, #036881 89%);

 

HEX #036881 zu HEX #508103


CSS-Code:

background-image: linear-gradient(135deg, #036881 1%, #508103 93%);

 

HEX #036881 zu HEX #508103


CSS-Code:

background-image: radial-gradient(circle, #036881 7%, #508103 99%);

 

HEX #508103 zu HEX #036881


CSS-Code:

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

 

HEX #508103 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #508103 3%, #036881 86%);

Linear

HEX #036881 zu HEX #590381


CSS-Code:

background-image: linear-gradient(135deg, #036881 0%, #590381 88%);

Radial

HEX #036881 zu HEX #590381


CSS-Code:

background-image: radial-gradient(circle, #036881 14%, #590381 88%);

 

HEX #590381 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #590381 6%, #036881 98%);

 

HEX #590381 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #590381 11%, #036881 98%);

 

HEX #036881 zu HEX #811A03


CSS-Code:

background-image: linear-gradient(135deg, #036881 0%, #811A03 90%);

 

HEX #036881 zu HEX #811A03


CSS-Code:

background-image: radial-gradient(circle, #036881 8%, #811A03 91%);

 

HEX #811A03 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #811A03 12%, #036881 88%);

 

HEX #811A03 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #811A03 14%, #036881 88%);

 

HEX #036881 zu HEX #2B8103


CSS-Code:

background-image: linear-gradient(135deg, #036881 8%, #2B8103 99%);

 

HEX #036881 zu HEX #2B8103


CSS-Code:

background-image: radial-gradient(circle, #036881 5%, #2B8103 92%);

 

HEX #2B8103 zu HEX #036881


CSS-Code:

background-image: linear-gradient(135deg, #2B8103 13%, #036881 97%);

 

HEX #2B8103 zu HEX #036881


CSS-Code:

background-image: radial-gradient(circle, #2B8103 12%, #036881 97%);

Zeige mehr Farbpaletten

Services

Farben

RGB in HEX

umrechnen von RGB rot grün blau zu #RRGGBB

RGB in CMYK

umrechnen von RGB rot grün blau zu CMYK cyan / magenta / gelb / key

Icons

RGB in RAL®

umrechnen von RGB rot grün blau zu RAL®-Nummer (RAL 0000)

RGB in HKS®

umrechnen von RGB rot grün blau zu HKS®-Nummer (HKS 00)

RGB in PANTONE®

umrechnen von RGB rot grün blau zu Pantone®-Nummer (Pantone 0000)

RGB in Sherwin Williams®

umrechnen von RGB rot grün blau zu Sherwin Williams®-Nummer (SW 0000)

RGB in NCS®

umrechnen von RGB rot grün blau zu NCS-Nummer (S0000-X00X)

nsc-logo
Icons

CMYK in HEX

umrechnen von CMYK cyan / magenta / gelb / key zu #RRGGBB
Icons

CMYK in RGB

umrechnen von CMYK cyan / magenta / gelb / key zu RGB rot grün blau
Icons

CMYK in RAL®

umrechnen von CMYK cyan / magenta / gelb / key zu RAL®-Nummer (RAL 0000)
Icons

CMYK in HKS®

umrechnen von CMYK cyan / magenta / gelb / key zu HKS®-Nummer (HKS 00)
Icons

CMYK in PANTONE®

umrechnen von CMYK cyan / magenta / gelb / key zu Pantone®-Nummer (Pantone 0000)
Icons

CMYK in Sherwin Williams®

umrechnen von CMYK cyan / magenta / gelb / key zu Sherwin Williams®-Nummer (SW 0000)
Icons

CMYK in NCS®

umrechnen von CMYK cyan / magenta / gelb / key zu NCS-Nummer (S0000-X00X)

nsc-logo

HEX in RGB

umrechnen von #RRGGBB zu RGB rot grün blau

HEX in CMYK

umrechnen von #RRGGBB zu CMYK cyan / magenta / gelb / key

Icons

HEX in RAL®

umrechnen von #RRGGBB zu RAL®-Nummer (RAL 0000)

HEX in HKS®

umrechnen von #RRGGBB zu HKS®-Nummer (HKS 00)

HEX in PANTONE®

umrechnen von #RRGGBB zu Pantone®-Nummer (Pantone 0000)

HEX in Sherwin Williams®

umrechnen von #RRGGBB zu Sherwin Williams®-Nummer (SW 0000)

HEX in NCS®

umrechnen von #RRGGBB zu NCS-Nummer (S0000-X00X)

nsc-logo

RAL® in RGB

umrechnen von RAL®-Nummer (RAL 0000) zu RGB rot grün blau

RAL® in CMYK

umrechnen von RAL®-Nummer (RAL 0000) zu CMYK cyan / magenta / gelb / key

Icons

RAL® in HEX

umrechnen von RAL®-Nummer (RAL 0000) zu #RRGGBB

RAL® in HKS®

umrechnen von RAL®-Nummer (RAL 0000) zu HKS®-Nummer (HKS 00)

RAL® in PANTONE®

umrechnen von RAL®-Nummer (RAL 0000) zu Pantone®-Nummer (Pantone 0000)

RAL® in Sherwin Williams®

umrechnen von RAL®-Nummer (RAL 0000) zu Sherwin Williams®-Nummer (SW 0000)

RAL® in NCS®

umrechnen von RAL®-Nummer (RAL 0000) zu NCS-Nummer (S0000-X00X)

nsc-logo

HKS® in RGB

umrechnen von HKS®-Nummer (HKS 00) zu RGB rot grün blau

HKS® in CMYK

umrechnen von HKS®-Nummer (HKS 00) zu CMYK cyan / magenta / gelb / key

Icons

HKS® in HEX

umrechnen von HKS®-Nummer (HKS 00) zu #RRGGBB

HKS® in RAL®

umrechnen von HKS®-Nummer (HKS 00) zu RAL®-Nummer (RAL 0000)

HKS® in PANTONE®

umrechnen von HKS®-Nummer (HKS 00) zu Pantone®-Nummer (Pantone 0000)

HKS® in Sherwin Williams®

umrechnen von HKS®-Nummer (HKS 00) zu Sherwin Williams®-Nummer (SW 0000)

HKS® in NCS®

umrechnen von HKS®-Nummer (HKS 00) zu NCS-Nummer (S0000-X00X)

nsc-logo

PANTONE® in RGB

umrechnen von Pantone®-Nummer (Pantone 0000) zu RGB rot grün blau

PANTONE® in CMYK

umrechnen von Pantone®-Nummer (Pantone 0000) zu CMYK cyan / magenta / gelb / key

Icons

PANTONE® in HEX

umrechnen von Pantone®-Nummer (Pantone 0000) zu #RRGGBB

PANTONE® in RAL®

umrechnen von Pantone®-Nummer (Pantone 0000) zu RAL®-Nummer (RAL 0000)

PANTONE® in HKS®

umrechnen von Pantone®-Nummer (Pantone 0000) zu HKS®-Nummer (HKS 00)

PANTONE® in Sherwin Williams®

umrechnen von Pantone®-Nummer (Pantone 0000) zu Sherwin Williams®-Nummer (SW 0000)

PANTONE® in NCS®

umrechnen von Pantone®-Nummer (Pantone 0000) zu NCS-Nummer (S0000-X00X)

nsc-logo

Sherwin Williams® in RGB

umrechnen von Sherwin Williams®-Nummer (SW 0000) zu RGB rot grün blau

Sherwin Williams® in CMYK

umrechnen von Sherwin Williams®-Nummer (SW 0000) zu CMYK cyan / magenta / gelb / key

Icons

Sherwin Williams® in HEX

umrechnen von Sherwin Williams®-Nummer (SW 0000) zu #RRGGBB

Sherwin Williams® in RAL®

umrechnen von Sherwin Williams®-Nummer (SW 0000) zu RAL®-Nummer (RAL 0000)

Sherwin Williams® in HKS®

umrechnen von Sherwin Williams®-Nummer (SW 0000) zu HKS®-Nummer (HKS 00)

Sherwin Williams® in PANTONE®

umrechnen von Sherwin Williams®-Nummer (SW 0000) zu Pantone®-Nummer (Pantone 0000)

Sherwin Williams® in NCS®

umrechnen von Sherwin Williams®-Nummer (SW 0000) zu NCS-Nummer (S0000-X00X)

nsc-logo
nsc-logo

NCS® in RGB

umrechnen von NCS-Nummer (S0000-X00X) zu RGB rot grün blau
nsc-logo

NCS® in CMYK

umrechnen von NCS-Nummer (S0000-X00X) zu CMYK cyan / magenta / gelb / key

Icons
nsc-logo

NCS® in HEX

umrechnen von NCS-Nummer (S0000-X00X) zu #RRGGBB
nsc-logo

NCS® in RAL®

umrechnen von NCS-Nummer (S0000-X00X) zu RAL®-Nummer (RAL 0000)
nsc-logo

NCS® in HKS®

umrechnen von NCS-Nummer (S0000-X00X) zu HKS®-Nummer (HKS 00)
nsc-logo

NCS® in PANTONE®

umrechnen von NCS-Nummer (S0000-X00X) zu Pantone®-Nummer (Pantone 0000)
nsc-logo

NCS® in Sherwin Williams®

umrechnen von NCS-Nummer (S0000-X00X) zu Sherwin Williams®-Nummer (SW 0000)

Codes

To be able to save color palettes, you must be logged in.

Sign in to your account

or

Create an account

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

Cancel Share

Color palette shared
Please copy and save the link you want.

Share

OK, I have copied the links

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

Show color palette
Close

Create a color palette

DownloadDownload in different formats

Remove All

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

© 2019-2025 in cooperation ND-DESIGN.WORKS & frag-bobby.de