Leon カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Leon palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

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

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

Leon カラーパレット CSS

/* CSS */
.color-1 {
color: #264164;
}
.color-2 {
color: #456592;
}
.color-3 {
color: #73a2c4;
}
.color-4 {
color: #a8d7e1;
}
.color-5 {
color: #f1bb55;
}

/* CSS Variables */
:root {
--color-1: #264164;
 --color-2: #456592;
 --color-3: #73a2c4;
 --color-4: #a8d7e1;
 --color-5: #f1bb55;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #264164, #456592, #73a2c4, #a8d7e1, #f1bb55);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #264164, #456592, #73a2c4, #a8d7e1, #f1bb55);
}

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

Leon color palette created on .