Farbverlauf Generator
Für das Design einer Webseite ist die Farbwahl ausschlaggebend. Abhängig vom Thema der Homepage oder vom Logo verwenden Sie Farben am besten in Farbabstufungen. Dieser Generator erstellt einen Farbverlauf mit den von Ihnen eingegebenen Farbwerten.
✔ Link zum erstellten Farbverlauf: #4169E1 > #FFFFFF [20] für Ihre Lesezeichen.
| # | Farbe | HEX | Name | RGB | Negativ |
|---|---|---|---|---|---|
| 1 | #4169E1 | Royalblue | 65, 105, 225 | #BE961E | |
| 2 | #4B71E3 | 75, 113, 227 | #B48E1C | ||
| 3 | #5478E4 | 84, 120, 228 | #AB871B | ||
| 4 | #5E80E6 | 94, 128, 230 | #A17F19 | ||
| 5 | #6787E7 | 103, 135, 231 | #987818 | ||
| 6 | #718FE9 | 113, 143, 233 | #8E7016 | ||
| 7 | #7A96EA | 122, 150, 234 | #856915 | ||
| 8 | #849EEC | 132, 158, 236 | #7B6113 | ||
| 9 | #8DA5ED | 141, 165, 237 | #725A12 | ||
| 10 | #97ADEF | 151, 173, 239 | #685210 | ||
| 11 | #A0B4F0 | 160, 180, 240 | #5F4B0F | ||
| 12 | #AABCF2 | 170, 188, 242 | #55430D | ||
| 13 | #B3C3F3 | 179, 195, 243 | #4C3C0C | ||
| 14 | #BDCBF5 | 189, 203, 245 | #42340A | ||
| 15 | #C6D2F6 | 198, 210, 246 | #392D09 | ||
| 16 | #D0DAF8 | 208, 218, 248 | #2F2507 | ||
| 17 | #D9E1F9 | 217, 225, 249 | #261E06 | ||
| 18 | #E3E9FB | 227, 233, 251 | #1C1604 | ||
| 19 | #ECF0FC | 236, 240, 252 | #130F03 | ||
| 20 | #F6F8FE | 246, 248, 254 | #090701 | ||
| 21 | #FFFFFF | White | 255, 255, 255 | #000000 | |
| Quelltext | |||||
| color: #4169E1; | |||||
| background-color: #4169E1; | |||||
| <span style="color: #4169E1;"></span> | |||||
| <span style="background-color: #4169E1;"></span> | |||||
Negativfarben
Farben / Negativfarben Kombination (Beispiele)
#4169E1
= #BE961E
Negativfarbe
Negativfarbe
#FFFFFF
= #000000
Negativfarbe
Negativfarbe
In der Farbenlehre sind Negativfarben zwei entgegengesetzte Farben (Komplementärfarben).
Kontrastfarbe
Kontrastfarbe Schwarz oder Weiß: #FFFFFF #000000
Hellere Schriftfarbe: #4169E1 - #4169E1
Dunklere Schriftfarbe: #4169E1 - #4169E1
CSS-Farbverlauf
background: linear-gradient(#4169E1, #FFFFFF);
background: linear-gradient(45deg, #4169E1, #FFFFFF);
background: linear-gradient(to right, #4169E1, #FFFFFF);
background: linear-gradient(to left, #4169E1, #FFFFFF);
Viele weitere Farbverläufe finden Sie unter: Farbverlauf mit CSS
PHP - Farbverlauf (Array)
$farbverlauf = [ "#4169E1", "#4B71E3", "#5478E4", "#5E80E6", "#6787E7", "#718FE9", "#7A96EA", "#849EEC", "#8DA5ED", "#97ADEF", "#A0B4F0", "#AABCF2", "#B3C3F3", "#BDCBF5", "#C6D2F6", "#D0DAF8", "#D9E1F9", "#E3E9FB", "#ECF0FC", "#F6F8FE", "#FFFFFF"];
JavaScript - Farbverlauf (Array)
var farbverlauf = [ "#4169E1", "#4B71E3", "#5478E4", "#5E80E6", "#6787E7", "#718FE9", "#7A96EA", "#849EEC", "#8DA5ED", "#97ADEF", "#A0B4F0", "#AABCF2", "#B3C3F3", "#BDCBF5", "#C6D2F6", "#D0DAF8", "#D9E1F9", "#E3E9FB", "#ECF0FC", "#F6F8FE", "#FFFFFF"];
Tipps
Farbnamen, Hexadezimal, Dezimal, Prozent und Negativ
Mit dem Ultimate CSS Gradient Generator von ColorZilla können Sie einen Farbverlauf erstellen.