King Ace カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with King Ace palette

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

King Ace カラー パレット PNG 画像

Download king ace color palette PNG image (landscape)
Download king ace color palette PNG image (square)

King Ace カラーパレット CSS

/* CSS */
.color-1 {
color: #1f1b79;
}
.color-2 {
color: #4c3e93;
}
.color-3 {
color: #6b6a9a;
}
.color-4 {
color: #a86c3e;
}
.color-5 {
color: #d13d4e;
}

/* CSS Variables */
:root {
--color-1: #1f1b79;
 --color-2: #4c3e93;
 --color-3: #6b6a9a;
 --color-4: #a86c3e;
 --color-5: #d13d4e;
 }

King Ace の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1f1b79, #4c3e93, #6b6a9a, #a86c3e, #d13d4e);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1f1b79, #4c3e93, #6b6a9a, #a86c3e, #d13d4e);
}

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

King Ace color palette created on .