Allyn カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Allyn palette

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

Allyn カラー パレット PNG 画像

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

Allyn カラーパレット CSS

/* CSS */
.color-1 {
color: #1f3a61;
}
.color-2 {
color: #3a5e83;
}
.color-3 {
color: #6085a9;
}
.color-4 {
color: #83a7c9;
}
.color-5 {
color: #a6c8e2;
}

/* CSS Variables */
:root {
--color-1: #1f3a61;
 --color-2: #3a5e83;
 --color-3: #6085a9;
 --color-4: #83a7c9;
 --color-5: #a6c8e2;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1f3a61, #3a5e83, #6085a9, #83a7c9, #a6c8e2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1f3a61, #3a5e83, #6085a9, #83a7c9, #a6c8e2);
}

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

Allyn color palette created on .