Sundrop カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sundrop palette

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

Sundrop カラー パレット PNG 画像

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

Sundrop カラーパレット CSS

/* CSS */
.color-1 {
color: #f9d348;
}
.color-2 {
color: #f1a950;
}
.color-3 {
color: #ef7e4e;
}
.color-4 {
color: #e15b4c;
}
.color-5 {
color: #d62e3c;
}

/* CSS Variables */
:root {
--color-1: #f9d348;
 --color-2: #f1a950;
 --color-3: #ef7e4e;
 --color-4: #e15b4c;
 --color-5: #d62e3c;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f9d348, #f1a950, #ef7e4e, #e15b4c, #d62e3c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f9d348, #f1a950, #ef7e4e, #e15b4c, #d62e3c);
}

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

Sundrop color palette created on .