Rose Mist カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Rose Mist palette

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

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

Download rose mist color palette PNG image (landscape)
Download rose mist color palette PNG image (square)

Rose Mist カラーパレット CSS

/* CSS */
.color-1 {
color: #f5d1d1;
}
.color-2 {
color: #e8bdb5;
}
.color-3 {
color: #e0ae9f;
}
.color-4 {
color: #d58f85;
}
.color-5 {
color: #c16867;
}

/* CSS Variables */
:root {
--color-1: #f5d1d1;
 --color-2: #e8bdb5;
 --color-3: #e0ae9f;
 --color-4: #d58f85;
 --color-5: #c16867;
 }

Rose Mist の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f5d1d1, #e8bdb5, #e0ae9f, #d58f85, #c16867);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f5d1d1, #e8bdb5, #e0ae9f, #d58f85, #c16867);
}

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

Rose Mist color palette created on .