Charlotte カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Charlotte palette

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

Charlotte カラー パレット PNG 画像

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

Charlotte カラーパレット CSS

/* CSS */
.color-1 {
color: #f2a6c7;
}
.color-2 {
color: #d68ab0;
}
.color-3 {
color: #b66d9c;
}
.color-4 {
color: #a45b8c;
}
.color-5 {
color: #893e68;
}

/* CSS Variables */
:root {
--color-1: #f2a6c7;
 --color-2: #d68ab0;
 --color-3: #b66d9c;
 --color-4: #a45b8c;
 --color-5: #893e68;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f2a6c7, #d68ab0, #b66d9c, #a45b8c, #893e68);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f2a6c7, #d68ab0, #b66d9c, #a45b8c, #893e68);
}

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

下にスクロールして3個のピンクカラーパレットを探索しましょう

Charlotte color palette created on .