SF and Fantasy Color Palette
Brightness
Saturation
Warmth
UI Examples
Explore beautiful UI components with SF and Fantasy palette
SF and Fantasy color palette PNG image
SF and Fantasy color palette CSS
/* CSS */
.color-1 {
color: #1d4e72;
}
.color-2 {
color: #4a9ab0;
}
.color-3 {
color: #80d3e0;
}
.color-4 {
color: #f8b42a;
}
.color-5 {
color: #e07c3e;
}
/* CSS Variables */
:root {
--color-1: #1d4e72;
--color-2: #4a9ab0;
--color-3: #80d3e0;
--color-4: #f8b42a;
--color-5: #e07c3e;
} SF and Fantasy background gradient CSS
/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1d4e72, #4a9ab0, #80d3e0, #f8b42a, #e07c3e);
} /* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1d4e72, #4a9ab0, #80d3e0, #f8b42a, #e07c3e);
} Similar color palettes
SF and Fantasy color palette created on .