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

✕

CSS Gradienten:
#283175

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

Verifizierung ihrer Farbpalette als Hersteller!

Bieten Sie Designern und Agenturen präzise Farbwerte.

Los geht's

Linear

HEX #283175 zu HEX #D7CE8A


CSS-Code:

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

Radial

HEX #283175 zu HEX #D7CE8A


CSS-Code:

background-image: radial-gradient(circle, #283175 3%, #D7CE8A 97%);

 

HEX #D7CE8A zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #D7CE8A 3%, #283175 87%);

 

HEX #D7CE8A zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #D7CE8A 13%, #283175 95%);

Linear

HEX #283175 zu HEX #284775


CSS-Code:

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

Radial

HEX #283175 zu HEX #284775


CSS-Code:

background-image: radial-gradient(circle, #283175 13%, #284775 98%);

 

HEX #284775 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #284775 13%, #283175 90%);

 

HEX #284775 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #284775 5%, #283175 90%);

 

HEX #283175 zu HEX #283275


CSS-Code:

background-image: linear-gradient(135deg, #283175 5%, #283275 93%);

 

HEX #283175 zu HEX #283275


CSS-Code:

background-image: radial-gradient(circle, #283175 2%, #283275 88%);

 

HEX #283275 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #283275 8%, #283175 94%);

 

HEX #283275 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #283275 12%, #283175 96%);

 

HEX #283175 zu HEX #322875


CSS-Code:

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

 

HEX #283175 zu HEX #322875


CSS-Code:

background-image: radial-gradient(circle, #283175 2%, #322875 96%);

 

HEX #322875 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #322875 2%, #283175 100%);

 

HEX #322875 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #322875 1%, #283175 91%);

 

HEX #283175 zu HEX #472875


CSS-Code:

background-image: linear-gradient(135deg, #283175 7%, #472875 95%);

 

HEX #283175 zu HEX #472875


CSS-Code:

background-image: radial-gradient(circle, #283175 5%, #472875 97%);

 

HEX #472875 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #472875 12%, #283175 87%);

 

HEX #472875 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #472875 11%, #283175 97%);

Linear

HEX #283175 zu HEX #1D2457


CSS-Code:

background-image: linear-gradient(135deg, #283175 4%, #1D2457 86%);

Radial

HEX #283175 zu HEX #1D2457


CSS-Code:

background-image: radial-gradient(circle, #283175 10%, #1D2457 92%);

 

HEX #1D2457 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #1D2457 8%, #283175 95%);

 

HEX #1D2457 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #1D2457 9%, #283175 97%);

 

HEX #283175 zu HEX #323E94


CSS-Code:

background-image: linear-gradient(135deg, #283175 12%, #323E94 92%);

 

HEX #283175 zu HEX #323E94


CSS-Code:

background-image: radial-gradient(circle, #283175 5%, #323E94 88%);

 

HEX #323E94 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #323E94 13%, #283175 99%);

 

HEX #323E94 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #323E94 14%, #283175 98%);

 

HEX #283175 zu HEX #3D4BB3


CSS-Code:

background-image: linear-gradient(135deg, #283175 10%, #3D4BB3 90%);

 

HEX #283175 zu HEX #3D4BB3


CSS-Code:

background-image: radial-gradient(circle, #283175 2%, #3D4BB3 86%);

 

HEX #3D4BB3 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #3D4BB3 2%, #283175 90%);

 

HEX #3D4BB3 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #3D4BB3 11%, #283175 95%);

Linear

HEX #283175 zu HEX #284775


CSS-Code:

background-image: linear-gradient(135deg, #283175 2%, #284775 94%);

Radial

HEX #283175 zu HEX #284775


CSS-Code:

background-image: radial-gradient(circle, #283175 13%, #284775 96%);

 

HEX #284775 zu HEX #283175


CSS-Code:

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

 

HEX #284775 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #284775 13%, #283175 93%);

 

HEX #283175 zu HEX #283275


CSS-Code:

background-image: linear-gradient(135deg, #283175 3%, #283275 90%);

 

HEX #283175 zu HEX #283275


CSS-Code:

background-image: radial-gradient(circle, #283175 10%, #283275 99%);

 

HEX #283275 zu HEX #283175


CSS-Code:

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

 

HEX #283275 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #283275 5%, #283175 96%);

 

HEX #283175 zu HEX #322875


CSS-Code:

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

 

HEX #283175 zu HEX #322875


CSS-Code:

background-image: radial-gradient(circle, #283175 11%, #322875 95%);

 

HEX #322875 zu HEX #283175


CSS-Code:

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

 

HEX #322875 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #322875 5%, #283175 87%);

 

HEX #283175 zu HEX #472875


CSS-Code:

background-image: linear-gradient(135deg, #283175 6%, #472875 99%);

 

HEX #283175 zu HEX #472875


CSS-Code:

background-image: radial-gradient(circle, #283175 7%, #472875 97%);

 

HEX #472875 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #472875 9%, #283175 97%);

 

HEX #472875 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #472875 0%, #283175 91%);

Linear

HEX #283175 zu HEX #1D2457


CSS-Code:

background-image: linear-gradient(135deg, #283175 14%, #1D2457 95%);

Radial

HEX #283175 zu HEX #1D2457


CSS-Code:

background-image: radial-gradient(circle, #283175 1%, #1D2457 97%);

 

HEX #1D2457 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #1D2457 1%, #283175 92%);

 

HEX #1D2457 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #1D2457 4%, #283175 89%);

 

HEX #283175 zu HEX #323E94


CSS-Code:

background-image: linear-gradient(135deg, #283175 0%, #323E94 87%);

 

HEX #283175 zu HEX #323E94


CSS-Code:

background-image: radial-gradient(circle, #283175 14%, #323E94 98%);

 

HEX #323E94 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #323E94 12%, #283175 100%);

 

HEX #323E94 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #323E94 1%, #283175 96%);

 

HEX #283175 zu HEX #3D4BB3


CSS-Code:

background-image: linear-gradient(135deg, #283175 2%, #3D4BB3 93%);

 

HEX #283175 zu HEX #3D4BB3


CSS-Code:

background-image: radial-gradient(circle, #283175 13%, #3D4BB3 87%);

 

HEX #3D4BB3 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #3D4BB3 9%, #283175 87%);

 

HEX #3D4BB3 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #3D4BB3 13%, #283175 95%);

Linear

HEX #283175 zu HEX #752870


CSS-Code:

background-image: linear-gradient(135deg, #283175 0%, #752870 96%);

Radial

HEX #283175 zu HEX #752870


CSS-Code:

background-image: radial-gradient(circle, #283175 3%, #752870 97%);

 

HEX #752870 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #752870 14%, #283175 97%);

 

HEX #752870 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #752870 13%, #283175 86%);

 

HEX #283175 zu HEX #517528


CSS-Code:

background-image: linear-gradient(135deg, #283175 12%, #517528 93%);

 

HEX #283175 zu HEX #517528


CSS-Code:

background-image: radial-gradient(circle, #283175 10%, #517528 97%);

 

HEX #517528 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #517528 0%, #283175 90%);

 

HEX #517528 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #517528 5%, #283175 89%);

Linear

HEX #283175 zu HEX #752832


CSS-Code:

background-image: linear-gradient(135deg, #283175 12%, #752832 99%);

Radial

HEX #283175 zu HEX #752832


CSS-Code:

background-image: radial-gradient(circle, #283175 4%, #752832 93%);

 

HEX #752832 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #752832 7%, #283175 91%);

 

HEX #752832 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #752832 9%, #283175 93%);

 

HEX #283175 zu HEX #327528


CSS-Code:

background-image: linear-gradient(135deg, #283175 3%, #327528 94%);

 

HEX #283175 zu HEX #327528


CSS-Code:

background-image: radial-gradient(circle, #283175 11%, #327528 91%);

 

HEX #327528 zu HEX #283175


CSS-Code:

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

 

HEX #327528 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #327528 13%, #283175 94%);

Linear

HEX #283175 zu HEX #752870


CSS-Code:

background-image: linear-gradient(135deg, #283175 3%, #752870 100%);

Radial

HEX #283175 zu HEX #752870


CSS-Code:

background-image: radial-gradient(circle, #283175 12%, #752870 99%);

 

HEX #752870 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #752870 2%, #283175 94%);

 

HEX #752870 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #752870 13%, #283175 89%);

 

HEX #283175 zu HEX #756B28


CSS-Code:

background-image: linear-gradient(135deg, #283175 1%, #756B28 93%);

 

HEX #283175 zu HEX #756B28


CSS-Code:

background-image: radial-gradient(circle, #283175 1%, #756B28 100%);

 

HEX #756B28 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #756B28 6%, #283175 89%);

 

HEX #756B28 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #756B28 3%, #283175 95%);

 

HEX #283175 zu HEX #28752D


CSS-Code:

background-image: linear-gradient(135deg, #283175 11%, #28752D 100%);

 

HEX #283175 zu HEX #28752D


CSS-Code:

background-image: radial-gradient(circle, #283175 2%, #28752D 97%);

 

HEX #28752D zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #28752D 3%, #283175 97%);

 

HEX #28752D zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #28752D 11%, #283175 97%);

Linear

HEX #283175 zu HEX #752859


CSS-Code:

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

Radial

HEX #283175 zu HEX #752859


CSS-Code:

background-image: radial-gradient(circle, #283175 5%, #752859 87%);

 

HEX #752859 zu HEX #283175


CSS-Code:

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

 

HEX #752859 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #752859 2%, #283175 96%);

 

HEX #283175 zu HEX #756B28


CSS-Code:

background-image: linear-gradient(135deg, #283175 1%, #756B28 89%);

 

HEX #283175 zu HEX #756B28


CSS-Code:

background-image: radial-gradient(circle, #283175 11%, #756B28 93%);

 

HEX #756B28 zu HEX #283175


CSS-Code:

background-image: linear-gradient(135deg, #756B28 1%, #283175 86%);

 

HEX #756B28 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #756B28 13%, #283175 99%);

 

HEX #283175 zu HEX #287544


CSS-Code:

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

 

HEX #283175 zu HEX #287544


CSS-Code:

background-image: radial-gradient(circle, #283175 5%, #287544 94%);

 

HEX #287544 zu HEX #283175


CSS-Code:

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

 

HEX #287544 zu HEX #283175


CSS-Code:

background-image: radial-gradient(circle, #287544 11%, #283175 92%);

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