Canela カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Canela palette

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

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

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

Canela カラーパレット CSS

/* CSS */
.color-1 {
color: #d28d5b;
}
.color-2 {
color: #e4b867;
}
.color-3 {
color: #f6d7a2;
}
.color-4 {
color: #f9e6b9;
}
.color-5 {
color: #f5c8c2;
}

/* CSS Variables */
:root {
--color-1: #d28d5b;
 --color-2: #e4b867;
 --color-3: #f6d7a2;
 --color-4: #f9e6b9;
 --color-5: #f5c8c2;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d28d5b, #e4b867, #f6d7a2, #f9e6b9, #f5c8c2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d28d5b, #e4b867, #f6d7a2, #f9e6b9, #f5c8c2);
}

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

Canela color palette created on .