Wyvrn カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Wyvrn palette

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

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

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

Wyvrn カラーパレット CSS

/* CSS */
.color-1 {
color: #f0a400;
}
.color-2 {
color: #e04f38;
}
.color-3 {
color: #d63f2e;
}
.color-4 {
color: #a23992;
}
.color-5 {
color: #6a4c94;
}

/* CSS Variables */
:root {
--color-1: #f0a400;
 --color-2: #e04f38;
 --color-3: #d63f2e;
 --color-4: #a23992;
 --color-5: #6a4c94;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f0a400, #e04f38, #d63f2e, #a23992, #6a4c94);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f0a400, #e04f38, #d63f2e, #a23992, #6a4c94);
}

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

Wyvrn color palette created on .