SF and Fantasy Color Palette
Brightness
Saturation
Warmth
UI Examples
Explore beautiful UI components with SF and Fantasy palette
Download SF and Fantasy Color Palette (PNG)
SF and Fantasy color palette CSS
/* CSS */
.color-1 {
color: #1f4e7a;
}
.color-2 {
color: #597f9b;
}
.color-3 {
color: #87a7c5;
}
.color-4 {
color: #b7d0e1;
}
.color-5 {
color: #f0e8b7;
}
/* CSS Variables */
:root {
--color-1: #1f4e7a;
--color-2: #597f9b;
--color-3: #87a7c5;
--color-4: #b7d0e1;
--color-5: #f0e8b7;
} SF and Fantasy background gradient CSS
/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1f4e7a, #597f9b, #87a7c5, #b7d0e1, #f0e8b7);
} /* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1f4e7a, #597f9b, #87a7c5, #b7d0e1, #f0e8b7);
} Similar color palettes
SF and Fantasy color palette created on .