Ragnarok カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Ragnarok palette

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

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

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

Ragnarok カラーパレット CSS

/* CSS */
.color-1 {
color: #3a3f5a;
}
.color-2 {
color: #7d809b;
}
.color-3 {
color: #b1b6d2;
}
.color-4 {
color: #f1c84b;
}
.color-5 {
color: #e94957;
}

/* CSS Variables */
:root {
--color-1: #3a3f5a;
 --color-2: #7d809b;
 --color-3: #b1b6d2;
 --color-4: #f1c84b;
 --color-5: #e94957;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #3a3f5a, #7d809b, #b1b6d2, #f1c84b, #e94957);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #3a3f5a, #7d809b, #b1b6d2, #f1c84b, #e94957);
}

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

Ragnarok color palette created on .