Crocker カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Crocker palette

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

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

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

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

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

Crocker カラーパレット CSS

/* CSS */
.color-1 {
color: #9d5e5c;
}
.color-2 {
color: #ce7d69;
}
.color-3 {
color: #e1aa93;
}
.color-4 {
color: #e3b182;
}
.color-5 {
color: #d88a3b;
}

/* CSS Variables */
:root {
--color-1: #9d5e5c;
 --color-2: #ce7d69;
 --color-3: #e1aa93;
 --color-4: #e3b182;
 --color-5: #d88a3b;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #9d5e5c, #ce7d69, #e1aa93, #e3b182, #d88a3b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #9d5e5c, #ce7d69, #e1aa93, #e3b182, #d88a3b);
}

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

Crocker color palette created on .