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

✕

CSS Gradienten:
#428464

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 66 Rot, 132 Grün und 100 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.
66 132 100 R G B
Im CMYK-Farbsystem wird die Farbe folgendermaßen zusammengesetzt: In diesem Farbton sind von 100 maximalen Farbanteilen jeweils 50 Cyan, keine Magenta, 24 Gelb und 48 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.
50% 0% 24% 48% C M Y K

Verifizierung ihrer Farbpalette als Hersteller!

Bieten Sie Designern und Agenturen präzise Farbwerte.

Los geht's

Linear

HEX #428464 zu HEX #BD7B9B


CSS-Code:

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

Radial

HEX #428464 zu HEX #BD7B9B


CSS-Code:

background-image: radial-gradient(circle, #428464 8%, #BD7B9B 97%);

 

HEX #BD7B9B zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #BD7B9B 7%, #428464 98%);

 

HEX #BD7B9B zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #BD7B9B 8%, #428464 97%);

Linear

HEX #428464 zu HEX #428451


CSS-Code:

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

Radial

HEX #428464 zu HEX #428451


CSS-Code:

background-image: radial-gradient(circle, #428464 13%, #428451 89%);

 

HEX #428451 zu HEX #428464


CSS-Code:

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

 

HEX #428451 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #428451 14%, #428464 100%);

 

HEX #428464 zu HEX #428463


CSS-Code:

background-image: linear-gradient(135deg, #428464 14%, #428463 86%);

 

HEX #428464 zu HEX #428463


CSS-Code:

background-image: radial-gradient(circle, #428464 8%, #428463 96%);

 

HEX #428463 zu HEX #428464


CSS-Code:

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

 

HEX #428463 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #428463 2%, #428464 87%);

 

HEX #428464 zu HEX #428474


CSS-Code:

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

 

HEX #428464 zu HEX #428474


CSS-Code:

background-image: radial-gradient(circle, #428464 5%, #428474 90%);

 

HEX #428474 zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #428474 11%, #428464 87%);

 

HEX #428474 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #428474 4%, #428464 87%);

 

HEX #428464 zu HEX #428284


CSS-Code:

background-image: linear-gradient(135deg, #428464 1%, #428284 95%);

 

HEX #428464 zu HEX #428284


CSS-Code:

background-image: radial-gradient(circle, #428464 6%, #428284 93%);

 

HEX #428284 zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #428284 11%, #428464 92%);

 

HEX #428284 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #428284 9%, #428464 95%);

Linear

HEX #428464 zu HEX #34684F


CSS-Code:

background-image: linear-gradient(135deg, #428464 2%, #34684F 87%);

Radial

HEX #428464 zu HEX #34684F


CSS-Code:

background-image: radial-gradient(circle, #428464 11%, #34684F 96%);

 

HEX #34684F zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #34684F 8%, #428464 91%);

 

HEX #34684F zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #34684F 14%, #428464 89%);

 

HEX #428464 zu HEX #509F79


CSS-Code:

background-image: linear-gradient(135deg, #428464 12%, #509F79 98%);

 

HEX #428464 zu HEX #509F79


CSS-Code:

background-image: radial-gradient(circle, #428464 4%, #509F79 100%);

 

HEX #509F79 zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #509F79 12%, #428464 96%);

 

HEX #509F79 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #509F79 3%, #428464 86%);

 

HEX #428464 zu HEX #66B28D


CSS-Code:

background-image: linear-gradient(135deg, #428464 10%, #66B28D 99%);

 

HEX #428464 zu HEX #66B28D


CSS-Code:

background-image: radial-gradient(circle, #428464 0%, #66B28D 87%);

 

HEX #66B28D zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #66B28D 9%, #428464 91%);

 

HEX #66B28D zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #66B28D 14%, #428464 91%);

Linear

HEX #428464 zu HEX #428451


CSS-Code:

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

Radial

HEX #428464 zu HEX #428451


CSS-Code:

background-image: radial-gradient(circle, #428464 1%, #428451 89%);

 

HEX #428451 zu HEX #428464


CSS-Code:

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

 

HEX #428451 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #428451 14%, #428464 88%);

 

HEX #428464 zu HEX #428463


CSS-Code:

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

 

HEX #428464 zu HEX #428463


CSS-Code:

background-image: radial-gradient(circle, #428464 12%, #428463 92%);

 

HEX #428463 zu HEX #428464


CSS-Code:

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

 

HEX #428463 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #428463 4%, #428464 97%);

 

HEX #428464 zu HEX #428474


CSS-Code:

background-image: linear-gradient(135deg, #428464 2%, #428474 90%);

 

HEX #428464 zu HEX #428474


CSS-Code:

background-image: radial-gradient(circle, #428464 14%, #428474 92%);

 

HEX #428474 zu HEX #428464


CSS-Code:

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

 

HEX #428474 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #428474 10%, #428464 92%);

 

HEX #428464 zu HEX #428284


CSS-Code:

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

 

HEX #428464 zu HEX #428284


CSS-Code:

background-image: radial-gradient(circle, #428464 12%, #428284 96%);

 

HEX #428284 zu HEX #428464


CSS-Code:

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

 

HEX #428284 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #428284 3%, #428464 99%);

Linear

HEX #428464 zu HEX #34684F


CSS-Code:

background-image: linear-gradient(135deg, #428464 7%, #34684F 95%);

Radial

HEX #428464 zu HEX #34684F


CSS-Code:

background-image: radial-gradient(circle, #428464 8%, #34684F 89%);

 

HEX #34684F zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #34684F 9%, #428464 87%);

 

HEX #34684F zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #34684F 3%, #428464 95%);

 

HEX #428464 zu HEX #509F79


CSS-Code:

background-image: linear-gradient(135deg, #428464 5%, #509F79 91%);

 

HEX #428464 zu HEX #509F79


CSS-Code:

background-image: radial-gradient(circle, #428464 2%, #509F79 88%);

 

HEX #509F79 zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #509F79 11%, #428464 100%);

 

HEX #509F79 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #509F79 7%, #428464 92%);

 

HEX #428464 zu HEX #66B28D


CSS-Code:

background-image: linear-gradient(135deg, #428464 1%, #66B28D 91%);

 

HEX #428464 zu HEX #66B28D


CSS-Code:

background-image: radial-gradient(circle, #428464 6%, #66B28D 98%);

 

HEX #66B28D zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #66B28D 9%, #428464 99%);

 

HEX #66B28D zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #66B28D 1%, #428464 88%);

Linear

HEX #428464 zu HEX #425684


CSS-Code:

background-image: linear-gradient(135deg, #428464 11%, #425684 87%);

Radial

HEX #428464 zu HEX #425684


CSS-Code:

background-image: radial-gradient(circle, #428464 2%, #425684 99%);

 

HEX #425684 zu HEX #428464


CSS-Code:

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

 

HEX #425684 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #425684 2%, #428464 88%);

 

HEX #428464 zu HEX #844942


CSS-Code:

background-image: linear-gradient(135deg, #428464 0%, #844942 93%);

 

HEX #428464 zu HEX #844942


CSS-Code:

background-image: radial-gradient(circle, #428464 2%, #844942 91%);

 

HEX #844942 zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #844942 11%, #428464 86%);

 

HEX #844942 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #844942 13%, #428464 94%);

Linear

HEX #428464 zu HEX #634284


CSS-Code:

background-image: linear-gradient(135deg, #428464 2%, #634284 99%);

Radial

HEX #428464 zu HEX #634284


CSS-Code:

background-image: radial-gradient(circle, #428464 2%, #634284 97%);

 

HEX #634284 zu HEX #428464


CSS-Code:

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

 

HEX #634284 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #634284 7%, #428464 87%);

 

HEX #428464 zu HEX #846342


CSS-Code:

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

 

HEX #428464 zu HEX #846342


CSS-Code:

background-image: radial-gradient(circle, #428464 14%, #846342 88%);

 

HEX #846342 zu HEX #428464


CSS-Code:

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

 

HEX #846342 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #846342 13%, #428464 98%);

Linear

HEX #428464 zu HEX #425684


CSS-Code:

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

Radial

HEX #428464 zu HEX #425684


CSS-Code:

background-image: radial-gradient(circle, #428464 14%, #425684 88%);

 

HEX #425684 zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #425684 5%, #428464 89%);

 

HEX #425684 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #425684 12%, #428464 97%);

 

HEX #428464 zu HEX #844263


CSS-Code:

background-image: linear-gradient(135deg, #428464 7%, #844263 93%);

 

HEX #428464 zu HEX #844263


CSS-Code:

background-image: radial-gradient(circle, #428464 5%, #844263 96%);

 

HEX #844263 zu HEX #428464


CSS-Code:

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

 

HEX #844263 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #844263 8%, #428464 94%);

 

HEX #428464 zu HEX #847042


CSS-Code:

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

 

HEX #428464 zu HEX #847042


CSS-Code:

background-image: radial-gradient(circle, #428464 14%, #847042 97%);

 

HEX #847042 zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #847042 11%, #428464 93%);

 

HEX #847042 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #847042 10%, #428464 93%);

Linear

HEX #428464 zu HEX #424284


CSS-Code:

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

Radial

HEX #428464 zu HEX #424284


CSS-Code:

background-image: radial-gradient(circle, #428464 13%, #424284 88%);

 

HEX #424284 zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #424284 13%, #428464 95%);

 

HEX #424284 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #424284 3%, #428464 90%);

 

HEX #428464 zu HEX #844263


CSS-Code:

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

 

HEX #428464 zu HEX #844263


CSS-Code:

background-image: radial-gradient(circle, #428464 10%, #844263 98%);

 

HEX #844263 zu HEX #428464


CSS-Code:

background-image: linear-gradient(135deg, #844263 7%, #428464 93%);

 

HEX #844263 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #844263 6%, #428464 96%);

 

HEX #428464 zu HEX #848442


CSS-Code:

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

 

HEX #428464 zu HEX #848442


CSS-Code:

background-image: radial-gradient(circle, #428464 4%, #848442 96%);

 

HEX #848442 zu HEX #428464


CSS-Code:

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

 

HEX #848442 zu HEX #428464


CSS-Code:

background-image: radial-gradient(circle, #848442 5%, #428464 93%);

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