Precision Drive カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Precision Drive palette

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

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

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

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

Download precision drive color palette PNG image (landscape)
Download precision drive color palette PNG image (square)

Precision Drive カラーパレット CSS

/* CSS */
.color-1 {
color: #1a1f3d;
}
.color-2 {
color: #4c5c8a;
}
.color-3 {
color: #7c8fbb;
}
.color-4 {
color: #f2e4a6;
}
.color-5 {
color: #d7b05b;
}

/* CSS Variables */
:root {
--color-1: #1a1f3d;
 --color-2: #4c5c8a;
 --color-3: #7c8fbb;
 --color-4: #f2e4a6;
 --color-5: #d7b05b;
 }

Precision Drive の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1a1f3d, #4c5c8a, #7c8fbb, #f2e4a6, #d7b05b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1a1f3d, #4c5c8a, #7c8fbb, #f2e4a6, #d7b05b);
}

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

Precision Drive color palette created on .