SF and Fantasy カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with SF and Fantasy palette

このパレットを共有する先：

SF and Fantasy カラー パレット PNG 画像

Download sf and fantasy color palette PNG image (landscape)
Download sf and fantasy color palette PNG image (square)

SF and Fantasy カラーパレット 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 の背景のグラデーション 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);
}

似たようなカラーパレット

SF and Fantasy color palette created on .