Razzle カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Razzle palette

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

Razzle カラー パレット PNG 画像

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

Razzle カラーパレット CSS

/* CSS */
.color-1 {
color: #c82d8f;
}
.color-2 {
color: #f1a7c1;
}
.color-3 {
color: #f7e4f1;
}
.color-4 {
color: #a6d8e7;
}
.color-5 {
color: #45b8c4;
}

/* CSS Variables */
:root {
--color-1: #c82d8f;
 --color-2: #f1a7c1;
 --color-3: #f7e4f1;
 --color-4: #a6d8e7;
 --color-5: #45b8c4;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #c82d8f, #f1a7c1, #f7e4f1, #a6d8e7, #45b8c4);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #c82d8f, #f1a7c1, #f7e4f1, #a6d8e7, #45b8c4);
}

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

下にスクロールして10個のフクシアカラーパレットを探索しましょう

Razzle color palette created on .