Vinyl カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Vinyl palette

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

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

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

Vinyl カラーパレット CSS

/* CSS */
.color-1 {
color: #faa200;
}
.color-2 {
color: #ff6d1f;
}
.color-3 {
color: #ff3c00;
}
.color-4 {
color: #c72b00;
}
.color-5 {
color: #7a1f00;
}

/* CSS Variables */
:root {
--color-1: #faa200;
 --color-2: #ff6d1f;
 --color-3: #ff3c00;
 --color-4: #c72b00;
 --color-5: #7a1f00;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #faa200, #ff6d1f, #ff3c00, #c72b00, #7a1f00);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #faa200, #ff6d1f, #ff3c00, #c72b00, #7a1f00);
}

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

Vinyl color palette created on .