Zelda カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Zelda palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

Zelda カラーパレット (PNG) をダウンロード

Download zelda color palette PNG image (landscape)
Download zelda color palette PNG image (square)

Zelda カラーパレット CSS

/* CSS */
.color-1 {
color: #1f3a61;
}
.color-2 {
color: #3a6a8d;
}
.color-3 {
color: #5cb4d1;
}
.color-4 {
color: #f6df60;
}
.color-5 {
color: #faa700;
}

/* CSS Variables */
:root {
--color-1: #1f3a61;
 --color-2: #3a6a8d;
 --color-3: #5cb4d1;
 --color-4: #f6df60;
 --color-5: #faa700;
 }

Zelda の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1f3a61, #3a6a8d, #5cb4d1, #f6df60, #faa700);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1f3a61, #3a6a8d, #5cb4d1, #f6df60, #faa700);
}

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

Zelda color palette created on .