color/ Farben


HEX - Farben
ColorColor HEX
 #000000
 #FF0000
 #00FF00
 #0000FF
 #FFFF00
 #00FFFF
 #FF00FF
 #C0C0C0
 #FFFFFF


RGB (Rot Grün Blau)
ColorColor RGB
 rgb(0,0,0)
 rgb(255,0,0)
 rgb(0,255,0)
 rgb(0,0,255)
 rgb(255,255,0)
 rgb(0,255,255)
 rgb(255,0,255)
 rgb(192,192,192)
 rgb(255,255,255)



div {
      background: rgb(123,123,123);
}

div {
      background: rgba(123,123,123,0.5);
}

background-color: green; /* Nicht alle browser unterstützen Gradienten! */
background-image: linear-gradient(red,yellow); (to top, to right, to bottom (default), to left)
background-image: linear-gradient(to bottom,red,yellow); (to top, to right, to left)
background-image: linear-gradient(red,yellow,green); (mehrfarbig)
background-image: linear-gradient(rgba(111,111,111,0.5),rgba(222,222,222,0.5),rgba(123,123,123,0.5)); (mehrfarbig)

background-image: linear-gradient(90deg,red,yellow); (Farbgradienten in °)
background-image: linear-gradient(90deg,red,yellow,green);

background-image: linear-gradient(red 10%,yellow 50%,green 60%); (Bei Angegebenen Prozenten/ px, wird an dieser Stelle der Farbwert erreicht)
Erstellen Sie einen linearen Gradienten mit 45° von den Farben schwarz 20%, grau 40%, weiß 70%, gelb 80%, orange 90%, rot 95%!


Erstellen Sie einen linearen Gradienten mit einer Ausrichtung nach rechts. Die Farbreihenfolge ist: schwarz, dunkelgrau, hellgrau, weiß, schwarz! Jede Farbe soll eine Breite von 20% haben. Es sollen keine Farübergänge vorhanden sein, sodass die Farben immer als reine Farben dargestellt werden
Lösung:
Teil 1: background-image: linear-gradient(to right, black 20%, darkgrey 40%, grey 60%, white 80%, black);
Teil 2: background-image: linear-gradient(to right, black 20%, darkgrey 20%, darkgrey 40%, grey 40%, grey 60%, white 60%, white 80%, black 80%);

background-image: repeating-linear-gradient(45deg,red 0%,yellow 7%,green 10%); (Wiederholungen von Farbgradienten (0% muss nicht angegeben werden) | height nicht vergessen!)
background-image: repeating-linear-gradient(90deg,red,yellow 50px,green 100px); (Wenn div 200px hoch, passt Gradient 2x rein)



background-image: radial-gradient(red,yellow,green); (Farben sind radial angeordnet (kreisförmig) von innen nach außen)
background-image: radial-gradient(red 5%,yellow 15%, green 60%);
background-image: repeating-radial-gradient(red 5%,yellow 10%,green 15%);

border-radius: 50%; background: conic-gradient(red,red 15%,blue 15%,blue);


border-radius: 50%; background: conic-gradient(red, red 15%, blue 15%, blue 70%, gold 70%, gold 100%);

background: conic-gradient(red, orange, gold, lime, blue);




background: conic-gradient(red, red 25%, gold 25%, gold 50%, lime 50%, lime 75%, blue 75%, blue);


background: conic-gradient(red, red 25%, gold 25%, gold 50%, lime 50%, lime 75%, blue 75%, blue)
background: background: conic-gradient(red, red 25%, gold 25%, gold 50%, lime 50%, lime 75%, blue 75%, blue);
background-size: 25% 25%;